import { Sun, Moon, Monitor } from 'lucide-react'
import { useUIStore, type Theme, type AccentColor, accentColors } from '../../../../stores/ui'
import { cn } from '../../../../lib/utils'

const themeOptions: { value: Theme; label: string; icon: typeof Sun }[] = [
  { value: 'light', label: 'Light', icon: Sun },
  { value: 'dark', label: 'Dark', icon: Moon },
  { value: 'system', label: 'System', icon: Monitor },
]

const colorOptions = Object.entries(accentColors) as [AccentColor, (typeof accentColors)[AccentColor]][]

export function PreferencesStep() {
  const { theme, setTheme, accentColor, setAccentColor, showThinking, setShowThinking, showCost, setShowCost } =
    useUIStore()

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-semibold text-zinc-100">Personalize Your Experience</h3>
        <p className="mt-1 text-sm text-zinc-400">
          Customize how CachiBot looks and feels.
        </p>
      </div>

      {/* Theme */}
      <div className="space-y-2">
        <label className="block text-sm font-medium text-zinc-300">Color Theme</label>
        <div className="flex gap-2">
          {themeOptions.map((option) => (
            <button
              key={option.value}
              onClick={() => setTheme(option.value)}
              className={cn(
                'flex flex-1 items-center justify-center gap-2 rounded-lg border py-3 transition-all',
                theme === option.value
                  ? 'border-accent-500 bg-accent-500/20 text-accent-400'
                  : 'border-zinc-700 bg-zinc-800 text-zinc-300 hover:border-zinc-600'
              )}
            >
              <option.icon className="h-4 w-4" />
              {option.label}
            </button>
          ))}
        </div>
      </div>

      {/* Accent Color */}
      <div className="space-y-2">
        <label className="block text-sm font-medium text-zinc-300">Accent Color</label>
        <div className="grid grid-cols-4 gap-2">
          {colorOptions.map(([value, { name, palette }]) => (
            <button
              key={value}
              onClick={() => setAccentColor(value)}
              className={cn(
                'flex items-center gap-2 rounded-lg border p-3 transition-all',
                accentColor === value
                  ? 'border-2 ring-1 ring-offset-1 ring-offset-zinc-900'
                  : 'border-zinc-700 hover:border-zinc-600'
              )}
              style={{
                borderColor: accentColor === value ? palette[500] : undefined,
                // @ts-expect-error - Tailwind CSS variable
                '--tw-ring-color': accentColor === value ? palette[500] : undefined,
              }}
            >
              <div className="h-5 w-5 rounded-full" style={{ backgroundColor: palette[500] }} />
              <span className="text-sm text-zinc-300">{name}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Display toggles */}
      <div className="space-y-4">
        <label className="block text-sm font-medium text-zinc-300">Display Options</label>
        <ToggleItem
          label="Show Thinking Process"
          description="Display the AI's reasoning and thought process"
          checked={showThinking}
          onChange={setShowThinking}
        />
        <ToggleItem
          label="Show Token Costs"
          description="Display estimated costs for API calls"
          checked={showCost}
          onChange={setShowCost}
        />
      </div>
    </div>
  )
}

function ToggleItem({
  label,
  description,
  checked,
  onChange,
}: {
  label: string
  description: string
  checked: boolean
  onChange: (checked: boolean) => void
}) {
  return (
    <div className="flex items-center justify-between rounded-lg border border-zinc-800 bg-zinc-800/50 p-3">
      <div>
        <p className="text-sm font-medium text-zinc-200">{label}</p>
        <p className="text-xs text-zinc-500">{description}</p>
      </div>
      <button
        onClick={() => onChange(!checked)}
        className={cn(
          'relative h-6 w-11 rounded-full transition-colors',
          checked ? 'bg-accent-600' : 'bg-zinc-700'
        )}
      >
        <span
          className={cn(
            'absolute top-1 h-4 w-4 rounded-full bg-white transition-transform',
            checked ? 'left-6' : 'left-1'
          )}
        />
      </button>
    </div>
  )
}
