'use client'

import { useState } from 'react'
import { updateAISettings } from '@/app/actions/ai-settings'
import { updateUserSettings } from '@/app/actions/user-settings'
import { useLanguage } from '@/lib/i18n'
import { toast } from 'sonner'
import { Palette, Type, LayoutGrid, Maximize2 } from 'lucide-react'
import { applyDocumentTheme, normalizeThemeId, type ThemeId } from '@/lib/apply-document-theme'

interface AppearanceSettingsClientProps {
  initialFontSize: string
  initialTheme: string
  initialNotesViewMode: 'masonry' | 'tabs' | 'list'
  initialCardSizeMode?: 'variable' | 'uniform'
  initialFontFamily?: string
}

export function AppearanceSettingsClient({
  initialFontSize,
  initialTheme,
  initialNotesViewMode,
  initialCardSizeMode = 'variable',
  initialFontFamily = 'inter',
}: AppearanceSettingsClientProps) {
  const { t } = useLanguage()
  const [theme, setTheme] = useState<ThemeId>(normalizeThemeId(initialTheme || 'light'))
  const [fontSize, setFontSize] = useState(initialFontSize || 'medium')
  const [notesViewMode, setNotesViewMode] = useState<'masonry' | 'tabs' | 'list'>(initialNotesViewMode)
  const [cardSizeMode, setCardSizeMode] = useState<'variable' | 'uniform'>(initialCardSizeMode)
  const [fontFamily, setFontFamily] = useState(initialFontFamily)

  const handleThemeChange = async (value: string) => {
    const next = normalizeThemeId(value)
    setTheme(next)
    localStorage.setItem('theme-preference', next)
    applyDocumentTheme(next)
    await updateUserSettings({ theme: next })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  const handleFontSizeChange = async (value: string) => {
    setFontSize(value)
    const map: Record<string, string> = { small: '14px', medium: '16px', large: '18px', 'extra-large': '20px' }
    document.documentElement.style.setProperty('--user-font-size', map[value] || '16px')
    await updateAISettings({ fontSize: value as any })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  const handleNotesViewChange = async (value: string) => {
    const mode = value === 'tabs' ? 'tabs' : value === 'list' ? 'list' : 'masonry'
    setNotesViewMode(mode)
    await updateAISettings({ notesViewMode: mode })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  const handleCardSizeModeChange = async (value: string) => {
    const mode = value === 'uniform' ? 'uniform' : 'variable'
    setCardSizeMode(mode)
    localStorage.setItem('card-size-mode', mode)
    await updateUserSettings({ cardSizeMode: mode })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  const handleFontFamilyChange = async (value: string) => {
    const font = value === 'system' ? 'system' : 'inter'
    setFontFamily(font)
    localStorage.setItem('font-family', font)
    const root = document.documentElement
    font === 'system' ? root.classList.add('font-system') : root.classList.remove('font-system')
    await updateAISettings({ fontFamily: font })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  const SelectCard = ({
    icon: Icon,
    title,
    description,
    value,
    options,
    onChange,
    optionGroups,
  }: {
    icon: React.ElementType
    title: string
    description: string
    value: string
    options?: { value: string; label: string }[]
    optionGroups?: { label: string; options: { value: string; label: string }[] }[]
    onChange: (v: string) => void
  }) => (
    <div className="bg-card rounded-lg border border-border p-6 shadow-sm flex flex-col gap-4">
      <div className="flex items-center gap-3">
        <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
          <Icon className="h-5 w-5" />
        </div>
        <div>
          <h3 className="font-semibold text-foreground">{title}</h3>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
      <div className="relative mt-2">
        <select
          value={value}
          onChange={(e) => onChange(e.target.value)}
          className="w-full h-11 px-4 bg-muted border border-border rounded-lg text-foreground text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none appearance-none cursor-pointer transition-colors"
        >
          {optionGroups
            ? optionGroups.map((g) => (
                <optgroup key={g.label} label={g.label}>
                  {g.options.map((o) => (
                    <option key={o.value} value={o.value}>
                      {o.label}
                    </option>
                  ))}
                </optgroup>
              ))
            : options?.map((o) => (
                <option key={o.value} value={o.value}>
                  {o.label}
                </option>
              ))}
        </select>
        <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">
          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </div>
      </div>
    </div>
  )

  const themeOptionGroups = [
    {
      label: t('settings.themeBaseGroup'),
      options: [
        { value: 'light', label: t('settings.themeLight') },
        { value: 'dark', label: t('settings.themeDark') },
        { value: 'auto', label: t('settings.themeSystem') },
      ],
    },
    {
      label: t('settings.themePalettesGroup'),
      options: [
        { value: 'sepia', label: t('settings.themeSepia') },
        { value: 'midnight', label: t('settings.themeMidnight') },
        { value: 'rose', label: t('settings.themeRose') },
        { value: 'green', label: t('settings.themeGreen') },
        { value: 'lavender', label: t('settings.themeLavender') },
        { value: 'sand', label: t('settings.themeSand') },
        { value: 'ocean', label: t('settings.themeOcean') },
        { value: 'sunset', label: t('settings.themeSunset') },
        { value: 'blue', label: t('settings.themeBlue') },
      ],
    },
  ]

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('appearance.title')}</h1>
        <p className="text-muted-foreground mt-1">{t('appearance.description')}</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <SelectCard
          icon={Palette}
          title={t('settings.theme')}
          description={t('appearance.selectTheme')}
          value={theme}
          optionGroups={themeOptionGroups}
          onChange={handleThemeChange}
        />

        <SelectCard
          icon={Type}
          title={t('profile.fontSize')}
          description={t('profile.fontSizeDescription')}
          value={fontSize}
          options={[
            { value: 'small', label: t('profile.fontSizeSmall') },
            { value: 'medium', label: t('profile.fontSizeMedium') },
            { value: 'large', label: t('profile.fontSizeLarge') },
            { value: 'extra-large', label: t('profile.fontSizeExtraLarge') },
          ]}
          onChange={handleFontSizeChange}
        />

        <SelectCard
          icon={Type}
          title={t('appearance.fontFamilyLabel') || 'Police'}
          description={t('appearance.fontFamilyDescription') || "Choisissez la police de l'application"}
          value={fontFamily}
          options={[
            { value: 'inter', label: 'Inter' },
            { value: 'system', label: t('appearance.fontSystem') || 'Système' },
          ]}
          onChange={handleFontFamilyChange}
        />

        <SelectCard
          icon={LayoutGrid}
          title={t('appearance.notesViewLabel')}
          description={t('appearance.notesViewDescription')}
          value={notesViewMode}
          options={[
            { value: 'masonry', label: t('appearance.notesViewMasonry') },
            { value: 'list', label: t('appearance.notesViewList') },
            { value: 'tabs', label: t('appearance.notesViewTabs') },
          ]}
          onChange={handleNotesViewChange}
        />

        <SelectCard
          icon={Maximize2}
          title={t('settings.cardSizeMode')}
          description={t('settings.cardSizeModeDescription')}
          value={cardSizeMode}
          options={[
            { value: 'variable', label: t('settings.cardSizeVariable') },
            { value: 'uniform', label: t('settings.cardSizeUniform') },
          ]}
          onChange={handleCardSizeModeChange}
        />
      </div>
    </div>
  )
}