import { Sun, Monitor, Moon, Pipette } 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, customHex, setMode, setAccent, setCustomHex } = 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 items-center gap-2">
          {/* Preset colors */}
          {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,
              }}
            />
          ))}

          {/* Separator */}
          <div className="w-px h-4 bg-border-default" />

          {/* Custom color picker */}
          <div className="relative">
            <button
              onClick={() => setAccent('custom')}
              title="Custom color"
              className={clsx(
                'w-5 h-5 rounded-full transition-all flex items-center justify-center border',
                accent === 'custom' ? 'scale-125' : 'hover:scale-110',
              )}
              style={{
                backgroundColor: customHex,
                borderColor: accent === 'custom' ? 'transparent' : 'var(--color-border)',
                outline: accent === 'custom' ? `2px solid ${customHex}` : undefined,
                outlineOffset: accent === 'custom' ? '2px' : undefined,
              }}
            >
              {accent !== 'custom' && (
                <Pipette size={10} className="text-white drop-shadow-sm" />
              )}
            </button>
          </div>

          {/* Color input (visible when custom is active) */}
          {accent === 'custom' && (
            <div className="flex items-center gap-1.5">
              <input
                type="color"
                value={customHex}
                onChange={(e) => setCustomHex(e.target.value)}
                className="w-6 h-5 rounded border border-border-default cursor-pointer p-0"
                title="Pick a custom accent color"
              />
              <input
                type="text"
                value={customHex}
                onChange={(e) => {
                  const v = e.target.value
                  if (/^#[0-9a-fA-F]{6}$/.test(v)) setCustomHex(v)
                }}
                onBlur={(e) => {
                  let v = e.target.value
                  if (!v.startsWith('#')) v = '#' + v
                  if (/^#[0-9a-fA-F]{6}$/.test(v)) setCustomHex(v)
                }}
                className="w-[4.5rem] px-1.5 py-0.5 text-[10px] font-mono border border-border-default rounded bg-surface text-content focus:outline-none focus:border-accent"
                placeholder="#6366f1"
              />
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
