/* global React, ReactDOM, PORTFOLIO_DATA,
   Nav, Hero, About, Projects, Stack, Experience, Passions, Contact, Footer,
   BgShapes, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSlider, TweakToggle, TweakSelect */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#85c6a8",
  "typo": "Bricolage",
  "layout": "asym",
  "threeD": 60,
  "dark": true
}/*EDITMODE-END*/;

// All accents used across iterations.
// hue, chroma, lightness in oklch for the swatch + theme generation.
const ACCENTS = {
  "#85c6a8": { h: 165, c: 0.11, name: "sage"     },
  "#7af0d4": { h: 175, c: 0.16, name: "mint"     },
  "#6cb5ff": { h: 240, c: 0.16, name: "cobalt"   },
  "#a0b8d4": { h: 240, c: 0.06, name: "steel"    },
  "#a99bd9": { h: 290, c: 0.10, name: "lavender" },
  "#b48dff": { h: 295, c: 0.20, name: "electric" },
  "#ff7ab8": { h: 350, c: 0.18, name: "pink"     },
  "#ff3a8c": { h: 330, c: 0.22, name: "magenta"  },
  "#d9a4a4": { h:  20, c: 0.05, name: "rose"     },
  "#f5a04a": { h:  55, c: 0.16, name: "orange"   },
  "#d4c98a": { h:  95, c: 0.07, name: "gold"     },
  "#b6ff3a": { h: 130, c: 0.22, name: "lime"     },
};

const TYPOS = {
  "Bricolage": {
    display: '"Bricolage Grotesque", ui-sans-serif, system-ui',
    body: '"Geist", ui-sans-serif, system-ui',
    mono: '"Geist Mono", ui-monospace, "JetBrains Mono", monospace',
  },
  "Unbounded": {
    display: '"Unbounded", ui-sans-serif, system-ui',
    body: '"Space Grotesk", ui-sans-serif, system-ui',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  "Syne": {
    display: '"Syne", ui-sans-serif, system-ui',
    body: '"IBM Plex Sans", ui-sans-serif, system-ui',
    mono: '"IBM Plex Mono", ui-monospace, monospace',
  },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState("fr");

  useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = t.dark ? "dark" : "light";

    const a = ACCENTS[t.accent] || ACCENTS["#85c6a8"];
    const hue = a.h;
    const chroma = a.c;
    const L = t.dark ? (0.62 + chroma * 0.6) : (0.38 + chroma * 0.4);
    const Ldark = Math.min(0.80, L);
    const Llight = Math.max(0.32, Math.min(0.55, L));
    const useL = t.dark ? Ldark : Llight;
    root.style.setProperty("--accent", `oklch(${useL} ${chroma} ${hue})`);
    root.style.setProperty("--accent-soft", `oklch(${useL} ${chroma} ${hue} / 0.16)`);
    root.style.setProperty("--shape-1", `oklch(${useL} ${chroma} ${hue} / ${t.dark ? 0.28 : 0.34})`);
    root.style.setProperty("--shape-2", `oklch(${(t.dark ? 0.68 : 0.58)} ${chroma * 0.9} ${(hue + 215) % 360} / ${t.dark ? 0.22 : 0.26})`);
    // Slightly tint base bg & fg toward accent hue for cohesion
    root.style.setProperty("--bg", t.dark
      ? `oklch(0.18 0.018 ${hue})`
      : `oklch(0.87 0.035 ${hue})`);
    root.style.setProperty("--fg", t.dark
      ? `oklch(0.94 0.012 ${hue})`
      : `oklch(0.16 0.022 ${hue})`);
    // ensure good ink color (contrasts accent)
    root.style.setProperty("--accent-ink", t.dark
      ? `oklch(0.18 0.018 ${hue})`
      : `oklch(0.87 0.035 ${hue})`);

    const typo = TYPOS[t.typo] || TYPOS.Bricolage;
    root.style.setProperty("--font-display", typo.display);
    root.style.setProperty("--font-body", typo.body);
    root.style.setProperty("--font-mono", typo.mono);

    root.style.setProperty("--motion", String(Math.max(t.threeD / 100, 0.05)));
  }, [t]);

  const data = window.PORTFOLIO_DATA;

  return (
    <>
      <BgShapes />
      <div className="shell">
        <Nav lang={lang} setLang={setLang} theme={t.dark ? "dark" : "light"} setTheme={(v) => setTweak("dark", v === "dark")} data={data} />
        <Hero lang={lang} data={data} />
        <About lang={lang} data={data} />
        <Projects lang={lang} data={data} layout={t.layout} threeDIntensity={t.threeD / 100} />
        <Stack lang={lang} data={data} />
        <Experience lang={lang} data={data} />
        <Passions lang={lang} data={data} />
        <Contact lang={lang} data={data} />
        <Footer lang={lang} data={data} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={Object.keys(ACCENTS)}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Typography" />
        <TweakSelect
          label="Pairing"
          value={t.typo}
          options={Object.keys(TYPOS)}
          onChange={(v) => setTweak("typo", v)}
        />
        <TweakSection label="Projects layout" />
        <TweakRadio
          label="Grid"
          value={t.layout}
          options={["asym", "grid3", "grid2"]}
          onChange={(v) => setTweak("layout", v)}
        />
        <TweakSection label="Motion / 3D" />
        <TweakSlider label="Intensity" value={t.threeD} min={0} max={100} step={5} unit="%"
                     onChange={(v) => setTweak("threeD", v)} />
      </TweaksPanel>
    </>
  );
}

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