import type { Tweaks, ThemeMode, FontSize, FeedbackTweak } from '../types'

interface Props {
  tweaks: Tweaks
  update: <K extends keyof Tweaks>(key: K, value: Tweaks[K]) => void
  onClose: () => void
}

function Seg({ tkey, options, tweaks, update }: {
  tkey: keyof Tweaks
  options: { value: string; label: string }[]
  tweaks: Tweaks
  update: Props['update']
}) {
  return (
    <div className="tweak-control">
      {options.map((opt) => (
        <button
          key={opt.value}
          className={`tweak-seg${tweaks[tkey] === opt.value ? ' active' : ''}`}
          onClick={() => update(tkey, opt.value as never)}
        >
          {opt.label}
        </button>
      ))}
    </div>
  )
}

export default function TweaksPanel({ tweaks, update, onClose }: Props) {
  return (
    <div className="tweaks-panel">
      <div className="tweaks-header">
        <span>Tweaks</span>
        <button className="btn btn-ghost btn-sm" onClick={onClose} style={{ padding: '2px 6px' }}>×</button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <div className="tweak-label">Theme</div>
          <Seg tkey="theme" options={[{ value: 'light' as ThemeMode, label: 'Light' }, { value: 'dark' as ThemeMode, label: 'Dark' }]} tweaks={tweaks} update={update} />
        </div>
        <div className="tweak-row">
          <div className="tweak-label">Text size</div>
          <Seg tkey="fontSize" options={[{ value: 'small' as FontSize, label: 'S' }, { value: 'medium' as FontSize, label: 'M' }, { value: 'large' as FontSize, label: 'L' }]} tweaks={tweaks} update={update} />
        </div>
        <div className="tweak-row">
          <div className="tweak-label">Feedback</div>
          <Seg tkey="feedbackMode" options={[
            { value: 'auto' as FeedbackTweak, label: 'Auto' },
            { value: 'immediate' as FeedbackTweak, label: 'Immediate' },
            { value: 'end' as FeedbackTweak, label: 'End' },
          ]} tweaks={tweaks} update={update} />
        </div>
      </div>
    </div>
  )
}