/* FlowAxis — panneau Tweaks (affordance de revue) */
const FX_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "a",
  "accent": "#C2410C",
  "motion": "lively",
  "serifHero": false
}/*EDITMODE-END*/;

const HERO_LABELS = {
  a: "A · Split + dashboard",
  b: "B · Éditorial sombre",
  c: "C · Conceptuel centré"
};

function FxTweaks() {
  const [t, setTweak] = useTweaks(FX_TWEAK_DEFAULTS);

  // Appliquer au DOM
  React.useEffect(() => {
    document.body.setAttribute("data-hero", t.hero);
  }, [t.hero]);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    // dériver une version foncée approximative
    root.style.setProperty("--accent-deep", shade(t.accent, -14));
  }, [t.accent]);

  React.useEffect(() => {
    document.body.setAttribute("data-motion", t.motion);
  }, [t.motion]);

  React.useEffect(() => {
    document.documentElement.style.setProperty(
      "--ff-display",
      t.serifHero ? '"Fraunces", Georgia, serif' : '"Manrope", system-ui, sans-serif'
    );
  }, [t.serifHero]);

  function shade(hex, pct) {
    try {
      const n = parseInt(hex.slice(1), 16);
      let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
      const f = pct / 100;
      r = Math.round(r + r * f); g = Math.round(g + g * f); b = Math.round(b + b * f);
      r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b));
      return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("");
    } catch (e) { return hex; }
  }

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direction du hero" />
      <TweakRadio
        label="Variante"
        value={t.hero}
        options={[
          { value: "a", label: HERO_LABELS.a },
          { value: "b", label: HERO_LABELS.b },
          { value: "c", label: HERO_LABELS.c }
        ]}
        onChange={(v) => setTweak("hero", v)}
      />
      <p style={{ fontSize: 11, color: "#8a8a8a", margin: "2px 2px 0", lineHeight: 1.4 }}>
        {t.hero === "a" && "Texte à gauche, dashboard en perspective à droite. Classique et confiant."}
        {t.hero === "b" && "Plein écran marine, titre Fraunces surdimensionné, dashboard incliné. Premium."}
        {t.hero === "c" && "Centré : les outils M365 convergent vers FlowAxis, dashboard pleine largeur."}
      </p>

      <TweakSection label="Marque" />
      <TweakColor
        label="Accent signature"
        value={t.accent}
        options={["#D97757", "#C2410C", "#B45309", "#3B5A7A"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakToggle
        label="Titres en serif (Fraunces)"
        value={t.serifHero}
        onChange={(v) => setTweak("serifHero", v)}
      />

      <TweakSection label="Mouvement" />
      <TweakRadio
        label="Niveau d'animation"
        value={t.motion}
        options={[
          { value: "lively", label: "Vivant" },
          { value: "subtle", label: "Sobre" }
        ]}
        onChange={(v) => { setTweak("motion", v); }}
      />
      <TweakButton label="Rejouer les compteurs" onClick={() => window.__fxReplayCounters && window.__fxReplayCounters()} />
    </TweaksPanel>
  );
}

(function mountFxTweaks() {
  const host = document.createElement("div");
  host.id = "fx-tweaks-root";
  document.body.appendChild(host);
  ReactDOM.createRoot(host).render(<FxTweaks />);
})();