// ════════════════════════════════════════════════════════════════
// TweaksPanel — настройки прототипа (палитра / шрифт / плотность)
// Использует протокол __activate_edit_mode / __deactivate_edit_mode
// ════════════════════════════════════════════════════════════════
const { useState: useStateTw, useEffect: useEffectTw } = React;

function TweaksPanel({ tweaks, setTweak, onClose }) {
  const users = window.SDH_ADMIN ? window.SDH_ADMIN.users : [];
  return (
    <div className="sdh-fade" style={{
      position: 'fixed', right: 16, bottom: 16, width: 320, zIndex: 90,
      background: 'var(--surface-elevated)',
      border: '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-xl)',
      boxShadow: 'var(--shadow-lg)',
      padding: 'var(--space-4)',
      maxHeight: 'calc(100vh - 32px)', overflowY: 'auto',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-3)' }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, fontWeight: 600,
            color: 'var(--text-primary)',
          }}>Tweaks</div>
          <div className="sdh-mono-label">эксперименты с дизайном</div>
        </div>
        <button className="sdh-btn sdh-btn--ghost" onClick={onClose} style={{ padding: 6 }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M3 3l6 6m0-6l-6 6" strokeLinecap="round" />
          </svg>
        </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
        {users.length > 0 && (
          <TwSection title="войти как (демо)">
            <select value={tweaks.actAsUserId || 1}
              onChange={e => setTweak('actAsUserId', Number(e.target.value))}
              style={{
                width: '100%',
                background: 'var(--surface-elevated)',
                border: '1px solid var(--border-default)',
                borderRadius: 'var(--radius-md)',
                padding: '7px 28px 7px 12px',
                fontSize: 13, color: 'var(--text-primary)',
                appearance: 'none',
                backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%238A7F70' d='M1 3l4 4 4-4'/></svg>")`,
                backgroundRepeat: 'no-repeat', backgroundPosition: 'right 10px center',
              }}>
              {users.filter(u => u.status === 'active').map(u => (
                <option key={u.id} value={u.id}>
                  {u.role} · {u.name}
                </option>
              ))}
            </select>
            <div style={{ marginTop: 6, fontSize: 11, color: 'var(--text-tertiary)', lineHeight: 1.45 }}>
              Переключите роль чтобы увидеть как выглядит интерфейс для каждой из 5 ролей. Маршруты под доступ скрываются автоматически.
            </div>
          </TwSection>
        )}

        <TwSection title="плотность данных">
          <TwRadio
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[
              { id: 'cozy',    label: 'уютно' },
              { id: 'compact', label: 'плотно' },
            ]}
          />
        </TwSection>

        <TwSection title="акцент-палитра">
          <div style={{ display: 'flex', gap: 8 }}>
            {[
              { id: 'bronze',  cssVar: 'var(--brand-bronze)' },
              { id: 'emerald', cssVar: 'var(--hue-emerald)' },
              { id: 'rose',    cssVar: 'var(--hue-rose)' },
            ].map(c => (
              <button key={c.id}
                onClick={() => setTweak('accent', c.id)}
                style={{
                  flex: 1, height: 40, borderRadius: 'var(--radius-md)',
                  border: tweaks.accent === c.id ? '2px solid var(--brand-bronze-deep)' : '1px solid var(--border-default)',
                  background: c.cssVar,
                  cursor: 'pointer',
                }} aria-label={c.id} title={c.id} />
            ))}
          </div>
        </TwSection>

        <TwSection title="ширина sparkline в шапке">
          <input type="range" min="24" max="72" step="2"
            value={tweaks.sparkW}
            onChange={e => setTweak('sparkW', Number(e.target.value))}
            style={{ width: '100%', accentColor: 'var(--brand-bronze)' }} />
          <div className="sdh-mono-label" style={{ textAlign: 'right' }}>{tweaks.sparkW}px</div>
        </TwSection>

        <TwSection title="фокус-режим">
          <TwRadio
            value={tweaks.focus ? 'on' : 'off'}
            onChange={v => setTweak('focus', v === 'on')}
            options={[
              { id: 'off', label: 'выкл' },
              { id: 'on',  label: 'выделять ★' },
            ]}
          />
        </TwSection>
      </div>
    </div>
  );
}

function TwSection({ title, children }) {
  return (
    <div>
      <div className="sdh-mono-label" style={{ marginBottom: 6 }}>{title}</div>
      {children}
    </div>
  );
}

function TwRadio({ value, onChange, options }) {
  return (
    <div style={{
      display: 'inline-flex', padding: 2, background: 'var(--surface-sunken)',
      border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)',
    }}>
      {options.map(o => (
        <button key={o.id}
          onClick={() => onChange(o.id)}
          style={{
            padding: '5px 12px', fontSize: 12, borderRadius: 6, border: 'none',
            background: value === o.id ? 'var(--surface-elevated)' : 'transparent',
            color: value === o.id ? 'var(--text-primary)' : 'var(--text-secondary)',
            fontWeight: value === o.id ? 600 : 500,
            boxShadow: value === o.id ? 'var(--shadow-xs)' : 'none',
            cursor: 'pointer',
          }}>{o.label}</button>
      ))}
    </div>
  );
}

window.TweaksPanel = TweaksPanel;