// Tweaks panel — live-editable design knobs
const { useState: useStateTw, useEffect: useEffectTw } = React;

const ACCENTS = [
  { name: "Gold",    val: "#c9a23b" },
  { name: "Deep",    val: "#1f3a5f" },
  { name: "Ochre",   val: "#b35a2a" },
  { name: "Graphite",val: "#3a3d42" },
];

const TYPE_PAIRS = [
  { name: "Archivo",    serif: '"Archivo"', sans: '"Archivo"' },
  { name: "Inter",      serif: '"Inter"', sans: '"Inter"' },
  { name: "Instrument", serif: '"Instrument Serif"', sans: '"Instrument Sans"' },
];

function loadFonts(pair) {
  const id = "dynfont-" + pair.name;
  if (document.getElementById(id)) return;
  const link = document.createElement("link");
  link.id = id;
  link.rel = "stylesheet";
  const families = {
    "Archivo": "Archivo:wght@400;500;600;700;800;900",
    "Inter": "Inter:wght@400;500;600;700;800;900",
    "Instrument": "Instrument+Serif:ital@0;1&family=Instrument+Sans:wght@400;500;600",
  }[pair.name];
  link.href = `https://fonts.googleapis.com/css2?family=${families}&display=swap`;
  document.head.appendChild(link);
}

function TweaksPanel({ visible, tweaks, setTweaks }) {
  if (!visible) return null;
  const apply = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
  };
  return (
    <div className="tweaks-panel">
      <h4><span>Tweaks</span><span style={{opacity: 0.5}}>⌄</span></h4>

      <div className="row">
        <label>Accent</label>
        <div className="swatches">
          {ACCENTS.map(a => (
            <button key={a.val}
              className={`sw ${tweaks.accent === a.val ? "on" : ""}`}
              style={{ background: a.val }}
              onClick={() => apply({ accent: a.val })}
              title={a.name}
            />
          ))}
        </div>
      </div>

      <div className="row">
        <label>Typography</label>
        <div className="seg">
          {TYPE_PAIRS.map(p => (
            <button key={p.name}
              className={tweaks.typePair === p.name ? "on" : ""}
              onClick={() => apply({ typePair: p.name })}
            >{p.name}</button>
          ))}
        </div>
      </div>

      <div className="row">
        <label>Mode</label>
        <div className="seg">
          <button className={!tweaks.dark ? "on" : ""} onClick={() => apply({ dark: false })}>Light</button>
          <button className={tweaks.dark ? "on" : ""}  onClick={() => apply({ dark: true })}>Dark</button>
        </div>
      </div>

      <div className="row">
        <label>Hero</label>
        <div className="seg">
          <button className={tweaks.heroHue === 34 ? "on" : ""} onClick={() => apply({ heroHue: 34 })}>Warm</button>
          <button className={tweaks.heroHue === 210 ? "on" : ""} onClick={() => apply({ heroHue: 210 })}>Cool</button>
          <button className={tweaks.heroHue === 260 ? "on" : ""} onClick={() => apply({ heroHue: 260 })}>Indigo</button>
        </div>
      </div>
    </div>
  );
}

function applyTweaks(tweaks) {
  const root = document.documentElement;
  root.style.setProperty("--accent", tweaks.accent);
  const pair = TYPE_PAIRS.find(p => p.name === tweaks.typePair) || TYPE_PAIRS[0];
  loadFonts(pair);
  root.style.setProperty("--serif", `${pair.serif}, ui-sans-serif, system-ui, sans-serif`);
  root.style.setProperty("--sans",  `${pair.sans}, ui-sans-serif, system-ui, sans-serif`);
  root.style.setProperty("--display",  `${pair.sans}, ui-sans-serif, system-ui, sans-serif`);
  document.body.classList.toggle("dark", !!tweaks.dark);
}

window.TweaksPanel = TweaksPanel;
window.applyTweaks = applyTweaks;