'use client';

import { useState } from 'react';
import { authClient } from '@/lib/auth-client';

type State = { kind: 'idle' } | { kind: 'sent' } | { kind: 'throttled'; minutes: number };

export function LoginForm({ callbackURL }: { callbackURL: string }) {
  const [email, setEmail] = useState('');
  const [state, setState] = useState<State>({ kind: 'idle' });
  const [pending, setPending] = useState(false);

  if (state.kind === 'sent') {
    return (
      <p className="text-sm text-fd-muted-foreground">
        If this address is allowed, a sign-in link is on its way. It expires in 10 minutes.
      </p>
    );
  }

  if (state.kind === 'throttled') {
    return (
      <p className="text-sm text-fd-muted-foreground">
        Too many attempts from this network. Try again in {state.minutes} minutes.
      </p>
    );
  }

  return (
    <form
      className="flex flex-col gap-3"
      onSubmit={async (event) => {
        event.preventDefault();
        setPending(true);

        let retryAfter: number | undefined;

        /*
          Le résultat n'est pas lu, à une exception près.

          Succès et refus donnent le même écran : distinguer les deux dirait au
          visiteur quelles adresses ont accès. Le dépassement de quota, lui, est
          annoncé : il porte sur l'adresse IP et non sur l'email, donc il ne
          révèle rien, et le taire laisserait quelqu'un attendre un message qui
          ne partira pas.
        */
        await authClient.signIn.magicLink({
          email,
          callbackURL,
          fetchOptions: {
            onError: ({ response }) => {
              if (response.status === 429) {
                retryAfter = Number(response.headers.get('X-Retry-After')) || 900;
              }
            },
          },
        });

        setPending(false);
        setState(
          retryAfter
            ? { kind: 'throttled', minutes: Math.max(1, Math.ceil(retryAfter / 60)) }
            : { kind: 'sent' },
        );
      }}
    >
      <input
        type="email"
        required
        autoComplete="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        placeholder="you@example.com"
        className="rounded-lg border bg-fd-background px-3 py-2 text-sm"
      />
      <button
        type="submit"
        disabled={pending}
        className="rounded-lg bg-fd-primary px-3 py-2 text-sm font-medium text-fd-primary-foreground disabled:opacity-60"
      >
        {pending ? 'Sending…' : 'Send me a sign-in link'}
      </button>
    </form>
  );
}