<script lang="ts">
  import { goto } from '$app/navigation';
  import { page } from '$app/state';
  import { api, ApiError } from '$lib/api';
  import { auth } from '$lib/auth.svelte';

  let email = $state('');
  let password = $state('');
  let error = $state('');
  let busy = $state(false);

  // Only follow same-origin internal paths, never an absolute/external URL.
  const next = $derived.by(() => {
    const n = page.url.searchParams.get('next');
    return n && n.startsWith('/') && !n.startsWith('//') ? n : '/';
  });
  const registerHref = $derived(
    next === '/' ? '/register' : `/register?next=${encodeURIComponent(next)}`
  );

  async function submit(e: SubmitEvent) {
    e.preventDefault();
    error = '';
    busy = true;
    try {
      await api.post('/auth/login', { email, password });
      await auth.refresh();
      goto(next);
    } catch (err) {
      error = err instanceof ApiError ? err.message : 'something broke';
    } finally {
      busy = false;
    }
  }
</script>

<svelte:head><title>log in · consume·rs</title></svelte:head>

<div class="mx-auto max-w-md">
  <div class="panel p-8">
    <p class="label">welcome back</p>
    <h1 class="mb-6 font-display text-3xl font-bold">WELCOME BACK</h1>

    <form class="space-y-4" onsubmit={submit}>
      <div>
        <label class="label" for="em">email</label>
        <input id="em" class="field mt-1" type="email" bind:value={email} required autocomplete="email" />
      </div>
      <div>
        <label class="label" for="pw">password</label>
        <input id="pw" class="field mt-1" type="password" bind:value={password} required autocomplete="current-password" />
      </div>

      {#if error}
        <p class="border-2 border-rose bg-rose/10 px-3 py-2 text-sm text-rose">{error}</p>
      {/if}

      <button class="btn w-full" disabled={busy}>{busy ? 'entering…' : 'log in'}</button>
    </form>

    <div class="mt-5 flex justify-between text-sm text-mute">
      <a href={registerHref}>need an account?</a>
      <a href="/forgot">forgot password?</a>
    </div>
  </div>
</div>
