import { Sun, Monitor, Moon } from 'lucide-react'
import { clsx } from 'clsx'
import { useThemeStore, ACCENT_PRESETS, type ThemeMode } from '../../store/theme'

const MODES: { key: ThemeMode; icon: typeof Sun; label: string }[] = [
  { key: 'light',  icon: Sun,     label: 'Light'  },
  { key: 'system', icon: Monitor, label: 'System' },
  { key: 'dark',   icon: Moon,    label: 'Dark'   },
]

export default function ThemePreferences() {
  const { mode, accent, setMode, setAccent } = useThemeStore()

  return (
    <div className="px-3 py-2 space-y-2">
      {/* Mode row */}
      <div className="flex items-center gap-2">
        <span className="text-xs text-content-muted w-12 shrink-0">Theme</span>
        <div className="flex gap-0.5 bg-surface-alt rounded-md p-0.5 border border-border-light">
          {MODES.map(({ key, icon: Icon, label }) => (
            <button
              key={key}
              onClick={() => setMode(key)}
              title={label}
              className={clsx(
                'flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-colors',
                mode === key
                  ? 'bg-surface text-content shadow-sm'
                  : 'text-content-muted hover:text-content-secondary',
              )}
            >
              <Icon size={12} />
              {label}
            </button>
          ))}
        </div>
      </div>

      {/* Accent row */}
      <div className="flex items-center gap-2">
        <span className="text-xs text-content-muted w-12 shrink-0">Accent</span>
        <div className="flex gap-2">
          {ACCENT_PRESETS.map(({ key, label, hex }) => (
            <button
              key={key}
              onClick={() => setAccent(key)}
              title={label}
              className={clsx(
                'w-5 h-5 rounded-full transition-all',
                accent === key ? 'scale-125' : 'hover:scale-110',
              )}
              style={{
                backgroundColor: hex,
                outline: accent === key ? `2px solid ${hex}` : undefined,
                outlineOffset: accent === key ? '2px' : undefined,
              }}
            />
          ))}
        </div>
      </div>
    </div>
  )
}
