/**
 * NOSTR_LOGIN_LITE Modal UI
 * Minimal vanilla JS modal to replace Stencil/Tailwind component library
 */

class Modal {
  constructor(options = {}) {
    this.options = options;
    this.container = null;
    this.isVisible = false;
    this.currentScreen = null;
    this.isEmbedded = !!options.embedded;
    this.embeddedContainer = options.embedded;

    // Initialize modal container and styles
    this._initModal();
  }

  _initModal() {
    // Create modal container
    this.container = document.createElement('div');
    this.container.id = this.isEmbedded ? 'nl-modal-embedded' : 'nl-modal';
    
    if (this.isEmbedded) {
      // Embedded mode: inline positioning, no overlay
      this.container.style.cssText = `
        position: relative;
        display: none;
        font-family: var(--nl-font-family, 'Courier New', monospace);
        width: 100%;
      `;
    } else {
      // Modal mode: fixed overlay
      this.container.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.75);
        display: none;
        z-index: 10000;
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;
    }

    // Create modal content
    const modalContent = document.createElement('div');
    if (this.isEmbedded) {
      // Embedded content: no centering margin, full width
      modalContent.style.cssText = `
        position: relative;
        background: var(--nl-secondary-color);
        color: var(--nl-primary-color);
        width: 100%;
        border-radius: var(--nl-border-radius, 15px);
        border: var(--nl-border-width) solid var(--nl-primary-color);
        overflow: hidden;
      `;
    } else {
      // Modal content: centered with margin, no fixed height
      modalContent.style.cssText = `
        position: relative;
        background: var(--nl-secondary-color);
        color: var(--nl-primary-color);
        width: 90%;
        max-width: 400px;
        margin: 50px auto;
        border-radius: var(--nl-border-radius, 15px);
        border: var(--nl-border-width) solid var(--nl-primary-color);
        overflow: hidden;
      `;
    }

    // Header
    const modalHeader = document.createElement('div');
    modalHeader.style.cssText = `
      padding: 20px 24px 0 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: transparent;
      border-bottom: none;
    `;

    const modalTitle = document.createElement('h2');
    modalTitle.textContent = 'Nostr Login';
    modalTitle.style.cssText = `
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: var(--nl-primary-color);
      font-family: var(--nl-font-family, 'Courier New', monospace);
    `;

    modalHeader.appendChild(modalTitle);
    
    // Only add close button for non-embedded modals
    // Embedded modals shouldn't have a close button because there's no way to reopen them
    if (!this.isEmbedded) {
      const closeButton = document.createElement('button');
      closeButton.innerHTML = '×';
      closeButton.onclick = () => this.close();
      closeButton.style.cssText = `
        background: var(--nl-secondary-color);
        border: var(--nl-border-width) solid var(--nl-primary-color);
        border-radius: 4px;
        font-size: 28px;
        color: var(--nl-primary-color);
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;
      closeButton.onmouseover = () => {
        closeButton.style.borderColor = 'var(--nl-accent-color)';
        closeButton.style.background = 'var(--nl-secondary-color)';
      };
      closeButton.onmouseout = () => {
        closeButton.style.borderColor = 'var(--nl-primary-color)';
        closeButton.style.background = 'var(--nl-secondary-color)';
      };
      
      modalHeader.appendChild(closeButton);
    }

    // Body
    this.modalBody = document.createElement('div');
    this.modalBody.style.cssText = `
      padding: 24px;
      background: transparent;
      font-family: var(--nl-font-family, 'Courier New', monospace);
    `;

    modalContent.appendChild(modalHeader);
    modalContent.appendChild(this.modalBody);
    this.container.appendChild(modalContent);

    // Add to appropriate parent
    if (this.isEmbedded && this.embeddedContainer) {
      // Append to specified container for embedding
      if (typeof this.embeddedContainer === 'string') {
        const targetElement = document.querySelector(this.embeddedContainer);
        if (targetElement) {
          targetElement.appendChild(this.container);
        } else {
          console.error('NOSTR_LOGIN_LITE: Embedded container not found:', this.embeddedContainer);
          document.body.appendChild(this.container);
        }
      } else if (this.embeddedContainer instanceof HTMLElement) {
        this.embeddedContainer.appendChild(this.container);
      } else {
        console.error('NOSTR_LOGIN_LITE: Invalid embedded container');
        document.body.appendChild(this.container);
      }
    } else {
      // Add to body for modal mode
      document.body.appendChild(this.container);
    }

    // Click outside to close (only for modal mode)
    if (!this.isEmbedded) {
      this.container.onclick = (e) => {
        if (e.target === this.container) {
          this.close();
        }
      };
    }

    // Update theme
    this.updateTheme();
  }

  updateTheme() {
    // The theme will automatically update through CSS custom properties
    // No manual styling needed - the CSS variables handle everything
  }

  open(opts = {}) {
    this.currentScreen = opts.startScreen;
    this.isVisible = true;
    this.container.style.display = 'block';

    // Render login options
    this._renderLoginOptions();
  }

  close() {
    this.isVisible = false;
    this.container.style.display = 'none';
    this.modalBody.innerHTML = '';
  }

  _renderLoginOptions() {
    this.modalBody.innerHTML = '';

    const options = [];

    // Extension option
    if (this.options?.methods?.extension !== false) {
      options.push({
        type: 'extension',
        title: 'Browser Extension',
        description: 'Use your browser extension',
        icon: '🔌'
      });
    }

    // Local key option
    if (this.options?.methods?.local !== false) {
      options.push({
        type: 'local',
        title: 'Local Key',
        description: 'Create or import your own key',
        icon: '🔑'
      });
    }

    // Seed Phrase option - only show if explicitly enabled
    if (this.options?.methods?.seedphrase === true) {
      options.push({
        type: 'seedphrase',
        title: 'Seed Phrase',
        description: 'Import from mnemonic seed phrase',
        icon: '🌱'
      });
    }

    // Nostr Connect option (check both 'connect' and 'remote' for compatibility)
    if (this.options?.methods?.connect !== false && this.options?.methods?.remote !== false) {
      options.push({
        type: 'connect',
        title: 'Nostr Connect',
        description: 'Connect with external signer',
        icon: '🌐'
      });
    }

    // Read-only option
    if (this.options?.methods?.readonly !== false) {
      options.push({
        type: 'readonly',
        title: 'Read Only',
        description: 'Browse without signing',
        icon: '👁️'
      });
    }

    // OTP/DM option
    if (this.options?.methods?.otp !== false) {
      options.push({
        type: 'otp',
        title: 'DM/OTP',
        description: 'Receive OTP via DM',
        icon: '📱'
      });
    }

    // Render each option
    options.forEach(option => {
      const button = document.createElement('button');
      button.onclick = () => this._handleOptionClick(option.type);
      button.style.cssText = `
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px;
        margin-bottom: 12px;
        background: var(--nl-secondary-color);
        color: var(--nl-primary-color);
        border: var(--nl-border-width) solid var(--nl-primary-color);
        border-radius: var(--nl-border-radius);
        cursor: pointer;
        transition: all 0.2s;
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;
      button.onmouseover = () => {
        button.style.borderColor = 'var(--nl-accent-color)';
        button.style.background = 'var(--nl-secondary-color)';
      };
      button.onmouseout = () => {
        button.style.borderColor = 'var(--nl-primary-color)';
        button.style.background = 'var(--nl-secondary-color)';
      };

      const iconDiv = document.createElement('div');
      // Remove the icon entirely - no emojis or text-based icons
      iconDiv.textContent = '';
      iconDiv.style.cssText = `
        font-size: 16px;
        font-weight: bold;
        margin-right: 16px;
        width: 0px;
        text-align: center;
        color: var(--nl-primary-color);
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;

      const contentDiv = document.createElement('div');
      contentDiv.style.cssText = 'flex: 1; text-align: left;';

      const titleDiv = document.createElement('div');
      titleDiv.textContent = option.title;
      titleDiv.style.cssText = `
        font-weight: 600;
        margin-bottom: 4px;
        color: var(--nl-primary-color);
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;

      const descDiv = document.createElement('div');
      descDiv.textContent = option.description;
      descDiv.style.cssText = `
        font-size: 14px;
        color: #666666;
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;

      contentDiv.appendChild(titleDiv);
      contentDiv.appendChild(descDiv);

      button.appendChild(iconDiv);
      button.appendChild(contentDiv);
      this.modalBody.appendChild(button);
    });
  }

  _handleOptionClick(type) {
    console.log('Selected login type:', type);

    // Handle different login types
    switch (type) {
      case 'extension':
        this._handleExtension();
        break;
      case 'local':
        this._showLocalKeyScreen();
        break;
      case 'seedphrase':
        this._showSeedPhraseScreen();
        break;
      case 'connect':
        this._showConnectScreen();
        break;
      case 'readonly':
        this._handleReadonly();
        break;
      case 'otp':
        this._showOtpScreen();
        break;
    }
  }

  _handleExtension() {
    // SIMPLIFIED ARCHITECTURE: Check for single extension at window.nostr or preserved extension
    let extension = null;
    
    // Check if NostrLite instance has a preserved extension (real extension detected at init)
    if (window.NOSTR_LOGIN_LITE?._instance?.preservedExtension) {
      extension = window.NOSTR_LOGIN_LITE._instance.preservedExtension;
      console.log('Modal: Using preserved extension:', extension.constructor?.name);
    }
    // Otherwise check current window.nostr
    else if (window.nostr && this._isRealExtension(window.nostr)) {
      extension = window.nostr;
      console.log('Modal: Using current window.nostr extension:', extension.constructor?.name);
    }
    
    if (!extension) {
      console.log('Modal: No extension detected yet, waiting for deferred detection...');
      
      // DEFERRED EXTENSION CHECK: Extensions like nos2x might load after our library
      let attempts = 0;
      const maxAttempts = 10; // Try for 2 seconds
      const checkForExtension = () => {
        attempts++;
        
        // Check again for preserved extension (might be set by deferred detection)
        if (window.NOSTR_LOGIN_LITE?._instance?.preservedExtension) {
          extension = window.NOSTR_LOGIN_LITE._instance.preservedExtension;
          console.log('Modal: Found preserved extension after waiting:', extension.constructor?.name);
          this._tryExtensionLogin(extension);
          return;
        }
        
        // Check current window.nostr again
        if (window.nostr && this._isRealExtension(window.nostr)) {
          extension = window.nostr;
          console.log('Modal: Found extension at window.nostr after waiting:', extension.constructor?.name);
          this._tryExtensionLogin(extension);
          return;
        }
        
        // Keep trying or give up
        if (attempts < maxAttempts) {
          setTimeout(checkForExtension, 200);
        } else {
          console.log('Modal: No browser extension found after waiting 2 seconds');
          this._showExtensionRequired();
        }
      };
      
      // Start checking after a brief delay
      setTimeout(checkForExtension, 200);
      return;
    }
    
    // Use the single detected extension directly - no choice UI
    console.log('Modal: Single extension mode - using extension directly');
    this._tryExtensionLogin(extension);
  }

  _detectAllExtensions() {
    const extensions = [];
    const seenExtensions = new Set(); // Track extensions by object reference to avoid duplicates
    
    // Extension locations to check (in priority order)
    const locations = [
      { path: 'window.navigator?.nostr', name: 'navigator.nostr', displayName: 'Standard Extension (navigator.nostr)', icon: '🌐', getter: () => window.navigator?.nostr },
      { path: 'window.webln?.nostr', name: 'webln.nostr', displayName: 'Alby WebLN Extension', icon: '⚡', getter: () => window.webln?.nostr },
      { path: 'window.alby?.nostr', name: 'alby.nostr', displayName: 'Alby Extension (Direct)', icon: '🐝', getter: () => window.alby?.nostr },
      { path: 'window.nos2x', name: 'nos2x', displayName: 'nos2x Extension', icon: '🔌', getter: () => window.nos2x },
      { path: 'window.flamingo?.nostr', name: 'flamingo.nostr', displayName: 'Flamingo Extension', icon: '🦩', getter: () => window.flamingo?.nostr },
      { path: 'window.mutiny?.nostr', name: 'mutiny.nostr', displayName: 'Mutiny Extension', icon: '⚔️', getter: () => window.mutiny?.nostr },
      { path: 'window.nostrich?.nostr', name: 'nostrich.nostr', displayName: 'Nostrich Extension', icon: '🐦', getter: () => window.nostrich?.nostr },
      { path: 'window.getAlby?.nostr', name: 'getAlby.nostr', displayName: 'getAlby Extension', icon: '🔧', getter: () => window.getAlby?.nostr }
    ];

    // Check each location
    for (const location of locations) {
      try {
        const obj = location.getter();
        
        console.log(`Modal: Checking ${location.name}:`, !!obj, obj?.constructor?.name);
        
        if (obj && this._isRealExtension(obj) && !seenExtensions.has(obj)) {
          extensions.push({
            name: location.name,
            displayName: location.displayName,
            icon: location.icon,
            extension: obj
          });
          seenExtensions.add(obj);
          console.log(`Modal: ✓ Detected extension at ${location.name} (${obj.constructor?.name})`);
        } else if (obj) {
          console.log(`Modal: ✗ Filtered out ${location.name} (${obj.constructor?.name})`);
        }
      } catch (e) {
        // Location doesn't exist or can't be accessed
        console.log(`Modal: ${location.name} not accessible:`, e.message);
      }
    }
    
    // Also check window.nostr but be extra careful to avoid our library
    console.log('Modal: Checking window.nostr:', !!window.nostr, window.nostr?.constructor?.name);
    
    if (window.nostr) {
      // Check if window.nostr is our WindowNostr facade with a preserved extension
      if (window.nostr.constructor?.name === 'WindowNostr' && window.nostr.existingNostr) {
        console.log('Modal: Found WindowNostr facade, checking existingNostr for preserved extension');
        const preservedExtension = window.nostr.existingNostr;
        console.log('Modal: Preserved extension:', !!preservedExtension, preservedExtension?.constructor?.name);
        
        if (preservedExtension && this._isRealExtension(preservedExtension) && !seenExtensions.has(preservedExtension)) {
          extensions.push({
            name: 'window.nostr.existingNostr',
            displayName: 'Extension (preserved by WindowNostr)',
            icon: '🔑',
            extension: preservedExtension
          });
          seenExtensions.add(preservedExtension);
          console.log(`Modal: ✓ Detected preserved extension: ${preservedExtension.constructor?.name}`);
        }
      }
      // Check if window.nostr is directly a real extension (not our facade)
      else if (this._isRealExtension(window.nostr) && !seenExtensions.has(window.nostr)) {
        extensions.push({
          name: 'window.nostr',
          displayName: 'Extension (window.nostr)',
          icon: '🔑',
          extension: window.nostr
        });
        seenExtensions.add(window.nostr);
        console.log(`Modal: ✓ Detected extension at window.nostr: ${window.nostr.constructor?.name}`);
      } else {
        console.log(`Modal: ✗ Filtered out window.nostr (${window.nostr.constructor?.name}) - not a real extension`);
      }
    }
    
    return extensions;
  }

  _isRealExtension(obj) {
    console.log(`Modal: EXTENSIVE DEBUG - _isRealExtension called with:`, obj);
    console.log(`Modal: Object type: ${typeof obj}`);
    console.log(`Modal: Object truthy: ${!!obj}`);
    
    if (!obj || typeof obj !== 'object') {
      console.log(`Modal: REJECT - Not an object`);
      return false;
    }
    
    console.log(`Modal: getPublicKey type: ${typeof obj.getPublicKey}`);
    console.log(`Modal: signEvent type: ${typeof obj.signEvent}`);
    
    // Must have required Nostr methods
    if (typeof obj.getPublicKey !== 'function' || typeof obj.signEvent !== 'function') {
      console.log(`Modal: REJECT - Missing required methods`);
      return false;
    }

    // Exclude NostrTools library object
    if (obj === window.NostrTools) {
      console.log(`Modal: REJECT - Is NostrTools object`);
      return false;
    }

    // Use the EXACT SAME logic as the comprehensive test (lines 804-809)
    // This is the key fix - match the comprehensive test's successful detection logic
    const constructorName = obj.constructor?.name;
    const objectKeys = Object.keys(obj);
    
    console.log(`Modal: Constructor name: "${constructorName}"`);
    console.log(`Modal: Object keys: [${objectKeys.join(', ')}]`);
    
    // COMPREHENSIVE TEST LOGIC - Accept anything with required methods that's not our specific library classes
    const isRealExtension = (
      typeof obj.getPublicKey === 'function' &&
      typeof obj.signEvent === 'function' &&
      constructorName !== 'WindowNostr' && // Our library class
      constructorName !== 'NostrLite' // Our main class
    );
    
    console.log(`Modal: Using comprehensive test logic:`);
    console.log(`  Has getPublicKey: ${typeof obj.getPublicKey === 'function'}`);
    console.log(`  Has signEvent: ${typeof obj.signEvent === 'function'}`);
    console.log(`  Not WindowNostr: ${constructorName !== 'WindowNostr'}`);
    console.log(`  Not NostrLite: ${constructorName !== 'NostrLite'}`);
    console.log(`  Constructor: "${constructorName}"`);
    
    // Additional debugging for comparison
    const extensionPropChecks = {
      _isEnabled: !!obj._isEnabled,
      enabled: !!obj.enabled,
      kind: !!obj.kind,
      _eventEmitter: !!obj._eventEmitter,
      _scope: !!obj._scope,
      _requests: !!obj._requests,
      _pubkey: !!obj._pubkey,
      name: !!obj.name,
      version: !!obj.version,
      description: !!obj.description
    };
    
    console.log(`Modal: Extension property analysis:`, extensionPropChecks);
    
    const hasExtensionProps = !!(
      obj._isEnabled || obj.enabled || obj.kind ||
      obj._eventEmitter || obj._scope || obj._requests || obj._pubkey ||
      obj.name || obj.version || obj.description
    );
    
    const underscoreKeys = objectKeys.filter(key => key.startsWith('_'));
    const hexToUint8Keys = objectKeys.filter(key => key.startsWith('_hex'));
    console.log(`Modal: Underscore keys: [${underscoreKeys.join(', ')}]`);
    console.log(`Modal: _hex* keys: [${hexToUint8Keys.join(', ')}]`);
    
    console.log(`Modal: Additional analysis:`);
    console.log(`  hasExtensionProps: ${hasExtensionProps}`);
    console.log(`  hasLibraryMethod (_hexToUint8Array): ${objectKeys.includes('_hexToUint8Array')}`);
    
    console.log(`Modal: COMPREHENSIVE TEST LOGIC RESULT: ${isRealExtension ? 'ACCEPT' : 'REJECT'}`);
    console.log(`Modal: FINAL DECISION for ${constructorName}: ${isRealExtension ? 'ACCEPT' : 'REJECT'}`);
    
    return isRealExtension;
  }

  _showExtensionChoice(extensions) {
    this.modalBody.innerHTML = '';

    const title = document.createElement('h3');
    title.textContent = 'Choose Browser Extension';
    title.style.cssText = `
      margin: 0 0 16px 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--nl-primary-color);
      font-family: var(--nl-font-family, 'Courier New', monospace);
    `;

    const description = document.createElement('p');
    description.textContent = `Found ${extensions.length} Nostr extensions. Choose which one to use:`;
    description.style.cssText = `
      margin-bottom: 20px;
      color: #666666;
      font-size: 14px;
      font-family: var(--nl-font-family, 'Courier New', monospace);
    `;

    this.modalBody.appendChild(title);
    this.modalBody.appendChild(description);

    // Create button for each extension
    extensions.forEach((ext, index) => {
      const button = document.createElement('button');
      button.onclick = () => this._tryExtensionLogin(ext.extension);
      button.style.cssText = `
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px;
        margin-bottom: 12px;
        background: var(--nl-secondary-color);
        color: var(--nl-primary-color);
        border: var(--nl-border-width) solid var(--nl-primary-color);
        border-radius: var(--nl-border-radius);
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;
      
      button.onmouseover = () => {
        button.style.borderColor = 'var(--nl-accent-color)';
        button.style.background = 'var(--nl-secondary-color)';
      };
      button.onmouseout = () => {
        button.style.borderColor = 'var(--nl-primary-color)';
        button.style.background = 'var(--nl-secondary-color)';
      };

      const iconDiv = document.createElement('div');
      iconDiv.textContent = ext.icon;
      iconDiv.style.cssText = `
        font-size: 24px;
        margin-right: 16px;
        width: 24px;
        text-align: center;
      `;

      const contentDiv = document.createElement('div');
      contentDiv.style.cssText = 'flex: 1;';

      const nameDiv = document.createElement('div');
      nameDiv.textContent = ext.displayName;
      nameDiv.style.cssText = `
        font-weight: 600;
        margin-bottom: 4px;
        color: var(--nl-primary-color);
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;

      const pathDiv = document.createElement('div');
      pathDiv.textContent = ext.name;
      pathDiv.style.cssText = `
        font-size: 12px;
        color: #666666;
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;

      contentDiv.appendChild(nameDiv);
      contentDiv.appendChild(pathDiv);
      
      button.appendChild(iconDiv);
      button.appendChild(contentDiv);
      this.modalBody.appendChild(button);
    });

    // Add back button
    const backButton = document.createElement('button');
    backButton.textContent = 'Back to Login Options';
    backButton.onclick = () => this._renderLoginOptions();
    backButton.style.cssText = this._getButtonStyle('secondary') + 'margin-top: 20px;';
    
    this.modalBody.appendChild(backButton);
  }

  async _tryExtensionLogin(extensionObj) {
    try {
      // Show loading state
      this.modalBody.innerHTML = '<div style="text-align: center; padding: 20px;">🔄 Connecting to extension...</div>';
      
      // Get pubkey from extension
      const pubkey = await extensionObj.getPublicKey();
      console.log('Extension provided pubkey:', pubkey);
      
      // Set extension method with the extension object
      this._setAuthMethod('extension', { pubkey, extension: extensionObj });
      
    } catch (error) {
      console.error('Extension login failed:', error);
      this._showError(`Extension login failed: ${error.message}`);
    }
  }

  _showLocalKeyScreen() {
    this.modalBody.innerHTML = '';

    const description = document.createElement('p');
    description.innerHTML = 'Enter your secret key in nsec or hex format, or <span id="generate-new" style="text-decoration: underline; cursor: pointer; color: var(--nl-primary-color);">generate new</span>.';
    description.style.cssText = 'margin-bottom: 12px; color: #6b7280; font-size: 14px;';

    const textarea = document.createElement('textarea');
    textarea.placeholder = 'Enter your secret key:\n• nsec1... (bech32 format)\n• 64-character hex string';
    textarea.style.cssText = `
      width: 100%;
      height: 100px;
      padding: 12px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      margin-bottom: 12px;
      resize: none;
      font-family: monospace;
      font-size: 14px;
      box-sizing: border-box;
    `;

    // Add real-time format detection
    const formatHint = document.createElement('div');
    formatHint.style.cssText = 'margin-bottom: 16px; font-size: 12px; color: #6b7280; min-height: 16px;';
    
    const importButton = document.createElement('button');
    importButton.textContent = 'Import Key';
    importButton.disabled = true;
    importButton.onclick = () => {
      if (!importButton.disabled) {
        this._importLocalKey(textarea.value);
      }
    };
    
    // Set initial disabled state
    importButton.style.cssText = `
      display: block;
      width: 100%;
      padding: 12px;
      border: var(--nl-border-width) solid var(--nl-muted-color);
      border-radius: var(--nl-border-radius);
      font-size: 16px;
      font-weight: 500;
      cursor: not-allowed;
      transition: all 0.2s;
      font-family: var(--nl-font-family, 'Courier New', monospace);
      background: var(--nl-secondary-color);
      color: var(--nl-muted-color);
    `;
    
    textarea.oninput = () => {
      const value = textarea.value.trim();
      if (!value) {
        formatHint.textContent = '';
        // Disable button
        importButton.disabled = true;
        importButton.style.borderColor = 'var(--nl-muted-color)';
        importButton.style.color = 'var(--nl-muted-color)';
        importButton.style.cursor = 'not-allowed';
        return;
      }
      
      const format = this._detectKeyFormat(value);
      if (format === 'nsec') {
        formatHint.textContent = '✅ Valid nsec format detected';
        formatHint.style.color = '#059669';
        // Enable button
        importButton.disabled = false;
        importButton.style.borderColor = 'var(--nl-primary-color)';
        importButton.style.color = 'var(--nl-primary-color)';
        importButton.style.cursor = 'pointer';
      } else if (format === 'hex') {
        formatHint.textContent = '✅ Valid hex format detected';
        formatHint.style.color = '#059669';
        // Enable button
        importButton.disabled = false;
        importButton.style.borderColor = 'var(--nl-primary-color)';
        importButton.style.color = 'var(--nl-primary-color)';
        importButton.style.cursor = 'pointer';
      } else {
        formatHint.textContent = '❌ Invalid key format - must be nsec1... or 64-character hex';
        formatHint.style.color = '#dc2626';
        // Disable button
        importButton.disabled = true;
        importButton.style.borderColor = 'var(--nl-muted-color)';
        importButton.style.color = 'var(--nl-muted-color)';
        importButton.style.cursor = 'not-allowed';
      }
    };

    const backButton = document.createElement('button');
    backButton.textContent = 'Back';
    backButton.onclick = () => this._renderLoginOptions();
    backButton.style.cssText = this._getButtonStyle('secondary') + 'margin-top: 12px;';

    this.modalBody.appendChild(description);
    this.modalBody.appendChild(textarea);
    this.modalBody.appendChild(formatHint);
    this.modalBody.appendChild(importButton);
    this.modalBody.appendChild(backButton);

    // Add click handler for the "generate new" link
    const generateLink = document.getElementById('generate-new');
    if (generateLink) {
      generateLink.addEventListener('mouseenter', () => {
        generateLink.style.color = 'var(--nl-accent-color)';
      });
      generateLink.addEventListener('mouseleave', () => {
        generateLink.style.color = 'var(--nl-primary-color)';
      });
      generateLink.addEventListener('click', () => {
        this._generateNewLocalKey(textarea, formatHint);
      });
    }
  }

  _generateNewLocalKey(textarea, formatHint) {
    try {
      // Generate a new secret key using NostrTools
      const sk = window.NostrTools.generateSecretKey();
      const nsec = window.NostrTools.nip19.nsecEncode(sk);
      
      // Set the generated key in the textarea
      textarea.value = nsec;
      
      // Trigger the oninput event to properly validate and enable the button
      if (textarea.oninput) {
        textarea.oninput();
      }
      
      console.log('Generated new local secret key (nsec format)');
      
    } catch (error) {
      console.error('Failed to generate local key:', error);
      formatHint.textContent = '❌ Failed to generate key - NostrTools not available';
      formatHint.style.color = '#dc2626';
    }
  }

  _createLocalKey() {
    try {
      const sk = window.NostrTools.generateSecretKey();
      const pk = window.NostrTools.getPublicKey(sk);
      const nsec = window.NostrTools.nip19.nsecEncode(sk);
      const npub = window.NostrTools.nip19.npubEncode(pk);

      this._showKeyDisplay(pk, nsec, 'created');
    } catch (error) {
      this._showError('Failed to create key: ' + error.message);
    }
  }

  

  _detectKeyFormat(keyValue) {
    const trimmed = keyValue.trim();
    
    // Check for nsec format
    if (trimmed.startsWith('nsec1') && trimmed.length === 63) {
      try {
        window.NostrTools.nip19.decode(trimmed);
        return 'nsec';
      } catch {
        return 'invalid';
      }
    }
    
    // Check for hex format (64 characters, valid hex)
    if (trimmed.length === 64 && /^[a-fA-F0-9]{64}$/.test(trimmed)) {
      return 'hex';
    }
    
    return 'invalid';
  }

  _importLocalKey(keyValue) {
    try {
      const trimmed = keyValue.trim();
      if (!trimmed) {
        throw new Error('Please enter a secret key');
      }

      const format = this._detectKeyFormat(trimmed);
      let sk;

      if (format === 'nsec') {
        // Decode nsec format - this returns Uint8Array
        const decoded = window.NostrTools.nip19.decode(trimmed);
        if (decoded.type !== 'nsec') {
          throw new Error('Invalid nsec format');
        }
        sk = decoded.data; // This is already Uint8Array
      } else if (format === 'hex') {
        // Convert hex string to Uint8Array
        sk = this._hexToUint8Array(trimmed);
        // Test that it's a valid secret key by trying to get public key
        window.NostrTools.getPublicKey(sk);
      } else {
        throw new Error('Invalid key format. Please enter either nsec1... or 64-character hex string');
      }

      // Generate public key and encoded formats
      const pk = window.NostrTools.getPublicKey(sk);
      const nsec = window.NostrTools.nip19.nsecEncode(sk);
      const npub = window.NostrTools.nip19.npubEncode(pk);

      this._showKeyDisplay(pk, nsec, 'imported');
    } catch (error) {
      this._showError('Invalid key: ' + error.message);
    }
  }

  _hexToUint8Array(hex) {
    // Convert hex string to Uint8Array
    if (hex.length % 2 !== 0) {
      throw new Error('Invalid hex string length');
    }
    const bytes = new Uint8Array(hex.length / 2);
    for (let i = 0; i < bytes.length; i++) {
      bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
    }
    return bytes;
  }

  _showKeyDisplay(pubkey, nsec, action) {
    this.modalBody.innerHTML = '';

    const title = document.createElement('h3');
    title.textContent = `Key ${action} successfully!`;
    title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #059669;';

    const warningDiv = document.createElement('div');
    warningDiv.textContent = '⚠️ Save your secret key securely!';
    warningDiv.style.cssText = 'background: #fef3c7; color: #92400e; padding: 12px; border-radius: 6px; margin-bottom: 16px; font-size: 12px;';

    // Helper function to create copy button
    const createCopyButton = (text, label) => {
      const copyBtn = document.createElement('button');
      copyBtn.textContent = `Copy ${label}`;
      copyBtn.style.cssText = `
        margin-left: 8px;
        padding: 4px 8px;
        font-size: 10px;
        background: var(--nl-secondary-color);
        color: var(--nl-primary-color);
        border: 1px solid var(--nl-primary-color);
        border-radius: 4px;
        cursor: pointer;
        font-family: var(--nl-font-family, 'Courier New', monospace);
      `;
      copyBtn.onclick = async (e) => {
        e.preventDefault();
        try {
          await navigator.clipboard.writeText(text);
          const originalText = copyBtn.textContent;
          copyBtn.textContent = '✓ Copied!';
          copyBtn.style.color = '#059669';
          setTimeout(() => {
            copyBtn.textContent = originalText;
            copyBtn.style.color = 'var(--nl-primary-color)';
          }, 2000);
        } catch (err) {
          console.error('Failed to copy:', err);
          copyBtn.textContent = '✗ Failed';
          copyBtn.style.color = '#dc2626';
          setTimeout(() => {
            copyBtn.textContent = originalText;
            copyBtn.style.color = 'var(--nl-primary-color)';
          }, 2000);
        }
      };
      return copyBtn;
    };

    // Convert pubkey to hex for verification
    const pubkeyHex = typeof pubkey === 'string' ? pubkey : Array.from(pubkey).map(b => b.toString(16).padStart(2, '0')).join('');
    
    // Decode nsec to get secret key as hex
    let secretKeyHex = '';
    try {
      const decoded = window.NostrTools.nip19.decode(nsec);
      secretKeyHex = Array.from(decoded.data).map(b => b.toString(16).padStart(2, '0')).join('');
    } catch (err) {
      console.error('Failed to decode nsec for hex display:', err);
    }

    // Secret Key Section
    const nsecSection = document.createElement('div');
    nsecSection.style.cssText = 'margin-bottom: 16px;';
    
    const nsecLabel = document.createElement('div');
    nsecLabel.innerHTML = '<strong>Your Secret Key (nsec):</strong>';
    nsecLabel.style.cssText = 'margin-bottom: 4px; font-size: 12px; font-weight: 600;';
    
    const nsecContainer = document.createElement('div');
    nsecContainer.style.cssText = 'margin-bottom: 8px;';
    
    const nsecCode = document.createElement('code');
    nsecCode.textContent = nsec;
    nsecCode.style.cssText = `
      display: block;
      word-wrap: break-word;
      overflow-wrap: break-word;
      background: #f3f4f6;
      padding: 6px;
      border-radius: 4px;
      font-size: 10px;
      line-height: 1.3;
      font-family: 'Courier New', monospace;
      margin-bottom: 4px;
    `;
    
    const nsecCopyBtn = createCopyButton(nsec, 'nsec');
    nsecCopyBtn.style.cssText += 'display: inline-block; margin-left: 0;';
    
    nsecContainer.appendChild(nsecCode);
    nsecContainer.appendChild(nsecCopyBtn);
    nsecSection.appendChild(nsecLabel);
    nsecSection.appendChild(nsecContainer);

    // Secret Key Hex Section
    if (secretKeyHex) {
      const secretHexLabel = document.createElement('div');
      secretHexLabel.innerHTML = '<strong>Secret Key (hex):</strong>';
      secretHexLabel.style.cssText = 'margin-bottom: 4px; font-size: 12px; font-weight: 600;';
      
      const secretHexContainer = document.createElement('div');
      secretHexContainer.style.cssText = 'margin-bottom: 8px;';
      
      const secretHexCode = document.createElement('code');
      secretHexCode.textContent = secretKeyHex;
      secretHexCode.style.cssText = `
        display: block;
        word-wrap: break-word;
        overflow-wrap: break-word;
        background: #f3f4f6;
        padding: 6px;
        border-radius: 4px;
        font-size: 10px;
        line-height: 1.3;
        font-family: 'Courier New', monospace;
        margin-bottom: 4px;
      `;
      
      const secretHexCopyBtn = createCopyButton(secretKeyHex, 'hex');
      secretHexCopyBtn.style.cssText += 'display: inline-block; margin-left: 0;';
      
      secretHexContainer.appendChild(secretHexCode);
      secretHexContainer.appendChild(secretHexCopyBtn);
      nsecSection.appendChild(secretHexLabel);
      nsecSection.appendChild(secretHexContainer);
    }

    // Public Key Section
    const npubSection = document.createElement('div');
    npubSection.style.cssText = 'margin-bottom: 16px;';
    
    const npub = window.NostrTools.nip19.npubEncode(pubkey);
    
    const npubLabel = document.createElement('div');
    npubLabel.innerHTML = '<strong>Your Public Key (npub):</strong>';
    npubLabel.style.cssText = 'margin-bottom: 4px; font-size: 12px; font-weight: 600;';
    
    const npubContainer = document.createElement('div');
    npubContainer.style.cssText = 'margin-bottom: 8px;';
    
    const npubCode = document.createElement('code');
    npubCode.textContent = npub;
    npubCode.style.cssText = `
      display: block;
      word-wrap: break-word;
      overflow-wrap: break-word;
      background: #f3f4f6;
      padding: 6px;
      border-radius: 4px;
      font-size: 10px;
      line-height: 1.3;
      font-family: 'Courier New', monospace;
      margin-bottom: 4px;
    `;
    
    const npubCopyBtn = createCopyButton(npub, 'npub');
    npubCopyBtn.style.cssText += 'display: inline-block; margin-left: 0;';
    
    npubContainer.appendChild(npubCode);
    npubContainer.appendChild(npubCopyBtn);
    npubSection.appendChild(npubLabel);
    npubSection.appendChild(npubContainer);

    // Public Key Hex Section
    const pubHexLabel = document.createElement('div');
    pubHexLabel.innerHTML = '<strong>Public Key (hex):</strong>';
    pubHexLabel.style.cssText = 'margin-bottom: 4px; font-size: 12px; font-weight: 600;';
    
    const pubHexContainer = document.createElement('div');
    pubHexContainer.style.cssText = '';
    
    const pubHexCode = document.createElement('code');
    pubHexCode.textContent = pubkeyHex;
    pubHexCode.style.cssText = `
      display: block;
      word-wrap: break-word;
      overflow-wrap: break-word;
      background: #f3f4f6;
      padding: 6px;
      border-radius: 4px;
      font-size: 10px;
      line-height: 1.3;
      font-family: 'Courier New', monospace;
      margin-bottom: 4px;
    `;
    
    const pubHexCopyBtn = createCopyButton(pubkeyHex, 'hex');
    pubHexCopyBtn.style.cssText += 'display: inline-block; margin-left: 0;';
    
    pubHexContainer.appendChild(pubHexCode);
    pubHexContainer.appendChild(pubHexCopyBtn);
    npubSection.appendChild(pubHexLabel);
    npubSection.appendChild(pubHexContainer);

    const continueButton = document.createElement('button');
    continueButton.textContent = 'Continue';
    continueButton.onclick = () => this._setAuthMethod('local', { secret: nsec, pubkey });
    continueButton.style.cssText = this._getButtonStyle();

    this.modalBody.appendChild(title);
    this.modalBody.appendChild(warningDiv);
    this.modalBody.appendChild(nsecSection);
    this.modalBody.appendChild(npubSection);
    this.modalBody.appendChild(continueButton);
  }

  _setAuthMethod(method, options = {}) {
    // SINGLE-EXTENSION ARCHITECTURE: Handle method switching
    console.log('Modal: _setAuthMethod called with:', method, options);
    
    // CRITICAL: Never install facade for extension methods - leave window.nostr as the extension
    if (method === 'extension') {
      console.log('Modal: Extension method - NOT installing facade, leaving window.nostr as extension');
      
      // Save extension authentication state using global setAuthState function
      if (typeof window.setAuthState === 'function') {
        console.log('Modal: Saving extension auth state to storage');
        window.setAuthState({ method, ...options }, { isolateSession: this.options?.isolateSession });
      }
      
      // Emit auth method selection directly for extension
      const event = new CustomEvent('nlMethodSelected', {
        detail: { method, ...options }
      });
      window.dispatchEvent(event);
      
      this.close();
      return;
    }
    
    // For non-extension methods, we need to ensure WindowNostr facade is available
    console.log('Modal: Non-extension method detected:', method);
    
    // Check if we have a preserved extension but no WindowNostr facade installed
    const hasPreservedExtension = !!window.NOSTR_LOGIN_LITE?._instance?.preservedExtension;
    const hasWindowNostrFacade = window.nostr?.constructor?.name === 'WindowNostr';
    
    console.log('Modal: Method switching check:');
    console.log('  method:', method);
    console.log('  hasPreservedExtension:', hasPreservedExtension);
    console.log('  hasWindowNostrFacade:', hasWindowNostrFacade);
    console.log('  current window.nostr constructor:', window.nostr?.constructor?.name);
    
    // If we have a preserved extension but no facade, install facade for method switching
    if (hasPreservedExtension && !hasWindowNostrFacade) {
      console.log('Modal: Installing WindowNostr facade for method switching (non-extension authentication)');
      
      // Get the NostrLite instance and install facade with preserved extension
      const nostrLiteInstance = window.NOSTR_LOGIN_LITE?._instance;
      if (nostrLiteInstance && typeof nostrLiteInstance._installFacade === 'function') {
        const preservedExtension = nostrLiteInstance.preservedExtension;
        console.log('Modal: Installing facade with preserved extension:', preservedExtension?.constructor?.name);
        
        nostrLiteInstance._installFacade(preservedExtension);
        console.log('Modal: WindowNostr facade installed for method switching');
      } else {
        console.error('Modal: Cannot access NostrLite instance or _installFacade method');
      }
    }
    
    // If no extension at all, ensure facade is installed for local/NIP-46/readonly methods
    else if (!hasPreservedExtension && !hasWindowNostrFacade) {
      console.log('Modal: Installing WindowNostr facade for non-extension methods (no extension detected)');
      
      const nostrLiteInstance = window.NOSTR_LOGIN_LITE?._instance;
      if (nostrLiteInstance && typeof nostrLiteInstance._installFacade === 'function') {
        nostrLiteInstance._installFacade();
        console.log('Modal: WindowNostr facade installed for non-extension methods');
      }
    }
    
    // Emit auth method selection
    const event = new CustomEvent('nlMethodSelected', {
      detail: { method, ...options }
    });
    window.dispatchEvent(event);

    this.close();
  }

  _showError(message) {
    this.modalBody.innerHTML = '';

    const errorDiv = document.createElement('div');
    errorDiv.style.cssText = 'background: #fee2e2; color: #dc2626; padding: 16px; border-radius: 6px; margin-bottom: 16px;';
    errorDiv.innerHTML = `<strong>Error:</strong> ${message}`;

    const backButton = document.createElement('button');
    backButton.textContent = 'Back';
    backButton.onclick = () => this._renderLoginOptions();
    backButton.style.cssText = this._getButtonStyle('secondary');

    this.modalBody.appendChild(errorDiv);
    this.modalBody.appendChild(backButton);
  }

  _showExtensionRequired() {
    this.modalBody.innerHTML = '';

    const title = document.createElement('h3');
    title.textContent = 'Browser Extension Required';
    title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600;';

    const message = document.createElement('p');
    message.innerHTML = `
      Please install a Nostr browser extension and refresh the page.<br><br>
      <strong>Important:</strong> If you have multiple extensions installed, please disable all but one to avoid conflicts.
      <br><br>
      Popular extensions: Alby, nos2x, Flamingo
    `;
    message.style.cssText = 'margin-bottom: 20px; color: #6b7280; font-size: 14px; line-height: 1.4;';

    const backButton = document.createElement('button');
    backButton.textContent = 'Back';
    backButton.onclick = () => this._renderLoginOptions();
    backButton.style.cssText = this._getButtonStyle('secondary');

    this.modalBody.appendChild(title);
    this.modalBody.appendChild(message);
    this.modalBody.appendChild(backButton);
  }

  _showConnectScreen() {
    this.modalBody.innerHTML = '';

    const description = document.createElement('p');
    description.textContent = 'Connect to a remote signer (bunker) server to use its keys for signing.';
    description.style.cssText = 'margin-bottom: 20px; color: #6b7280; font-size: 14px;';

    const formGroup = document.createElement('div');
    formGroup.style.cssText = 'margin-bottom: 20px;';

    const label = document.createElement('label');
    label.textContent = 'Bunker Public Key:';
    label.style.cssText = 'display: block; margin-bottom: 8px; font-weight: 500;';

    const pubkeyInput = document.createElement('input');
    pubkeyInput.type = 'text';
    pubkeyInput.placeholder = 'bunker://pubkey?relay=..., bunker:hex, hex, or npub...';
    pubkeyInput.style.cssText = `
      width: 100%;
      padding: 12px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      margin-bottom: 12px;
      font-family: monospace;
      box-sizing: border-box;
    `;

    // Add real-time bunker key validation
    const formatHint = document.createElement('div');
    formatHint.style.cssText = 'margin-bottom: 16px; font-size: 12px; color: #6b7280; min-height: 16px;';

    const connectButton = document.createElement('button');
    connectButton.textContent = 'Connect to Bunker';
    connectButton.disabled = true;
    connectButton.onclick = () => {
      if (!connectButton.disabled) {
        this._handleNip46Connect(pubkeyInput.value);
      }
    };
    
    // Set initial disabled state
    connectButton.style.cssText = `
      display: block;
      width: 100%;
      padding: 12px;
      border: var(--nl-border-width) solid var(--nl-muted-color);
      border-radius: var(--nl-border-radius);
      font-size: 16px;
      font-weight: 500;
      cursor: not-allowed;
      transition: all 0.2s;
      font-family: var(--nl-font-family, 'Courier New', monospace);
      background: var(--nl-secondary-color);
      color: var(--nl-muted-color);
      margin-bottom: 12px;
    `;

    pubkeyInput.oninput = () => {
      const value = pubkeyInput.value.trim();
      if (!value) {
        formatHint.textContent = '';
        // Disable button
        connectButton.disabled = true;
        connectButton.style.borderColor = 'var(--nl-muted-color)';
        connectButton.style.color = 'var(--nl-muted-color)';
        connectButton.style.cursor = 'not-allowed';
        return;
      }
      
      const isValid = this._validateBunkerKey(value);
      if (isValid) {
        formatHint.textContent = '✅ Valid bunker connection format detected';
        formatHint.style.color = '#059669';
        // Enable button
        connectButton.disabled = false;
        connectButton.style.borderColor = 'var(--nl-primary-color)';
        connectButton.style.color = 'var(--nl-primary-color)';
        connectButton.style.cursor = 'pointer';
      } else {
        formatHint.textContent = '❌ Invalid format - must be bunker://, npub, or 64-char hex';
        formatHint.style.color = '#dc2626';
        // Disable button
        connectButton.disabled = true;
        connectButton.style.borderColor = 'var(--nl-muted-color)';
        connectButton.style.color = 'var(--nl-muted-color)';
        connectButton.style.cursor = 'not-allowed';
      }
    };

    const backButton = document.createElement('button');
    backButton.textContent = 'Back';
    backButton.onclick = () => this._renderLoginOptions();
    backButton.style.cssText = this._getButtonStyle('secondary') + 'margin-top: 12px;';

    formGroup.appendChild(label);
    formGroup.appendChild(pubkeyInput);
    formGroup.appendChild(formatHint);

    this.modalBody.appendChild(description);
    this.modalBody.appendChild(formGroup);
    this.modalBody.appendChild(connectButton);
    this.modalBody.appendChild(backButton);
  }

  _validateBunkerKey(bunkerKey) {
    try {
      const trimmed = bunkerKey.trim();
      
      // Check for bunker:// format
      if (trimmed.startsWith('bunker://')) {
        // Should have format: bunker://pubkey or bunker://pubkey?param=value
        const match = trimmed.match(/^bunker:\/\/([0-9a-fA-F]{64})(\?.*)?$/);
        return !!match;
      }
      
      // Check for npub format
      if (trimmed.startsWith('npub1') && trimmed.length === 63) {
        try {
          if (window.NostrTools?.nip19) {
            const decoded = window.NostrTools.nip19.decode(trimmed);
            return decoded.type === 'npub';
          }
        } catch {
          return false;
        }
      }
      
      // Check for hex format (64 characters, valid hex)
      if (trimmed.length === 64 && /^[a-fA-F0-9]{64}$/.test(trimmed)) {
        return true;
      }
      
      return false;
    } catch (error) {
      console.log('Bunker key validation failed:', error.message);
      return false;
    }
  }

  _handleNip46Connect(bunkerPubkey) {
    if (!bunkerPubkey || !bunkerPubkey.length) {
      this._showError('Bunker pubkey is required');
      return;
    }

    this._showNip46Connecting(bunkerPubkey);
    this._performNip46Connect(bunkerPubkey);
  }

  _showNip46Connecting(bunkerPubkey) {
    this.modalBody.innerHTML = '';

    const title = document.createElement('h3');
    title.textContent = 'Connecting to Remote Signer...';
    title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #059669;';

    const description = document.createElement('p');
    description.textContent = 'Establishing secure connection to your remote signer.';
    description.style.cssText = 'margin-bottom: 20px; color: #6b7280;';

    // Normalize bunker pubkey for display (= show original format if bunker: prefix)
    const displayPubkey = bunkerPubkey.startsWith('bunker:') || bunkerPubkey.startsWith('npub') || bunkerPubkey.length === 64 ? bunkerPubkey : bunkerPubkey;

    const bunkerInfo = document.createElement('div');
    bunkerInfo.style.cssText = 'background: #f1f5f9; padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 14px;';
    bunkerInfo.innerHTML = `
      <strong>Connecting to bunker:</strong><br>
      Connection: <code style="word-break: break-all;">${displayPubkey}</code><br>
      <small style="color: #6b7280;">Connection string contains all necessary relay information.</small>
    `;

    const connectingDiv = document.createElement('div');
    connectingDiv.style.cssText = 'text-align: center; color: #6b7280;';
    connectingDiv.innerHTML = `
      <div style="font-size: 24px; margin-bottom: 10px;">⏳</div>
      <div>Please wait while we establish the connection...</div>
      <div style="font-size: 12px; margin-top: 10px;">This may take a few seconds</div>
    `;

    this.modalBody.appendChild(title);
    this.modalBody.appendChild(description);
    this.modalBody.appendChild(bunkerInfo);
    this.modalBody.appendChild(connectingDiv);
  }

  async _performNip46Connect(bunkerPubkey) {
    try {
      console.log('Starting NIP-46 connection to bunker:', bunkerPubkey);

      // Check if nostr-tools NIP-46 is available
      if (!window.NostrTools?.nip46) {
        throw new Error('nostr-tools NIP-46 module not available');
      }

      // Use nostr-tools to parse bunker input - this handles all formats correctly
      console.log('Parsing bunker input with nostr-tools...');
      const bunkerPointer = await window.NostrTools.nip46.parseBunkerInput(bunkerPubkey);

      if (!bunkerPointer) {
        throw new Error('Unable to parse bunker connection string or resolve NIP-05 identifier');
      }

      console.log('Parsed bunker pointer:', bunkerPointer);

      // Create local client keypair for this session
      const localSecretKey = window.NostrTools.generateSecretKey();
      console.log('Generated local client keypair for NIP-46 session');

      // Use nostr-tools BunkerSigner factory method (not constructor - it's private)
      console.log('Creating nip46 BunkerSigner...');
      const signer = window.NostrTools.nip46.BunkerSigner.fromBunker(localSecretKey, bunkerPointer, {
        onauth: (url) => {
          console.log('Received auth URL from bunker:', url);
          // Open auth URL in popup or redirect
          window.open(url, '_blank', 'width=600,height=800');
        }
      });

      console.log('NIP-46 BunkerSigner created successfully');

      // Skip ping test - NIP-46 works through relays, not direct connection
      // Try to connect directly (this may trigger auth flow)
      console.log('Attempting NIP-46 connect...');
      await signer.connect();
      console.log('NIP-46 connect successful');

      // Get the user's public key from the bunker
      console.log('Getting public key from bunker...');
      const userPubkey = await signer.getPublicKey();
      console.log('NIP-46 user public key:', userPubkey);

      // Store the NIP-46 authentication info
      const nip46Info = {
        pubkey: userPubkey,
        signer: {
          method: 'nip46',
          remotePubkey: bunkerPointer.pubkey,
          bunkerSigner: signer,
          secret: bunkerPointer.secret,
          relays: bunkerPointer.relays
        }
      };

      console.log('NOSTR_LOGIN_LITE NIP-46 connection established successfully!');

      // Set as current auth method
      this._setAuthMethod('nip46', nip46Info);
      return;

    } catch (error) {
      console.error('NIP-46 connection failed:', error);
      this._showNip46Error(error.message);
    }
  }

  _showNip46Error(message) {
    this.modalBody.innerHTML = '';

    const title = document.createElement('h3');
    title.textContent = 'Connection Failed';
    title.style.cssText = 'margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: #dc2626;';

    const errorMsg = document.createElement('p');
    errorMsg.textContent = `Unable to connect to remote signer: ${message}`;
    errorMsg.style.cssText = 'margin-bottom: 20px; color: #6b7280;';

    const retryButton = document.createElement('button');
    retryButton.textContent = 'Try Again';
    retryButton.onclick = () => this._showConnectScreen();
    retryButton.style.cssText = this._getButtonStyle();

    const backButton = document.createElement('button');
    backButton.textContent = 'Back to Options';
    backButton.onclick = () => this._renderLoginOptions();
    backButton.style.cssText = this._getButtonStyle('secondary') + 'margin-top: 12px;';

    this.modalBody.appendChild(title);
    this.modalBody.appendChild(errorMsg);
    this.modalBody.appendChild(retryButton);
    this.modalBody.appendChild(backButton);
  }

  _handleReadonly() {
    // Set read-only mode
    this._setAuthMethod('readonly');
  }

  _showSeedPhraseScreen() {
    this.modalBody.innerHTML = '';

    const description = document.createElement('p');
    description.innerHTML = 'Enter your 12 or 24-word mnemonic seed phrase to derive Nostr accounts, or <span id="generate-new" style="text-decoration: underline; cursor: pointer; color: var(--nl-primary-color);">generate new</span>.';
    description.style.cssText = 'margin-bottom: 12px; color: #6b7280; font-size: 14px;';

    const textarea = document.createElement('textarea');
    // Remove default placeholder text as requested
    textarea.placeholder = '';
    textarea.style.cssText = `
      width: 100%;
      height: 100px;
      padding: 12px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      margin-bottom: 12px;
      resize: none;
      font-family: monospace;
      font-size: 14px;
      box-sizing: border-box;
    `;

    // Add real-time mnemonic validation
    const formatHint = document.createElement('div');
    formatHint.style.cssText = 'margin-bottom: 16px; font-size: 12px; color: #6b7280; min-height: 16px;';
    
    const importButton = document.createElement('button');
    importButton.textContent = 'Import Accounts';
    importButton.disabled = true;
    importButton.onclick = () => {
      if (!importButton.disabled) {
        this._importFromSeedPhrase(textarea.value);
      }
    };
    
    // Set initial disabled state
    importButton.style.cssText = `
      display: block;
      width: 100%;
      padding: 12px;
      border: var(--nl-border-width) solid var(--nl-muted-color);
      border-radius: var(--nl-border-radius);
      font-size: 16px;
      font-weight: 500;
      cursor: not-allowed;
      transition: all 0.2s;
      font-family: var(--nl-font-family, 'Courier New', monospace);
      background: var(--nl-secondary-color);
      color: var(--nl-muted-color);
    `;
    
    textarea.oninput = () => {
      const value = textarea.value.trim();
      if (!value) {
        formatHint.textContent = '';
        // Disable button
        importButton.disabled = true;
        importButton.style.borderColor = 'var(--nl-muted-color)';
        importButton.style.color = 'var(--nl-muted-color)';
        importButton.style.cursor = 'not-allowed';
        return;
      }
      
      const isValid = this._validateMnemonic(value);
      if (isValid) {
        const wordCount = value.split(/\s+/).length;
        formatHint.textContent = `✅ Valid ${wordCount}-word mnemonic detected`;
        formatHint.style.color = '#059669';
        // Enable button
        importButton.disabled = false;
        importButton.style.borderColor = 'var(--nl-primary-color)';
        importButton.style.color = 'var(--nl-primary-color)';
        importButton.style.cursor = 'pointer';
      } else {
        formatHint.textContent = '❌ Invalid mnemonic - must be 12 or 24 valid BIP-39 words';
        formatHint.style.color = '#dc2626';
        // Disable button
        importButton.disabled = true;
        importButton.style.borderColor = 'var(--nl-muted-color)';
        importButton.style.color = 'var(--nl-muted-color)';
        importButton.style.cursor = 'not-allowed';
      }
    };

    const backButton = document.createElement('button');
    backButton.textContent = 'Back';
    backButton.onclick = () => this._renderLoginOptions();
    backButton.style.cssText = this._getButtonStyle('secondary') + 'margin-top: 12px;';

    this.modalBody.appendChild(description);
    this.modalBody.appendChild(textarea);
    this.modalBody.appendChild(formatHint);
    this.modalBody.appendChild(importButton);
    this.modalBody.appendChild(backButton);

    // Add click handler for the "generate new" link
    const generateLink = document.getElementById('generate-new');
    if (generateLink) {
      generateLink.addEventListener('mouseenter', () => {
        generateLink.style.color = 'var(--nl-accent-color)';
      });
      generateLink.addEventListener('mouseleave', () => {
        generateLink.style.color = 'var(--nl-primary-color)';
      });
      generateLink.addEventListener('click', () => {
        this._generateNewSeedPhrase(textarea, formatHint);
      });
    }
  }

  _generateNewSeedPhrase(textarea, formatHint) {
    try {
      // Check if NIP-06 is available
      if (!window.NostrTools?.nip06) {
        throw new Error('NIP-06 not available in bundle');
      }

      // Generate a random 12-word mnemonic using NostrTools
      const mnemonic = window.NostrTools.nip06.generateSeedWords();
      
      // Set the generated mnemonic in the textarea
      textarea.value = mnemonic;
      
      // Trigger the oninput event to properly validate and enable the button
      if (textarea.oninput) {
        textarea.oninput();
      }
      
      console.log('Generated new seed phrase:', mnemonic.split(/\s+/).length, 'words');
      
    } catch (error) {
      console.error('Failed to generate seed phrase:', error);
      formatHint.textContent = '❌ Failed to generate seed phrase - NIP-06 not available';
      formatHint.style.color = '#dc2626';
    }
  }

  _validateMnemonic(mnemonic) {
    try {
      // Check if NIP-06 is available
      if (!window.NostrTools?.nip06) {
        console.error('NIP-06 not available in bundle');
        return false;
      }

      const words = mnemonic.trim().split(/\s+/);
      
      // Must be 12 or 24 words
      if (words.length !== 12 && words.length !== 24) {
        return false;
      }

      // Try to validate using NostrTools nip06 - this will throw if invalid
      window.NostrTools.nip06.privateKeyFromSeedWords(mnemonic, '', 0);
      return true;
    } catch (error) {
      console.log('Mnemonic validation failed:', error.message);
      return false;
    }
  }

  _importFromSeedPhrase(mnemonic) {
    try {
      const trimmed = mnemonic.trim();
      if (!trimmed) {
        throw new Error('Please enter a mnemonic seed phrase');
      }

      // Validate the mnemonic
      if (!this._validateMnemonic(trimmed)) {
        throw new Error('Invalid mnemonic. Please enter a valid 12 or 24-word BIP-39 seed phrase');
      }

      // Generate accounts 0-5 using NIP-06
      const accounts = [];
      for (let i = 0; i < 6; i++) {
        try {
          const privateKey = window.NostrTools.nip06.privateKeyFromSeedWords(trimmed, '', i);
          const publicKey = window.NostrTools.getPublicKey(privateKey);
          const nsec = window.NostrTools.nip19.nsecEncode(privateKey);
          const npub = window.NostrTools.nip19.npubEncode(publicKey);

          accounts.push({
            index: i,
            privateKey,
            publicKey,
            nsec,
            npub
          });
        } catch (error) {
          console.error(`Failed to derive account ${i}:`, error);
        }
      }

      if (accounts.length === 0) {
        throw new Error('Failed to derive any accounts from seed phrase');
      }

      console.log(`Successfully derived ${accounts.length} accounts from seed phrase`);
      this._showAccountSelection(accounts);

    } catch (error) {
      console.error('Seed phrase import failed:', error);
      this._showError('Seed phrase import failed: ' + error.message);
    }
  }

  _showAccountSelection(accounts) {
    this.modalBody.innerHTML = '';

    const description = document.createElement('p');
    description.textContent = `Select which account to use (${accounts.length} accounts derived from seed phrase):`;
    description.style.cssText = 'margin-bottom: 20px; color: #6b7280; font-size: 14px;';

    this.modalBody.appendChild(description);

    // Create table for account selection
    const table = document.createElement('table');
    table.style.cssText = `
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
      font-family: var(--nl-font-family, 'Courier New', monospace);
      font-size: 12px;
    `;

    // Table header
    const thead = document.createElement('thead');
    thead.innerHTML = `
      <tr style="background: #f3f4f6;">
        <th style="padding: 8px; text-align: center; border: 1px solid #d1d5db; font-weight: bold;">#</th>
        <th style="padding: 8px; text-align: center; border: 1px solid #d1d5db; font-weight: bold;">Use</th>
      </tr>
    `;
    table.appendChild(thead);

    // Table body
    const tbody = document.createElement('tbody');
    accounts.forEach(account => {
      const row = document.createElement('tr');
      row.style.cssText = 'border: 1px solid #d1d5db;';
      
      const indexCell = document.createElement('td');
      indexCell.textContent = account.index;
      indexCell.style.cssText = 'padding: 8px; text-align: center; border: 1px solid #d1d5db; font-weight: bold;';

      const actionCell = document.createElement('td');
      actionCell.style.cssText = 'padding: 8px; border: 1px solid #d1d5db;';
      
      // Show truncated npub in the button
      const truncatedNpub = `${account.npub.slice(0, 12)}...${account.npub.slice(-8)}`;
      
      const selectButton = document.createElement('button');
      selectButton.textContent = truncatedNpub;
      selectButton.onclick = () => this._selectAccount(account);
      selectButton.style.cssText = `
        width: 100%;
        padding: 8px 12px;
        font-size: 11px;
        background: var(--nl-secondary-color);
        color: var(--nl-primary-color);
        border: 1px solid var(--nl-primary-color);
        border-radius: 4px;
        cursor: pointer;
        font-family: 'Courier New', monospace;
        text-align: center;
      `;
      selectButton.onmouseover = () => {
        selectButton.style.borderColor = 'var(--nl-accent-color)';
      };
      selectButton.onmouseout = () => {
        selectButton.style.borderColor = 'var(--nl-primary-color)';
      };

      actionCell.appendChild(selectButton);
      
      row.appendChild(indexCell);
      row.appendChild(actionCell);
      tbody.appendChild(row);
    });
    table.appendChild(tbody);

    this.modalBody.appendChild(table);

    // Back button
    const backButton = document.createElement('button');
    backButton.textContent = 'Back to Seed Phrase';
    backButton.onclick = () => this._showSeedPhraseScreen();
    backButton.style.cssText = this._getButtonStyle('secondary');

    this.modalBody.appendChild(backButton);
  }

  _selectAccount(account) {
    console.log('Selected account:', account.index, account.npub);
    
    // Use the same auth method as local keys, but with seedphrase identifier
    this._setAuthMethod('local', {
      secret: account.nsec,
      pubkey: account.publicKey,
      source: 'seedphrase',
      accountIndex: account.index
    });
  }

  _showOtpScreen() {
    // Placeholder for OTP functionality
    this._showError('OTP/DM not yet implemented - coming soon!');
  }

  _getButtonStyle(type = 'primary') {
    const baseStyle = `
      display: block;
      width: 100%;
      padding: 12px;
      border: var(--nl-border-width) solid var(--nl-primary-color);
      border-radius: var(--nl-border-radius);
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      font-family: var(--nl-font-family, 'Courier New', monospace);
    `;

    if (type === 'primary') {
      return baseStyle + `
        background: var(--nl-secondary-color);
        color: var(--nl-primary-color);
      `;
    } else {
      return baseStyle + `
        background: #cccccc;
        color: var(--nl-primary-color);
      `;
    }
  }

  // Public API
  static init(options) {
    if (Modal.instance) return Modal.instance;
    Modal.instance = new Modal(options);
    return Modal.instance;
  }

  static getInstance() {
    return Modal.instance;
  }
}

// Initialize global instance
let modalInstance = null;

window.addEventListener('load', () => {
  modalInstance = new Modal();
});