import React from 'react';
import { User, Mail, Calendar, ShieldCheck, ShieldAlert, Fingerprint, CreditCard, Building, MapPin, BadgeCheck, Clock, Shield, Settings, UserCheck, Terminal, ArrowRight } from 'lucide-react';
import { AppUser, Language } from '../types';
import { translations } from '../translations';
import { useNotification } from '../App';

interface UserProfileProps {
  user: AppUser;
  lang: Language;
  onNavigateAdmin: () => void;
}

const UserProfile: React.FC<UserProfileProps> = ({ user, lang, onNavigateAdmin }) => {
  const t = translations[lang];
  const { setUserRole } = useNotification();

  return (
    <div className="space-y-10 animate-in fade-in slide-in-from-bottom-6 duration-500">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
        <div>
          <h2 className="text-4xl font-black text-slate-900 tracking-tight flex items-center gap-4 uppercase">
            {t.userProfile}
          </h2>
          <p className="text-slate-500 font-medium mt-1">{t.accountDetails}</p>
        </div>
        
        {/* Role Switcher */}
        <div className="flex bg-white p-1.5 rounded-2xl border border-slate-100 shadow-sm">
            <button 
                onClick={() => setUserRole('client')} 
                className={`px-6 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2 transition-all ${user.role === 'client' ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-600'}`}
            >
                <UserCheck size={14} /> Cliente
            </button>
            <button 
                onClick={() => setUserRole('admin')} 
                className={`px-6 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2 transition-all ${user.role === 'admin' ? 'bg-slate-900 text-white shadow-lg' : 'text-slate-400 hover:text-slate-600'}`}
            >
                <Settings size={14} /> Admin
            </button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
        {/* Main Profile Card */}
        <div className="lg:col-span-1 space-y-8">
          <div className="bg-white rounded-[3.5rem] p-10 border border-slate-100 shadow-xl shadow-slate-200/50 flex flex-col items-center text-center relative overflow-hidden group">
            <div className="absolute top-0 left-0 w-full h-32 bg-slate-900 group-hover:h-36 transition-all duration-700"></div>
            
            <div className="relative mt-8 mb-6">
               <div className="w-32 h-32 rounded-[2.5rem] bg-slate-100 border-4 border-white shadow-2xl flex items-center justify-center text-slate-400 overflow-hidden relative z-10">
                  {user.avatarUrl ? <img src={user.avatarUrl} alt="Avatar" className="w-full h-full object-cover" /> : <User size={56} />}
               </div>
               {user.identity.verified && (
                 <div className="absolute -bottom-2 -right-2 bg-blue-600 text-white p-2 rounded-xl shadow-xl border-4 border-white z-20">
                    <BadgeCheck size={24} />
                 </div>
               )}
            </div>

            <h3 className="text-2xl font-black text-slate-900 tracking-tight uppercase leading-none">{user.username}</h3>
            <p className="text-blue-600 font-bold tracking-[0.2em] text-[10px] mt-2 mb-6">{user.role.toUpperCase()} ACCOUNT</p>

            <div className="w-full space-y-4 pt-6 border-t border-slate-50">
               <div className="flex items-center gap-4 text-left">
                  <div className="bg-slate-50 p-3 rounded-xl text-slate-400"><Mail size={18} /></div>
                  <div className="min-w-0 flex-1">
                    <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">{t.email}</p>
                    <p className="font-bold text-slate-800 text-sm truncate">{user.email}</p>
                  </div>
               </div>
               <div className="flex items-center gap-4 text-left">
                  <div className="bg-slate-50 p-3 rounded-xl text-slate-400"><Clock size={18} /></div>
                  <div className="min-w-0 flex-1">
                    <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">{t.regDate}</p>
                    <p className="font-bold text-slate-800 text-sm">{new Date(user.registrationDate).toLocaleDateString()}</p>
                  </div>
               </div>
            </div>
          </div>

          {/* Admin Management Portal - DISCREET ACCESS */}
          {user.role === 'admin' && (
            <button 
                onClick={onNavigateAdmin}
                className="w-full bg-slate-900 rounded-[2.5rem] p-8 text-white relative overflow-hidden group hover:shadow-2xl hover:shadow-slate-300 transition-all text-left"
            >
                <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none group-hover:scale-110 transition-transform"><Terminal size={100} /></div>
                <div className="flex items-center gap-4 mb-4">
                    <div className="bg-white/10 p-3 rounded-xl"><Terminal size={20} className="text-blue-400" /></div>
                    <h4 className="font-black uppercase tracking-tight text-lg">{t.accessAdminPortal}</h4>
                </div>
                <p className="text-xs text-slate-400 font-medium leading-relaxed mb-6">
                    {t.adminPortalDesc}
                </p>
                <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-blue-400 group-hover:translate-x-2 transition-transform">
                    Governance Console <ArrowRight size={14} />
                </div>
            </button>
          )}

          {/* Security Summary */}
          <div className="bg-white rounded-[2.5rem] p-8 border border-slate-100 shadow-sm relative overflow-hidden">
             <div className="absolute top-0 right-0 p-8 opacity-[0.02] pointer-events-none"><Shield size={120} /></div>
             <h4 className="font-black uppercase tracking-tight text-slate-900 text-lg mb-6 relative z-10">Trust Score</h4>
             <div className="flex items-end gap-3 mb-6 relative z-10">
                <span className="text-5xl font-black text-slate-900 leading-none">{user.identity.verified ? '98' : '45'}</span>
                <span className="text-slate-400 font-bold pb-1">/100</span>
             </div>
             <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden mb-6 relative z-10">
                <div className={`h-full ${user.identity.verified ? 'bg-blue-500 w-[98%]' : 'bg-orange-500 w-[45%]'} transition-all duration-1000`}></div>
             </div>
             <p className="text-xs text-slate-500 font-medium relative z-10 leading-relaxed">
               {user.identity.verified 
                ? "Il tuo profilo ha completato la verifica dell'identità digitale. Hai accesso completo a tutte le funzioni legali." 
                : "Hai accumulato fiducia tramite i depositi effettuati. Verifica l'identità per raggiungere il 100%."}
             </p>
          </div>
        </div>

        {/* Identity Details Section */}
        <div className="lg:col-span-2 space-y-8">
           <div className="bg-white rounded-[3.5rem] border border-slate-100 shadow-xl shadow-slate-200/50 overflow-hidden">
              <div className="bg-slate-50 px-10 py-8 border-b border-slate-100 flex justify-between items-center">
                 <div className="flex items-center gap-4">
                    <div className={`p-3 rounded-2xl ${user.identity.verified ? 'bg-emerald-100 text-emerald-600' : 'bg-orange-100 text-orange-600'}`}>
                       {user.identity.verified ? <ShieldCheck size={24} /> : <ShieldAlert size={24} />}
                    </div>
                    <div>
                       <h4 className="font-black text-slate-900 uppercase tracking-tight text-lg leading-none">{t.personalInfo}</h4>
                       <p className={`text-[10px] font-bold tracking-widest mt-1 uppercase ${user.identity.verified ? 'text-emerald-600' : 'text-orange-600'}`}>
                          {user.identity.verified ? t.identityVerified : t.notVerified}
                       </p>
                    </div>
                 </div>
                 {user.identity.verified && (
                    <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-xl border border-slate-100 shadow-sm">
                       <Fingerprint size={14} className="text-blue-600" />
                       <span className="text-[10px] font-black uppercase tracking-widest text-slate-500">Method: {user.identity.method?.toUpperCase()}</span>
                    </div>
                 )}
              </div>

              <div className="p-10">
                 {user.identity.verified ? (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
                       <DetailItem icon={<User size={18} />} label={t.authorRegistrant} value={user.identity.fullName || 'N/A'} />
                       <DetailItem icon={<Calendar size={18} />} label={t.dob} value={user.identity.dateOfBirth || 'N/A'} />
                       <DetailItem icon={<Fingerprint size={18} />} label={t.taxCode} value={user.identity.taxCode || 'N/A'} isMono />
                       <DetailItem icon={<CreditCard size={18} />} label="ID Document" value={user.identity.documentId || 'MOCK-ID-4422'} isMono />
                    </div>
                 ) : (
                    <div className="py-20 flex flex-col items-center text-center space-y-6">
                       <div className="w-24 h-24 bg-slate-50 text-slate-200 rounded-[2.5rem] flex items-center justify-center">
                          <ShieldAlert size={48} />
                       </div>
                       <div className="max-w-xs">
                          <h4 className="text-xl font-black text-slate-900 mb-2 uppercase tracking-tight">{t.verifyIdentity}</h4>
                          <p className="text-slate-400 font-medium text-sm leading-relaxed mb-8">Non hai ancora verificato la tua identità tramite provider ufficiali (SPID/CIE).</p>
                       </div>
                       <button className="px-8 py-4 bg-blue-600 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest shadow-xl shadow-blue-100 hover:bg-blue-700 transition-all">Verifica ora</button>
                    </div>
                 )}
              </div>
           </div>

           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col items-start gap-4">
                 <div className="bg-blue-50 text-blue-600 p-4 rounded-2xl"><Building size={24} /></div>
                 <h4 className="font-black text-slate-900 uppercase text-lg tracking-tight">Business Profile</h4>
                 <p className="text-xs text-slate-400 font-medium leading-relaxed">Configura i dati della tua azienda per emettere certificati a nome della società.</p>
                 <button className="text-[10px] font-black uppercase tracking-widest text-blue-600 mt-2 hover:underline">Configura Corporate</button>
              </div>
              <div className="bg-white p-8 rounded-[2.5rem] border border-slate-100 shadow-sm flex flex-col items-start gap-4">
                 <div className="bg-slate-50 text-slate-400 p-4 rounded-2xl"><MapPin size={24} /></div>
                 <h4 className="font-black text-slate-900 uppercase text-lg tracking-tight">Legal Address</h4>
                 <p className="text-xs text-slate-400 font-medium leading-relaxed">Indirizzo utilizzato per le diffide e le notifiche legali generate dall'AI.</p>
                 <button className="text-[10px] font-black uppercase tracking-widest text-slate-400 mt-2 hover:underline">Imposta Indirizzo</button>
              </div>
           </div>
        </div>
      </div>
    </div>
  );
};

const DetailItem = ({ icon, label, value, isMono }: any) => (
  <div className="flex gap-4">
     <div className="bg-slate-50 p-3 rounded-2xl text-slate-400 h-fit">
        {icon}
     </div>
     <div>
        <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{label}</p>
        <p className={`text-lg font-black text-slate-900 tracking-tight leading-none ${isMono ? 'font-mono uppercase text-blue-700' : ''}`}>{value}</p>
     </div>
  </div>
);

export default UserProfile;