'use client';

import { Loader2, CheckCircle2, Lock, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useI18n } from '@/lib/i18n';
import type { Provider, AvailableProvider } from './types';

interface ProviderSelectorProps {
  provider: Provider | null;
  onProviderChange: (provider: Provider) => void;
  availableProviders: AvailableProvider[];
  isLoadingProviders: boolean;
  isPro: boolean;
}

export function ProviderSelector({
  provider,
  onProviderChange,
  availableProviders,
  isLoadingProviders,
  isPro,
}: ProviderSelectorProps) {
  const { t } = useI18n();

  if (isLoadingProviders) {
    return (
      <div className="flex items-center gap-2 text-sm text-muted-foreground">
        <Loader2 className="size-4 animate-spin" />
        <span>{t('dashboard.translate.provider.loading')}</span>
      </div>
    );
  }

  if (availableProviders.length === 0) {
    return (
      <p className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-800/50 dark:bg-amber-950/30 dark:text-amber-400">
        {t('dashboard.translate.provider.noneConfigured')}
      </p>
    );
  }

  const classicProviders = availableProviders.filter((p) => p.mode === 'classic');
  const llmProviders = availableProviders.filter((p) => p.mode === 'llm');

  const renderCard = (p: AvailableProvider, locked: boolean) => {
    const isSelected = provider === p.id;
    return (
      <button
        key={p.id}
        type="button"
        disabled={locked}
        onClick={() => !locked && onProviderChange(p.id)}
        className={cn(
          'flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-start transition-all duration-150',
          isSelected
            ? 'border-primary bg-primary/8 ring-1 ring-primary/30'
            : locked
            ? 'cursor-not-allowed border-border/40 bg-muted/20 opacity-60'
            : 'border-border/60 bg-background hover:border-primary/40 hover:bg-muted/30 active:scale-[0.99]'
        )}
      >
        {/* Selection indicator */}
        <div className={cn(
          'flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
          isSelected ? 'border-primary bg-primary' : 'border-border/60'
        )}>
          {isSelected && <div className="size-2 rounded-full bg-primary-foreground" />}
        </div>

        {/* Label + description */}
        <div className="flex flex-1 flex-col gap-0.5 min-w-0">
          <span className={cn(
            'text-sm font-medium leading-tight',
            isSelected ? 'text-primary' : locked ? 'text-muted-foreground' : 'text-foreground'
          )}>
            {p.label}
          </span>
          <span className="text-xs text-muted-foreground leading-snug">
            {p.description}
          </span>
          {p.mode === 'llm' && p.model && (
            <span className="mt-0.5 text-[10px] font-mono text-muted-foreground/70">
              {t('dashboard.translate.provider.modelTitle')} {p.model}
            </span>
          )}
        </div>

        {/* Right badge */}
        {locked ? (
          <Lock className="size-4 shrink-0 text-muted-foreground/50" />
        ) : isSelected ? (
          <CheckCircle2 className="size-5 shrink-0 text-primary" />
        ) : null}
      </button>
    );
  };

  return (
    <div className="flex flex-col gap-3">
      <p className="text-sm font-medium text-foreground">
        {t('dashboard.translate.provider.sectionTitle')}
      </p>

      {/* Classic providers */}
      {classicProviders.length > 0 && (
        <div className="flex flex-col gap-2">
          {classicProviders.map((p) => renderCard(p, false))}
        </div>
      )}

      {/* LLM providers — Pro only */}
      {llmProviders.length > 0 && (
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <div className="h-px flex-1 bg-border/50" />
            <span className="flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
              <Sparkles className="size-3" />
              {t('dashboard.translate.provider.llmDivider')}
              {!isPro && (
                <span className="ms-1 rounded bg-primary/10 px-1 py-0.5 text-primary">
                  {t('dashboard.translate.provider.llmDividerPro')}
                </span>
              )}
            </span>
            <div className="h-px flex-1 bg-border/50" />
          </div>
          {llmProviders.map((p) => renderCard(p, !isPro))}
          {!isPro && (
            <p className="text-xs text-muted-foreground text-center">
              <a href="/pricing" className="text-primary hover:underline font-medium">
                {t('dashboard.translate.provider.upgrade')}
              </a>{' '}
              {t('dashboard.translate.provider.upgradeSuffix')}
            </p>
          )}
        </div>
      )}
    </div>
  );
}
