// app.jsx — router + Tweaks + mount
(function () {
  const { useState, useEffect, useCallback } = React;
  const Icon = window.Icon;
  const { Header, Footer, FloatActions, Home, Courses, CourseDetail, Verify, About, Gallery, Testimonials, Contact, Login, Dashboard } = window;
  const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSlider } = window;

  /* ---------- routing helpers ---------- */
  function parseHash() {
    const h = (window.location.hash || "#home").replace(/^#/, "");
    const [route, slug] = h.split("/");
    return { route: route || "home", slug: slug || null };
  }

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#f8b518",
    "heading": "Plus Jakarta Sans",
    "cards": "shadowed",
    "radius": 20
  }/*EDITMODE-END*/;

  function App() {
    const [{ route, slug }, setLoc] = useState(parseHash());
    const [verifyPrefill, setVerifyPrefill] = useState("");
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

    const navigate = useCallback((r, s = null, prefill = "") => {
      setVerifyPrefill(prefill || "");
      const hash = "#" + r + (s ? "/" + s : "");
      if (window.location.hash !== hash) window.location.hash = hash;
      else setLoc({ route: r, slug: s });
      window.scrollTo({ top: 0, behavior: "auto" });
    }, []);

    useEffect(() => {
      const onHash = () => { setLoc(parseHash()); window.scrollTo({ top: 0 }); };
      window.addEventListener("hashchange", onHash);
      return () => window.removeEventListener("hashchange", onHash);
    }, []);

    /* apply tweaks to :root */
    useEffect(() => {
      const r = document.documentElement.style;
      const a = t.accent;
      r.setProperty("--accent", a);
      // derive a darker shade for hover/text
      r.setProperty("--accent-600", shade(a, -10));
      r.setProperty("--accent-700", shade(a, -22));
      r.setProperty("--accent-soft", tint(a, 78));
      r.setProperty("--sh-accent", "0 10px 26px " + hexA(a, .35));
    }, [t.accent]);

    useEffect(() => {
      const r = document.documentElement.style;
      r.setProperty("--r-xl", (t.radius + 8) + "px");
      r.setProperty("--r-lg", t.radius + "px");
      r.setProperty("--r-md", Math.max(8, t.radius - 6) + "px");
      r.setProperty("--r-sm", Math.max(6, t.radius - 10) + "px");
    }, [t.radius]);

    useEffect(() => {
      document.documentElement.style.setProperty("--font", '"' + t.heading + '", ui-sans-serif, system-ui, sans-serif');
    }, [t.heading]);

    useEffect(() => {
      document.body.setAttribute("data-cards", t.cards);
    }, [t.cards]);

    let page;
    switch (route) {
      case "courses": page = <Courses navigate={navigate} />; break;
      case "course": page = <CourseDetail slug={slug} navigate={navigate} />; break;
      case "verify": page = <Verify navigate={navigate} prefill={verifyPrefill} />; break;
      case "about": page = <About navigate={navigate} />; break;
      case "gallery": page = <Gallery navigate={navigate} />; break;
      case "testimonials": page = <Testimonials navigate={navigate} />; break;
      case "contact": page = <Contact navigate={navigate} />; break;
      case "login": page = <Login navigate={navigate} />; break;
      case "dashboard": case "admin": page = <Dashboard navigate={navigate} />; break;
      default: page = <Home navigate={navigate} />;
    }

    return (
      <React.Fragment>
        <Header route={route} navigate={navigate} />
        {page}
        <Footer navigate={navigate} />
        <FloatActions />
        <TweaksPanel title="Tweaks">
          <TweakSection label="Brand accent" />
          <TweakColor label="Accent color" value={t.accent}
            options={["#f8b518", "#ff8a3d", "#1f9d6b", "#e7574f", "#2b7390"]}
            onChange={(v) => setTweak("accent", v)} />
          <TweakSection label="Typography" />
          <TweakRadio label="Headings" value={t.heading}
            options={["Plus Jakarta Sans", "Poppins", "Sora"]}
            onChange={(v) => setTweak("heading", v)} />
          <TweakSection label="Shape & style" />
          <TweakSlider label="Corner radius" value={t.radius} min={6} max={30} step={1} unit="px"
            onChange={(v) => setTweak("radius", v)} />
          <TweakRadio label="Card style" value={t.cards}
            options={["flat", "shadowed", "outlined"]}
            onChange={(v) => setTweak("cards", v)} />
        </TweaksPanel>
      </React.Fragment>
    );
  }

  /* ---------- color utils ---------- */
  function clamp(n) { return Math.max(0, Math.min(255, n)); }
  function parseHex(h) { h = h.replace("#", ""); if (h.length === 3) h = h.split("").map((c) => c + c).join(""); return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]; }
  function toHex(r, g, b) { return "#" + [r, g, b].map((x) => clamp(Math.round(x)).toString(16).padStart(2, "0")).join(""); }
  function shade(hex, pct) { const [r, g, b] = parseHex(hex); const f = 1 + pct / 100; return toHex(r * f, g * f, b * f); }
  function tint(hex, amt) { const [r, g, b] = parseHex(hex); return toHex(r + (255 - r) * amt / 100, g + (255 - g) * amt / 100, b + (255 - b) * amt / 100); }
  function hexA(hex, a) { const [r, g, b] = parseHex(hex); return "rgba(" + r + "," + g + "," + b + "," + a + ")"; }

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