// settings-drawer.jsx — In-app settings drawer (replaces external Tweaks panel for production UX)

const ACCENT_SWATCHES = [
  { value: 'indigo',  color: 'oklch(58% 0.13 268)' },
  { value: 'emerald', color: 'oklch(58% 0.13 158)' },
  { value: 'rose',    color: 'oklch(62% 0.16 18)'  },
  { value: 'amber',   color: 'oklch(68% 0.13 70)'  },
  { value: 'violet',  color: 'oklch(58% 0.16 305)' },
  { value: 'slate',   color: 'oklch(48% 0.02 260)' },
];

function SettingsDrawer({ open, onClose, settings, setSetting, t }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;
  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="drawer" role="dialog" aria-label={t.settings}>
        <div className="drawer-header">
          <div className="drawer-title">
            <Icon name="tweaks" size={16} />
            {t.settings}
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
        </div>
        <div className="drawer-body">

          <div className="setting-group">
            <div className="setting-group-title">{t.tw_theme}</div>
            <div className="setting-row">
              <div className="setting-label">{t.tw_dark}</div>
              <button className="setting-toggle" data-on={settings.dark ? '1' : '0'}
                      onClick={() => setSetting('dark', !settings.dark)} role="switch"
                      aria-checked={!!settings.dark}><i /></button>
            </div>
            <div className="setting-row stacked">
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div className="setting-label">{t.tw_accent}</div>
                <span className="setting-value">{t['accent_' + settings.accent]}</span>
              </div>
              <div className="setting-swatches">
                {ACCENT_SWATCHES.map(s => (
                  <button key={s.value}
                          className={`swatch ${settings.accent === s.value ? 'selected' : ''}`}
                          style={{ background: s.color }}
                          onClick={() => setSetting('accent', s.value)}
                          aria-label={t['accent_' + s.value]} />
                ))}
              </div>
            </div>
          </div>

          <div className="setting-group">
            <div className="setting-group-title">{t.tw_typography}</div>
            <div className="setting-row stacked">
              <div className="setting-label">{t.tw_font_family}</div>
              <select className="setting-input" style={{ maxWidth: 'none' }}
                      value={settings.fontPreset}
                      onChange={(e) => setSetting('fontPreset', e.target.value)}>
                <option value="serif">{t.font_serif}</option>
                <option value="sans">{t.font_sans}</option>
                <option value="lora">{t.font_lora}</option>
                <option value="plex">{t.font_plex}</option>
                <option value="cn_serif">{t.font_cn_serif}</option>
                <option value="cn_sans">{t.font_cn_sans}</option>
              </select>
            </div>
            <div className="setting-row">
              <div className="setting-label">
                {t.tw_font_size}
                <span className="setting-label-sub">{settings.proseFontSize}px</span>
              </div>
              <input type="range" className="setting-slider"
                     min={13} max={22} step={1} value={settings.proseFontSize}
                     onChange={(e) => setSetting('proseFontSize', Number(e.target.value))} />
            </div>
            <div className="setting-row">
              <div className="setting-label">
                {t.tw_editor_size}
                <span className="setting-label-sub">{settings.editorFontSize}px</span>
              </div>
              <input type="range" className="setting-slider"
                     min={11} max={18} step={1} value={settings.editorFontSize}
                     onChange={(e) => setSetting('editorFontSize', Number(e.target.value))} />
            </div>
            <div className="setting-row">
              <div className="setting-label">
                {t.tw_line_height}
                <span className="setting-label-sub">{settings.lineHeight.toFixed(2)}</span>
              </div>
              <input type="range" className="setting-slider"
                     min={1.4} max={2.1} step={0.05} value={settings.lineHeight}
                     onChange={(e) => setSetting('lineHeight', Number(e.target.value))} />
            </div>
          </div>

          <div className="setting-group">
            <div className="setting-group-title">{t.tw_layout}</div>
            <div className="setting-row">
              <div className="setting-label">
                {t.tw_page_width}
                <span className="setting-label-sub">{settings.pageWidth}px</span>
              </div>
              <input type="range" className="setting-slider"
                     min={560} max={960} step={20} value={settings.pageWidth}
                     onChange={(e) => setSetting('pageWidth', Number(e.target.value))} />
            </div>
            <div className="setting-row">
              <div className="setting-label">
                {t.tw_split_ratio}
                <span className="setting-label-sub">{settings.splitRatio}% / {100 - settings.splitRatio}%</span>
              </div>
              <input type="range" className="setting-slider"
                     min={30} max={70} step={1} value={settings.splitRatio}
                     onChange={(e) => setSetting('splitRatio', Number(e.target.value))} />
            </div>
          </div>

          <div className="setting-group">
            <div className="setting-group-title">{t.language}</div>
            <div className="setting-row">
              <div className="setting-label">{t.language}</div>
              <div className="setting-seg">
                <button className={settings.lang === 'zh' ? 'active' : ''}
                        onClick={() => setSetting('lang', 'zh')}>中文</button>
                <button className={settings.lang === 'en' ? 'active' : ''}
                        onClick={() => setSetting('lang', 'en')}>English</button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </>
  );
}

window.SettingsDrawer = SettingsDrawer;