// Tweaks panel — palette + display font + hero variant
const { useState: useTState, useEffect: useTEffect } = React;

function TweaksPanel({ state, setState, palettes }) {
  const [active, setActive] = useTState(false);
  useTEffect(() => {
    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);
  }, []);

  if (!active) return null;

  const update = (patch) => {
    setState((s) => ({ ...s, ...patch }));
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
  };

  return (
    <div className="tiu-tweaks">
      <div className="tiu-tweaks-head">
        <strong>Tweaks</strong>
        <button className="tiu-hit" onClick={() => setActive(false)} aria-label="Close">×</button>
      </div>

      <label className="tiu-tweak-row">
        <span>Palette</span>
        <div className="tiu-swatch-row">
          {Object.entries(palettes).map(([k, p]) => (
            <button key={k} onClick={() => update({ palette: k })} aria-label={p.label}
              className={`tiu-swatch-btn tiu-hit ${state.palette === k ? "is-on" : ""}`}>
              <span style={{ background: p.blush }} />
              <span style={{ background: p.sky }} />
              <span style={{ background: p.sage }} />
              <span style={{ background: p.butter }} />
              <em>{p.label}</em>
            </button>
          ))}
        </div>
      </label>

      <label className="tiu-tweak-row">
        <span>Display font</span>
        <select value={state.displayFont} onChange={(e) => update({ displayFont: e.target.value })}>
          <option value="Sacramento">Sacramento (selected)</option>
          <option value="Caveat">Caveat</option>
          <option value="Shadows Into Light">Shadows Into Light</option>
          <option value="Gloock">Gloock</option>
          <option value="DM Serif Display">DM Serif Display</option>
        </select>
      </label>

      <label className="tiu-tweak-row">
        <span>Body font</span>
        <select value={state.bodyFont} onChange={(e) => update({ bodyFont: e.target.value })}>
          <optgroup label="Editorial serifs">
            <option value="Fraunces">Fraunces — warm italic serif</option>
            <option value="Playfair Display">Playfair Display — high-contrast</option>
            <option value="Cormorant Garamond">Cormorant Garamond — delicate</option>
            <option value="Prata">Prata — classic</option>
          </optgroup>
          <optgroup label="Display sans">
            <option value="Bricolage Grotesque">Bricolage Grotesque — playful modern</option>
            <option value="Schibsted Grotesk">Schibsted Grotesk — editorial sans</option>
            <option value="Instrument Sans">Instrument Sans — crisp neutral</option>
          </optgroup>
          <optgroup label="Rounded + friendly">
            <option value="Nunito">Nunito</option>
            <option value="Quicksand">Quicksand</option>
          </optgroup>
          <optgroup label="Neutral sans">
            <option value="DM Sans">DM Sans (current)</option>
            <option value="Manrope">Manrope</option>
            <option value="Work Sans">Work Sans</option>
          </optgroup>
        </select>
      </label>

      <label className="tiu-tweak-row">
        <span>Hero</span>
        <div className="tiu-seg">
          {["collage","photo","type"].map(v => (
            <button key={v} onClick={() => update({ hero: v })}
              className={`tiu-hit ${state.hero === v ? "is-on" : ""}`}>{v}</button>
          ))}
        </div>
      </label>

      <label className="tiu-tweak-row">
        <span>Cursor</span>
        <label className="tiu-check">
          <input type="checkbox" checked={state.cursor !== false} onChange={(e) => update({ cursor: e.target.checked })} />
          <span>Blob cursor</span>
        </label>
      </label>

      <p className="tiu-tweaks-foot">Toggle Tweaks in the toolbar to hide.</p>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;