// ─── Main app — state machine, layout, tweaks panel ────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c8ff3d",
  "dark": true,
  "density": "regular",
  "fontPreset": "modern",
  "dashView": "grid"
}/*EDITMODE-END*/;

const FONT_PRESETS = {
  modern:   { sans: "'Inter', system-ui, sans-serif", display: "'Inter', system-ui, sans-serif", mono: "'JetBrains Mono', ui-monospace, monospace" },
  editorial:{ sans: "'IBM Plex Sans', system-ui, sans-serif", display: "'Space Grotesk', system-ui, sans-serif", mono: "'IBM Plex Mono', ui-monospace, monospace" },
  compact:  { sans: "'DM Sans', system-ui, sans-serif", display: "'DM Sans', system-ui, sans-serif", mono: "'JetBrains Mono', ui-monospace, monospace" },
};

// pick the right ink color (dark text on light accents, etc.)
function inkFor(hex) {
  // luminance check
  const m = hex.replace("#","");
  const r = parseInt(m.slice(0,2),16), g = parseInt(m.slice(2,4),16), b = parseInt(m.slice(4,6),16);
  const lum = (0.299*r + 0.587*g + 0.114*b) / 255;
  return lum > 0.55 ? "#0a0a0a" : "#fafafa";
}

function App() {
  const [t_, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [lang, setLangRaw] = useState("fr");
  const setLang = (l) => { setLangRaw(l); document.documentElement.lang = l; };
  const [route, goto] = useRoute("landing");
  const [proj, setProj] = useProject();
  const [currentProject, setCurrentProject] = useState(null);
  const [dashView, setDashView] = useState(t_.dashView || "grid");
  const [session, setSession] = useState(null);

  useEffect(() => {
    window.sb.auth.getSession().then(({ data }) => setSession(data.session));
    const { data: sub } = window.sb.auth.onAuthStateChange((_event, s) => setSession(s));
    return () => sub.subscription.unsubscribe();
  }, []);

  const signOut = async () => {
    await window.sb.auth.signOut();
    setProj(window.EMPTY_PROJECT);
    setCurrentProject(null);
    goto("landing");
  };

  // Sync currentProject → proj (for the per-project dashboard)
  useEffect(() => {
    if (!currentProject) return;
    setProj({
      name: currentProject.name,
      company: currentProject.company,
      website: currentProject.website,
      description: currentProject.description[lang],
      sector: currentProject.sector[lang],
      plan: currentProject.plan,
    });
  }, [currentProject, lang]);

  // Apply tweaks to document root
  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", t_.dark ? "dark" : "light");
    root.setAttribute("data-density", t_.density);
    root.style.setProperty("--accent", t_.accent);
    root.style.setProperty("--accent-ink", inkFor(t_.accent));
    const preset = FONT_PRESETS[t_.fontPreset] || FONT_PRESETS.modern;
    root.style.setProperty("--font-sans", preset.sans);
    root.style.setProperty("--font-display", preset.display);
    root.style.setProperty("--font-mono", preset.mono);
  }, [t_]);

  // Persist dashView via tweak
  useEffect(() => { if (dashView !== t_.dashView) setTweak("dashView", dashView); }, [dashView]);

  const t = window.I18N[lang];

  return (
    <div className="app">
      <TopNav t={t} lang={lang} setLang={setLang} route={route} goto={goto} session={session} signOut={signOut}/>

      {route === "landing"     && <Landing t={t} goto={goto} lang={lang}/>}
      {route === "auth"        && <Auth t={t} goto={goto} lang={lang}/>}
      {route === "onboarding"  && <Onboarding t={t} goto={goto} lang={lang} proj={proj} setProj={setProj} session={session}/>}
      {route === "pricing"     && <Pricing t={t} goto={goto} lang={lang}/>}
      {route === "projects"    && <ClientDashboard t={t} goto={goto} lang={lang} setCurrentProject={setCurrentProject} session={session}/>}
      {route === "dashboard"   && <Dashboard t={t} goto={goto} lang={lang} proj={proj} view={dashView} setView={setDashView}/>}

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label={lang === "fr" ? "Marque" : "Brand"} />
        <window.TweakColor label={lang === "fr" ? "Couleur d'accent" : "Accent color"}
          value={t_.accent}
          options={["#c8ff3d", "#ff5a1f", "#3da9ff", "#a584ff", "#ff3d8a"]}
          onChange={(v) => setTweak("accent", v)}/>
        <window.TweakToggle label={lang === "fr" ? "Mode sombre" : "Dark mode"}
          value={t_.dark} onChange={(v) => setTweak("dark", v)}/>

        <window.TweakSection label={lang === "fr" ? "Typographie" : "Typography"} />
        <window.TweakRadio label={lang === "fr" ? "Police" : "Font"}
          value={t_.fontPreset}
          options={[
            { value: "modern", label: "Modern" },
            { value: "editorial", label: "Editorial" },
            { value: "compact", label: "Compact" },
          ]}
          onChange={(v) => setTweak("fontPreset", v)}/>
        <window.TweakRadio label={lang === "fr" ? "Densité" : "Density"}
          value={t_.density}
          options={[
            { value: "compact", label: "Compact" },
            { value: "regular", label: "Regular" },
            { value: "comfy", label: "Comfy" },
          ]}
          onChange={(v) => setTweak("density", v)}/>

        {(route === "dashboard") && (<>
          <window.TweakSection label={lang === "fr" ? "Dashboard" : "Dashboard"} />
          <window.TweakRadio label={lang === "fr" ? "Vue" : "Layout"}
            value={dashView}
            options={[
              { value: "grid", label: "Grid" },
              { value: "list", label: "List" },
              { value: "kanban", label: "Kanban" },
            ]}
            onChange={setDashView}/>
        </>)}

        <window.TweakSection label="Navigation" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
          {[
            { k: "landing", l: "Landing" },
            { k: "auth", l: "Auth" },
            { k: "onboarding", l: "Onboard" },
            { k: "pricing", l: "Pricing" },
            { k: "projects", l: "Projects" },
            { k: "dashboard", l: "Dashboard" },
          ].map(r => (
            <button key={r.k} onClick={() => goto(r.k)}
              style={{
                padding: "8px 10px", borderRadius: 8,
                border: "1px solid rgba(0,0,0,.12)",
                background: route === r.k ? "#29261b" : "rgba(255,255,255,.6)",
                color: route === r.k ? "#fff" : "#29261b",
                fontSize: 11.5, fontWeight: 600,
                cursor: "pointer",
              }}>{r.l}</button>
          ))}
        </div>
      </window.TweaksPanel>
    </div>
  );
}

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