<script lang="ts">
  import { goto } from '$app/navigation';
  import { page } from '$app/state';
  import { pageTitle } from '$lib/branding';
  import { resetPassword } from '$lib/auth/store.svelte';
  import { errCode } from '$lib/api/errors';

  let newPassword = $state('');
  let confirmPassword = $state('');
  let submitting = $state(false);
  let error = $state<string | null>(null);

  const token = $derived(page.params.token ?? '');

  async function onSubmit(e: SubmitEvent) {
    e.preventDefault();
    error = null;
    if (!token) {
      error = 'This reset link is invalid. Request a new one.';
      return;
    }
    if (newPassword !== confirmPassword) {
      error = 'Passwords do not match.';
      return;
    }
    submitting = true;
    try {
      await resetPassword(token, newPassword);
      await goto('/login?reset=ok', { replaceState: true });
    } catch (e: unknown) {
      const code = errCode(e);
      if (code === 'invalid_token') {
        error = 'This reset link is invalid, expired, or already used. Request a new one.';
      } else if (code === 'password_too_short') {
        error = 'Password must be at least 8 characters.';
      } else {
        error = `Reset failed: ${code}`;
      }
    } finally {
      submitting = false;
    }
  }
</script>

<svelte:head><title>{pageTitle('Reset password')}</title></svelte:head>

<main class="flex min-h-screen items-center justify-center bg-background text-text-primary">
  <div class="w-full max-w-sm rounded-lg border border-border bg-surface p-6 shadow">
    <h1 class="mb-6 text-center text-2xl font-semibold">Set a new password</h1>
    <form class="space-y-4" onsubmit={onSubmit}>
      <label class="block">
        <span class="mb-1 block text-sm text-text-secondary">New password</span>
        <input
          id="new-password"
          type="password"
          required
          minlength="8"
          autocomplete="new-password"
          bind:value={newPassword}
          class="w-full rounded border border-border bg-background px-3 py-2 outline-none focus:border-accent"
        />
      </label>
      <label class="block">
        <span class="mb-1 block text-sm text-text-secondary">Confirm new password</span>
        <input
          id="confirm-password"
          type="password"
          required
          minlength="8"
          autocomplete="new-password"
          bind:value={confirmPassword}
          class="w-full rounded border border-border bg-background px-3 py-2 outline-none focus:border-accent"
        />
      </label>
      {#if error}
        <p role="alert" class="text-sm text-danger">{error}</p>
      {/if}
      <button
        type="submit"
        disabled={submitting}
        aria-busy={submitting ? 'true' : undefined}
        class="w-full rounded bg-accent px-3 py-2 font-medium text-background disabled:opacity-60"
      >
        {submitting ? 'Setting…' : 'Set password'}
      </button>
    </form>
    <p class="mt-4 text-center text-sm text-text-secondary">
      <a href="/login" class="text-accent hover:underline">Back to login</a>
    </p>
  </div>
</main>
