import React, { useState, createContext, useContext, useMemo, useEffect, Suspense } from 'react';
import LandingPage from './components/LandingPage';
import Dashboard from './components/Dashboard';
import FileUploader from './components/FileUploader';
import CertificateView from './components/CertificateView';
import VerificationPortal from './components/VerificationPortal';
const AdminDashboard = React.lazy(() => import('./components/AdminDashboard'));
import AdminLogin from './components/AdminLogin';
import { AuthProvider } from './context/AuthContext';
const LegalVault = React.lazy(() => import('./components/LegalVault'));
const AIAssistant = React.lazy(() => import('./components/AIAssistant'));
import UserProfile from './components/UserProfile';
const LegalDefense = React.lazy(() => import('./components/LegalDefense'));
import IPMonitor from './components/IPMonitor';
const BillingCenter = React.lazy(() => import('./components/BillingCenter'));
const LicenseGenerator = React.lazy(() => import('./components/LicenseGenerator'));
import { Certificate, Language, AppUser, IdentityData } from './types';
import { translations } from './translations';
import { draftNotificationEmail, simulateEmailSend } from './emailService';
import { AuthProvider, useAuth } from './context/AuthContext';
import { Shield, Layout, FileText, Search, Settings, Archive, MessageSquare, User as UserIcon, Gavel, Monitor, Globe, CreditCard, Menu, X, Zap, Coins, Lock, Award, Scale, Home, RefreshCw } from 'lucide-react';

export interface NotificationContextType {
  notify: (message: string, type?: 'success' | 'error' | 'info' | 'warning') => void;
  user: AppUser;
  deductCredits: (amount: number) => boolean;
  addCredits: (amount: number) => void;
  setUserRole: (role: 'admin' | 'client') => void;
  onUpdateUser: (updatedUser: AppUser) => void;
}

const NotificationContext = createContext<NotificationContextType | undefined>(undefined);

export const useNotification = () => {
  const context = useContext(NotificationContext);
  if (!context) throw new Error("useNotification must be used within a NotificationProvider");
  return context;
};

const App: React.FC = () => {
  const [lang, setLang] = useState<Language>('it');
  const [activeTab, setActiveTab] = useState<'landing' | 'dashboard' | 'upload' | 'verify' | 'certificates' | 'admin' | 'ai-assistant' | 'profile' | 'defense' | 'monitor' | 'billing' | 'licenses'>('landing');
  const [certificates, setCertificates] = useState<Certificate[]>([]);
  const [selectedCert, setSelectedCert] = useState<Certificate | null>(null);
  const [notifications, setNotifications] = useState<{ id: number, message: string, type: string }[]>([]);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  // Admin authentication is handled via AuthProvider + JWT.
  const [logoClickCount, setLogoClickCount] = useState(0);
  
  // GDPR: persist personal data only after explicit consent.
  const [hasConsent, setHasConsent] = useState<boolean>(() => localStorage.getItem('cc_consent') === 'true');

  const [user, setUser] = useState<AppUser>(() => {
    const saved = hasConsent ? sessionStorage.getItem('app_user_data') : null;
    if (saved) return JSON.parse(saved);
    return {
      id: 'USR-123456',
      username: 'User',
      email: '',
      role: 'client',
      identity: { verified: false },
      registrationDate: new Date().toISOString(),
      credits: { balance: 0 }
    };
  });

  useEffect(() => {
    if (!hasConsent) return;
    sessionStorage.setItem('app_user_data', JSON.stringify(user));
  }, [user, hasConsent]);

  // Gestione background anchoring
  useEffect(() => {
    const pendingCerts = certificates.filter(c => c.bitcoinEvidence?.status === 'pending');
    
    pendingCerts.forEach(cert => {
      // Simula il tempo di attesa della blockchain (per la demo: 20 secondi)
      const timer = setTimeout(async () => {
        const updatedCert: Certificate = {
          ...cert,
          bitcoinEvidence: {
            ...cert.bitcoinEvidence!,
            status: 'anchored',
            txId: '0e3e' + Math.random().toString(16).substr(2, 8),
            blockHeight: 842512 + Math.floor(Math.random() * 100)
          }
        };

        setCertificates(prev => prev.map(c => c.id === cert.id ? updatedCert : c));
        
        // Se il certificato è correntemente visualizzato, aggiornalo
        if (selectedCert?.id === cert.id) {
          setSelectedCert(updatedCert);
        }

        // Invia notifica email (simulata)
        const email = await draftNotificationEmail('anchoring_complete', updatedCert, lang);
        await simulateEmailSend(email);
        
        notify(`${lang === 'it' ? 'Ancoraggio Blockchain completato per' : 'Blockchain Anchoring complete for'}: ${cert.title}`, "success");
      }, 20000);

      return () => clearTimeout(timer);
    });
  }, [certificates, lang]);

  const handleLogoClick = () => {
      if (user.role !== 'admin') return;
      setLogoClickCount(prev => {
          const next = prev + 1;
          if (next === 5) {
              setActiveTab('admin');
              notify("Admin Portal Unlocked", "success");
              return 0;
          }
          return next;
      });
      setTimeout(() => setLogoClickCount(0), 2000);
  };

  const notify = (message: string, type: 'success' | 'error' | 'info' | 'warning' = 'info') => {
    const id = Date.now();
    setNotifications(prev => [...prev, { id, message, type }]);
    setTimeout(() => setNotifications(prev => prev.filter(n => n.id !== id)), 5000);
  };

  const deductCredits = (amount: number): boolean => {
      if (user.credits.balance < amount) {
          notify(translations[lang].insufficientCredits, "error");
          setActiveTab('billing');
          return false;
      }
      setUser(prev => ({
          ...prev,
          credits: { balance: prev.credits.balance - amount }
      }));
      return true;
  };

  const addCredits = (amount: number) => {
      setUser(prev => ({
          ...prev,
          credits: { balance: prev.credits.balance + amount }
      }));
      notify(translations[lang].paymentSuccess, "success");
  };

  const setUserRole = (role: 'admin' | 'client') => {
      setUser(prev => ({ ...prev, role }));
      notify(`Modalità ${role === 'admin' ? 'Admin' : 'Client'}`, "info");
      if (role === 'client') setIsAdminAuthenticated(false);
  };

  const handleUpdateUser = (updatedUser: AppUser) => {
      setUser(updatedUser);
  };

  const handleAddCertificate = (cert: Certificate) => {
    setCertificates(prev => [cert, ...prev]);
    setSelectedCert(cert);
    setActiveTab('certificates');
    notify(lang === 'it' ? "Certificato emesso con successo. In fase di ancoraggio..." : "Certificate issued successfully. Anchoring in progress...", "success");
  };

  const t = translations[lang];

  const AdminArea: React.FC = () => {
    const { token, isAdmin } = useAuth();
    if (!token || !isAdmin) return <AdminLogin lang={lang} />;
    return <AdminDashboard certificates={certificates} lang={lang} users={[user]} onUpdateUser={handleUpdateUser} />;
  };

  const renderContent = () => {
    switch (activeTab) {
      case 'landing': return <LandingPage lang={lang} onStart={() => setActiveTab('dashboard')} />;
      case 'dashboard': return <Dashboard certificates={certificates} onNavigate={setActiveTab} lang={lang} user={user} />;
      case 'upload': return <FileUploader onComplete={handleAddCertificate} lang={lang} />;
      case 'verify': return <VerificationPortal certificates={certificates} lang={lang} />;
      case 'certificates':
        if (selectedCert) return (
            <div className="space-y-6">
              <button onClick={() => setSelectedCert(null)} className="flex items-center gap-2 text-slate-400 hover:text-blue-600 font-black text-[10px] uppercase tracking-widest">
                ← {lang === 'it' ? 'Torna al Vault' : 'Back to Vault'}
              </button>
              <CertificateView certificate={selectedCert} lang={lang} />
            </div>
        );
        return <LegalVault certificates={certificates} onViewCert={setSelectedCert} lang={lang} userIdentity={user.identity} onUserIdentityUpdate={(data) => setUser(prev => ({...prev, identity: data}))} />;
      case 'admin':
        return <AdminArea />;
      case 'ai-assistant': return <AIAssistant lang={lang} certificates={certificates} />;
      case 'profile': return <UserProfile user={user} lang={lang} onNavigateAdmin={() => setActiveTab('admin')} />;
      case 'defense': return <LegalDefense certificates={certificates} lang={lang} />;
      case 'monitor': return <IPMonitor certificates={certificates} lang={lang} onNavigate={setActiveTab} />;
      case 'billing': return <BillingCenter lang={lang} user={user} onPurchase={addCredits} />;
      case 'licenses': return <LicenseGenerator certificates={certificates} lang={lang} />;
      default: return <LandingPage lang={lang} onStart={() => setActiveTab('dashboard')} />;
    }
  };

  const navItems = [
    { id: 'landing', icon: <Home size={20} />, label: lang === 'it' ? "Home" : "Home" },
    { id: 'dashboard', icon: <Layout size={20} />, label: t.dashboard },
    { id: 'upload', icon: <FileText size={20} />, label: t.newDeposit },
    { id: 'certificates', icon: <Archive size={20} />, label: t.certificates },
    { id: 'licenses', icon: <Award size={20} />, label: lang === 'it' ? "Licenze" : "Licenses", group: 'legal' },
    { id: 'ai-assistant', icon: <MessageSquare size={20} />, label: t.aiAssistant, group: 'legal' },
    { id: 'defense', icon: <Gavel size={20} />, label: t.legalDefense, group: 'legal' },
    { id: 'monitor', icon: <Monitor size={20} />, label: t.ipMonitor, group: 'legal' },
    { id: 'billing', icon: <Coins size={20} />, label: t.billing, group: 'billing' }
  ];

  return (
  <AuthProvider>
    <Suspense fallback={<div style={{padding:20}}>Loading…</div>}>
      <AdminDashboard />
    </Suspense>
  </AuthProvider>
);

};

const NavItem = ({ active, onClick, icon, label }: any) => (
  <button onClick={onClick} className={`w-full flex items-center gap-4 px-6 py-4 rounded-3xl transition-all ${active ? 'bg-blue-600 text-white shadow-xl shadow-blue-100' : 'text-slate-400 hover:text-slate-900 hover:bg-slate-50'}`}>
    {icon} <span className="text-sm font-black uppercase tracking-tight">{label}</span>
  </button>
);

export default App;