import React, { useState } from 'react';
import { 
  CheckCircle2, 
  ArrowRight, 
  Zap, 
  ChevronLeft,
  ShieldCheck,
  Globe,
  Star,
  Activity,
  Layers,
  FileText
} from 'lucide-react';
import { motion } from 'motion/react';
import { useTranslation } from 'react-i18next';

interface PricingViewProps {
  onBack: () => void;
}

export const PricingView: React.FC<PricingViewProps> = ({ onBack }) => {
  const { t } = useTranslation();
  const [isAnnual, setIsAnnual] = useState(true);

  const plans = [
    {
      id: 'free',
      name: 'Free',
      title: 'Gratuit',
      desc: 'Parfait pour découvrir l\'application',
      price: { monthly: 0, annual: 0 },
      color: 'bg-brand-muted !text-brand-dark',
      iconColor: 'text-brand-dark/20',
      metrics: { docs: '2 / mois', pages: '10 p / doc' },
      features: [
        '5 documents / mois',
        'Jusqu\'à 15 pages par document',
        'Google Traduction inclus',
        'Toutes les langues (130+)',
        'Support communautaire'
      ],
      cta: 'Choisir ce forfait'
    },
    {
      id: 'starter',
      name: 'Starter',
      title: '7 €',
      period: '/mois',
      desc: 'Pour les particuliers et petits projets',
      price: { monthly: 9, annual: 7 },
      color: 'bg-brand-dark',
      iconColor: 'text-white/20',
      metrics: { docs: '50 / mois', pages: '50 p / doc' },
      features: [
        '50 documents / mois',
        'Jusqu\'à 50 pages par document',
        'Google Traduction + DeepL',
        'Fichiers jusqu\'à 10 Mo',
        'Support par e-mail',
        'Historique 30 jours'
      ],
      cta: 'Choisir ce forfait'
    },
    {
      id: 'pro',
      name: 'Pro',
      title: '19 €',
      period: '/mois',
      desc: 'Pour les professionnels et équipes en croissance',
      price: { monthly: 25, annual: 19 },
      color: 'bg-brand-accent',
      iconColor: 'text-white/30',
      popular: true,
      current: true,
      metrics: { docs: '200 / mois', pages: '200 p / doc' },
      features: [
        '200 documents / mois',
        'Jusqu\'à 200 pages par document',
        'Traduction IA Essentielle (DeepSeek V3.2)',
        'Google Traduction + DeepL',
        'Fichiers jusqu\'à 25 Mo',
        'Glossaires personnalisés',
        'Support prioritaire',
        'Historique 90 jours'
      ],
      cta: 'Gérer mon forfait'
    },
    {
      id: 'business',
      name: 'Business',
      title: '49 €',
      period: '/mois',
      desc: 'Pour les équipes et organisations',
      price: { monthly: 65, annual: 49 },
      color: 'bg-brand-dark',
      iconColor: 'text-brand-accent/40',
      metrics: { docs: '1000 / mois', pages: '500 p / doc' },
      features: [
        '1 000 documents / mois',
        'Jusqu\'à 500 pages par document',
        'IA Essentielle + Premium (Claude Haiku)',
        'Tous les fournisseurs de traduction',
        'Fichiers jusqu\'à 50 Mo',
        'Accès API (10 000 appels/mois)',
        'Webhooks de notification',
        'Support dédié',
        'Historique 1 an',
        'Analytiques avancées'
      ],
      cta: 'Choisir ce forfait'
    },
    {
      id: 'enterprise',
      name: 'Enterprise',
      title: 'Sur devis',
      desc: 'Solutions sur mesure pour grandes organisations',
      price: { monthly: 'Sur devis', annual: 'Sur devis' },
      color: 'bg-[#252525]',
      iconColor: 'text-white/10',
      tag: 'ON REQUEST',
      metrics: { docs: 'Illimité', pages: 'Illimité' },
      features: [
        'Documents illimités',
        'Tous les modèles IA (GPT-5, Claude Opus 4.6...)',
        'Déploiement on-premise ou cloud dédié',
        'SLA 99,9 % garanti',
        'Support 24/7 dédié',
        'Marque blanche (white-label)',
        'Équipes illimitées',
        'Intégrations sur mesure'
      ],
      cta: 'Nous contacter'
    }
  ];

  return (
    <div className="max-w-[1400px] mx-auto pb-20">
      <div className="flex justify-between items-center mb-20">
        <button 
          onClick={onBack}
          className="flex items-center gap-3 text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/30 hover:text-brand-dark transition-all group"
        >
          <ChevronLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
          Retour
        </button>
        
        <div className="flex gap-2 p-1.5 bg-brand-muted rounded-full border border-black/5 shadow-inner">
           <button 
             onClick={() => onBack()}
             className="px-6 py-2 rounded-full text-[9px] font-black uppercase tracking-widest text-brand-dark/40 hover:text-brand-dark transition-all"
           >
             Dashboard
           </button>
           <button className="px-6 py-2 bg-white rounded-full text-[9px] font-black uppercase tracking-widest text-brand-dark shadow-sm border border-black/5">
             Mon abonnement
           </button>
        </div>
      </div>

      <div className="text-center mb-20">
        <span className="accent-pill !bg-transparent border border-black/5 mb-6 block w-fit mx-auto scale-90">
          <div className="flex items-center gap-2">
            <div className="w-2 h-2 bg-brand-accent rounded-full animate-pulse" />
            <span className="text-[10px] font-black tracking-[0.3em] opacity-40">Modèles IA mis à jour — Mars 2026</span>
          </div>
        </span>
        <h1 className="text-7xl font-black uppercase tracking-tighter mb-6 leading-none">
          Un forfait pour <span className="text-brand-accent">chaque besoin</span>
        </h1>
        <p className="text-brand-dark/40 font-medium text-xl max-w-2xl mx-auto leading-relaxed">
          Traduisez vos documents Word, Excel et PowerPoint en conservant la mise en page originale. Sans jamais saisir de clé API.
        </p>
      </div>

      <div className="flex items-center justify-center gap-10 mb-20">
         <div className="flex p-1 bg-brand-muted rounded-full border border-black/5 shadow-inner px-2">
            <button 
              onClick={() => setIsAnnual(false)}
              className={`px-8 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all ${!isAnnual ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/60 hover:text-brand-dark'}`}
            >
              Mensuel
            </button>
            <button 
              onClick={() => setIsAnnual(true)}
              className={`px-8 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-all ${isAnnual ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/60 hover:text-brand-dark'}`}
            >
              Annuel <span className={`ml-2 transition-colors ${isAnnual ? 'text-brand-accent' : 'text-brand-accent/60'}`}>-20 %</span>
            </button>
         </div>
      </div>

      <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-6 items-stretch">
        {plans.map((p) => (
          <div 
            key={p.id}
            className={`flex flex-col bg-white rounded-[24px] border border-black/[0.08] overflow-hidden transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.08)] hover:-translate-y-2 group ${p.popular ? 'border-brand-accent/30 ring-4 ring-brand-accent/5' : ''}`}
          >
            {/* Header */}
            <div className={`p-8 ${p.color} text-white relative h-48 flex flex-col justify-end`}>
              {p.popular && (
                <div className="absolute top-0 right-0 p-3 flex gap-2">
                   <span className="bg-brand-dark/20 backdrop-blur-md text-white text-[8px] font-black uppercase tracking-widest px-3 py-1 rounded-full border border-white/20 shadow-lg">POPULAR</span>
                   <span className="bg-brand-dark/40 backdrop-blur-md text-white text-[8px] font-black uppercase tracking-widest px-3 py-1 rounded-full border border-white/20 shadow-lg flex items-center gap-1">
                     <div className="w-1.5 h-1.5 bg-brand-accent rounded-full animate-pulse" /> Mon forfait
                   </span>
                </div>
              )}
              {p.tag && (
                <div className="absolute top-0 right-0 p-3">
                   <span className="bg-white/10 backdrop-blur-md text-white text-[8px] font-black uppercase tracking-widest px-3 py-1 rounded-full border border-white/10">{p.tag}</span>
                </div>
              )}
              
              <div className="flex items-center gap-3 mb-4">
                 {p.id === 'free' && <Star size={20} className={p.iconColor} />}
                 {p.id === 'starter' && <Zap size={20} className={p.iconColor} />}
                 {p.id === 'pro' && <Crown size={20} className={p.iconColor} />}
                 {p.id === 'business' && <Globe size={20} className={p.iconColor} />}
                 {p.id === 'enterprise' && <ShieldCheck size={20} className={p.iconColor} />}
                 <span className={`text-sm font-black uppercase tracking-widest ${p.id === 'free' ? 'text-brand-dark/40' : 'text-white/50'}`}>{p.name}</span>
              </div>
              
              <div className="flex items-baseline gap-2">
                 <h3 className={`text-3xl font-black uppercase tracking-tighter ${p.id === 'free' ? 'text-brand-dark' : 'text-white'}`}>{isAnnual && typeof p.price.annual === 'number' ? p.price.annual + ' €' : (p.price.monthly === 'Sur devis' ? 'Sur devis' : p.title)}</h3>
                 {p.period && <span className={`text-[10px] font-bold uppercase tracking-widest ${p.id === 'free' ? 'text-brand-dark/30' : 'text-white/40'}`}>{p.period}</span>}
              </div>
              
              <p className={`text-[10px] font-medium uppercase mt-3 tracking-widest leading-relaxed ${p.id === 'free' ? 'text-brand-dark/40' : 'text-white/60'}`}>
                {p.desc}
              </p>
            </div>

            {/* Content */}
            <div className="p-8 flex-1 flex flex-col">
              {/* Metrics Box */}
              <div className="space-y-2 mb-10">
                 <div className="flex justify-between items-center py-2 border-b border-black/[0.03]">
                    <div className="flex items-center gap-2">
                       <FileText size={12} className="text-brand-dark/20" />
                       <span className="text-[9px] font-black uppercase tracking-widest text-brand-dark/40">Documents</span>
                    </div>
                    <span className="text-[10px] font-black uppercase text-brand-dark">{p.metrics.docs}</span>
                 </div>
                 <div className="flex justify-between items-center py-2 border-b border-black/[0.03]">
                    <div className="flex items-center gap-2">
                       <Layers size={12} className="text-brand-dark/20" />
                       <span className="text-[9px] font-black uppercase tracking-widest text-brand-dark/40">Pages max</span>
                    </div>
                    <span className="text-[10px] font-black uppercase text-brand-dark">{p.metrics.pages}</span>
                 </div>
                 {p.id === 'pro' && (
                    <div className="flex justify-between items-center py-3 bg-brand-accent/5 px-3 rounded-lg mt-2">
                       <div className="flex items-center gap-2">
                          <Activity size={12} className="text-brand-accent/40" />
                          <span className="text-[9px] font-black uppercase tracking-widest text-brand-accent/60">Traduction IA</span>
                       </div>
                       <span className="text-[9px] font-black uppercase text-brand-accent">Essentielle</span>
                    </div>
                 )}
                  {p.id === 'business' && (
                    <div className="flex justify-between items-center py-3 bg-brand-dark/5 px-3 rounded-lg mt-2">
                       <div className="flex items-center gap-2">
                          <Activity size={12} className="text-brand-dark/20" />
                          <span className="text-[9px] font-black uppercase tracking-widest text-brand-dark/40">Traduction IA</span>
                       </div>
                       <span className="text-[9px] font-black uppercase text-brand-dark">Premium</span>
                    </div>
                 )}
                 {p.id === 'enterprise' && (
                    <div className="flex justify-between items-center py-3 bg-black/5 px-3 rounded-lg mt-2">
                       <div className="flex items-center gap-2">
                          <Activity size={12} className="text-brand-dark/20" />
                          <span className="text-[9px] font-black uppercase tracking-widest text-brand-dark/40">Traduction IA</span>
                       </div>
                       <span className="text-[9px] font-black uppercase text-brand-dark">Custom</span>
                    </div>
                 )}
              </div>

              {/* Features */}
              <ul className="space-y-4 mb-12 flex-1">
                 {p.features.map((f, i) => (
                   <li key={i} className="flex items-start gap-3">
                      <div className="w-4 h-4 rounded-full bg-brand-accent/10 flex items-center justify-center shrink-0 mt-0.5">
                        <CheckCircle2 size={10} className="text-brand-accent" />
                      </div>
                      <span className="text-[10px] font-bold text-brand-dark/60 leading-normal">{f}</span>
                   </li>
                 ))}
              </ul>

              {/* CTA */}
              <button 
                className={`w-full py-4 rounded-2xl text-[11px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-3 border shadow-sm hover:shadow-xl active:scale-95 ${p.id === 'pro' ? 'bg-brand-muted text-brand-dark border-black/5 hover:bg-brand-dark hover:text-white' : (p.id === 'starter' || p.id === 'business' || p.id === 'enterprise' ? 'bg-brand-dark text-white border-transparent hover:bg-brand-accent' : 'bg-brand-dark text-white border-transparent hover:bg-brand-accent')}`}
              >
                {p.cta}
                <ArrowRight size={14} className="opacity-40" />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Crown = ({ size, className }: { size: number, className: string }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    <path d="M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z" />
    <path d="M12 17v4" />
    <path d="M9 21h6" />
  </svg>
);
