app.js

document.addEventListener('DOMContentLoaded', () => {
    // TOAST
    const toastContainer = document.createElement('div');
    toastContainer.id = 'toast-container';
    toastContainer.setAttribute('aria-live', 'polite');
    toastContainer.setAttribute('aria-atomic', 'true');
    document.body.appendChild(toastContainer);
    function showToast(msg, type='info') {
      const t = document.createElement('div');
      t.className = `toast ${type}`;
      t.textContent = msg;
      toastContainer.appendChild(t);
      requestAnimationFrame(() => t.classList.add('show'));
      setTimeout(() => t.classList.remove('show'), 4000);
      setTimeout(() => t.remove(), 4500);
    }
  
    // ENTROPY OVERLAY
    const overlay = document.getElementById('entropy-overlay');
    const countEl = document.getElementById('entropy-count');
    const progressEl = document.getElementById('entropy-progress');
    const entropy = [];

    function completeEntropy() {
      if (countEl) countEl.textContent = '100';
      if (progressEl) progressEl.style.width = '100%';
      if (overlay) overlay.style.display = 'none';
      showToast('Security initialization complete!', 'success');
    }

    function simulateEntropy() {
      // Feed random data until progress reaches 100, mirroring normal UI updates
      const step = () => {
        if (entropy.length < 100) {
          entropy.push((Math.random() * 256) | 0, (Math.random() * 256) | 0);
          const progress = Math.min(entropy.length, 100);
          if (countEl) countEl.textContent = progress;
          if (progressEl) progressEl.style.width = `${progress}%`;
          requestAnimationFrame(step);
        } else {
          completeEntropy();
        }
      };
      step();
    }

    const isCypress = typeof window !== 'undefined' && !!window.Cypress;
    const shouldSimulate = /[?&]simulateEntropy=1\b/.test(location.search) || (isCypress && !/[?&]disableEntropy=1\b/.test(location.search));
    const shouldDisable = /[?&]disableEntropy=1\b/.test(location.search);

    if (shouldDisable) {
      // Explicitly disable overlay
      completeEntropy();
    } else if (shouldSimulate) {
      // Simulate entropy for E2E or when requested via URL
      simulateEntropy();
    } else {
      // Normal behavior: collect entropy from mouse movement
      document.body.addEventListener('mousemove', function onMove(e) {
        if (entropy.length < 100) {
          entropy.push(e.clientX & 0xff, e.clientY & 0xff);
          const progress = Math.min(entropy.length, 100);
          countEl.textContent = progress;
          progressEl.style.width = `${progress}%`;
        }
        if (entropy.length >= 100) {
          document.body.removeEventListener('mousemove', onMove);
          completeEntropy();
        }
      });
    }
  
    // DARK MODE with shadcn/ui theming
    const darkToggle = document.getElementById('toggle-dark');
    darkToggle.addEventListener('click', () => {
      const isDark = document.documentElement.classList.contains('dark');
      if (isDark) {
        document.documentElement.classList.remove('dark');
        document.documentElement.setAttribute('data-theme', 'light');
        darkToggle.textContent = 'Dark Mode';
        showToast('Light mode enabled', 'info');
      } else {
        document.documentElement.classList.add('dark');
        document.documentElement.setAttribute('data-theme', 'dark');
        darkToggle.textContent = 'Light Mode';
        showToast('Dark mode enabled', 'info');
      }
    });

    // SIDEBAR TOGGLE
    const navToggle = document.getElementById('nav-toggle');
    const sidebar = document.getElementById('sidebar');
    const backdrop = document.getElementById('sidebar-backdrop');
    function setSidebarOpen(open) {
      sidebar.classList.toggle('open', open);
      navToggle.setAttribute('aria-expanded', String(open));
      document.body.classList.toggle('no-scroll', open);
      if (backdrop) backdrop.setAttribute('aria-hidden', String(!open));
    }
    navToggle.addEventListener('click', () => {
      const willOpen = !sidebar.classList.contains('open');
      setSidebarOpen(willOpen);
    });
    // Close sidebar when clicking a link on mobile
    sidebar.addEventListener('click', (e) => {
      if (e.target.tagName === 'A' && window.innerWidth <= 768) {
        setSidebarOpen(false);
      }
    });
    // Close sidebar when clicking the backdrop
    if (backdrop) {
      backdrop.addEventListener('click', () => setSidebarOpen(false));
    }
    // Close on Escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && sidebar.classList.contains('open')) setSidebarOpen(false);
    });

    // COPY BUTTONS
    document.addEventListener('click', (e) => {
      if (e.target.classList.contains('copy-btn')) {
        const targetId = e.target.dataset.target;
        const targetEl = document.getElementById(targetId);
        if (targetEl && targetEl.textContent.trim()) {
          navigator.clipboard.writeText(targetEl.textContent.trim()).then(() => {
            showToast('Copied to clipboard', 'success');
          }).catch(() => {
            showToast('Failed to copy', 'error');
          });
        }
      }
    });
  
    // ENHANCED NAVIGATION WITH ANIMATIONS
    const sections = [...document.querySelectorAll('section')];
    const links    = [...document.querySelectorAll('#sidebar a')];
    function navigate() {
      const id = location.hash.slice(1) || 'about';
      sections.forEach(s => {
        if (s.id === id) {
          s.classList.add('active');
          animateSection(s.id);
        } else {
          s.classList.remove('active');
        }
      });
      links.forEach(a => a.id === `nav-${id}` ? a.classList.add('active') : a.classList.remove('active'));
      if (window.innerWidth <= 768) setSidebarOpen(false);
      window.scrollTo({ top:0, behavior:'smooth' });
    }
    window.addEventListener('hashchange', navigate);
    navigate();
  
    // ADVANCED OPTIONS
    const toggleAdv = document.getElementById('toggle-adv');
    const advOpts   = document.getElementById('adv-options');
    const algoSel   = document.getElementById('gen-algo');
    const rsaLabel  = document.getElementById('rsa-size-label');
    toggleAdv.addEventListener('click', () => {
      const show = !advOpts.classList.toggle('adv-hidden');
      toggleAdv.textContent = show ? 'Hide Advanced Options' : 'Show Advanced Options';
    });
    algoSel.addEventListener('change', () => {
      rsaLabel.classList.toggle('adv-hidden', algoSel.value !== 'rsa');
    });
  
    // GENERIC DOWNLOAD HELPER
    function downloadFile(name, content) {
      const blob = new Blob([content], { type: 'text/plain' });
      const url  = URL.createObjectURL(blob);
      const a    = document.createElement('a');
      a.href = url; a.download = name; a.click();
      URL.revokeObjectURL(url);
    }
  
    // ENHANCED FORM VALIDATION
    function validateField(field, validationId, rules) {
      const value = field.value.trim();
      const validationEl = document.getElementById(validationId);
      let isValid = true;
      let message = '';

      for (const rule of rules) {
        if (!rule.test(value)) {
          isValid = false;
          message = rule.message;
          break;
        }
      }

      field.classList.toggle('invalid', !isValid && value);
      field.classList.toggle('valid', isValid && value);
      
      if (validationEl) {
        validationEl.textContent = message;
        validationEl.className = `validation-message ${isValid ? 'success' : 'error'} ${message ? 'show' : ''}`;
      }
      
      return isValid;
    }

    // DRAG AND DROP FUNCTIONALITY
    function setupDragDrop() {
      document.querySelectorAll('.drop-zone').forEach(zone => {
        const targetId = zone.dataset.target;
        const textarea = document.getElementById(targetId);
        
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
          zone.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
          e.preventDefault();
          e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
          zone.addEventListener(eventName, () => zone.classList.add('drag-over'), false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
          zone.addEventListener(eventName, () => zone.classList.remove('drag-over'), false);
        });
        
        zone.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
          const dt = e.dataTransfer;
          const files = dt.files;
          
          if (files.length > 0) {
            const file = files[0];
            const reader = new FileReader();
            reader.onload = (e) => {
              textarea.value = e.target.result;
              textarea.dispatchEvent(new Event('input'));
              showToast(`File "${file.name}" loaded successfully`, 'success');
            };
            reader.readAsText(file);
          }
        }
      });
    }

    // KEYBOARD SHORTCUTS
    function setupKeyboardShortcuts() {
      function isEditableTarget(el) {
        if (!el) return false;
        const tag = (el.tagName || '').toLowerCase();
        if (tag === 'input' || tag === 'textarea' || tag === 'select') return true;
        if (el.isContentEditable) return true;
        // ARIA-compatible textboxes
        if (el.getAttribute && el.getAttribute('role') === 'textbox') return true;
        return false;
      }

      document.addEventListener('keydown', (e) => {
        // Never intercept native shortcuts while typing
        if (isEditableTarget(e.target)) return;

        if (e.ctrlKey || e.metaKey) {
          const key = e.key.toLowerCase();
          // Note: Do NOT bind to 'v' (paste). Use Ctrl/Cmd+Shift+Y for Verify instead.
          if (key === 'g') {
            e.preventDefault();
            location.hash = '#keygen';
            const el = document.getElementById('gen-name');
            if (el) el.focus();
          } else if (key === 'e') {
            e.preventDefault();
            location.hash = '#encrypt';
            const el = document.getElementById('encrypt-message');
            if (el) el.focus();
          } else if (key === 'd') {
            e.preventDefault();
            location.hash = '#decrypt';
            const el = document.getElementById('decrypt-message');
            if (el) el.focus();
          } else if (key === 's') {
            e.preventDefault();
            location.hash = '#sign';
            const el = document.getElementById('sign-message');
            if (el) el.focus();
          } else if (e.shiftKey && key === 'y') {
            // New mapping for Verify: Ctrl/Cmd+Shift+Y
            e.preventDefault();
            location.hash = '#verify';
            const el = document.getElementById('verify-message');
            if (el) el.focus();
          }
        }
      });
    }

    // ENHANCED WRAPPER FOR PGP OPERATIONS
    function setupForm(formId, handler) {
      document.getElementById(formId).addEventListener('submit', async e => {
        e.preventDefault();
        const submitBtn = e.target.querySelector('button[type="submit"]');
        const originalText = submitBtn.textContent;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="loading-spinner"></span> Processing...';
        
        try {
          await handler();
          showToast(`${formId.replace('form-', '')} completed successfully`, 'success');
        } catch (err) {
          const suggestions = getErrorSuggestions(err.message);
          showToast(`${formId.replace('form-', '')} failed: ${err.message}${suggestions ? '. ' + suggestions : ''}`, 'error');
        } finally {
          submitBtn.disabled = false;
          submitBtn.textContent = originalText;
        }
      });
    }

    // ERROR SUGGESTIONS
    function getErrorSuggestions(errorMessage) {
      const suggestions = {
        'Invalid armor': 'Make sure you pasted the complete PGP key including headers and footers',
        'Incorrect key passphrase': 'Check your passphrase and try again',
        'No valid encryption keys': 'Ensure you\'re using the recipient\'s public key for encryption',
        'No valid decryption keys': 'Make sure you\'re using your private key for decryption',
        'Invalid signature': 'Verify you\'re using the correct public key for signature verification'
      };
      
      for (const [error, suggestion] of Object.entries(suggestions)) {
        if (errorMessage.includes(error)) {
          return suggestion;
        }
      }
      return null;
    }

    // Initialize enhanced features
    setupDragDrop();
    setupKeyboardShortcuts();

    // ELEMENT REFERENCES
    const genName = document.getElementById('gen-name');
    const genEmail = document.getElementById('gen-email');
    const genExpire = document.getElementById('gen-expire');
    const genPass = document.getElementById('gen-passphrase');
    const genRsaBits = document.getElementById('gen-rsa-bits');
    const outputKeygen = document.getElementById('output-keygen');
    const downloadPub = document.getElementById('download-pub');
    const downloadPriv = document.getElementById('download-priv');

    // FORM VALIDATION SETUP
    function setupFormValidation() {
      // Name validation
      genName.addEventListener('input', () => {
        validateField(genName, 'name-validation', [
          { test: (v) => v.length >= 2, message: 'Name must be at least 2 characters' },
          { test: (v) => /^[a-zA-Z\s]+$/.test(v), message: 'Name can only contain letters and spaces' }
        ]);
      });

      // Email validation
      genEmail.addEventListener('input', () => {
        validateField(genEmail, 'email-validation', [
          { test: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v), message: 'Please enter a valid email address' }
        ]);
      });

      // Passphrase validation
      genPass.addEventListener('input', () => {
        validateField(genPass, 'passphrase-validation', [
          { test: (v) => !v || v.length >= 8, message: 'Passphrase should be at least 8 characters if used' }
        ]);
      });

      // Expiration validation
      genExpire.addEventListener('input', () => {
        validateField(genExpire, 'expire-validation', [
          { test: (v) => !v || (+v >= 0 && +v <= 3650), message: 'Expiration should be between 0-3650 days' }
        ]);
      });
    }

    // KEY GENERATION
    setupForm('form-keygen', async () => {
      const name  = genName.value, email = genEmail.value;
      
      // Validate required fields
      const nameValid = validateField(genName, 'name-validation', [
        { test: (v) => v.length >= 2, message: 'Name must be at least 2 characters' }
      ]);
      const emailValid = validateField(genEmail, 'email-validation', [
        { test: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v), message: 'Please enter a valid email address' }
      ]);
      
      if (!nameValid || !emailValid) {
        throw new Error('Please fix validation errors before generating keys');
      }

      const opts  = { userIDs:[{name,email}], type:'ecc', curve:'curve25519' };
      if (!advOpts.classList.contains('adv-hidden')) {
        if (algoSel.value === 'rsa') {
          opts.type = 'rsa';
          opts.rsaBits = +genRsaBits.value;
        }
        if (+genExpire.value > 0) opts.keyExpirationTime = +genExpire.value * 86400;
        if (genPass.value) opts.passphrase = genPass.value;
      }
      const key = await openpgp.generateKey(opts);
      outputKeygen.textContent = key.publicKey + '\n\n' + key.privateKey;
      downloadPub.classList.remove('hidden');
      downloadPriv.classList.remove('hidden');
      downloadPub.onclick = () => downloadFile('public.asc', key.publicKey);
      downloadPriv.onclick = () => downloadFile('private.asc', key.privateKey);
    });

    // Initialize form validation
    setupFormValidation();

    // ENCRYPT
    const encryptMessage = document.getElementById('encrypt-message');
    const encryptPubkey = document.getElementById('encrypt-pubkey');
    const outputEncrypt = document.getElementById('output-encrypt');
    const downloadEncrypted = document.getElementById('download-encrypted');
    setupForm('form-encrypt', async () => {
      const message = await openpgp.createMessage({ text: encryptMessage.value });
      const publicKey = await openpgp.readKey({ armoredKey: encryptPubkey.value });
      const encrypted = await openpgp.encrypt({ message, encryptionKeys: publicKey });
      outputEncrypt.textContent = encrypted;
      downloadEncrypted.classList.remove('hidden');
      downloadEncrypted.onclick = () => downloadFile('encrypted.asc', encrypted);
      showToast('Message encrypted', 'success');
    });

    // DECRYPT
    const decryptMessage = document.getElementById('decrypt-message');
    const decryptPrivkey = document.getElementById('decrypt-privkey');
    const decryptPassphrase = document.getElementById('decrypt-passphrase');
    const outputDecrypt = document.getElementById('output-decrypt');
    setupForm('form-decrypt', async () => {
      const message = await openpgp.readMessage({ armoredMessage: decryptMessage.value });
      const privateKey = await openpgp.readPrivateKey({ armoredKey: decryptPrivkey.value });

      // Use the private key directly if no passphrase; otherwise decrypt with passphrase.
      let usablePrivateKey = privateKey;
      if (decryptPassphrase.value) {
        try {
          usablePrivateKey = await openpgp.decryptKey({
            privateKey,
            passphrase: decryptPassphrase.value
          });
        } catch (err) {
          // If the key is already decrypted, proceed with the original key
          if (!String(err && err.message || '').includes('already decrypted')) {
            throw err;
          }
        }
      }

      const { data: decrypted } = await openpgp.decrypt({ message, decryptionKeys: usablePrivateKey });
      outputDecrypt.textContent = decrypted;
      showToast('Message decrypted', 'success');
    });

    // SIGN
    const signMessage = document.getElementById('sign-message');
    const signPrivkey = document.getElementById('sign-privkey');
    const signPassphrase = document.getElementById('sign-passphrase');
    const outputSign = document.getElementById('output-sign');
    const downloadSignature = document.getElementById('download-signature');
    setupForm('form-sign', async () => {
      const message = await openpgp.createMessage({ text: signMessage.value });
      const privateKey = await openpgp.readPrivateKey({ armoredKey: signPrivkey.value });

      let signingKey = privateKey;
      if (signPassphrase.value) {
        try {
          signingKey = await openpgp.decryptKey({
            privateKey,
            passphrase: signPassphrase.value
          });
        } catch (err) {
          if (!String(err && err.message || '').includes('already decrypted')) {
            throw err;
          }
        }
      }

      const signature = await openpgp.sign({ message, signingKeys: signingKey });
      outputSign.textContent = signature;
      downloadSignature.classList.remove('hidden');
      downloadSignature.onclick = () => downloadFile('signature.asc', signature);
      showToast('Message signed', 'success');
    });

    // VERIFY
    const verifyMessage = document.getElementById('verify-message');
    const verifyPubkey = document.getElementById('verify-pubkey');
    const outputVerify = document.getElementById('output-verify');
    setupForm('form-verify', async () => {
      const signedMessage = await openpgp.readCleartextMessage({ cleartextMessage: verifyMessage.value });
      const publicKey = await openpgp.readKey({ armoredKey: verifyPubkey.value });
      const verification = await openpgp.verify({ message: signedMessage, verificationKeys: publicKey });
      const { verified } = verification.signatures[0];
      outputVerify.textContent = verified ? 'Signature is valid' : 'Signature is invalid';
      showToast(verified ? 'Signature verified' : 'Signature invalid', verified ? 'success' : 'error');
    });

    // REVOKE
    const revokePrivkey = document.getElementById('revoke-privkey');
    const revokePassphrase = document.getElementById('revoke-passphrase');
    const revokeReason = document.getElementById('revoke-reason');
    const revokeDescription = document.getElementById('revoke-description');
    const outputRevoke = document.getElementById('output-revoke');
    const downloadRevocation = document.getElementById('download-revocation');
    setupForm('form-revoke', async () => {
      const privateKey = await openpgp.readPrivateKey({ armoredKey: revokePrivkey.value });

      let keyForRevocation = privateKey;
      if (revokePassphrase.value) {
        try {
          keyForRevocation = await openpgp.decryptKey({
            privateKey,
            passphrase: revokePassphrase.value
          });
        } catch (err) {
          if (!String(err && err.message || '').includes('already decrypted')) {
            throw err;
          }
        }
      }

      const revocationCertificate = await openpgp.revokeKey({
        key: keyForRevocation,
        reasonForRevocation: { flag: +revokeReason.value, string: revokeDescription.value }
      });
      outputRevoke.textContent = revocationCertificate;
      downloadRevocation.classList.remove('hidden');
      downloadRevocation.onclick = () => downloadFile('revocation.asc', revocationCertificate);
      showToast('Revocation certificate generated', 'success');
    });

    // IMPORT
    const importKey = document.getElementById('import-key');
    const keyList = document.getElementById('key-list');
    const keySearch = document.getElementById('key-search');
    function updateKeyList(filter = '') {
      const keys = JSON.parse(localStorage.getItem('keys') || '[]');
      const filtered = keys.filter((k, i) => k.armored.toLowerCase().includes(filter.toLowerCase()) || k.type.includes(filter.toLowerCase()));
      keyList.innerHTML = '<h3>Imported Keys</h3>' + filtered.map((k, i) => {
        const originalIndex = keys.indexOf(k);
        return `<div class="key-item">
          <div class="key-info">
            <strong>${k.type.charAt(0).toUpperCase() + k.type.slice(1)} Key</strong>
            <pre>${k.armored.slice(0, 150)}...</pre>
          </div>
          <div class="key-actions">
            <button onclick="useKey(${originalIndex})" class="small-btn">📋 Use</button>
            <button onclick="deleteKey(${originalIndex})" class="small-btn danger">🗑️ Delete</button>
          </div>
        </div>`;
      }).join('');
    }
    window.useKey = (i) => {
      const keys = JSON.parse(localStorage.getItem('keys') || '[]');
      navigator.clipboard.writeText(keys[i].armored);
      showToast('Key copied to clipboard', 'info');
    };
    window.exportKey = (i) => {
      const keys = JSON.parse(localStorage.getItem('keys') || '[]');
      const key = keys[i];
      downloadFile(`${key.type}-key.asc`, key.armored);
      showToast('Key exported successfully', 'success');
    };
    
    window.deleteKey = (i) => {
      if (confirm('Delete this key?')) {
        let keys = JSON.parse(localStorage.getItem('keys') || '[]');
        keys.splice(i, 1);
        localStorage.setItem('keys', JSON.stringify(keys));
        updateKeyList(keySearch.value);
        showToast('Key deleted', 'info');
      }
    };

    // OPERATION HISTORY
    let operationHistory = JSON.parse(localStorage.getItem('operationHistory') || '[]');
    
    function addToHistory(operation, details) {
      const historyItem = {
        id: Date.now(),
        operation,
        details,
        timestamp: new Date().toISOString()
      };
      operationHistory.unshift(historyItem);
      operationHistory = operationHistory.slice(0, 10); // Keep last 10 operations
      localStorage.setItem('operationHistory', JSON.stringify(operationHistory));
      updateHistoryDisplay();
    }

    function updateHistoryDisplay() {
      // This would be implemented if we add a history section to the UI
    }

    // ENHANCED ANIMATIONS
    function animateSection(sectionId) {
      const section = document.getElementById(sectionId);
      if (section) {
        section.classList.add('fade-in');
        setTimeout(() => section.classList.remove('fade-in'), 300);
      }
    }
    keySearch.addEventListener('input', () => updateKeyList(keySearch.value));
    updateKeyList();
    setupForm('form-import', async () => {
      const key = await openpgp.readKey({ armoredKey: importKey.value });
      let keys = JSON.parse(localStorage.getItem('keys') || '[]');
      const keyType = key.keyPacket.tag === 6 ? 'public' : 'private';
      keys.push({ armored: importKey.value, type: keyType });
      localStorage.setItem('keys', JSON.stringify(keys));
      updateKeyList(keySearch.value);
      addToHistory('import', `Imported ${keyType} key`);
      importKey.value = '';
    });

  });