/* Root app: routing, state, tweaks integration. */

const { useState: useStateA, useEffect: useEffectA } = React;

const ACCENT_PALETTES = /*EDITMODE-BEGIN*/{
  "accent": "#A95773",
  "density": "comfortable",
  "show_grain": true
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  "#A95773": { deep: "#6B2F44", soft: "#EBCAD6" }, // berry / deep rose (default)
  "#8C2F54": { deep: "#5E1F38", soft: "#E3BDCC" }, // plum / wine (powerful)
  "#D4859B": { deep: "#A95773", soft: "#F0D4DE" }, // dusty rose (softer)
  "#C97D5D": { deep: "#A86244", soft: "#E8C7B6" }, // terracotta (warm)
  "#7E8E76": { deep: "#5C6B56", soft: "#D4DBCF" }, // sage (quiet)
};

function App() {
  const [route, setRoute] = useStateA(() => {
    const h = (window.location.hash || "").replace("#/", "").replace("#", "").split("?")[0];
    if (h.startsWith("lesson/")) return h;
    return ["home", "about", "services", "work", "tasks", "welcome", "lessons", "dashboard", "start", "chat", "lesson/01/studio"].includes(h) ? h : "home";
  });
  const [tasks, setTasks] = useStateA(loadTasks);

  // Tweaks
  const [t, setTweak] = window.useTweaks(ACCENT_PALETTES);

  // sync hash → route
  useEffectA(() => {
    const onHash = () => {
      const h = (window.location.hash || "").replace("#/", "").replace("#", "").split("?")[0];
      if (h.startsWith("lesson/") || ["home", "about", "services", "work", "tasks", "welcome", "lessons", "dashboard", "start", "chat", "lesson/01/studio"].includes(h)) {
        setRoute(h);
        window.scrollTo({ top: 0, behavior: "instant" });
      }
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = (r) => {
    setRoute(r);
    window.location.hash = "#/" + r;
    window.scrollTo({ top: 0 });
  };

  // Re-read tasks on Work tab (in case Tasks board updated them)
  useEffectA(() => {
    if (route === "work") setTasks(loadTasks());
  }, [route]);

  // Apply accent
  useEffectA(() => {
    const pal = ACCENT_MAP[t.accent] || ACCENT_MAP["#A95773"];
    document.documentElement.style.setProperty("--terracotta", t.accent);
    document.documentElement.style.setProperty("--terracotta-deep", pal.deep);
    document.documentElement.style.setProperty("--terracotta-soft", pal.soft);
  }, [t.accent]);

  // Density
  useEffectA(() => {
    if (t.density === "compact") {
      document.documentElement.style.setProperty("--gutter", "clamp(16px, 4vw, 40px)");
    } else {
      document.documentElement.style.setProperty("--gutter", "clamp(20px, 5vw, 56px)");
    }
  }, [t.density]);

  // Grain
  useEffectA(() => {
    const g = document.querySelector(".grain");
    if (g) g.style.display = t.show_grain ? "" : "none";
  }, [t.show_grain]);

  let page;
  switch (route) {
    case "about":    page = <AboutPage />; break;
    case "services": page = <ServicesPage setRoute={go} />; break;
    case "work":     page = <WorkPage tasks={tasks} setRoute={go} />; break;
    case "tasks":    page = <TasksPage />; break;
    case "welcome":  page = <window.WelcomePage setRoute={go} />; break;
    case "lessons":  page = <window.LessonsHubPage setRoute={go} />; break;
    case "lesson/01": page = <window.Lesson01Page setRoute={go} />; break;
    case "dashboard": page = <window.DashboardPage setRoute={go} />; break;
    case "start":    page = <window.PitchPage setRoute={go} />; break;
    case "chat":     page = <window.ChatPage setRoute={go} />; break;
    case "lesson/01/studio": page = <window.Lesson01Studio onComplete={() => { window.location.hash = "#/dashboard"; }} onBack={() => { window.location.hash = "#/lesson/01"; }} />; break;
    default:         page = <HomePage setRoute={go} />;
  }

  return (
    <>
      <Nav route={route} setRoute={go} />
      <div key={route}>{page}</div>
      {route !== "tasks" && <Footer setRoute={go} />}

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Visual">
          <window.TweakColor
            label="Accent"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#A95773", "#8C2F54", "#D4859B", "#C97D5D", "#7E8E76"]}
          />
          <window.TweakRadio
            label="Density"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "comfortable", label: "Comfy" },
              { value: "compact",     label: "Compact" },
            ]}
          />
          <window.TweakToggle
            label="Film grain"
            value={t.show_grain}
            onChange={(v) => setTweak("show_grain", v)}
          />
        </window.TweakSection>
        <window.TweakSection label="Navigate">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {["home", "about", "services", "work", "tasks", "welcome"].map((r) => (
              <button
                key={r}
                onClick={() => go(r)}
                style={{
                  background: route === r ? "var(--charcoal)" : "transparent",
                  color: route === r ? "var(--cream)" : "var(--ink-2)",
                  border: "1px solid var(--line-strong)",
                  borderRadius: 999,
                  padding: "8px 12px",
                  fontSize: 13,
                  cursor: "pointer",
                  textTransform: "capitalize",
                  fontFamily: "var(--sans)",
                }}
              >
                {r}
              </button>
            ))}
          </div>
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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