/* ============================================================
   TWEAKS PANEL
   ============================================================ */

const PALETTES = [
  { id: 'bangor',   label: 'Bangor',   colors: ['#0099FF', '#FFA201', '#F3F3F3'] },
  { id: 'harbour',  label: 'Harbour',  colors: ['#06243E', '#08A8F8', '#F1F4F7'] },
  { id: 'sky',      label: 'Sky',      colors: ['#08A8F8', '#E26A5C', '#FDFEFF'] },
  { id: 'heritage', label: 'Heritage', colors: ['#17375E', '#C98A2B', '#F4EEDF'] },
  { id: 'garden',   label: 'Garden',   colors: ['#2F4A3A', '#C06A3D', '#FDFBF5'] },
  { id: 'stained',  label: 'Stained',  colors: ['#5B2A86', '#D96E3F', '#FFF8EC'] },
  { id: 'slate',    label: 'Slate',    colors: ['#8A3A2E', '#1F3A5F', '#F3F1EB'] },
];

const FONT_PAIRS = [
  { id: 'bethany', label: 'Bethany (Style Guide)' },
  { id: 'cormorant-inter', label: 'Cormorant + Inter' },
  { id: 'fraunces-dm', label: 'Fraunces + DM Sans' },
  { id: 'playfair-source', label: 'Playfair + Source' },
];

const HERO_MODES = [
  { id: 'rotating', label: 'Rotating' },
  { id: 'bigtype', label: 'Big Type' },
  { id: 'photo', label: 'Photo' },
];

const NAV_MODES = [
  { id: 'horizontal', label: 'Horizontal' },
  { id: 'mega', label: 'Mega' },
  { id: 'sidebar', label: 'Sidebar' },
];

function TweaksPanel({ tweaks, setTweaks }) {
  const [open, setOpen] = useState(true);
  const apply = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    // persist to disk
    window.parent?.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <strong>Tweaks</strong>
        <button onClick={() => setOpen(!open)} className="chip" style={{ padding: '4px 10px' }}>
          {open ? '− Hide' : '+ Show'}
        </button>
      </div>
      {open && (
        <div className="tweaks-body">
          {/* Palette */}
          <div className="tweak-group">
            <label>Palette</label>
            <div className="palette-swatches">
              {PALETTES.map(p => (
                <button key={p.id}
                  title={p.label}
                  className={`tweak-opt ${tweaks.palette === p.id ? 'active' : ''}`}
                  onClick={() => apply('palette', p.id)}>
                  <div className="swatch-set">
                    {p.colors.map((c,i) => <span key={i} style={{ background: c }}/>)}
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* Fonts */}
          <div className="tweak-group">
            <label>Font pairing</label>
            <div className="tweak-options" style={{ flexDirection: 'column' }}>
              {FONT_PAIRS.map(f => (
                <button key={f.id}
                  className={`tweak-opt ${tweaks.fonts === f.id ? 'active' : ''}`}
                  onClick={() => apply('fonts', f.id)}
                  style={{ width: '100%' }}>
                  {f.label}
                </button>
              ))}
            </div>
          </div>

          {/* Hero variant */}
          <div className="tweak-group">
            <label>Homepage hero</label>
            <div className="tweak-options">
              {HERO_MODES.map(h => (
                <button key={h.id}
                  className={`tweak-opt ${tweaks.hero === h.id ? 'active' : ''}`}
                  onClick={() => apply('hero', h.id)}>
                  {h.label}
                </button>
              ))}
            </div>
          </div>

          {/* Nav */}
          <div className="tweak-group">
            <label>Nav style</label>
            <div className="tweak-options">
              {NAV_MODES.map(n => (
                <button key={n.id}
                  className={`tweak-opt ${tweaks.nav === n.id ? 'active' : ''}`}
                  onClick={() => apply('nav', n.id)}>
                  {n.label}
                </button>
              ))}
            </div>
          </div>

          {/* Density */}
          <div className="tweak-group">
            <label>Density</label>
            <div className="tweak-options">
              {['spacious','compact'].map(d => (
                <button key={d}
                  className={`tweak-opt ${tweaks.density === d ? 'active' : ''}`}
                  onClick={() => apply('density', d)}
                  style={{ textTransform: 'capitalize' }}>
                  {d}
                </button>
              ))}
            </div>
          </div>

          {/* Dark mode */}
          <div className="tweak-group">
            <label>Theme</label>
            <button
              className={`tweak-toggle ${tweaks.dark ? 'on' : ''}`}
              onClick={() => apply('dark', !tweaks.dark)}
              style={{ width: '100%', cursor: 'pointer' }}>
              <span>Dark mode</span>
              <span className="tt-state"/>
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { TweaksPanel });