<register-page>
  <div class="auth-page">
    <div class="auth-card">
      <div class="auth-header">
        <h1>GroupChat</h1>
        <p>Create your account</p>
      </div>

      <form onsubmit={handleSubmit}>
        <div class="form-group">
          <label for="display_name">Display Name</label>
          <input
            type="text"
            id="display_name"
            placeholder="Your name"
            value={state.display_name}
            oninput={e => update({ display_name: e.target.value })}
            required
          />
        </div>

        <div class="form-group">
          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            placeholder="you@example.com"
            value={state.email}
            oninput={e => update({ email: e.target.value })}
            required
          />
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input
            type="password"
            id="password"
            placeholder="Choose a password"
            value={state.password}
            oninput={e => update({ password: e.target.value })}
            required
            minlength="6"
          />
        </div>

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

        <button type="submit" class="btn btn-primary btn-full" disabled={state.loading}>
          {state.loading ? 'Creating account...' : 'Create Account'}
        </button>
      </form>

      <div if={state.hasNostr} class="nostr-divider">
        <span>or</span>
      </div>

      <button if={state.hasNostr} class="btn btn-nostr btn-full" onclick={handleNostrLogin} disabled={state.nostrLoading}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 8px; vertical-align: -2px;">
          <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
        </svg>
        {state.nostrLoading ? 'Connecting...' : 'Sign up with Nostr'}
      </button>

      <p class="auth-footer">
        Already have an account?
        <a href="#" onclick={e => { e.preventDefault(); props.cbSwitch() }}>Sign in</a>
      </p>
    </div>
  </div>

  <style>
    .auth-page {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-primary);
    }

    .auth-card {
      width: 100%;
      max-width: 400px;
      padding: var(--space-2xl);
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }

    .auth-header {
      text-align: center;
      margin-bottom: var(--space-xl);
    }

    .auth-header h1 {
      font-size: var(--text-2xl);
      font-weight: 600;
      color: var(--accent);
      margin-bottom: var(--space-xs);
    }

    .auth-header p {
      color: var(--text-secondary);
      font-size: var(--text-sm);
    }

    .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);
    }

    .btn-full {
      width: 100%;
      padding: var(--space-sm) var(--space-md);
      margin-top: var(--space-sm);
    }

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

    .nostr-divider {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      margin: var(--space-lg) 0;
      color: var(--text-muted);
      font-size: var(--text-sm);
    }

    .nostr-divider::before,
    .nostr-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .btn-nostr {
      background: #8B5CF6;
      color: white;
      border: none;
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--radius-md);
      font-size: var(--text-sm);
      font-weight: 500;
      cursor: pointer;
      transition: background var(--transition-fast);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-nostr:hover:not(:disabled) {
      background: #7C3AED;
    }

    .btn-nostr:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .auth-footer {
      text-align: center;
      margin-top: var(--space-lg);
      font-size: var(--text-sm);
      color: var(--text-secondary);
    }
  </style>

  <script>
    import { api } from '../services/api.js'
    import { hasNostrExtension, getPublicKey, signEvent, fetchNostrProfile } from '../services/nostr.js'

    export default {
      state: {
        display_name: '',
        email: '',
        password: '',
        error: null,
        loading: false,
        hasNostr: false,
        nostrLoading: false,
      },

      onMounted() {
        setTimeout(() => {
          this.update({ hasNostr: hasNostrExtension() })
        }, 100)
      },

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

        try {
          const data = await api.register({
            email: this.state.email.trim().toLowerCase(),
            password: this.state.password,
            display_name: this.state.display_name.trim(),
          })
          this.props.cbRegister(data)
        } catch (err) {
          this.update({ error: err.message, loading: false })
        }
      },

      async handleNostrLogin() {
        this.update({ nostrLoading: true, error: null })

        try {
          const { challenge } = await api.nostrChallenge()
          const nonce = JSON.parse(atob(challenge.split('.')[1])).nonce
          const pubkey = await getPublicKey()
          const profile = await fetchNostrProfile(pubkey)

          const unsignedEvent = {
            kind: 27235,
            content: nonce,
            created_at: Math.floor(Date.now() / 1000),
            tags: [['u', window.location.origin]],
          }

          const signed = await signEvent(unsignedEvent)

          const data = await api.nostrVerify({
            signed_event: JSON.stringify(signed),
            challenge,
            profile_name: profile?.name || null,
            profile_picture: profile?.picture || null,
          })

          // Nostr login auto-creates — use same callback as register
          this.props.cbRegister(data)
        } catch (err) {
          this.update({ error: err.message || 'Nostr login failed', nostrLoading: false })
        }
      },
    }
  </script>
</register-page>
