/* =========================================================================
   DANDELEÓN STUDIO — panel de Tweaks (compartido en todas las páginas)
   Requiere: React, ReactDOM, tweaks-panel.jsx y site.js (window.DandeleonTweaks)
   ========================================================================= */

const DANDELEON_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "dandeleon",
  "fonts": "editorial",
  "motion": "sutil",
  "density": "comoda"
}/*EDITMODE-END*/;

function DandeleonTweaksApp() {
  // Sembrar desde localStorage (consistencia al navegar entre páginas).
  const seed = (window.DandeleonTweaks && window.DandeleonTweaks.read()) || {};
  const initial = { ...DANDELEON_DEFAULTS, ...seed };
  const [t, setTweak] = useTweaks(initial);

  // Aplicar al cargar y en cada cambio.
  React.useEffect(() => {
    if (window.DandeleonTweaks) window.DandeleonTweaks.save(t);
  }, [t]);

  const set = (k) => (v) => setTweak(k, v);

  const PALETTES = {
    dandeleon: ["#F4EAD0", "#E2B56D", "#1E1E1E"],
    arena:    ["#FBF6F0", "#C2714F", "#3A2D27"],
    rosa:     ["#FBF4F1", "#C2766A", "#3E2E2B"],
    salvia:   ["#F4F3EB", "#7C8A63", "#2F332B"],
    ciruela:  ["#FAF5F4", "#9A6E86", "#342A30"],
    noche:    ["#1E1E1E", "#E2B56D", "#F4EAD0"]
  };
  const PAL_LABEL = { dandeleon: "Dandeleón", arena: "Arena", rosa: "Rosa", salvia: "Salvia", ciruela: "Ciruela", noche: "Noche" };

  return (
    <TweaksPanel title="Ajustes">
      <TweakSection label="Paleta" />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8, marginBottom: 4 }}>
        {Object.keys(PALETTES).map((key) => {
          const active = t.palette === key;
          return (
            <button key={key} onClick={() => setTweak("palette", key)} title={PAL_LABEL[key]}
              style={{
                display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
                padding: "8px 4px 6px", borderRadius: 10, cursor: "pointer",
                background: active ? "rgba(127,127,127,.14)" : "transparent",
                boxShadow: active ? "inset 0 0 0 1.5px currentColor" : "inset 0 0 0 1px rgba(127,127,127,.2)"
              }}>
              <span style={{ display: "flex", borderRadius: 999, overflow: "hidden", boxShadow: "0 0 0 1px rgba(0,0,0,.08)" }}>
                {PALETTES[key].map((c, i) => (
                  <span key={i} style={{ width: 11, height: 18, background: c }} />
                ))}
              </span>
              <span style={{ fontSize: 10, opacity: active ? 1 : 0.6 }}>{PAL_LABEL[key]}</span>
            </button>
          );
        })}
      </div>

      <TweakSection label="Tipografía" />
      <TweakRadio label="Estilo" value={t.fonts}
        options={[
          { value: "editorial", label: "Editorial" },
          { value: "romantica", label: "Romántica" },
          { value: "moderna", label: "Moderna" }
        ]}
        onChange={set("fonts")} />

      <TweakSection label="Movimiento" />
      <TweakRadio label="Animación" value={t.motion}
        options={[
          { value: "minima", label: "Mínima" },
          { value: "sutil", label: "Sutil" },
          { value: "expresiva", label: "Expresiva" }
        ]}
        onChange={set("motion")} />

      <TweakSection label="Espaciado" />
      <TweakRadio label="Densidad" value={t.density}
        options={[
          { value: "compacta", label: "Compacta" },
          { value: "comoda", label: "Cómoda" },
          { value: "aireada", label: "Aireada" }
        ]}
        onChange={set("density")} />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const el = document.getElementById("tweaks-root");
  if (!el) return;
  ReactDOM.createRoot(el).render(<DandeleonTweaksApp />);
})();