// ============= TWEAKS PANEL V2 =============
const TweaksPanel = ({ state, setState, onClose }) => {
  const set = (k, v) => {
    setState((s) => {
      const next = { ...s, [k]: v };
      try {
        window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
      } catch {}
      return next;
    });
  };

  const Row = ({ label, children }) => (
    <div style={{ display:'flex', flexDirection:'column', gap: 8, marginBottom: 18 }}>
      <div style={{ fontSize: 11, fontFamily:'var(--font-mono)', letterSpacing:'.14em', textTransform:'uppercase', color:'var(--ink-dim)' }}>{label}</div>
      {children}
    </div>
  );

  const OptBtn = ({ active, onClick, children, swatchColors }) => (
    <button onClick={onClick} style={{
      padding: '8px 14px', borderRadius: 10,
      border: active ? '2px solid var(--orange)' : '1.5px solid var(--line)',
      background: active ? 'color-mix(in oklab, var(--orange) 10%, white)' : 'white',
      color: active ? 'var(--orange)' : 'var(--ink-dim)',
      fontSize: 12.5, fontWeight: 600,
      display:'inline-flex', gap: 8, alignItems:'center',
    }}>
      {swatchColors && (
        <span style={{ display:'inline-flex', gap: 2 }}>
          {swatchColors.map((c, i) => <span key={i} style={{ width: 10, height: 10, borderRadius:'50%', background: c, border: '1px solid rgba(0,0,0,.08)' }}/>)}
        </span>
      )}
      {children}
    </button>
  );

  return (
    <div style={{
      position: 'fixed', right: 20, bottom: 100, zIndex: 100,
      width: 320,
      background: '#fff',
      border: '1.5px solid var(--line)',
      borderRadius: 18,
      padding: 22,
      boxShadow: '0 30px 60px -20px rgba(0,0,0,.22)',
      fontFamily: 'var(--font-body)',
      color: 'var(--ink)',
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 18 }}>
        <div style={{ fontFamily:'var(--font-display)', fontSize: 24, fontStyle:'italic' }}>Tweaks</div>
        <button onClick={onClose} style={{ color:'var(--ink-dim)', fontSize: 22, width: 28, height: 28 }}>×</button>
      </div>

      <Row label="Paleta">
        <div style={{ display:'flex', gap: 6, flexWrap:'wrap' }}>
          <OptBtn active={state.palette === 'default'} onClick={() => set('palette', 'default')} swatchColors={['#2B7FFF','#FF6B35','#FFD23F']}>Crayola</OptBtn>
          <OptBtn active={state.palette === 'pastel'} onClick={() => set('palette', 'pastel')} swatchColors={['#FF7AC2','#A78BFA','#5FCFFF']}>Pastel</OptBtn>
          <OptBtn active={state.palette === 'jungla'} onClick={() => set('palette', 'jungla')} swatchColors={['#43A047','#FF7043','#FFB300']}>Jungla</OptBtn>
        </div>
      </Row>

      <Row label="Densidad">
        <div style={{ display:'flex', gap: 6 }}>
          <OptBtn active={state.density === 'comfy'} onClick={() => set('density', 'comfy')}>Espacioso</OptBtn>
          <OptBtn active={state.density === 'compact'} onClick={() => set('density', 'compact')}>Compacto</OptBtn>
        </div>
      </Row>

      <Row label="Countdown">
        <div style={{ display:'flex', gap: 6 }}>
          <OptBtn active={state.countdown} onClick={() => set('countdown', true)}>Activo</OptBtn>
          <OptBtn active={!state.countdown} onClick={() => set('countdown', false)}>Oculto</OptBtn>
        </div>
      </Row>

      <Row label="Barra fija inferior">
        <div style={{ display:'flex', gap: 6 }}>
          <OptBtn active={state.sticky} onClick={() => set('sticky', true)}>Activa</OptBtn>
          <OptBtn active={!state.sticky} onClick={() => set('sticky', false)}>Oculta</OptBtn>
        </div>
      </Row>

      <div style={{ paddingTop: 14, borderTop:'1px solid var(--line)', fontSize: 11, color:'var(--ink-dim)', lineHeight: 1.5 }}>
        Cambios se guardan automáticamente.
      </div>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;