// Tweaks panel — lets user toggle density, palette, view

const { useState: useStateTweaks, useEffect: useEffectTweaks } = React;

const TweaksPanel = ({ tweaks, setTweaks, onClose }) => {
  return (
    <div style={{
      position: 'fixed', bottom: 20, right: 20, width: 280,
      background: 'var(--paper)', border: '1px solid var(--line)',
      borderRadius: 12, zIndex: 60,
      boxShadow: '0 12px 40px rgba(0,0,0,0.14)',
      overflow: 'hidden',
    }}>
      <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center' }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 650, letterSpacing: -0.2 }}>Tweaks</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginTop: 1 }}>Speel met het ontwerp</div>
        </div>
        <button onClick={onClose} style={{
          width: 24, height: 24, border: 'none', background: 'transparent',
          borderRadius: 5, cursor: 'pointer', color: 'var(--ink-3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><window.Icon name="x" size={14} /></button>
      </div>
      <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <TweakRow label="Dichtheid">
          <Seg value={tweaks.density} setValue={v => setTweaks({...tweaks, density: v})} options={[['comfy','Ruim'], ['compact','Compact']]} />
        </TweakRow>
        <TweakRow label="Kleur schema">
          <Seg value={tweaks.palette} setValue={v => setTweaks({...tweaks, palette: v})} options={[['warm','Warm'], ['neutraal','Neutraal'], ['koel','Koel']]} />
        </TweakRow>
        <TweakRow label="Accent kleur">
          <div style={{ display: 'flex', gap: 6 }}>
            {[
              ['tomaat', 'oklch(0.60 0.18 30)'],
              ['mosterd','oklch(0.68 0.14 70)'],
              ['kruid',  'oklch(0.55 0.14 150)'],
              ['aubergine','oklch(0.50 0.14 285)'],
            ].map(([id, col]) => (
              <button key={id} onClick={() => setTweaks({...tweaks, accent: id})} style={{
                width: 28, height: 28, borderRadius: 8, border: tweaks.accent === id ? `2px solid var(--ink-1)` : '1px solid var(--line)',
                background: col, cursor: 'pointer', padding: 0,
              }} title={id} />
            ))}
          </div>
        </TweakRow>
        <TweakRow label="Voortgangsbalkjes op kaart">
          <Seg value={tweaks.showSauzenOnCard ? 'aan' : 'uit'} setValue={v => setTweaks({...tweaks, showSauzenOnCard: v === 'aan'})} options={[['aan','Aan'], ['uit','Uit']]} />
        </TweakRow>
      </div>
    </div>
  );
};

const TweakRow = ({ label, children }) => (
  <div>
    <div style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--ink-3)', letterSpacing: 0.3, marginBottom: 5 }}>{label.toUpperCase()}</div>
    {children}
  </div>
);

const Seg = ({ value, setValue, options }) => (
  <div style={{ display: 'flex', background: 'var(--surface-1)', borderRadius: 7, padding: 2 }}>
    {options.map(([id, label]) => (
      <button key={id} onClick={() => setValue(id)} style={{
        flex: 1, padding: '6px 8px', fontSize: 11.5, fontWeight: 600,
        background: value === id ? 'var(--paper)' : 'transparent',
        color: value === id ? 'var(--ink-1)' : 'var(--ink-3)',
        border: 'none', borderRadius: 5, cursor: 'pointer',
        boxShadow: value === id ? '0 1px 2px rgba(0,0,0,0.05)' : 'none',
      }}>{label}</button>
    ))}
  </div>
);

window.TweaksPanel = TweaksPanel;