<script lang="ts">
  import { superForm } from 'sveltekit-superforms';
  import { page } from '$app/stores';

  let { form, errors, enhance, submitting } = superForm($page.data.form);
</script>

<svelte:head>
  <title>Register - Bookmann</title>
</svelte:head>

<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-tokyo-bg to-tokyo-bg-dark py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full animate-slide-in">
    <div class="card">
      <div class="card-header text-center">
        <div class="text-4xl mb-4">✨</div>
        <h2 class="text-2xl font-bold text-tokyo-fg">
          Join Our Library
        </h2>
        <p class="text-tokyo-fg-dark mt-2">Create your account to start reading</p>
      </div>
      <div class="card-body">
        <form class="space-y-6" method="POST" use:enhance>
          <div class="space-y-4">
            <div>
              <label for="email" class="block text-sm font-medium text-tokyo-fg mb-2">
                Email Address
              </label>
              <input
                id="email"
                name="email"
                type="email"
                required
                class="input-field w-full"
                placeholder="Enter your email"
                bind:value={$form.email}
              />
              {#if $errors.email}
                <p class="text-tokyo-red text-sm mt-1">{$errors.email}</p>
              {/if}
            </div>
            <div>
              <label for="username" class="block text-sm font-medium text-tokyo-fg mb-2">
                Username
              </label>
              <input
                id="username"
                name="username"
                type="text"
                required
                class="input-field w-full"
                placeholder="Choose a username"
                bind:value={$form.username}
              />
              {#if $errors.username}
                <p class="text-tokyo-red text-sm mt-1">{$errors.username}</p>
              {/if}
            </div>
            <div>
              <label for="password" class="block text-sm font-medium text-tokyo-fg mb-2">
                Password
              </label>
              <input
                id="password"
                name="password"
                type="password"
                required
                class="input-field w-full"
                placeholder="Create a password"
                bind:value={$form.password}
              />
              {#if $errors.password}
                <p class="text-tokyo-red text-sm mt-1">{$errors.password}</p>
              {/if}
            </div>
            <div>
              <label for="confirmPassword" class="block text-sm font-medium text-tokyo-fg mb-2">
                Confirm Password
              </label>
              <input
                id="confirmPassword"
                name="confirmPassword"
                type="password"
                required
                class="input-field w-full"
                placeholder="Confirm your password"
                bind:value={$form.confirmPassword}
              />
              {#if $errors.confirmPassword}
                <p class="text-tokyo-red text-sm mt-1">{$errors.confirmPassword}</p>
              {/if}
            </div>
          </div>

          {#if $page.data.error}
            <div class="bg-tokyo-red/10 border border-tokyo-red/20 rounded-lg p-4">
              <div class="flex items-center">
                <div class="text-tokyo-red mr-2">⚠️</div>
                <div class="text-sm text-tokyo-red">{$page.data.error}</div>
              </div>
            </div>
          {/if}

          <button
            type="submit"
            disabled={$submitting}
            class="btn-primary w-full flex justify-center items-center disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {#if $submitting}
              <div class="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent mr-2"></div>
            {/if}
            {$submitting ? 'Creating account...' : 'Create Account'}
          </button>

          <div class="text-center">
            <a href="/login" class="text-tokyo-blue hover:text-tokyo-cyan transition-colors duration-200 text-sm">
              Already have an account? Sign in here
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>