// Tweaks panel — controls accent / theme / language / density
function Tweaks({ state, setState, onClose }) {
  const set = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    } catch (e) {}
  };

  const accents = [
    { id: 'teal',   hex: '#14b8a6', label: 'Teal' },
    { id: 'amber',  hex: '#f59e0b', label: 'Amber' },
    { id: 'orange', hex: '#ff6b35', label: 'AU Sun' },
  ];

  return (
    <div className="fixed bottom-6 right-6 z-50 w-[300px] border hairline rounded-[3px] shadow-2xl"
         style={{ background: 'var(--panel)', color: 'var(--fg)' }}>
      <div className="flex items-center justify-between px-4 h-10 border-b hairline">
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--accent)' }} />
          <span className="mono text-[10px] uppercase tracking-[0.18em]"
                style={{ color: 'var(--fg-dim)' }}>Tweaks</span>
        </div>
        <button onClick={onClose}
                className="mono text-[11px]"
                style={{ color: 'var(--fg-mute)' }}>ESC</button>
      </div>

      <div className="p-4 space-y-5">
        <Row label="Accent">
          <div className="flex gap-2">
            {accents.map(a => (
              <button key={a.id} onClick={() => set('accent', a.id)}
                      className="flex-1 h-9 flex items-center justify-center border hairline rounded-[2px] gap-2 text-[11px]"
                      style={{
                        background: state.accent === a.id ? 'color-mix(in oklab, var(--fg) 8%, transparent)' : 'transparent',
                        borderColor: state.accent === a.id ? 'var(--fg)' : 'var(--line)',
                      }}>
                <span className="w-3 h-3 rounded-full" style={{ background: a.hex }} />
                <span className="mono" style={{ color: 'var(--fg-dim)' }}>{a.label}</span>
              </button>
            ))}
          </div>
        </Row>

        <Row label="Theme">
          <Seg
            options={[{id:'dark',label:'Dark'},{id:'light',label:'Light'}]}
            value={state.theme}
            onChange={v => set('theme', v)} />
        </Row>

        <Row label="Language">
          <Seg
            options={[{id:'en',label:'EN'},{id:'zh',label:'中文'}]}
            value={state.lang}
            onChange={v => set('lang', v)} />
        </Row>

        <Row label="Density">
          <Seg
            options={[{id:'comfortable',label:'Comfortable'},{id:'compact',label:'Compact'}]}
            value={state.density}
            onChange={v => set('density', v)} />
        </Row>
      </div>

      <div className="px-4 py-3 border-t hairline mono text-[10px]"
           style={{ color: 'var(--fg-mute)' }}>
        changes persist via host · toolbar toggle
      </div>
    </div>
  );
}

function Row({ label, children }) {
  return (
    <div>
      <div className="mono text-[10px] uppercase tracking-[0.18em] mb-2"
           style={{ color: 'var(--fg-mute)' }}>{label}</div>
      {children}
    </div>
  );
}

function Seg({ options, value, onChange }) {
  return (
    <div className="flex border hairline rounded-[2px] overflow-hidden">
      {options.map(o => (
        <button key={o.id} onClick={() => onChange(o.id)}
                className="flex-1 h-9 text-[12px]"
                style={{
                  background: value === o.id ? 'var(--fg)' : 'transparent',
                  color: value === o.id ? 'var(--bg)' : 'var(--fg-dim)',
                }}>
          {o.label}
        </button>
      ))}
    </div>
  );
}

window.Tweaks = Tweaks;