// Tweaks app — applies palette/typography/density CSS variables to :root.
// Content stays static HTML; this only mounts the panel and syncs vars.

const PALETTES = {
  "caribe":   { navy:"#0A3D5C", teal:"#2B7A9B", sand:"#E8DCC4", coral:"#D87A4A", paper:"#F4ECD9", paper2:"#EBE0C4", ink:"#0E2433", inkSoft:"#2D4156", display:"#0A3D5C", rule:"rgba(14,36,51,0.18)" },
  "profundo": { navy:"#011627", teal:"#1E5F74", sand:"#F4F1DE", coral:"#E07A5F", paper:"#F1EBDA", paper2:"#E6DDC4", ink:"#0B1A22", inkSoft:"#33454E", display:"#011627", rule:"rgba(11,26,34,0.18)" },
  "arrecife": { navy:"#0D2C40", teal:"#5B9BAE", sand:"#F2EBDD", coral:"#C4A86B", paper:"#F5EFE2", paper2:"#EBE2CE", ink:"#10283A", inkSoft:"#3A4F60", display:"#0D2C40", rule:"rgba(16,40,58,0.18)" },
  "nocturno": { navy:"#06182D", teal:"#3E6E92", sand:"#DCE7F2", coral:"#A8C8E0", paper:"#0A1E36", paper2:"#13294A", ink:"#D6E5F2", inkSoft:"#8CA5BF", display:"#DCE9F2", rule:"rgba(168,200,224,0.18)" },
};

const TYPO = {
  "editorial":     { display:"'Instrument Serif', Georgia, serif",        body:"'Plus Jakarta Sans', system-ui, sans-serif" },
  "clasico":       { display:"'DM Serif Display', Georgia, serif",        body:"'Inter Tight', system-ui, sans-serif" },
  "moderno":       { display:"'Bricolage Grotesque', system-ui, sans-serif", body:"'Plus Jakarta Sans', system-ui, sans-serif" },
  "conservacion":  { display:"'Inter Tight', system-ui, sans-serif",      body:"'Inter Tight', system-ui, sans-serif" },
};

const DENSITY = { "comfortable": 1, "regular": 0.85, "compact": 0.7 };

// Match palettes to swatches (preview only — value stored is name).
const PALETTE_OPTIONS = [
  ["#0A3D5C","#2B7A9B","#E8DCC4","#D87A4A"],
  ["#011627","#1E5F74","#F4F1DE","#E07A5F"],
  ["#0D2C40","#5B9BAE","#F2EBDD","#C4A86B"],
  ["#0A1E36","#06182D","#A8C8E0","#DCE9F2"],
];
const PALETTE_NAMES = ["caribe","profundo","arrecife","nocturno"];

function paletteNameFrom(value) {
  if (typeof value === "string" && PALETTES[value]) return value;
  // value may be a 4-color array from defaults
  if (Array.isArray(value)) {
    for (let i = 0; i < PALETTE_OPTIONS.length; i++) {
      if (PALETTE_OPTIONS[i][0] === value[0]) return PALETTE_NAMES[i];
    }
  }
  return "caribe";
}

function applyVars(paletteName, typoName, densityName) {
  const p = PALETTES[paletteName] || PALETTES.caribe;
  const t = TYPO[typoName] || TYPO.editorial;
  const d = DENSITY[densityName] ?? 1;
  const r = document.documentElement;
  r.style.setProperty("--navy", p.navy);
  r.style.setProperty("--teal", p.teal);
  r.style.setProperty("--sand", p.sand);
  r.style.setProperty("--coral", p.coral);
  r.style.setProperty("--paper", p.paper);
  r.style.setProperty("--paper-2", p.paper2);
  r.style.setProperty("--ink", p.ink);
  r.style.setProperty("--ink-soft", p.inkSoft);
  r.style.setProperty("--display", p.display);
  r.style.setProperty("--rule", p.rule);
  r.style.setProperty("--ff-display", t.display);
  r.style.setProperty("--ff-body", t.body);
  r.style.setProperty("--density", d);
}

function App() {
  const defaults = window.TWEAK_DEFAULTS || {};
  const initial = {
    palette: paletteNameFrom(defaults.palette),
    typography: defaults.typography || "editorial",
    density: defaults.density || "comfortable",
  };
  const [t, setTweak] = useTweaks(initial);

  React.useEffect(() => {
    applyVars(t.palette, t.typography, t.density);
  }, [t.palette, t.typography, t.density]);

  // Map palette name <-> swatch array for the color control
  const currentSwatch = PALETTE_OPTIONS[PALETTE_NAMES.indexOf(t.palette)] || PALETTE_OPTIONS[0];
  const onPalette = (v) => {
    // v will be the array of hexes; resolve to name
    const idx = PALETTE_OPTIONS.findIndex(opt => opt[0] === v[0]);
    setTweak("palette", PALETTE_NAMES[idx] >= 0 ? PALETTE_NAMES[idx] : "caribe");
  };

  return (
    <TweaksPanel>
      <TweakSection label="Paleta" />
      <TweakColor
        label="Colores"
        value={currentSwatch}
        options={PALETTE_OPTIONS}
        onChange={(v) => {
          const idx = PALETTE_OPTIONS.findIndex(opt => opt[0] === v[0]);
          setTweak("palette", idx >= 0 ? PALETTE_NAMES[idx] : "caribe");
        }}
      />

      <TweakSection label="Tipografía" />
      <TweakSelect
        label="Familia"
        value={t.typography}
        options={[
          { value: "editorial",    label: "Editorial — Instrument Serif" },
          { value: "clasico",      label: "Clásico — DM Serif" },
          { value: "moderno",      label: "Moderno — Bricolage" },
          { value: "conservacion", label: "Conservación — Inter Tight" },
        ]}
        onChange={(v) => setTweak("typography", v)}
      />

      <TweakSection label="Densidad" />
      <TweakRadio
        label="Espaciado"
        value={t.density}
        options={[
          { value: "compact",     label: "Compacto" },
          { value: "regular",     label: "Regular" },
          { value: "comfortable", label: "Amplio" },
        ]}
        onChange={(v) => setTweak("density", v)}
      />
    </TweaksPanel>
  );
}

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