/* Panneau Tweaks — Infosolutions30 */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "Nuit Cévenole",
  "palette": ["#5B7CFA", "#8B5CF6"],
  "fontDisplay": "Poppins",
  "fontBody": "Poppins",
  "typeScale": 100,
  "fx": 100,
  "rain": true,
  "anim": true,
  "radius": 16,
  "btnStyle": "Pilule",
  "space": 100,
  "contentW": 1180,
  "caps": false,
  "fab": true,
  "zone": true
}/*EDITMODE-END*/;

const DIR_MAP = {
  "Nuit Cévenole": "nuit",
  "Carbone Électrique": "carbone",
  "Clair Premium": "clair"
};

const FONT_MAP = {
  "Poppins": "'Poppins', sans-serif",
  "Space Grotesk": "'Space Grotesk', sans-serif",
  "Sora": "'Sora', sans-serif",
  "JetBrains Mono": "'JetBrains Mono', monospace"
};

const BTN_MAP = { "Pilule": "999px", "Arrondi": "14px", "Carré": "5px" };

function applyTweaks(t) {
  const b = document.body;
  b.dataset.dir = DIR_MAP[t.direction] || "nuit";
  b.dataset.rain = t.rain ? "on" : "off";
  b.dataset.anim = t.anim ? "on" : "off";
  b.dataset.fab = t.fab ? "on" : "off";
  b.dataset.zone = t.zone ? "on" : "off";
  b.dataset.caps = t.caps ? "on" : "off";
  const pal = Array.isArray(t.palette) ? t.palette : ["#5B7CFA", "#8B5CF6"];
  b.style.setProperty("--accent", pal[0]);
  b.style.setProperty("--accent-2", pal[1] || pal[0]);
  b.style.setProperty("--fx", String((t.fx ?? 100) / 100));
  b.style.setProperty("--radius", (t.radius ?? 16) + "px");
  b.style.setProperty("--btn-radius", BTN_MAP[t.btnStyle] || "999px");
  b.style.setProperty("--space", String((t.space ?? 100) / 100));
  b.style.setProperty("--content-w", (t.contentW ?? 1180) + "px");
  b.style.setProperty("--font-display", FONT_MAP[t.fontDisplay] || FONT_MAP["Poppins"]);
  b.style.setProperty("--font-body", FONT_MAP[t.fontBody] || FONT_MAP["Poppins"]);
  b.style.fontSize = (17 * (t.typeScale ?? 100) / 100).toFixed(2) + "px";
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Direction" />
      <TweakSelect
        label="Ambiance"
        value={t.direction}
        options={["Nuit Cévenole", "Carbone Électrique", "Clair Premium"]}
        onChange={(v) => setTweak("direction", v)}
      />
      <TweakSection label="Couleurs" />
      <TweakColor
        label="Accent"
        value={t.palette}
        options={[
          ["#5B7CFA", "#8B5CF6"],
          ["#3D63F5", "#22D3EE"],
          ["#4EA8DE", "#5B7CFA"],
          ["#6366F1", "#EC4899"]
        ]}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakSection label="Typographie" />
      <TweakSelect
        label="Titres"
        value={t.fontDisplay}
        options={["Poppins", "Space Grotesk", "Sora", "JetBrains Mono"]}
        onChange={(v) => setTweak("fontDisplay", v)}
      />
      <TweakSelect
        label="Texte courant"
        value={t.fontBody}
        options={["Poppins", "Space Grotesk", "Sora"]}
        onChange={(v) => setTweak("fontBody", v)}
      />
      <TweakSlider
        label="Taille du texte"
        value={t.typeScale} min={85} max={115} unit="%"
        onChange={(v) => setTweak("typeScale", v)}
      />
      <TweakToggle
        label="Titres en majuscules"
        value={t.caps}
        onChange={(v) => setTweak("caps", v)}
      />
      <TweakSection label="Mise en page" />
      <TweakSlider
        label="Largeur du contenu"
        value={t.contentW} min={980} max={1400} step={20} unit="px"
        onChange={(v) => setTweak("contentW", v)}
      />
      <TweakSlider
        label="Espacement des sections"
        value={t.space} min={60} max={140} unit="%"
        onChange={(v) => setTweak("space", v)}
      />
      <TweakSlider
        label="Arrondis des cartes"
        value={t.radius} min={4} max={26} unit="px"
        onChange={(v) => setTweak("radius", v)}
      />
      <TweakRadio
        label="Style des boutons"
        value={t.btnStyle}
        options={["Pilule", "Arrondi", "Carré"]}
        onChange={(v) => setTweak("btnStyle", v)}
      />
      <TweakSection label="Effets" />
      <TweakSlider
        label="Intensité (lueurs)"
        value={t.fx} min={0} max={100} unit="%"
        onChange={(v) => setTweak("fx", v)}
      />
      <TweakToggle
        label="Pluie de code"
        value={t.rain}
        onChange={(v) => setTweak("rain", v)}
      />
      <TweakToggle
        label="Animations au scroll"
        value={t.anim}
        onChange={(v) => setTweak("anim", v)}
      />
      <TweakSection label="Interface" />
      <TweakToggle
        label="Bouton flottant Autodiag"
        value={t.fab}
        onChange={(v) => setTweak("fab", v)}
      />
      <TweakToggle
        label="Bandeau zone d'activité"
        value={t.zone}
        onChange={(v) => setTweak("zone", v)}
      />
    </TweaksPanel>
  );
}

applyTweaks(TWEAK_DEFAULTS);
const tweaksRoot = ReactDOM.createRoot(document.getElementById("tweaks-root"));
tweaksRoot.render(<TweaksApp />);