class RegisterForm extends HTMLElement {
  connectedCallback(): void {
    this.innerHTML = `
      <form>
        <h2>Create Account</h2>
        <p class="error"></p>
        <label>Username<input name="username" autocomplete="username" required></label>
        <label>Password<input name="password" type="password" autocomplete="new-password" required></label>
        <button type="submit">Register</button>
        <a href="/login.html">Already have an account?</a>
      </form>
    `;
    this.querySelector('form')!.addEventListener('submit', async (e: Event) => {
      e.preventDefault();
      const form = e.target as HTMLFormElement;
      const data = Object.fromEntries(new FormData(form));
      const res = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      if (res.ok) {
        location.href = '/dashboard.html';
      } else {
        const err = await res.json() as { error: string };
        this.querySelector('.error')!.textContent = err.error;
      }
    });
  }
}
customElements.define('register-form', RegisterForm);