'use client';

import { ArrowRight, Loader2, AlertCircle } from 'lucide-react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useI18n } from '@/lib/i18n';
import type { Language } from './types';

interface LanguageSelectorProps {
  sourceLang: string;
  targetLang: string;
  languages: Language[];
  isLoading?: boolean;
  error?: string | null;
  onSourceChange: (value: string) => void;
  onTargetChange: (value: string) => void;
}

export function LanguageSelector({
  sourceLang,
  targetLang,
  languages,
  isLoading,
  error,
  onSourceChange,
  onTargetChange,
}: LanguageSelectorProps) {
  const { t } = useI18n();

  return (
    <div className="flex flex-col gap-3">
      {error && (
        <div className="flex items-center gap-2 rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
          <AlertCircle className="size-3.5 shrink-0" />
          <span>{t('dashboard.translate.language.loadErrorPrefix')} {error}</span>
        </div>
      )}

      <div className="flex items-end gap-3">
        {/* Source language */}
        <div className="flex flex-1 flex-col gap-1.5">
          <label className="text-sm font-medium text-foreground">
            {t('dashboard.translate.language.source')}
          </label>
          <Select value={sourceLang} onValueChange={onSourceChange} disabled={isLoading}>
            <SelectTrigger className="h-11 w-full">
              {isLoading ? (
                <div className="flex items-center gap-2 text-muted-foreground">
                  <Loader2 className="size-3.5 animate-spin" />
                  <span>{t('dashboard.translate.language.loading')}</span>
                </div>
              ) : (
                <SelectValue placeholder={t('dashboard.translate.language.autoDetect')} />
              )}
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="auto">{t('dashboard.translate.language.autoDetect')}</SelectItem>
              {languages.map((lang) => (
                <SelectItem key={lang.code} value={lang.code}>
                  {lang.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {/* Arrow — flips in RTL via rtl: variant */}
        <div className="mb-2 flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
          <ArrowRight className="size-4 rtl:rotate-180" />
        </div>

        {/* Target language */}
        <div className="flex flex-1 flex-col gap-1.5">
          <label className="text-sm font-medium text-foreground">
            {t('dashboard.translate.language.target')}
          </label>
          <Select value={targetLang} onValueChange={onTargetChange} disabled={isLoading}>
            <SelectTrigger className="h-11 w-full">
              {isLoading ? (
                <div className="flex items-center gap-2 text-muted-foreground">
                  <Loader2 className="size-3.5 animate-spin" />
                  <span>{t('dashboard.translate.language.loading')}</span>
                </div>
              ) : (
                <SelectValue placeholder={t('dashboard.translate.language.selectPlaceholder')} />
              )}
            </SelectTrigger>
            <SelectContent>
              {languages.map((lang) => (
                <SelectItem key={lang.code} value={lang.code}>
                  {lang.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>
    </div>
  );
}