import { Select, SelectOption } from '@/components/ui/select';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Label } from '@/components/ui/label';
import { PreferenceSettings as PreferenceSettingsType } from '../../types/settings';

interface PreferenceSettingsProps {
  preferences: PreferenceSettingsType;
  onChange: (preferences: PreferenceSettingsType) => void;
}

const languages: SelectOption[] = [
  { value: 'en', label: 'English' },
  { value: 'fr', label: 'Français' },
  { value: 'es', label: 'Español' },
  { value: 'de', label: 'Deutsch' },
  { value: 'it', label: 'Italiano' },
  { value: 'pt', label: 'Português' },
  { value: 'ru', label: 'Русский' },
  { value: 'ja', label: '日本語' },
  { value: 'zh', label: '中文' },
  { value: 'ko', label: '한국어' },
];

const timezones: SelectOption[] = [
  { value: 'UTC', label: 'UTC (Coordinated Universal Time)' },
  { value: 'America/New_York', label: 'Eastern Time (US & Canada)' },
  { value: 'America/Chicago', label: 'Central Time (US & Canada)' },
  { value: 'America/Denver', label: 'Mountain Time (US & Canada)' },
  { value: 'America/Los_Angeles', label: 'Pacific Time (US & Canada)' },
  { value: 'Europe/London', label: 'London (GMT)' },
  { value: 'Europe/Paris', label: 'Paris (CET)' },
  { value: 'Europe/Berlin', label: 'Berlin (CET)' },
  { value: 'Asia/Tokyo', label: 'Tokyo (JST)' },
  { value: 'Asia/Shanghai', label: 'Shanghai (CST)' },
  { value: 'Australia/Sydney', label: 'Sydney (AEDT)' },
];

export function PreferenceSettings({
  preferences,
  onChange,
}: PreferenceSettingsProps) {
  const handleLanguageChange = (value: string | string[]) => {
    onChange({
      ...preferences,
      language: Array.isArray(value) ? value[0] : value,
    });
  };

  const handleTimezoneChange = (value: string | string[]) => {
    onChange({
      ...preferences,
      timezone: Array.isArray(value) ? value[0] : value,
    });
  };

  const handleThemeChange = (value: string) => {
    onChange({
      ...preferences,
      theme: value as 'light' | 'dark' | 'auto',
    });
  };

  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <Label htmlFor="language">Langue</Label>
        <Select
          id="language"
          options={languages}
          value={preferences.language}
          onChange={handleLanguageChange}
          placeholder="Sélectionner une langue"
        />
        <p className="text-sm text-muted-foreground">
          Langue d'affichage de l'interface
        </p>
      </div>

      <div className="space-y-2">
        <Label htmlFor="timezone">Fuseau horaire</Label>
        <Select
          id="timezone"
          options={timezones}
          value={preferences.timezone}
          onChange={handleTimezoneChange}
          placeholder="Sélectionner un fuseau horaire"
          searchable
        />
        <p className="text-sm text-muted-foreground">
          Fuseau horaire pour l'affichage des dates et heures
        </p>
      </div>

      <div className="space-y-2">
        <Label>Thème</Label>
        <RadioGroup
          value={preferences.theme}
          onValueChange={handleThemeChange}
          className="flex flex-col space-y-3"
        >
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="light" id="theme-light" />
            <Label htmlFor="theme-light" className="cursor-pointer font-normal">
              Clair
            </Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="dark" id="theme-dark" />
            <Label htmlFor="theme-dark" className="cursor-pointer font-normal">
              Sombre
            </Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="auto" id="theme-auto" />
            <Label htmlFor="theme-auto" className="cursor-pointer font-normal">
              Automatique (suit les préférences système)
            </Label>
          </div>
        </RadioGroup>
        <p className="text-sm text-muted-foreground">
          Thème d'affichage de l'interface
        </p>
      </div>
    </div>
  );
}

