import { useState, useEffect } from 'react';
import {
  QrCode,
  RefreshCw,
  CheckCircle2,
  Lock,
  AlertCircle,
  Unlock,
  EyeOff,
  FileKey,
  Info,
} 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, encryptToSeed, decryptFromSeed, detectEncryptionMode } from './lib/seedpgp';
import * as openpgp from 'openpgp';
import { SecurityWarnings } from './components/SecurityWarnings';
import { getSessionKey, encryptJsonToBlob, destroySessionKey, EncryptedBlob } from './lib/sessionCrypto';
import Header from './components/Header';
import { StorageDetails } from './components/StorageDetails';
import { ClipboardDetails } from './components/ClipboardDetails';
import Footer from './components/Footer';
import { SeedBlender } from './components/SeedBlender';

console.log("OpenPGP.js version:", openpgp.config.versionString);

interface StorageItem {
  key: string;
  value: string;
  size: number;
  isSensitive: boolean;
}

interface ClipboardEvent {
    timestamp: Date;
    field: string;
    length: number;
}

function App() {
  const [activeTab, setActiveTab] = useState<'backup' | 'restore' | 'seedblender'>('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 [decryptedRestoredMnemonic, setDecryptedRestoredMnemonic] = useState<string | null>(null);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [copied, setCopied] = useState(false);
  const [showQRScanner, setShowQRScanner] = useState(false);
  const [isReadOnly, setIsReadOnly] = useState(false);
  const [encryptedMnemonicCache, setEncryptedMnemonicCache] = useState<EncryptedBlob | null>(null);
  const [showSecurityModal, setShowSecurityModal] = useState(false);
  const [showStorageModal, setShowStorageModal] = useState(false);
  const [showClipboardModal, setShowClipboardModal] = useState(false);
  const [localItems, setLocalItems] = useState<StorageItem[]>([]);
  const [sessionItems, setSessionItems] = useState<StorageItem[]>([]);
  const [clipboardEvents, setClipboardEvents] = useState<ClipboardEvent[]>([]);
  const [showLockConfirm, setShowLockConfirm] = useState(false);

  // Krux integration state
  const [encryptionMode, setEncryptionMode] = useState<'pgp' | 'krux'>('pgp');
  const [kruxLabel, setKruxLabel] = useState('Seed Backup');
  const [kruxIterations, setKruxIterations] = useState(200000);
  const [detectedMode, setDetectedMode] = useState<'pgp' | 'krux' | null>(null);

  const SENSITIVE_PATTERNS = ['key', 'mnemonic', 'seed', 'private', 'secret', 'pgp', 'password'];

  const isSensitiveKey = (key: string): boolean => {
      const lowerKey = key.toLowerCase();
      return SENSITIVE_PATTERNS.some(pattern => lowerKey.includes(pattern));
  };

  const getStorageItems = (storage: Storage): StorageItem[] => {
      const items: StorageItem[] = [];
      for (let i = 0; i < storage.length; i++) {
          const key = storage.key(i);
          if (key) {
              const value = storage.getItem(key) || '';
              items.push({
                  key,
                  value: value.substring(0, 50) + (value.length > 50 ? '...' : ''),
                  size: new Blob([value]).size,
                  isSensitive: isSensitiveKey(key)
              });
          }
      }
      return items.sort((a, b) => (b.isSensitive ? 1 : 0) - (a.isSensitive ? 1 : 0));
  };

  const refreshStorage = () => {
      setLocalItems(getStorageItems(localStorage));
      setSessionItems(getStorageItems(sessionStorage));
  };

  useEffect(() => {
      refreshStorage();
      const interval = setInterval(refreshStorage, 2000);
      return () => clearInterval(interval);
  }, []);



  // Cleanup session key on component unmount
  useEffect(() => {
    return () => {
      destroySessionKey();
    };
  }, []);

  useEffect(() => {
    const handleCopy = (e: ClipboardEvent & Event) => {
        const target = e.target as HTMLElement;

        // Get selection to measure length
        const selection = window.getSelection()?.toString() || '';
        const length = selection.length;

        if (length === 0) return; // Nothing copied

        // Detect field name
        let field = 'Unknown field';

        if (target.tagName === 'TEXTAREA' || target.tagName === 'INPUT') {
            // Try multiple ways to identify the field
            field =
                target.getAttribute('aria-label') ||
                target.getAttribute('name') ||
                target.getAttribute('id') ||
                (target as HTMLInputElement).type ||
                target.tagName.toLowerCase();

            // Check parent labels
            const label = target.closest('label') ||
                document.querySelector(`label[for="${target.id}"]`);
            if (label) {
                field = label.textContent?.trim() || field;
            }

            // Check for data-sensitive attribute
            const sensitiveAttr = target.getAttribute('data-sensitive') ||
                target.closest('[data-sensitive]')?.getAttribute('data-sensitive');
            if (sensitiveAttr) {
                field = sensitiveAttr;
            }

            // Detect if it looks like sensitive data
            const isSensitive = /mnemonic|seed|key|private|password|secret/i.test(
                target.className + ' ' + field + ' ' + (target.getAttribute('placeholder') || '')
            );

            if (isSensitive && field === target.tagName.toLowerCase()) {
                // Try to guess from placeholder
                const placeholder = target.getAttribute('placeholder');
                if (placeholder) {
                    field = placeholder.substring(0, 40) + '...';
                }
            }
        }

        setClipboardEvents(prev => [
            { timestamp: new Date(), field, length },
            ...prev.slice(0, 9) // Keep last 10 events
        ]);
    };

    document.addEventListener('copy', handleCopy as EventListener);
    return () => document.removeEventListener('copy', handleCopy as EventListener);
  }, []);

  // Detect encryption mode from restore input
  useEffect(() => {
    if (activeTab === 'restore' && restoreInput.trim()) {
      const detected = detectEncryptionMode(restoreInput);
      setDetectedMode(detected);
      // Auto-switch mode if not already set
      if (detected !== encryptionMode) {
        setEncryptionMode(detected);
      }
    } else {
      setDetectedMode(null);
    }
  }, [restoreInput, activeTab, encryptionMode]);

  const clearClipboard = async () => {
      try {
          // Actually clear the system clipboard
          await navigator.clipboard.writeText('');

          // Clear history
          setClipboardEvents([]);

          // Show success briefly
          alert('✅ Clipboard cleared and history wiped');
      } catch (err) {
          // Fallback for browsers that don't support clipboard API
          const dummy = document.createElement('textarea');
          dummy.value = '';
          document.body.appendChild(dummy);
          dummy.select();
          document.execCommand('copy');
          document.body.removeChild(dummy);

          setClipboardEvents([]);
          alert('✅ History cleared (clipboard may require manual clearing)');
      }
  };


  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 encryptToSeed({
        plaintext,
        publicKeyArmored: publicKeyInput || undefined,
        messagePassword: backupMessagePassword || undefined,
        mode: encryptionMode,
        kruxLabel: encryptionMode === 'krux' ? kruxLabel : undefined,
        kruxIterations: encryptionMode === 'krux' ? kruxIterations : 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('');
    setDecryptedRestoredMnemonic(null);

    try {
      // Auto-detect mode if not manually set
      const modeToUse = detectedMode || encryptionMode;
      
      const result = await decryptFromSeed({
        frameText: restoreInput,
        privateKeyArmored: privateKeyInput || undefined,
        privateKeyPassphrase: privateKeyPassphrase || undefined,
        messagePassword: restoreMessagePassword || undefined,
        mode: modeToUse,
      });

      // Encrypt the restored mnemonic with the session key
      await getSessionKey();
      const blob = await encryptJsonToBlob({ mnemonic: result.w, timestamp: Date.now() });
      setEncryptedMnemonicCache(blob);

      // Temporarily display the mnemonic and then clear it
      setDecryptedRestoredMnemonic(result.w);
      setTimeout(() => {
        setDecryptedRestoredMnemonic(null);
      }, 10000); // Auto-clear after 10 seconds

    } 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('');
    setDecryptedRestoredMnemonic(null);
    setError('');
    setCopied(false);
    setShowQRScanner(false);
  };

  const handleToggleLock = () => {
    if (!isReadOnly) {
      // About to lock - show confirmation
      setShowLockConfirm(true);
    } else {
      // Unlocking - no confirmation needed
      setIsReadOnly(false);
    }
  };

  const confirmLock = () => {
    setIsReadOnly(true);
    setShowLockConfirm(false);
  };


  return (
    <div className="min-h-screen bg-slate-800 text-slate-100">
      <Header 
        onOpenSecurityModal={() => setShowSecurityModal(true)} 
        localItems={localItems} 
        sessionItems={sessionItems} 
        onOpenStorageModal={() => setShowStorageModal(true)}
        events={clipboardEvents}
        onOpenClipboardModal={() => setShowClipboardModal(true)}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
        encryptedMnemonicCache={encryptedMnemonicCache}
        handleLockAndClear={handleLockAndClear}
        appVersion={__APP_VERSION__}
        isLocked={isReadOnly}
        onToggleLock={handleToggleLock}
      />
      <main className="max-w-7xl mx-auto px-6 py-4">
        <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-teal-50 border border-teal-200 rounded-lg flex items-start gap-3 text-teal-800 text-xs animate-in fade-in">
                 <Info size={16} className="shrink-0 mt-0.5" />
                 <div>
                   <strong>Recipient Key:</strong> <code className="bg-teal-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 md:items-start">
               <div className="md:col-span-2 space-y-6">
                 {activeTab === 'backup' ? (
                   <>
                     <div className="space-y-2">
                       <label className="text-sm font-semibold text-slate-200">BIP39 Mnemonic</label>
                       <textarea
                         className={`w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all resize-none ${
                            isReadOnly ? 'blur-sm select-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}
                     />
                   </>
                 ) : activeTab === 'restore' ? (
                   <>
                     <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-200">SEEDPGP1 Payload</label>
                       <textarea
                         className={`w-full h-32 p-4 bg-slate-50 border border-slate-200 rounded-xl text-xs font-mono text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all resize-none ${
                            isReadOnly ? 'blur-sm select-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-teal-500 transition-all ${
                                isReadOnly ? 'blur-sm select-none' : ''
                              }`}
                             placeholder="Unlock private key..."
                             value={privateKeyPassphrase}
                             onChange={(e) => setPrivateKeyPassphrase(e.target.value)}
                             readOnly={isReadOnly}
                           />
                         </div>
                       </div>
                     )}
                   </>
                 ) : (
                    <SeedBlender />
                 )}
               </div>
 
               {/* Security Panel */}
               <div className="space-y-2"> {/* Added space-y-2 wrapper */}
                 <label className="text-sm font-semibold text-slate-200 flex items-center gap-2">
                   <Lock size={14} /> SECURITY OPTIONS
                 </label>
                 
                 <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">
                   {/* Removed h3 */}

                   {/* Encryption Mode Toggle */}
                   <div className="space-y-2">
                     <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Encryption Mode</label>
                     <select
                       value={encryptionMode}
                       onChange={(e) => setEncryptionMode(e.target.value as 'pgp' | 'krux')}
                       disabled={isReadOnly}
                       className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all"
                     >
                       <option value="pgp">PGP (Asymmetric)</option>
                       <option value="krux">Krux KEF (Passphrase)</option>
                     </select>
                     <p className="text-[10px] text-slate-500 mt-1">
                       {encryptionMode === 'pgp' 
                         ? 'Uses PGP keys or password' 
                         : 'Uses passphrase only (Krux compatible)'}
                     </p>
                   </div>
 
                   {/* Krux-specific fields */}
                   {encryptionMode === 'krux' && activeTab === 'backup' && (
                     <>
                       <div className="space-y-2 pt-2">
                         <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Krux Label</label>
                         <div className="relative">
                           <input
                             type="text"
                             className={`w-full pl-3 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all ${
                               isReadOnly ? 'blur-sm select-none' : ''
                             }`}
                             placeholder="e.g., My Seed 2026"
                             value={kruxLabel}
                             onChange={(e) => setKruxLabel(e.target.value)}
                             readOnly={isReadOnly}
                           />
                         </div>
                         <p className="text-[10px] text-slate-500 mt-1">Label for identification (max 252 bytes)</p>
                       </div>
                       
                       <div className="space-y-2">
                         <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">PBKDF2 Iterations</label>
                         <div className="relative">
                           <input
                             type="number"
                             className={`w-full pl-3 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 transition-all ${
                               isReadOnly ? 'blur-sm select-none' : ''
                             }`}
                             placeholder="e.g., 200000"
                             value={kruxIterations}
                             onChange={(e) => setKruxIterations(Number(e.target.value))}
                             min={10000}
                             step={10000}
                             readOnly={isReadOnly}
                           />
                         </div>
                         <p className="text-[10px] text-slate-500 mt-1">Higher = more secure but slower (default: 200,000)</p>
                       </div>
                     </>
                   )}
 
                   <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-teal-500 transition-all ${
                                isReadOnly ? 'blur-sm select-none' : ''
                              }`}
                         placeholder={encryptionMode === 'krux' ? "Required for Krux encryption" : "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">
                       {encryptionMode === 'krux' 
                         ? 'Required passphrase for Krux encryption' 
                         : '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-teal-600 focus:ring-2 focus:ring-teal-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>
                   )}
 
                 </div>
 
                 {/* Action Button */}
                 {activeTab === 'backup' ? (
                   <button
                     onClick={handleBackup}
                     disabled={!mnemonic || loading || isReadOnly}
                     className="w-full py-4 bg-gradient-to-r from-teal-500 to-cyan-600 text-white rounded-xl font-bold flex items-center justify-center gap-2 hover:from-teal-600 hover:to-cyan-700 transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:from-teal-500 disabled:hover:to-cyan-600"
                   >
                     {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={isReadOnly ? 'blur-lg' : ''}>
                   <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 placeholder:text-slate-500 border border-slate-700 shadow-inner leading-relaxed resize-none focus:outline-none focus:ring-2 focus:ring-teal-500"
                   />
                   <p className="text-[11px] text-slate-500">
                     Tip: click the box to select all, or use Copy.
                   </p>
                 </div>
               </div>
             )}
 
             {/* Restored Mnemonic */}
             {decryptedRestoredMnemonic && 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={() => setDecryptedRestoredMnemonic(null)}
                       className="p-2.5 hover:bg-green-100 rounded-xl transition-all text-green-700 hover:shadow"
                     >
                       <EyeOff size={22} /> Hide
                     </button>
                   </div>
 
                   <div className="p-6 bg-white rounded-xl border-2 border-green-200 shadow-sm">
                     <p className={`font-mono text-center text-lg text-slate-800 tracking-wide leading-relaxed break-words ${
                        isReadOnly ? 'blur-md select-none' : ''
                      }`}>
                       {decryptedRestoredMnemonic}
                     </p>
                   </div>
                 </div>
               </div>
             )}
           </div>
      </main>
      <Footer 
        appVersion={__APP_VERSION__} 
        buildHash={__BUILD_HASH__} 
        buildTimestamp={__BUILD_TIMESTAMP__} 
      />

      {/* QR Scanner Modal */}
      {showQRScanner && (
        <QRScanner
          onScanSuccess={(scannedText) => {
            setRestoreInput(scannedText);
            setShowQRScanner(false);
            setError('');
          }}
          onClose={() => setShowQRScanner(false)}
        />
      )}
      
      {/* Security Modal */}
      {showSecurityModal && (
        <div 
          className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
          onClick={() => setShowSecurityModal(false)}
        >
          <div 
            className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold text-white mb-4">Security Limitations</h3>
            <div className="text-sm text-slate-300 space-y-2">
              <SecurityWarnings />
            </div>
          </div>
        </div>
      )}

      {/* Storage Modal */}
      {showStorageModal && (
        <div 
          className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
          onClick={() => setShowStorageModal(false)}
        >
          <div 
            className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold text-white mb-4">Storage Details</h3>
            <div className="text-sm text-slate-300 space-y-2">
              <StorageDetails localItems={localItems} sessionItems={sessionItems} />
            </div>
          </div>
        </div>
      )}

      {/* Clipboard Modal */}
      {showClipboardModal && (
        <div 
          className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
          onClick={() => setShowClipboardModal(false)}
        >
          <div 
            className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold text-white mb-4">Clipboard Activity</h3>
            <div className="text-sm text-slate-300 space-y-2">
              <ClipboardDetails events={clipboardEvents} onClear={clearClipboard} />
            </div>
          </div>
        </div>
      )}

      {/* Lock Confirmation Modal */}
      {showLockConfirm && (
        <div 
          className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
          onClick={() => setShowLockConfirm(false)}
        >
          <div 
            className="bg-slate-800 rounded-xl border border-slate-700 p-6 max-w-md w-full mx-4 shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
              <Lock className="w-5 h-5 text-amber-500" />
              Lock Sensitive Data?
            </h3>
            <div className="text-sm text-slate-300 space-y-3 mb-6">
              <p>This will:</p>
              <ul className="list-disc list-inside space-y-1 text-slate-400">
                <li>Blur all sensitive data (mnemonics, keys, passwords)</li>
                <li>Disable all inputs</li>
                <li>Prevent clipboard operations</li>
              </ul>
              <p className="text-xs text-slate-500 mt-2">
                Use this when showing the app to others or stepping away from your device.
              </p>
            </div>
            <div className="flex gap-3">
              <button 
                className="flex-1 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors"
                onClick={() => setShowLockConfirm(false)}
              >
                Cancel
              </button>
              <button 
                className="flex-1 py-2 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-lg transition-colors"
                onClick={confirmLock}
              >
                Lock Data
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;