<invite-modal>
  <div class="modal-overlay" onclick={handleOverlayClick}>
    <div class="modal" onclick={e => e.stopPropagation()}>
      <div class="modal-header">
        <h3>Invite to Room</h3>
        <button class="btn btn-ghost btn-icon" onclick={props.cbClose}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
        </button>
      </div>

      <div class="invite-tabs">
        <button
          class={'invite-tab' + (state.mode === 'email' ? ' active' : '')}
          onclick={() => update({ mode: 'email', error: null, nostrResult: null })}
        >Email</button>
        <button
          class={'invite-tab' + (state.mode === 'nostr' ? ' active' : '')}
          onclick={() => update({ mode: 'nostr', error: null, inviteUrl: null })}
        >Nostr</button>
      </div>

      <form if={state.mode === 'email' && !state.inviteUrl} onsubmit={handleSubmit}>
        <div class="form-group">
          <label for="invite-email">Email address</label>
          <input
            type="email"
            id="invite-email"
            placeholder="friend@example.com"
            value={state.email}
            oninput={e => update({ email: e.target.value })}
            required
          />
        </div>

        <p if={state.error} class="error-text">{state.error}</p>

        <div class="modal-actions">
          <button type="button" class="btn btn-ghost" onclick={props.cbClose}>Cancel</button>
          <button type="submit" class="btn btn-primary" disabled={state.loading}>
            {state.loading ? 'Sending...' : 'Send Invite'}
          </button>
        </div>
      </form>

      <div if={state.mode === 'email' && state.inviteUrl} class="invite-success">
        <p>Invite link generated!</p>
        <div class="invite-link-box">
          <code>{state.inviteUrl}</code>
          <button class="btn btn-ghost btn-sm" onclick={copyLink}>Copy</button>
        </div>
        <p class="help-text">Share this link with your friend</p>
        <div class="modal-actions">
          <button class="btn btn-primary" onclick={props.cbClose}>Done</button>
        </div>
      </div>

      <form if={state.mode === 'nostr' && !state.nostrResult} onsubmit={handleNostrInvite}>
        <div class="form-group">
          <label for="invite-npub">Nostr public key</label>
          <input
            type="text"
            id="invite-npub"
            placeholder="npub1... or hex pubkey"
            value={state.nostrPubkey}
            oninput={e => update({ nostrPubkey: e.target.value })}
            required
          />
        </div>

        <p if={state.error} class="error-text">{state.error}</p>

        <div class="modal-actions">
          <button type="button" class="btn btn-ghost" onclick={props.cbClose}>Cancel</button>
          <button type="submit" class="btn btn-primary" disabled={state.nostrLoading}>
            {state.nostrLoading ? 'Adding...' : 'Add to Room'}
          </button>
        </div>
      </form>

      <div if={state.mode === 'nostr' && state.nostrResult} class="invite-success">
        <p if={state.nostrResult === 'added'} class="success-msg">Added {state.nostrDisplayName} to room</p>
        <p if={state.nostrResult === 'not_found'} class="info-msg">
          This Nostr user hasn't joined GroupChat yet. They'll need to log in with their Nostr extension first.
        </p>
        <div class="modal-actions">
          <button class="btn btn-primary" onclick={props.cbClose}>Done</button>
        </div>
      </div>
    </div>
  </div>

  <style>
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }

    .modal {
      width: 100%;
      max-width: 440px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-lg);
    }

    .modal-header h3 {
      font-size: var(--text-lg);
      font-weight: 600;
    }

    .btn-icon {
      width: 36px;
      height: 36px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
    }

    .form-group {
      margin-bottom: var(--space-md);
    }

    .form-group label {
      display: block;
      margin-bottom: var(--space-xs);
      font-size: var(--text-sm);
      color: var(--text-secondary);
    }

    .error-text {
      color: var(--error);
      font-size: var(--text-sm);
      margin-bottom: var(--space-sm);
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: var(--space-sm);
      margin-top: var(--space-lg);
    }

    .invite-success {
      text-align: center;
    }

    .invite-success > p:first-child {
      font-weight: 500;
      margin-bottom: var(--space-md);
    }

    .invite-link-box {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      background: var(--bg-tertiary);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-sm) var(--space-md);
      margin-bottom: var(--space-sm);
    }

    .invite-link-box code {
      flex: 1;
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: var(--accent);
      word-break: break-all;
    }

    .btn-sm {
      padding: var(--space-xs) var(--space-sm);
      font-size: var(--text-sm);
    }

    .help-text {
      font-size: var(--text-xs);
      color: var(--text-muted);
    }

    .invite-tabs {
      display: flex;
      gap: var(--space-xs);
      margin-bottom: var(--space-lg);
      border-bottom: 1px solid var(--border);
      padding-bottom: var(--space-xs);
    }

    .invite-tab {
      background: none;
      border: none;
      padding: var(--space-xs) var(--space-md);
      font-size: var(--text-sm);
      color: var(--text-secondary);
      cursor: pointer;
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      transition: color var(--transition-fast), background var(--transition-fast);
    }

    .invite-tab:hover {
      color: var(--text-primary);
      background: var(--bg-tertiary);
    }

    .invite-tab.active {
      color: var(--accent);
      border-bottom: 2px solid var(--accent);
      font-weight: 500;
    }

    .success-msg {
      color: var(--success);
      font-weight: 500;
      margin-bottom: var(--space-md);
    }

    .info-msg {
      color: var(--text-secondary);
      font-size: var(--text-sm);
      line-height: 1.5;
      margin-bottom: var(--space-md);
    }
  </style>

  <script>
    import { api } from '../services/api.js'

    export default {
      state: {
        mode: 'email',
        email: '',
        nostrPubkey: '',
        error: null,
        loading: false,
        nostrLoading: false,
        inviteUrl: null,
        nostrResult: null,
        nostrDisplayName: '',
      },

      handleOverlayClick() {
        this.props.cbClose()
      },

      async handleSubmit(e) {
        e.preventDefault()
        this.update({ loading: true, error: null })

        try {
          const result = await api.createInvite({
            room_id: this.props.roomId,
            email: this.state.email,
          })
          this.update({
            inviteUrl: `${window.location.origin}${result.invite_url}`,
            loading: false,
          })
        } catch (err) {
          this.update({ error: err.message, loading: false })
        }
      },

      async handleNostrInvite(e) {
        e.preventDefault()
        this.update({ nostrLoading: true, error: null })

        try {
          const result = await api.inviteByNostr({
            room_id: this.props.roomId,
            nostr_pubkey: this.state.nostrPubkey.trim(),
          })
          this.update({
            nostrResult: result.status,
            nostrDisplayName: result.display_name || '',
            nostrLoading: false,
          })
        } catch (err) {
          this.update({ error: err.message, nostrLoading: false })
        }
      },

      copyLink() {
        navigator.clipboard.writeText(this.state.inviteUrl)
      },
    }
  </script>
</invite-modal>
