office_translator/frontend/src/app/dashboard/translate/ProviderSelector.tsx

'use client';

import { useState, useEffect } from 'react';
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;
}

interface CardTheme {
  badge: string;
  subBadge: string;
  accentClass: string;
  glowClass: string;
  descriptionOverride: string;
}

const LLM_THEMES: Record<string, CardTheme> = {
  deepseek: {
    badge: 'Essentielle',
    subBadge: 'Technique & Éco',
    accentClass: 'border-cyan-500/30 text-cyan-600 dark:text-cyan-400 bg-cyan-500/5',
    glowClass: 'from-cyan-500/10 dark:from-cyan-500/5 to-transparent',
    descriptionOverride: 'Traduction ultra-précise et économique, idéale pour les documents techniques et le code.'
  },
  openai: {
    badge: 'Premium',
    subBadge: 'Haute Fidélité',
    accentClass: 'border-emerald-500/30 text-emerald-600 dark:text-emerald-400 bg-emerald-500/5',
    glowClass: 'from-emerald-500/10 dark:from-emerald-500/5 to-transparent',
    descriptionOverride: 'Le standard mondial de l\'IA. Cohérence textuelle maximale et respect strict du style.'
  },
  minimax: {
    badge: 'Avancée',
    subBadge: 'Performance',
    accentClass: 'border-indigo-500/30 text-indigo-600 dark:text-indigo-400 bg-indigo-500/5',
    glowClass: 'from-indigo-500/10 dark:from-indigo-500/5 to-transparent',
    descriptionOverride: 'Vitesse d\'exécution incroyable et excellente compréhension des structures complexes.'
  },
  openrouter: {
    badge: 'Express',
    subBadge: 'Multi-Modèles',
    accentClass: 'border-purple-500/30 text-purple-600 dark:text-purple-400 bg-purple-500/5',
    glowClass: 'from-purple-500/10 dark:from-purple-500/5 to-transparent',
    descriptionOverride: 'Accès unifié aux meilleurs modèles open-source optimisés pour la traduction.'
  },
  openrouter_premium: {
    badge: 'Ultra',
    subBadge: 'Maximum Context',
    accentClass: 'border-rose-500/30 text-rose-600 dark:text-rose-400 bg-rose-500/5',
    glowClass: 'from-rose-500/10 dark:from-rose-500/5 to-transparent',
    descriptionOverride: 'Traduction assistée par les modèles de pointe (GPT-4o, Claude 3.5 Sonnet) pour documents longs.'
  },
  zai: {
    badge: 'Spécialisée',
    subBadge: 'Finance & Droit',
    accentClass: 'border-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-500/5',
    glowClass: 'from-amber-500/10 dark:from-amber-500/5 to-transparent',
    descriptionOverride: 'Modèle affiné pour les terminologies métiers exigeantes (juridique, finance).'
  }
};

const DEFAULT_LLM_THEME: CardTheme = {
  badge: 'Moderne',
  subBadge: 'Raisonnement IA',
  accentClass: 'border-brand-accent/30 text-brand-accent bg-brand-accent/5',
  glowClass: 'from-brand-accent/10 to-transparent',
  descriptionOverride: 'Traduction par grand modèle linguistique (LLM) avec analyse sémantique avancée.'
};

const CLASSIC_THEMES: Record<string, { labelOverride?: string; descriptionOverride?: string }> = {
  google: {
    labelOverride: 'Google Traduction',
    descriptionOverride: 'Traduction ultra-rapide couvrant plus de 130 langues. Recommandé pour les flux généraux.'
  },
  deepl: {
    labelOverride: 'DeepL Pro',
    descriptionOverride: 'Traduction haute précision réputée pour sa fluidité et ses formulations naturelles.'
  },
  google_cloud: {
    labelOverride: 'Google Cloud API',
    descriptionOverride: 'Moteur cloud professionnel optimisé pour le traitement de gros volumes de documents.'
  }
};

export function ProviderSelector({
  provider,
  onProviderChange,
  availableProviders,
  isLoadingProviders,
  isPro,
}: ProviderSelectorProps) {
  const { t } = useI18n();
  const [activeTab, setActiveTab] = useState<'classic' | 'llm'>('classic');

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

  // Initialize and synchronize activeTab based on current provider
  useEffect(() => {
    if (provider) {
      const selected = availableProviders.find((p) => p.id === provider);
      if (selected) {
        setActiveTab(selected.mode);
      }
    }
  }, [provider, availableProviders]);

  if (isLoadingProviders) {
    return (
      <div className="flex items-center gap-2 text-sm text-brand-dark/50 dark:text-white/40 py-4">
        <Loader2 className="size-4 animate-spin text-brand-accent" />
        <span>{t('dashboard.translate.provider.loading') || 'Chargement des moteurs...'}</span>
      </div>
    );
  }

  if (availableProviders.length === 0) {
    return (
      <p className="rounded-xl border border-amber-200 bg-amber-50/50 px-4 py-3 text-xs text-amber-700 dark:border-amber-900/30 dark:bg-amber-950/20 dark:text-amber-400 font-light">
        {t('dashboard.translate.provider.noneConfigured') || 'Aucun fournisseur configuré'}
      </p>
    );
  }

  const renderClassicCard = (p: AvailableProvider) => {
    const isSelected = provider === p.id;
    const meta = CLASSIC_THEMES[p.id];
    const label = meta?.labelOverride || p.label;

    return (
      <button
        key={p.id}
        type="button"
        onClick={() => onProviderChange(p.id)}
        className={cn(
          'p-2.5 py-2 rounded-lg border text-left transition-all relative overflow-hidden flex flex-col justify-center min-h-[48px]',
          isSelected
            ? 'border-brand-accent bg-brand-accent/5 dark:bg-brand-accent/10'
            : 'border-black/[0.05] dark:border-white/[0.05] bg-brand-muted/20 dark:bg-zinc-800/10 hover:bg-brand-muted/50 dark:hover:bg-zinc-800/20'
        )}
      >
        <div className="flex items-center justify-between">
          <span className={cn(
            "text-[9.5px] font-black uppercase tracking-tight truncate flex-1",
            isSelected ? 'text-brand-accent' : 'text-brand-dark/40 dark:text-white/40'
          )}>
            Standard
          </span>
          {isSelected && <div className="w-1.5 h-1.5 rounded-full bg-brand-accent animate-pulse shrink-0 ml-1" />}
        </div>
        <span className="text-xs font-bold text-brand-dark dark:text-white block leading-tight truncate">
          {label}
        </span>
      </button>
    );
  };

  const renderLlmCard = (p: AvailableProvider, locked: boolean) => {
    const isSelected = provider === p.id;
    const theme = LLM_THEMES[p.id] || DEFAULT_LLM_THEME;
    const displayLabel = p.model || p.label.replace(/^Traduction\s+IA\s+/i, '');

    return (
      <button
        key={p.id}
        type="button"
        disabled={locked}
        onClick={() => !locked && onProviderChange(p.id)}
        className={cn(
          'p-2 py-2 rounded-lg border text-left transition-all relative overflow-hidden flex flex-col justify-between min-h-[64px]',
          isSelected
            ? 'border-brand-accent bg-brand-accent/5 dark:bg-brand-accent/10'
            : locked
            ? 'cursor-not-allowed border-brand-dark/5 dark:border-white/5 bg-brand-dark/[0.01] dark:bg-white/[0.01] opacity-50'
            : 'border-black/[0.05] dark:border-white/[0.05] bg-brand-muted/20 dark:bg-zinc-800/10 hover:bg-brand-muted/50 dark:hover:bg-zinc-800/20'
        )}
      >
        <div className="flex items-center justify-between mb-0.5">
          <span className={cn(
            "text-[9px] font-black uppercase tracking-tight truncate flex-1",
            isSelected ? 'text-brand-accent' : 'text-brand-dark/40 dark:text-white/40'
          )}>
            {theme.badge}
          </span>
          {isSelected && <div className="w-1.5 h-1.5 rounded-full bg-brand-accent animate-pulse shrink-0 ml-1" />}
          {locked && <Lock className="size-2 text-brand-dark/40 dark:text-white/40 shrink-0 ml-1" />}
        </div>
        <span className="text-xs font-bold text-brand-dark dark:text-white block leading-none mb-0.5 truncate">
          {displayLabel}
        </span>
        <span className="text-[8.5px] text-brand-dark/40 dark:text-white/45 uppercase font-bold block leading-none truncate">
          {theme.subBadge}
        </span>
      </button>
    );
  };

  return (
    <div className="flex flex-col gap-3">
      {/* Title */}
      <div className="flex items-center justify-between">
        <label className="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/45">
          {t('dashboard.translate.provider.sectionTitle') || 'Moteur de Traduction'}
        </label>
      </div>

      {/* Tabs Container */}
      <div className="grid grid-cols-2 p-1 bg-brand-muted/70 dark:bg-zinc-800/40 rounded-xl border border-brand-dark/5 dark:border-white/5">
        <button
          type="button"
          onClick={() => setActiveTab('classic')}
          className={cn(
            'py-1.5 text-xs font-semibold rounded-lg transition-all duration-200',
            activeTab === 'classic'
              ? 'bg-white dark:bg-zinc-900 text-brand-dark dark:text-white shadow-sm'
              : 'text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white'
          )}
        >
          {t('dashboard.translate.provider.tabStandard') || 'Standard'}
        </button>
        <button
          type="button"
          onClick={() => setActiveTab('llm')}
          className={cn(
            'py-1.5 text-xs font-semibold rounded-lg transition-all duration-200 flex items-center justify-center gap-1.5',
            activeTab === 'llm'
              ? 'bg-white dark:bg-zinc-900 text-brand-dark dark:text-white shadow-sm'
              : 'text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white'
          )}
        >
          <Sparkles className={cn("size-3", activeTab === 'llm' ? 'text-brand-accent' : 'text-brand-dark/35 dark:text-white/30')} />
          {t('dashboard.translate.provider.tabLLM') || 'Multi-Modèles IA'}
          {!isPro && <Lock className="size-2.5 opacity-60 ml-0.5" />}
        </button>
      </div>

      {/* Active Tab List */}
      <div className="space-y-2">
        {activeTab === 'classic' ? (
          classicProviders.length > 0 ? (
            <div className="grid grid-cols-2 gap-2">
              {classicProviders.map((p) => renderClassicCard(p))}
            </div>
          ) : (
            <p className="text-xs text-brand-dark/40 dark:text-white/30 text-center py-4 border border-dashed border-brand-dark/10 dark:border-white/10 rounded-xl font-light">
              Aucun traducteur standard disponible.
            </p>
          )
        ) : (
          llmProviders.length > 0 ? (
            <div className="grid grid-cols-3 gap-2">
              {llmProviders.map((p) => renderLlmCard(p, !isPro))}
            </div>
          ) : (
            <p className="text-xs text-brand-dark/40 dark:text-white/30 text-center py-4 border border-dashed border-brand-dark/10 dark:border-white/10 rounded-xl font-light">
              Aucun modèle IA configuré.
            </p>
          )
        )}

        {/* Dynamic Contextual Help Area */}
        {provider && (
          <div className="mt-1 p-2.5 rounded-lg bg-brand-muted/20 dark:bg-white/[0.01] border border-black/[0.03] dark:border-white/[0.03]">
            {activeTab === 'classic' ? (
              (() => {
                const activeP = classicProviders.find(p => p.id === provider);
                const meta = activeP ? CLASSIC_THEMES[activeP.id] : null;
                return activeP ? (
                  <p className="text-[10px] text-brand-dark/60 dark:text-white/60 leading-normal font-light">
                    <span className="font-bold text-brand-dark dark:text-white">{meta?.labelOverride || activeP.label} : </span>
                    {meta?.descriptionOverride || activeP.description}
                  </p>
                ) : null;
              })()
            ) : (
              (() => {
                const activeP = llmProviders.find(p => p.id === provider);
                const theme = activeP ? (LLM_THEMES[activeP.id] || DEFAULT_LLM_THEME) : null;
                return activeP && theme ? (
                  <p className="text-[10px] text-brand-dark/60 dark:text-white/60 leading-normal font-light">
                    <span className="font-bold text-brand-dark dark:text-white">{activeP.label} : </span>
                    {theme.descriptionOverride} <span className="opacity-50 text-[9px] font-mono">({activeP.model || 'default'})</span>
                  </p>
                ) : null;
              })()
            )}
          </div>
        )}
      </div>

      {/* Pro upgrade banner when llm is active and user is not pro */}
      {!isPro && activeTab === 'llm' && (
        <div className="p-3.5 rounded-xl border border-brand-accent/20 bg-brand-accent/[0.02] dark:bg-brand-accent/[0.01] text-center flex flex-col items-center gap-1.5">
          <Sparkles className="size-3.5 text-brand-accent animate-pulse" />
          <span className="text-[11px] font-bold text-brand-dark dark:text-white leading-none">
            {t('dashboard.translate.provider.llmDivider') || 'Intelligence Artificielle Active'}
          </span>
          <p className="text-[9.5px] text-brand-dark/50 dark:text-white/50 leading-relaxed font-light">
            Débloquez la traduction contextuelle haut de gamme pour vos documents entiers.
          </p>
          <a
            href="/pricing"
            className="w-full inline-flex items-center justify-center py-1.5 rounded-lg bg-brand-dark dark:bg-white text-white dark:text-brand-dark text-[10px] font-semibold hover:opacity-95 active:scale-[0.98] transition-all shadow-sm"
          >
            {t('dashboard.translate.provider.upgrade') || 'Passer Pro'}
          </a>
        </div>
      )}
    </div>
  );
}