import { useState, useEffect } from 'react';
import {
  Shield,
  QrCode,
  RefreshCw,
  CheckCircle2, Lock,
  AlertCircle,
  Unlock,
  Eye,
  EyeOff,
  FileKey,
  Info,
  WifiOff
} from 'lucide-react';
import { PgpKeyInput } from './components/PgpKeyInput';
import { QrDisplay } from './components/QrDisplay';
import QRScanner from './components/QRScanner';
import { validateBip39Mnemonic } from './lib/bip39';
import { buildPlaintext, encryptToSeedPgp, decryptSeedPgp } from './lib/seedpgp';
import type { SeedPgpPlaintext } from './lib/types';
import * as openpgp from 'openpgp';
import { StorageIndicator } from './components/StorageIndicator';
import { SecurityWarnings } from './components/SecurityWarnings';
import { ClipboardTracker } from './components/ClipboardTracker';
import { ReadOnly } from './components/ReadOnly';
import { getSessionKey, encryptJsonToBlob, destroySessionKey, EncryptedBlob } from './lib/sessionCrypto';
 
 console.log("OpenPGP.js version:", openpgp.config.versionString);
 
 function App() {
   const [activeTab, setActiveTab] = useState<'backup' | 'restore'>('backup');
   const [mnemonic, setMnemonic] = useState('');
   const [backupMessagePassword, setBackupMessagePassword] = useState('');
   const [restoreMessagePassword, setRestoreMessagePassword] = useState('');
 
   const [publicKeyInput, setPublicKeyInput] = useState('');
   const [privateKeyInput, setPrivateKeyInput] = useState('');
   const [privateKeyPassphrase, setPrivateKeyPassphrase] = useState('');
   const [hasBip39Passphrase, setHasBip39Passphrase] = useState(false);
   const [qrPayload, setQrPayload] = useState('');
   const [recipientFpr, setRecipientFpr] = useState('');
   const [restoreInput, setRestoreInput] = useState('');
   const [restoredData, setRestoredData] = useState<SeedPgpPlaintext | null>(null);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
   const [showMnemonic, setShowMnemonic] = useState(false);
   const [copied, setCopied] = useState(false);
   const [showQRScanner, setShowQRScanner] = useState(false);
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [encryptedMnemonicCache, setEncryptedMnemonicCache] = useState<EncryptedBlob | null>(null);
 
   useEffect(() => {
     // When entering read-only mode, clear sensitive data for security.
     if (isReadOnly) {
       setMnemonic('');
       setBackupMessagePassword('');
       setRestoreMessagePassword('');
       setPublicKeyInput('');
       setPrivateKeyInput('');
       setPrivateKeyPassphrase('');
       setQrPayload('');
       setRestoreInput('');
       setRestoredData(null);
       setError('');
     }
   }, [isReadOnly]);
 
   // Cleanup session key on component unmount
   useEffect(() => {
     return () => {
       destroySessionKey();
     };
   }, []);
 
 
   const copyToClipboard = async (text: string) => {
     if (isReadOnly) {
       setError("Copy to clipboard is disabled in Read-only mode.");
       return;
     }
     try {
       await navigator.clipboard.writeText(text);
       setCopied(true);
       window.setTimeout(() => setCopied(false), 1500);
     } catch {
       const ta = document.createElement("textarea");
       ta.value = text;
       ta.style.position = "fixed";
       ta.style.left = "-9999px";
       document.body.appendChild(ta);
       ta.focus();
       ta.select();
       document.execCommand("copy");
       document.body.removeChild(ta);
       setCopied(true);
       window.setTimeout(() => setCopied(false), 1500);
     }
   };
 
   const handleBackup = async () => {
     setLoading(true);
     setError('');
     setQrPayload('');
     setRecipientFpr('');
 
     try {
       const validation = validateBip39Mnemonic(mnemonic);
       if (!validation.valid) {
         throw new Error(validation.error);
       }
 
       const plaintext = buildPlaintext(mnemonic, hasBip39Passphrase);
 
       const result = await encryptToSeedPgp({
         plaintext,
         publicKeyArmored: publicKeyInput || undefined,
         messagePassword: backupMessagePassword || undefined,
       });
 
       setQrPayload(result.framed);
       if (result.recipientFingerprint) {
         setRecipientFpr(result.recipientFingerprint);
       }
 
      // Initialize session key before encrypting
      await getSessionKey();
       // Encrypt mnemonic with session key and clear plaintext state
       const blob = await encryptJsonToBlob({ mnemonic, timestamp: Date.now() });
       setEncryptedMnemonicCache(blob);
       setMnemonic(''); // Clear plaintext mnemonic
     } catch (e) {
       setError(e instanceof Error ? e.message : 'Encryption failed');
     } finally {
       setLoading(false);
     }
   };
 
   const handleRestore = async () => {
     setLoading(true);
     setError('');
     setRestoredData(null);
 
     try {
       const result = await decryptSeedPgp({
         frameText: restoreInput,
         privateKeyArmored: privateKeyInput || undefined,
         privateKeyPassphrase: privateKeyPassphrase || undefined,
         messagePassword: restoreMessagePassword || undefined,
       });
 
 
       setRestoredData(result);
     } catch (e) {
       setError(e instanceof Error ? e.message : 'Decryption failed');
     } finally {
       setLoading(false);
     }
   };
 
   const handleLockAndClear = () => {
     destroySessionKey();
     setEncryptedMnemonicCache(null);
     setMnemonic('');
     setBackupMessagePassword('');
     setRestoreMessagePassword('');
     setPublicKeyInput('');
     setPrivateKeyInput('');
     setPrivateKeyPassphrase('');
     setQrPayload('');
     setRecipientFpr('');
     setRestoreInput('');
     setRestoredData(null);
     setError('');
     setShowMnemonic(false);
     setCopied(false);
     setShowQRScanner(false);
   };
 
 
   return (
     <>
       <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 text-slate-900 p-4 md:p-8">
         <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow-2xl overflow-hidden border border-slate-200">
 
           {/* Header */}
           <div className="bg-gradient-to-r from-slate-900 to-slate-800 p-6 text-white flex items-center justify-between">
             <div className="flex items-center gap-3">
               <div className="p-2 bg-blue-600 rounded-lg shadow-lg">
                 <Shield size={28} />
               </div>
               <div>
                 <h1 className="text-2xl font-bold tracking-tight">
                   SeedPGP <span className="text-blue-400 font-mono text-base ml-2">v{__APP_VERSION__}</span>
                 </h1>
                 <p className="text-xs text-slate-400 mt-0.5">OpenPGP-secured BIP39 backup</p>
               </div>
             </div>
             {encryptedMnemonicCache && ( // Show only if encrypted data exists
               <button
                 onClick={handleLockAndClear}
                 className="flex items-center gap-2 text-sm text-red-400 bg-slate-800/50 px-3 py-1.5 rounded-lg hover:bg-red-900/50 transition-colors"
               >
                 <Lock size={16} />
                 <span>Lock/Clear</span>
               </button>
             )}
             <div className="flex items-center gap-4">
               {isReadOnly && (
                 <div className="flex items-center gap-2 text-sm text-amber-400 bg-slate-800/50 px-3 py-1.5 rounded-lg">
                   <WifiOff size={16} />
                   <span>Read-only</span>
                 </div>
               )}
               <div className="flex bg-slate-800/50 rounded-lg p-1 backdrop-blur">
                 <button
                   onClick={() => {
                     setActiveTab('backup');
                     setError('');
                     setQrPayload('');
                     setRestoredData(null);
                   }}
                   className={`px-5 py-2 rounded-md text-sm font-semibold transition-all ${activeTab === 'backup'
                     ? 'bg-white text-slate-900 shadow-lg'
                     : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
                     }`}
                 >
                   Backup
                 </button>
                 <button
                   onClick={() => {
                     setActiveTab('restore');
                     setError('');
                     setQrPayload('');
                     setRestoredData(null);
                   }}
                   className={`px-5 py-2 rounded-md text-sm font-semibold transition-all ${activeTab === 'restore'
                     ? 'bg-white text-slate-900 shadow-lg'
                     : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
                     }`}
                 >
                   Restore
                 </button>
               </div>
             </div>
           </div>
 
           <div className="p-6 md:p-8 space-y-6">
             {/* Error Display */}
             {error && (
               <div className="p-4 bg-red-50 border-l-4 border-red-500 rounded-r-xl flex gap-3 text-red-800 text-sm items-start animate-in slide-in-from-top-2">
                 <AlertCircle className="shrink-0 mt-0.5" size={20} />
                 <div>
                   <p className="font-bold mb-1">Error</p>
                   <p className="whitespace-pre-wrap">{error}</p>
                 </div>
               </div>
             )}
 
             {/* Info Banner */}
             {recipientFpr && activeTab === 'backup' && (
               <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg flex items-start gap-3 text-blue-800 text-xs animate-in fade-in">
                 <Info size={16} className="shrink-0 mt-0.5" />
                 <div>
                   <strong>Recipient Key:</strong> <code className="bg-blue-100 px-1.5 py-0.5 rounded font-mono">{recipientFpr}</code>
                 </div>
               </div>
             )}
 
             {/* Main Content Grid */}
             <div className="grid gap-6 md:grid-cols-3">
               <div className="md:col-span-2 space-y-6">
                 {activeTab === 'backup' ? (
                   <>
                     <div className="space-y-2">
                       <label className="text-sm font-semibold text-slate-700">BIP39 Mnemonic</label>
                       <textarea
                         className="w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all resize-none"
                         data-sensitive="BIP39 Mnemonic"
                         placeholder="Enter your 12 or 24 word seed phrase..."
                         value={mnemonic}
                         onChange={(e) => setMnemonic(e.target.value)}
                         readOnly={isReadOnly}
                       />
                     </div>
 
                     <PgpKeyInput
                       label="PGP Public Key (Optional)"
                       icon={FileKey}
                       placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----&#10;&#10;Paste or drag & drop your public key..."
                       value={publicKeyInput}
                       onChange={setPublicKeyInput}
                       readOnly={isReadOnly}
                     />
                   </>
                 ) : (
                   <>
                     <div className="flex gap-2">
                       <button
                         onClick={() => setShowQRScanner(true)}
                         disabled={isReadOnly}
                         className="flex-1 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 hover:from-purple-700 hover:to-purple-800 transition-all shadow-lg disabled:opacity-50"
                       >
                         <QrCode size={18} />
                         Scan QR Code
                       </button>
                     </div>
 
                     <div className="space-y-2">
                       <label className="text-sm font-semibold text-slate-700">SEEDPGP1 Payload</label>
                       <textarea
                         className="w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-xs font-mono focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all resize-none"
                         placeholder="SEEDPGP1:0:ABCD:..."
                         value={restoreInput}
                         onChange={(e) => setRestoreInput(e.target.value)}
                         readOnly={isReadOnly}
                       />
                     </div>
 
                     <PgpKeyInput
                       label="PGP Private Key (Optional)"
                       icon={FileKey}
                       data-sensitive="PGP Private Key"
                       placeholder="-----BEGIN PGP PRIVATE KEY BLOCK-----&#10;&#10;Paste or drag & drop your private key..."
                       value={privateKeyInput}
                       onChange={setPrivateKeyInput}
                       readOnly={isReadOnly}
                     />
 
                     {privateKeyInput && (
                       <div className="space-y-2">
                         <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Private Key Passphrase</label>
                         <div className="relative">
                           <Lock className="absolute left-3 top-3 text-slate-400" size={16} />
                           <input
                             type="password"
                             data-sensitive="Message Password"
                             className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
                             placeholder="Unlock private key..."
                             value={privateKeyPassphrase}
                             onChange={(e) => setPrivateKeyPassphrase(e.target.value)}
                             readOnly={isReadOnly}
                           />
                         </div>
                       </div>
                     )}
                   </>
                 )}
               </div>
 
               {/* Security Panel */}
               <div className="space-y-6">
                 <div className="p-5 bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border-2 border-slate-200 shadow-inner space-y-4">
                   <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
                     <Lock size={14} /> Security Options
                   </h3>
 
                   <div className="space-y-2">
                     <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Message Password</label>
                     <div className="relative">
                       <Lock className="absolute left-3 top-3 text-slate-400" size={16} />
                       <input
                         type="password"
                         className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
                         placeholder="Optional password..."
                         value={activeTab === 'backup' ? backupMessagePassword : restoreMessagePassword}
                         onChange={(e) => activeTab === 'backup' ? setBackupMessagePassword(e.target.value) : setRestoreMessagePassword(e.target.value)}
                         readOnly={isReadOnly}
                       />
                     </div>
                     <p className="text-[10px] text-slate-500 mt-1">Symmetric encryption password (SKESK)</p>
                   </div>
 
 
                   {activeTab === 'backup' && (
                     <div className="pt-3 border-t border-slate-300">
                       <label className="flex items-center gap-2 cursor-pointer group">
                         <input
                           type="checkbox"
                           checked={hasBip39Passphrase}
                           onChange={(e) => setHasBip39Passphrase(e.target.checked)}
                           disabled={isReadOnly}
                           className="rounded text-blue-600 focus:ring-2 focus:ring-blue-500 transition-all"
                         />
                         <span className="text-xs font-medium text-slate-700 group-hover:text-slate-900 transition-colors">
                           BIP39 25th word active
                         </span>
                       </label>
                     </div>
                   )}
 
                   <ReadOnly
                     isReadOnly={isReadOnly}
                     onToggle={setIsReadOnly}
                     appVersion={__APP_VERSION__}
                     buildHash={__BUILD_HASH__}
                   />
                 </div>
 
                 {/* Action Button */}
                 {activeTab === 'backup' ? (
                   <button
                     onClick={handleBackup}
                     disabled={!mnemonic || loading || isReadOnly}
                     className="w-full py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:from-blue-600 disabled:hover:to-blue-700"
                   >
                     {loading ? (
                       <RefreshCw className="animate-spin" size={20} />
                     ) : (
                       <QrCode size={20} />
                     )}
                     {loading ? 'Generating...' : 'Generate QR Backup'}
                   </button>
                 ) : (
                   <button
                     onClick={handleRestore}
                     disabled={!restoreInput || loading || isReadOnly}
                     className="w-full py-4 bg-gradient-to-r from-slate-800 to-slate-900 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:from-slate-900 hover:to-black transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
                   >
                     {loading ? (
                       <RefreshCw className="animate-spin" size={20} />
                     ) : (
                       <Unlock size={20} />
                     )}
                     {loading ? 'Decrypting...' : 'Decrypt & Restore'}
                   </button>
                 )}
               </div>
             </div>
 
             {/* QR Output */}
             {qrPayload && activeTab === 'backup' && (
               <div className="pt-6 border-t border-slate-200 space-y-6 animate-in fade-in slide-in-from-bottom-4">
                 <div className="flex justify-center">
                   <QrDisplay value={qrPayload} />
                 </div>
                 <div className="space-y-2">
                   <div className="flex items-center justify-between gap-3">
                     <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">
                       Raw payload (copy for backup)
                     </label>
 
                     <button
                       type="button"
                       onClick={() => copyToClipboard(qrPayload)}
                       className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-900 text-white text-xs font-semibold hover:bg-black transition-colors"
                     >
                       {copied ? <CheckCircle2 size={14} /> : <QrCode size={14} />}
                       {copied ? "Copied" : "Copy"}
                     </button>
                   </div>
 
                   <textarea
                     readOnly
                     value={qrPayload}
                     onFocus={(e) => e.currentTarget.select()}
                     className="w-full h-28 p-3 bg-slate-900 rounded-xl font-mono text-[10px] text-green-400 border border-slate-700 shadow-inner leading-relaxed resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
                   <p className="text-[11px] text-slate-500">
                     Tip: click the box to select all, or use Copy.
                   </p>
                 </div>
               </div>
             )}
 
             {/* Restored Mnemonic */}
             {restoredData && activeTab === 'restore' && (
               <div className="pt-6 border-t border-slate-200 animate-in zoom-in-95">
                 <div className="p-6 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-300 rounded-2xl shadow-lg">
                   <div className="flex items-center justify-between mb-4">
                     <span className="font-bold text-green-700 flex items-center gap-2 text-lg">
                       <CheckCircle2 size={22} /> Mnemonic Recovered
                     </span>
                     <button
                       onClick={() => setShowMnemonic(!showMnemonic)}
                       className="p-2.5 hover:bg-green-100 rounded-xl transition-all text-green-700 hover:shadow"
                     >
                       {showMnemonic ? <EyeOff size={22} /> : <Eye size={22} />}
                     </button>
                   </div>
 
                   <div className={`p-6 bg-white rounded-xl border-2 border-green-200 shadow-sm transition-all duration-300 ${showMnemonic ? 'blur-0' : 'blur-lg select-none'
                     }`}>
                     <p className="font-mono text-center text-lg text-slate-800 tracking-wide leading-relaxed break-words">
                       {restoredData.w}
                     </p>
                   </div>
 
                   {restoredData.pp === 1 && (
                     <div className="mt-4 p-3 bg-orange-100 border border-orange-300 rounded-lg">
                       <p className="text-xs text-center text-orange-800 font-bold uppercase tracking-widest flex items-center justify-center gap-2">
                         <AlertCircle size={14} /> BIP39 Passphrase Required (25th Word)
                       </p>
                     </div>
                   )}
 
                   {restoredData.fpr && restoredData.fpr.length > 0 && (
                     <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                       <p className="text-xs text-blue-800">
                         <strong>Encrypted for keys:</strong> {restoredData.fpr.join(', ')}
                       </p>
                     </div>
                   )}
                 </div>
               </div>
             )}
           </div>
         </div>
 
         {/* Footer */}
         <div className="mt-8 text-center text-xs text-slate-500">
           <p>SeedPGP v{__APP_VERSION__} • OpenPGP (RFC 4880) + Base45 (RFC 9285) + CRC16/CCITT-FALSE</p>
           <p className="mt-1">Never share your private keys or seed phrases. Always verify on an airgapped device.</p>
         </div>
       </div>
 
       {/* QR Scanner Modal */}
       {showQRScanner && (
         <QRScanner
           onScanSuccess={(scannedText) => {
             setRestoreInput(scannedText);
             setShowQRScanner(false);
             setError('');
           }}
           onClose={() => setShowQRScanner(false)}
         />
       )}
       <div className="max-w-4xl mx-auto p-8">
         <h1>SeedPGP v1.2.0</h1>
         {/* ... rest of your app ... */}
       </div>
 
       {/* Floating Storage Monitor - bottom right */}
       {!isReadOnly && (
         <>
           <StorageIndicator />
           <SecurityWarnings />
           <ClipboardTracker />
         </>
       )}
     </>
 
   );
 
 }
 
 export default App;