---
import Layout from '../layouts/Layout.astro';
import { API_BASE as apiBase } from '../lib/api';
---

<Layout title="Register">
  <section class="auth-page">
    <div class="auth-card">
      <h1>Register</h1>
      <form id="register-form">
        <div class="field">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" required minlength="3" />
        </div>
        <div class="field">
          <label for="email">Email</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div class="field">
          <label for="display_name">Display Name (optional)</label>
          <input type="text" id="display_name" name="display_name" />
        </div>
        <div class="field">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required minlength="8" />
        </div>
        <div id="error" class="error"></div>
        <button type="submit">Create Account</button>
      </form>
      <p class="alt-action">
        Already have an account? <a href="/login">Login</a>
      </p>
    </div>
  </section>
</Layout>

<script define:vars={{ apiBase }}>
  const form = document.getElementById('register-form');
  const errorEl = document.getElementById('error');

  form?.addEventListener('submit', async (e) => {
    e.preventDefault();
    errorEl.textContent = '';

    const formData = new FormData(form);
    const data = {
      username: formData.get('username'),
      email: formData.get('email'),
      password: formData.get('password'),
      display_name: formData.get('display_name') || null,
    };

    try {
      const res = await fetch(`${apiBase}/api/auth/register`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });

      if (!res.ok) {
        const err = await res.text();
        errorEl.textContent = err || 'Registration failed';
        return;
      }

      const result = await res.json();
      localStorage.setItem('token', result.token);
      localStorage.setItem('user', JSON.stringify(result.user));
      window.location.href = '/';
    } catch (err) {
      errorEl.textContent = 'Connection error. Is the backend running?';
    }
  });
</script>

<style>
  .auth-page {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
  }

  .auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-sm);
  }

  h1 {
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .field {
    margin-bottom: 1rem;
  }

  label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }

  input {
    width: 100%;
    border-radius: var(--radius-md);
  }

  button {
    width: 100%;
    padding: 0.75rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard);
  }

  button:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }

  .error {
    color: var(--color-error);
    font-size: 0.875rem;
    min-height: 1.25rem;
  }

  .alt-action {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }
</style>