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 PreferencesPage() {
  const { mode, accent, setMode, setAccent } = useThemeStore()

  return (
    <div className="p-8 max-w-2xl">
      <h1 className="text-2xl font-bold text-content mb-1">Preferences</h1>
      <p className="text-sm text-content-muted mb-8">Customize your Schaeffler Automat experience.</p>

      {/* Appearance */}
      <section className="card p-6 space-y-6">
        <h2 className="text-base font-semibold text-content">Appearance</h2>

        {/* Theme mode */}
        <div className="flex items-start gap-6">
          <div className="w-36 shrink-0">
            <p className="text-sm font-medium text-content">Theme</p>
            <p className="text-xs text-content-muted mt-0.5">Light, dark, or follow system</p>
          </div>
          <div className="flex gap-2">
            {MODES.map(({ key, icon: Icon, label }) => (
              <button
                key={key}
                onClick={() => setMode(key)}
                className={clsx(
                  'flex flex-col items-center gap-2 w-20 py-3 rounded-lg border text-xs font-medium transition-colors',
                  mode === key
                    ? 'text-accent'
                    : 'border-border-default bg-surface text-content-secondary hover:bg-surface-hover',
                )}
                style={mode === key ? { borderColor: 'var(--color-accent)', backgroundColor: 'var(--color-accent-light)' } : undefined}
              >
                <Icon size={18} />
                {label}
              </button>
            ))}
          </div>
        </div>

        <div className="border-t border-border-light" />

        {/* Accent color */}
        <div className="flex items-start gap-6">
          <div className="w-36 shrink-0">
            <p className="text-sm font-medium text-content">Accent color</p>
            <p className="text-xs text-content-muted mt-0.5">Used for buttons, links, and highlights</p>
          </div>
          <div className="flex gap-3 pt-1">
            {ACCENT_PRESETS.map(({ key, label, hex }) => (
              <button
                key={key}
                onClick={() => setAccent(key)}
                title={label}
                className={clsx(
                  'w-8 h-8 rounded-full transition-all',
                  accent === key ? 'scale-125' : 'hover:scale-110',
                )}
                style={{
                  backgroundColor: hex,
                  outline: accent === key ? `2px solid ${hex}` : undefined,
                  outlineOffset: accent === key ? '3px' : undefined,
                }}
              />
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}
