import React from 'react';
import { 
  Globe, 
  Activity, 
  FileText, 
  Layers, 
  Zap, 
  Crown, 
  CheckCircle2, 
  ChevronDown 
} from 'lucide-react';

interface ProfileViewProps {
  tab: string;
  setTab: (t: any) => void;
  onUpgrade: () => void;
}

export const ProfileView: React.FC<ProfileViewProps> = ({ tab, setTab, onUpgrade }) => {
  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-12">
        <span className="accent-pill mb-4 block w-fit">Compte utilisateur</span>
        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Mon Profil</h1>
        <p className="text-brand-dark/40 font-medium">Gérez votre compte et vos préférences de traduction.</p>
      </div>

      <div className="flex gap-2 p-2 bg-brand-muted rounded-2xl mb-12 w-fit border border-black/5">
        {['account', 'subscription', 'preferences'].map((t) => (
          <button 
            key={t}
            onClick={() => setTab(t)}
            className={`px-10 py-3 rounded-xl text-[11px] font-black uppercase tracking-widest transition-all ${tab === t ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/30 hover:text-brand-dark'}`}
          >
            {t === 'account' ? 'Compte' : t === 'subscription' ? 'Abonnement' : 'Préférences'}
          </button>
        ))}
      </div>

      {tab === 'account' && (
        <div className="editorial-card p-12 flex items-center gap-10 bg-white border-none shadow-editorial">
          <div className="w-24 h-24 bg-brand-dark rounded-[32px] flex items-center justify-center text-white text-4xl font-black shadow-2xl">SR</div>
          <div className="flex-1">
            <div className="flex items-center gap-4 mb-3">
              <h2 className="text-3xl font-black uppercase tracking-tight">Sepehr Ramezani</h2>
              <span className="accent-pill !px-3 !py-1 text-[9px]">Gérant</span>
            </div>
            <p className="text-[11px] font-bold uppercase tracking-widest text-brand-dark/40 mb-3 flex items-center gap-2">
                <Globe size={12} className="text-brand-accent"/> sepehr1151@gmail.com
            </p>
            <p className="text-[9px] text-brand-dark/20 font-black uppercase tracking-widest">Membre d'élite depuis le 10 mai 2026</p>
          </div>
          <button className="px-8 py-3 border border-black/10 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-brand-muted transition-all">Modifier</button>
        </div>
      )}

      {tab === 'subscription' && (
        <div className="space-y-8">
        <div className="editorial-card !bg-brand-dark p-12 flex items-center justify-between text-white border-none shadow-2xl relative overflow-hidden">
           {/* Decorative element */}
           <div className="absolute top-0 right-0 w-32 h-32 bg-brand-accent/10 rounded-bl-full pointer-events-none" />
           
           <div className="flex items-center gap-8 relative z-10">
              <div className="w-16 h-16 bg-white/10 backdrop-blur-xl rounded-2xl flex items-center justify-center text-brand-accent border border-white/10 shadow-inner">
                <Crown size={28} />
              </div>
              <div>
                <div className="flex items-center gap-3">
                  <h3 className="text-2xl font-black uppercase tracking-tight text-white">Forfait Pro</h3>
                  <span className="px-3 py-1 bg-brand-accent/20 rounded-full text-[9px] font-black uppercase tracking-widest text-brand-accent border border-brand-accent/30 shadow-sm">Actif</span>
                </div>
                <p className="text-white/60 text-[10px] font-black uppercase tracking-widest mt-1">Facturation mensuelle • 19 €/mois</p>
              </div>
            </div>
            <button 
              onClick={onUpgrade}
              className="relative z-10 px-10 py-4 bg-white text-brand-dark rounded-xl font-black text-[10px] uppercase tracking-widest shadow-xl hover:scale-105 transition-all"
            >
              Changer de forfait
            </button>
         </div>

           <div className="editorial-card p-12 bg-white border-none shadow-editorial">
              <div className="flex justify-between items-center mb-12">
                <div className="flex items-center gap-4 text-brand-accent">
                  <Activity size={20} />
                  <span className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark">Métriques d'utilisation</span>
                </div>
                <span className="text-[9px] font-black text-brand-dark/20 uppercase tracking-widest border-b border-black/10 pb-1">Reset prévu le 1 juin 2026</span>
              </div>

              <div className="space-y-16">
                 <div>
                    <div className="flex justify-between text-[10px] font-black uppercase tracking-widest mb-4">
                      <span className="flex items-center gap-3 text-brand-dark/40"><FileText size={16} className="text-brand-accent"/> Documents</span>
                      <span className="text-brand-dark font-black">5 / 200</span>
                    </div>
                    <div className="h-2 bg-brand-muted rounded-full overflow-hidden p-0.5 border border-black/5">
                       <div className="h-full bg-brand-accent rounded-full shadow-[0_0_10px_rgba(197,161,122,0.5)]" style={{ width: '2.5%' }} />
                    </div>
                 </div>
                 
                 <div>
                    <div className="flex justify-between text-[10px] font-black uppercase tracking-widest mb-4">
                      <span className="flex items-center gap-3 text-brand-dark/40"><Layers size={16} className="text-brand-accent"/> Pages</span>
                      <span className="text-brand-dark font-black">13 / 200</span>
                    </div>
                    <div className="h-2 bg-brand-muted rounded-full overflow-hidden p-0.5 border border-black/5">
                       <div className="h-full bg-brand-accent rounded-full shadow-[0_0_10px_rgba(197,161,122,0.5)]" style={{ width: '6.5%' }} />
                    </div>
                 </div>
              </div>

              <div className="mt-16 p-8 bg-brand-muted rounded-[32px] border border-black/5 flex items-center justify-between group">
                <div className="flex items-center gap-6 text-brand-dark">
                  <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-brand-accent shadow-sm group-hover:rotate-12 transition-transform">
                    <Zap size={24} />
                  </div>
                  <p className="text-[11px] font-black uppercase tracking-tight max-w-[200px] leading-relaxed">Passez au niveau supérieur pour des documents illimités.</p>
                </div>
                <button 
                  onClick={onUpgrade}
                  className="px-8 py-3 bg-brand-dark text-white rounded-xl text-[9px] font-black uppercase tracking-widest shadow-lg hover:bg-brand-accent transition-all"
                >
                  Voir les offres
                </button>
              </div>
           </div>

           <div className="editorial-card p-12 bg-white border-none shadow-editorial">
             <div className="flex items-center gap-4 text-brand-accent mb-12">
               <CheckCircle2 size={20} />
               <span className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark">Inclus dans votre forfait</span>
             </div>
             <div className="grid md:grid-cols-2 gap-y-6 gap-x-12">
               {[
                 "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"
               ].map((feature, i) => (
                 <div key={i} className="flex items-center gap-3">
                   <div className="w-5 h-5 rounded-full border border-brand-accent/30 flex items-center justify-center bg-brand-accent/5">
                     <CheckCircle2 size={12} className="text-brand-accent" />
                   </div>
                   <span className="text-[10px] font-bold uppercase tracking-tight text-brand-dark/60">{feature}</span>
                 </div>
               ))}
             </div>
           </div>
        </div>
      )}

      {tab === 'preferences' && (
        <div className="space-y-8">
           <div className="editorial-card p-12 bg-white border-none shadow-editorial">
             <div className="flex items-center gap-5 mb-12">
               <div className="w-12 h-12 bg-brand-muted rounded-2xl flex items-center justify-center text-brand-accent">
                 <Globe size={24} />
               </div>
               <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark">Langue de l'interface</h3>
             </div>
             <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                {['English', 'Français', 'Español', 'Deutsch', 'Português', 'Italiano', 'Nederlands', 'Русский', '日本語', '한국어'].map((l) => (
                   <button key={l} className={`px-6 py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest border transition-all ${l === 'Français' ? 'bg-brand-dark border-brand-dark text-white shadow-xl' : 'bg-white border-black/5 text-brand-dark/30 hover:border-brand-accent/30 hover:text-brand-dark'}`}>
                    {l}
                  </button>
                ))}
             </div>
             <p className="mt-12 text-[9px] text-brand-dark/20 font-black uppercase tracking-widest italic border-t border-black/5 pt-6">La langue est détectée automatiquement selon votre navigateur.</p>
           </div>

           <div className="editorial-card p-12 bg-white border-none shadow-editorial flex items-center justify-between">
              <div className="flex items-center gap-6">
                <div className="w-14 h-14 bg-brand-muted rounded-2xl flex items-center justify-center text-brand-accent">
                    <FileText size={28} />
                </div>
                <div>
                  <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark">Cible par défaut</h3>
                  <p className="text-brand-dark/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">Pré-sélection automatique lors de l'import.</p>
                </div>
              </div>
              <div className="flex gap-4">
                 <div className="px-8 py-4 bg-brand-muted rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-5 border border-black/5">
                   Français <ChevronDown size={14} className="text-brand-accent" />
                 </div>
                 <button className="premium-button px-10 py-4 text-[10px] uppercase tracking-widest !rounded-2xl">Enregistrer</button>
              </div>
           </div>
        </div>
      )}
    </div>
  );
};
