'use client';

import { useActionState } from 'react';
import { Field, Input } from '@/components/ui/Field';
import type { SignInState } from '@/lib/auth/sign-in';
import { SubmitButton } from './client';
import { Notice } from './ui';

/** E-mail + password form for /host/login and /admin/login (the server action does all checks). */
export function LoginForm({
  action,
  next,
  submitLabel,
}: {
  action: (prev: SignInState, formData: FormData) => Promise<SignInState>;
  next?: string;
  submitLabel: string;
}) {
  const [state, formAction] = useActionState(action, { status: 'idle' } as SignInState);
  const error = state.status === 'error' ? state.message : undefined;
  return (
    <form action={formAction} className="flex flex-col gap-5">
      {next && <input type="hidden" name="next" value={next} />}
      <div role="alert" aria-live="assertive">
        {error && <Notice tone="error">{error}</Notice>}
      </div>
      <Field label="Email" required>
        <Input
          name="email"
          type="email"
          autoComplete="username"
          inputMode="email"
          required
          maxLength={254}
          defaultValue={state.status === 'error' ? state.email : ''}
          // Re-mount after an error so defaultValue shows the e-mail that was tried.
          key={state.status === 'error' ? `e-${state.email}-${state.message}` : 'e'}
          autoFocus
        />
      </Field>
      <Field label="Password" required>
        <Input name="password" type="password" autoComplete="current-password" required maxLength={1024} />
      </Field>
      <SubmitButton size="lg" fullWidth pendingLabel="Signing in…">
        {submitLabel}
      </SubmitButton>
    </form>
  );
}