/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor,
   Header, LayoutGriglia, LayoutIndice, LayoutEditoriale */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direzione": "editoriale",
  "accento": "#e0681f",
  "font": "editoriale"
}/*EDITMODE-END*/;

const FONTS = {
  editoriale: {
    display: '"Newsreader", Georgia, serif',
    body: '"Public Sans", system-ui, sans-serif'
  },
  grottesco: {
    display: '"Archivo", system-ui, sans-serif',
    body: '"Archivo", system-ui, sans-serif'
  },
  contrasto: {
    display: '"Space Grotesk", system-ui, sans-serif',
    body: '"Public Sans", system-ui, sans-serif'
  }
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [progetti, setProgetti] = useState(() => window.PROGETTI || []);

  // Tema chiaro/scuro persistente
  const [tema, setTema] = useState(() => localStorage.getItem("rb_tema") || "light");
  useEffect(() => {
    document.documentElement.setAttribute("data-tema", tema);
    localStorage.setItem("rb_tema", tema);
  }, [tema]);

  // Applica accento + font
  useEffect(() => {
    document.documentElement.style.setProperty("--acc", t.accento);
  }, [t.accento]);
  useEffect(() => {
    const f = FONTS[t.font] || FONTS.editoriale;
    document.documentElement.style.setProperty("--font-display", f.display);
    document.documentElement.style.setProperty("--font-body", f.body);
  }, [t.font]);
  const profilo = window.PROFILO || { nome: "Portfolio" };

  useEffect(() => {
    let cancelled = false;

    const ready = window.PROGETTI_PROMISE || Promise.resolve(window.PROGETTI || []);
    ready.then((loaded) => {
      if (!cancelled) {
        setProgetti(loaded);
      }
    });

    return () => {
      cancelled = true;
    };
  }, []);

  const Layout =
    t.direzione === "indice" ? LayoutIndice :
    t.direzione === "editoriale" ? LayoutEditoriale :
    LayoutGriglia;

  return (
    <div className="wrap">
      <Header profilo={profilo} tema={tema} onTema={() => setTema(tema === "dark" ? "light" : "dark")} />

      <main>
        <Layout progetti={progetti} />
      </main>

      <footer className="piede">
        <span>© {new Date().getFullYear()} {profilo.nome}</span>
        {profilo.linkedin && (
          <a href={profilo.linkedin} target="_blank" rel="noopener noreferrer">LinkedIn ↗</a>
        )}
      </footer>

      <TweaksPanel>
        <TweakSection label="Direzione editoriale" />
        <TweakRadio
          label="Layout"
          value={t.direzione}
          options={[
            { value: "griglia", label: "Griglia" },
            { value: "indice", label: "Indice" },
            { value: "editoriale", label: "Editoriale" }
          ]}
          onChange={(v) => setTweak("direzione", v)}
        />
        <TweakSection label="Identità" />
        <TweakColor
          label="Accento"
          value={t.accento}
          options={["#e0681f", "#c2410c", "#d98324", "#b45309"]}
          onChange={(v) => setTweak("accento", v)}
        />
        <TweakRadio
          label="Carattere"
          value={t.font}
          options={[
            { value: "editoriale", label: "Serif" },
            { value: "grottesco", label: "Grotesk" },
            { value: "contrasto", label: "Misto" }
          ]}
          onChange={(v) => setTweak("font", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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