// 2TTEST landing — root app: data fetch + Tweaks wiring
const {
  TopNav, Hero, SeasonBanner, FeaturedPackages, CourseCatalog,
  HowItWorks, SocialProof, FAQ, CTASection, Footer,
  LoginModal, safeFetch,
  MOCK_SETS, MOCK_PACKAGES, MOCK_SEASON, MOCK_SETTINGS,
  TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle,
} = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#0A6CFF",
  "heroVariant": "split",
  "showSeasonBanner": true,
  "denseCards": false
}/*EDITMODE-END*/;

function App() {
  const [settings, setSettings] = useState(null);
  const [sets, setSets] = useState(null);
  const [packages, setPackages] = useState(null);
  const [season, setSeason] = useState(null);
  const [user, setUser] = useState(null);
  const [modalOpen, setModalOpen] = useState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply primary color tweak
  useEffect(() => {
    document.documentElement.style.setProperty("--brand", tweaks.primaryColor);
    // derive a darker shade for hover state
    document.documentElement.style.setProperty("--brand-700", shade(tweaks.primaryColor, -18));
    document.documentElement.style.setProperty("--brand-50",  tint(tweaks.primaryColor, 0.92));
  }, [tweaks.primaryColor]);

  // Auth state from localStorage
  useEffect(() => {
    try {
      const tok = localStorage.getItem("ttest_auth_token");
      if (tok) {
        const name = localStorage.getItem("ttest_user_name") || "ผู้ใช้";
        setUser({ name, token: tok });
      }
    } catch (e) {}
  }, []);

  // Deep-link support — admin shares /landing/?set=<id>[&promo=CODE].
  // After data loads we scroll the matching course into view + flash a
  // primary outline for ~2s. Promo code is stashed for the buy modal.
  useEffect(() => {
    if (!sets) return;
    const params = new URLSearchParams(location.search);
    const targetSet = params.get("set");
    const promo = params.get("promo");
    if (promo) {
      try { sessionStorage.setItem("ttest_promo_pending", promo.toUpperCase()); } catch (e) {}
    }
    if (!targetSet) return;
    const ms = 100;
    setTimeout(() => {
      const el = document.querySelector(`[data-set-id="${targetSet}"]`);
      if (!el) return;
      el.scrollIntoView({ behavior: "smooth", block: "center" });
      el.style.outline = "2px solid var(--brand)";
      el.style.outlineOffset = "4px";
      el.style.borderRadius = "14px";
      setTimeout(() => {
        el.style.outline = ""; el.style.outlineOffset = ""; el.style.borderRadius = "";
      }, 2400);
    }, ms);
  }, [sets]);

  // Fetch from API; fall back to mock if offline (so design works without backend)
  useEffect(() => {
    let alive = true;
    (async () => {
      const [s, p, se, st] = await Promise.all([
        safeFetch("/public/sets"),
        safeFetch("/public/packages"),
        safeFetch("/public/active-season"),
        safeFetch("/admin/settings/public"),
      ]);
      if (!alive) return;
      setSets(s ?? MOCK_SETS);
      setPackages(p ?? MOCK_PACKAGES);
      setSeason(se === undefined ? MOCK_SEASON : se); // null is valid (no active season)
      setSettings(st ?? MOCK_SETTINGS);
    })();
    return () => { alive = false; };
  }, []);

  const onBuy = (item) => {
    if (user) {
      // Logged-in users hand off to the dashboard, which already owns the
      // buy flow (promo prompt, quote, /payments/buy or /payments/buy-package).
      // Packages carry `set_count`; individual sets don't.
      const isPackage = item && (item.set_count != null || Array.isArray(item.set_ids));
      const param = isPackage ? "buy_pkg" : "buy";
      window.location.href = `/student-dashboard/?${param}=${encodeURIComponent(item.id)}`;
      return;
    }
    setModalOpen(true);
  };

  // Empty/loading
  const dataReady = sets !== null && packages !== null && settings !== null;

  return (
    <>
      <TopNav user={user} />

      {/* Hero */}
      <Hero variant={tweaks.heroVariant} />

      {/* Active Season Banner */}
      {tweaks.showSeasonBanner && season && <SeasonBanner season={season}/>}

      {/* Featured Packages */}
      {dataReady ? (
        <FeaturedPackages packages={packages} onBuy={onBuy}/>
      ) : (
        <SectionSkeleton/>
      )}

      {/* Course Catalog */}
      {dataReady ? (
        <CourseCatalog sets={sets} onBuy={onBuy}/>
      ) : (
        <SectionSkeleton/>
      )}

      {/* How it works */}
      <HowItWorks/>

      {/* Social proof */}
      <SocialProof/>

      {/* FAQ */}
      <FAQ settings={settings || MOCK_SETTINGS}/>

      {/* CTA */}
      <CTASection/>

      {/* Footer */}
      <Footer settings={settings || MOCK_SETTINGS}/>

      <LoginModal open={modalOpen} onClose={() => setModalOpen(false)}/>

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor label="Primary color" value={tweaks.primaryColor} onChange={v => setTweak("primaryColor", v)}/>
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Hero variant"
            value={tweaks.heroVariant}
            options={[{value:"split", label:"Split"}, {value:"centered", label:"Centered"}]}
            onChange={v => setTweak("heroVariant", v)}
          />
          <TweakToggle
            label="Active season banner"
            value={tweaks.showSeasonBanner}
            onChange={v => setTweak("showSeasonBanner", v)}
          />
          <TweakToggle
            label="Dense cards (TODO)"
            value={tweaks.denseCards}
            onChange={v => setTweak("denseCards", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function SectionSkeleton() {
  return (
    <section className="bg-white">
      <div className="max-w-7xl mx-auto px-5 sm:px-8 py-16">
        <div className="h-7 w-64 rounded bg-[var(--panel)] animate-pulse"/>
        <div className="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {[1,2,3].map(i => (
            <div key={i} className="card p-5">
              <div className="aspect-[16/10] rounded-md bg-[var(--panel)] animate-pulse"/>
              <div className="h-4 w-3/4 rounded bg-[var(--panel)] mt-4 animate-pulse"/>
              <div className="h-3 w-1/2 rounded bg-[var(--panel)] mt-2 animate-pulse"/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Color helpers (work on hex)
function shade(hex, percent) {
  // percent: -100..100 (negative = darker)
  const n = parseInt(hex.replace("#",""), 16);
  const r = (n >> 16) & 0xff, g = (n >> 8) & 0xff, b = n & 0xff;
  const k = (c) => {
    const t = percent < 0 ? 0 : 255;
    const p = Math.abs(percent) / 100;
    return Math.round((t - c) * p + c);
  };
  return "#" + [k(r), k(g), k(b)].map(c => c.toString(16).padStart(2, "0")).join("");
}
function tint(hex, amount /* 0..1 toward white */) {
  const n = parseInt(hex.replace("#",""), 16);
  const r = (n >> 16) & 0xff, g = (n >> 8) & 0xff, b = n & 0xff;
  const k = (c) => Math.round(c + (255 - c) * amount);
  return "#" + [k(r), k(g), k(b)].map(c => c.toString(16).padStart(2, "0")).join("");
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);