// Tweaks panel — toggles accent color, serif, hero variant.

const { useEffect: useTweakEffect, useState: useTweakState } = React;

const ACCENTS = [
  { id: "terracotta", label: "Terracotta", swatch: "#B84A2C" },
  { id: "oxblood",    label: "Oxblood",    swatch: "#6B1A1A" },
  { id: "forest",     label: "Forest",     swatch: "#1F3A2E" },
  { id: "indigo",     label: "Indigo",     swatch: "#2E3A6B" },
  { id: "ochre",      label: "Ochre",      swatch: "#A8741A" },
  { id: "ink",        label: "Ink",        swatch: "#181512" },
];
const BGS = [
  { id: "bone",      label: "Bone",      swatch: "#FAF7F0" },
  { id: "alabaster", label: "Alabaster", swatch: "#F7F5F0" },
  { id: "paper",     label: "Paper",     swatch: "#FAFAF7" },
  { id: "porcelain", label: "Porcelain", swatch: "#F5F6F3" },
  { id: "cream",     label: "Cream",     swatch: "#F1EADB" },
];
const SERIFS = [
  { id: "editorial",    label: "Editorial (Fraunces)" },
  { id: "bank",         label: "Bank (Literata)" },
  { id: "transitional", label: "Transitional (Source)" },
];
const HEROS = [
  { id: "shift",    label: "On shift (editorial)" },
  { id: "console",  label: "Live console" },
  { id: "centered", label: "Centered headline" },
  { id: "stat",     label: "Stat block" },
];
const TEAMS = [
  { id: "split", label: "Split (live UI mockups)" },
  { id: "bios",  label: "Expandable bios" },
];
const CASE_VARIANTS = [
  { id: "accordion", label: "Accordion (ledger on expand)" },
  { id: "tabs",      label: "Tabs (side rail)" },
];
const INT_VARIANTS = [
  { id: "features", label: "Features grid (default)" },
  { id: "featured", label: "3×3 logo grid" },
  { id: "marquee",  label: "Scrolling marquee" },
  { id: "stack",    label: "Stack diagram" },
];

function Tweaks() {
  const [active, setActive] = useTweakState(false);
  const [accent, setAccent] = useTweakState(() => document.body.dataset.accent || "terracotta");
  const [serif,  setSerif]  = useTweakState(() => document.body.dataset.serif || "editorial");
  const [hero,   setHero]   = useTweakState(() => document.body.dataset.hero || "console");
  const [bg,     setBg]     = useTweakState(() => document.body.dataset.bg || "bone");
  const [cases,  setCases]  = useTweakState(() => document.body.dataset.cases || "accordion");
  const [integrations, setIntegrations] = useTweakState(() => document.body.dataset.integrations || "featured");
  const [team, setTeam] = useTweakState(() => document.body.dataset.team || "split");

  // Announce edit-mode availability (listener first)
  useTweakEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setActive(true);
      if (e.data.type === "__deactivate_edit_mode") setActive(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const apply = (key, val) => {
    document.body.dataset[key] = val;
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: val } }, "*");
  };

  if (!active) return null;

  return (
    <aside className="tweaks" role="complementary" aria-label="Tweaks">
      <div className="tweaks-head">
        <h4>Tweaks</h4>
        <button onClick={() => setActive(false)} aria-label="Close" style={{color:"var(--cream)", fontSize:18, lineHeight:1}}>×</button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-group">
          <div className="tweak-label">Background</div>
          <div className="tweak-opts">
            {BGS.map(b => (
              <button
                key={b.id}
                className={`tweak-opt${bg === b.id ? " active" : ""}`}
                onClick={() => { setBg(b.id); apply("bg", b.id); }}
              >
                <span className="tweak-swatch" style={{background: b.swatch}} />
                {b.label}
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Accent</div>
          <div className="tweak-opts">
            {ACCENTS.map(a => (
              <button
                key={a.id}
                className={`tweak-opt${accent === a.id ? " active" : ""}`}
                onClick={() => { setAccent(a.id); apply("accent", a.id); }}
              >
                <span className="tweak-swatch" style={{background: a.swatch}} />
                {a.label}
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Display serif</div>
          <div className="tweak-opts" style={{gridTemplateColumns:"1fr"}}>
            {SERIFS.map(s => (
              <button
                key={s.id}
                className={`tweak-opt${serif === s.id ? " active" : ""}`}
                onClick={() => { setSerif(s.id); apply("serif", s.id); }}
              >
                {s.label}
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Hero variant</div>
          <div className="tweak-opts" style={{gridTemplateColumns:"1fr"}}>
            {HEROS.map(h => (
              <button
                key={h.id}
                className={`tweak-opt${hero === h.id ? " active" : ""}`}
                onClick={() => { setHero(h.id); apply("hero", h.id); }}
              >
                {h.label}
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Team layout</div>
          <div className="tweak-opts" style={{gridTemplateColumns:"1fr"}}>
            {TEAMS.map(t => (
              <button
                key={t.id}
                className={`tweak-opt${team === t.id ? " active" : ""}`}
                onClick={() => { setTeam(t.id); apply("team", t.id); }}
              >
                {t.label}
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Case studies</div>
          <div className="tweak-opts" style={{gridTemplateColumns:"1fr"}}>
            {CASE_VARIANTS.map(c => (
              <button
                key={c.id}
                className={`tweak-opt${cases === c.id ? " active" : ""}`}
                onClick={() => { setCases(c.id); apply("cases", c.id); }}
              >
                {c.label}
              </button>
            ))}
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Integrations layout</div>
          <div className="tweak-opts" style={{gridTemplateColumns:"1fr"}}>
            {INT_VARIANTS.map(v => (
              <button
                key={v.id}
                className={`tweak-opt${integrations === v.id ? " active" : ""}`}
                onClick={() => { setIntegrations(v.id); apply("integrations", v.id); }}
              >
                {v.label}
              </button>
            ))}
          </div>
        </div>
      </div>
    </aside>
  );
}

window.Tweaks = Tweaks;