'use client';
import { useActionState } from 'react';
import { loginAction } from '@/lib/admin/actions';

/** Login form: posts the token to a server action; the token only ever travels in this request body and the httpOnly cookie. */
export function LoginForm({ hint }: { hint?: string | null }) {
  const [state, action, pending] = useActionState(loginAction, { error: null });
  return (
    <form action={action} className="mt-6 max-w-sm space-y-3">
      <label className="block">
        <span className="eyebrow block pb-1">Admin token</span>
        <input type="password" name="token" required autoComplete="off" autoFocus spellCheck={false} className="h-11 w-full border border-rule-strong bg-surface px-3 text-[16px] text-ink focus:border-accent focus:outline-none" />
      </label>
      <button type="submit" disabled={pending} className="inline-flex h-11 w-full items-center justify-center bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90 disabled:opacity-60">
        {pending ? 'Checking…' : 'Sign in'}
      </button>
      {state?.error && (
        <p role="alert" className="text-sm text-danger">
          {state.error}
        </p>
      )}
      {!state?.error && hint && <p className="text-xs text-ink-3">{hint}</p>}
      <p className="text-xs text-ink-3">The token is validated against the API and kept in an httpOnly cookie for 12 hours. It is never sent to the browser.</p>
    </form>
  );
}