// Tweaks panel — in-design controls
function Tweaks({ tweaks, setTweaks }) {
  const [active, setActive] = useState(false);
  const [open, setOpen] = useState(true);

  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || typeof d !== 'object') return;
      if (d.type === '__activate_edit_mode')   setActive(true);
      if (d.type === '__deactivate_edit_mode') setActive(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persist = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  if (!active) return null;

  const palettes = [
    { k: 'hanyang', name: 'Hanyang', primary: '#003876', accent: '#cf9417' },
    { k: 'midnight', name: 'Midnight', primary: '#0b1733', accent: '#e3b135' },
    { k: 'royal',   name: 'Royal',   primary: '#283593', accent: '#d4af37' },
    { k: 'forest',  name: 'Forest',  primary: '#1f4f3f', accent: '#c59b3a' },
  ];

  return (
    <div className={cx(
      'fixed z-50 bottom-4 right-4 w-[300px] rounded-2xl border border-ink-200 bg-white shadow-card-lg transition-all',
    )}>
      <div className="flex items-center justify-between px-4 h-11 border-b border-ink-100">
        <div className="flex items-center gap-2">
          <IconSpark size={14} className="text-gold-600"/>
          <div className="text-[12px] font-extrabold uppercase tracking-[0.14em] text-ink-900">Tweaks</div>
        </div>
        <button onClick={()=>setOpen(o=>!o)} className="text-ink-400 hover:text-ink-700">
          <IconChevron size={14} className={cx('transition-transform', open?'rotate-90':'')}/>
        </button>
      </div>
      {open && (
        <div className="p-4 space-y-4">
          <div>
            <div className="text-[10.5px] font-bold uppercase tracking-wider text-ink-400 mb-2">Hero style</div>
            <div className="grid grid-cols-3 gap-1">
              {['clean','grid','gradient'].map(s=>(
                <button key={s} onClick={()=>persist({heroStyle:s})}
                  className={cx('h-8 rounded-md text-[11px] font-bold border transition',
                    tweaks.heroStyle===s
                      ? 'border-hanyang-600 bg-hanyang-50 text-hanyang-700'
                      : 'border-ink-200 text-ink-500 hover:border-ink-300')}>{s}</button>
              ))}
            </div>
          </div>

          <div>
            <div className="text-[10.5px] font-bold uppercase tracking-wider text-ink-400 mb-2">Palette</div>
            <div className="grid grid-cols-2 gap-1.5">
              {palettes.map(p=>(
                <button key={p.k} onClick={()=>persist({palette:p.k, primary:p.primary, accent:p.accent})}
                  className={cx('flex items-center gap-2 h-9 px-2 rounded-md border text-[11px] font-bold',
                    tweaks.palette===p.k ? 'border-hanyang-600 bg-hanyang-50 text-hanyang-700' : 'border-ink-200 text-ink-600')}>
                  <span className="flex -space-x-1">
                    <span className="h-4 w-4 rounded-full border border-white" style={{background:p.primary}}/>
                    <span className="h-4 w-4 rounded-full border border-white" style={{background:p.accent}}/>
                  </span>
                  {p.name}
                </button>
              ))}
            </div>
          </div>

          <div>
            <div className="text-[10.5px] font-bold uppercase tracking-wider text-ink-400 mb-2 flex items-center justify-between">
              <span>Density</span>
              <span className="tabular-nums text-ink-700">{tweaks.density}×</span>
            </div>
            <input type="range" className="tw w-full" min="0.9" max="1.15" step="0.01"
              value={tweaks.density}
              onChange={e=>persist({density: parseFloat(e.target.value)})}/>
          </div>

          <div>
            <div className="text-[10.5px] font-bold uppercase tracking-wider text-ink-400 mb-2">Show stat bar</div>
            <div className="flex gap-1">
              {[{k:true,l:'On'},{k:false,l:'Off'}].map(o=>(
                <button key={String(o.k)} onClick={()=>persist({showStats:o.k})}
                  className={cx('flex-1 h-8 rounded-md text-[11px] font-bold border',
                    tweaks.showStats===o.k
                      ? 'border-hanyang-600 bg-hanyang-50 text-hanyang-700'
                      : 'border-ink-200 text-ink-500')}>{o.l}</button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Tweaks });