/* =========================================================================
   tweaks.jsx — panneau de réglages (Tweaks)
   ========================================================================= */
const { useTweaks, TweaksPanel, TweakSection, TweakRow, TweakRadio, TweakSelect, TweakButton } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "emerald",
  "type": "editorial",
  "cards": "soft",
  "radius": "default",
  "herovis": "portrait",
  "animate": "on"
}/*EDITMODE-END*/;

const THEMES = [
  { id: "emerald", label: "Émeraude", color: "#0C8C5E" },
  { id: "azur",    label: "Azur",     color: "#2563EB" },
  { id: "corail",  label: "Corail",   color: "#F0533B" },
  { id: "indigo",  label: "Indigo",   color: "#5B45E0" },
  { id: "encre",   label: "Encre",    color: "#1E1B16" }
];

function ThemeSwatches({ value, onChange }) {
  return (
    <TweakRow label="Palette">
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {THEMES.map((t) => {
          const on = t.id === value;
          return (
            <button key={t.id} type="button" title={t.label} onClick={() => onChange(t.id)}
              style={{
                width: 34, height: 34, borderRadius: 10, cursor: "pointer",
                background: t.color, border: on ? "2px solid #111" : "2px solid transparent",
                boxShadow: on ? "0 0 0 2px #fff inset" : "0 1px 3px rgba(0,0,0,.18)",
                outline: "none", transition: "transform .15s ease",
                transform: on ? "scale(1.06)" : "none"
              }} />
          );
        })}
      </div>
    </TweakRow>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const root = document.documentElement;

  React.useEffect(() => { root.setAttribute("data-theme", t.theme); }, [t.theme]);
  React.useEffect(() => { root.setAttribute("data-type", t.type); }, [t.type]);
  React.useEffect(() => { root.setAttribute("data-cards", t.cards); }, [t.cards]);
  React.useEffect(() => { root.setAttribute("data-radius", t.radius); }, [t.radius]);
  React.useEffect(() => { root.setAttribute("data-herovis", t.herovis); }, [t.herovis]);
  React.useEffect(() => {
    root.setAttribute("data-animate", t.animate);
    if (window.__startRotator) window.__startRotator();
  }, [t.animate]);

  return (
    <TweaksPanel title="Réglages">
      <TweakSection label="Couleurs" />
      <ThemeSwatches value={t.theme} onChange={(v) => setTweak("theme", v)} />

      <TweakSection label="Typographie" />
      <TweakSelect label="Style" value={t.type}
        options={[
          { value: "editorial", label: "Éditoriale (serif)" },
          { value: "tech", label: "Tech (grotesk)" },
          { value: "classique", label: "Classique (serif)" }
        ]}
        onChange={(v) => setTweak("type", v)} />

      <TweakSection label="Cartes" />
      <TweakRadio label="Style" value={t.cards}
        options={[
          { value: "soft", label: "Douce" },
          { value: "outline", label: "Contour" },
          { value: "elevated", label: "Relief" }
        ]}
        onChange={(v) => setTweak("cards", v)} />
      <TweakRadio label="Angles" value={t.radius}
        options={[
          { value: "sharp", label: "Net" },
          { value: "default", label: "Normal" },
          { value: "round", label: "Arrondi" }
        ]}
        onChange={(v) => setTweak("radius", v)} />

      <TweakSection label="Accueil" />
      <TweakRadio label="Visuel" value={t.herovis}
        options={[
          { value: "portrait", label: "Photo" },
          { value: "abstrait", label: "Animation" }
        ]}
        onChange={(v) => setTweak("herovis", v)} />

      <TweakSection label="Animations" />
      <TweakRadio label="Effets" value={t.animate}
        options={[
          { value: "on", label: "Activés" },
          { value: "off", label: "Désactivés" }
        ]}
        onChange={(v) => setTweak("animate", v)} />

      <TweakButton label="Tout réinitialiser" secondary onClick={() => {
        Object.entries(TWEAK_DEFAULTS).forEach(([k, v]) => setTweak(k, v));
      }} />
    </TweaksPanel>
  );
}

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