// components/admin/LoginForm.tsx
// Client form for admin login. Uses the loginAction Server Action via
// useActionState. Errors render as text (not color-only) for accessibility.

"use client";

import * as React from "react";
import { useActionState } from "react";
import { Button, Input } from "@/components/ui";
import { loginAction, type ActionResult } from "@/app/admin/_lib/actions";

export function LoginForm() {
  const [state, formAction, pending] = useActionState<
    ActionResult | null,
    FormData
  >(loginAction, null);

  // React 19 function-action forms don't reliably get the browser's implicit
  // "submit on Enter" that onSubmit forms do, so pressing Enter in a field did
  // nothing. Force it: on Enter inside an input, submit the form explicitly.
  function handleKeyDown(e: React.KeyboardEvent<HTMLFormElement>) {
    if (
      e.key === "Enter" &&
      !e.shiftKey &&
      !e.nativeEvent.isComposing &&
      (e.target as HTMLElement).tagName === "INPUT"
    ) {
      e.preventDefault();
      e.currentTarget.requestSubmit();
    }
  }

  return (
    <form
      action={formAction}
      onKeyDown={handleKeyDown}
      className="mt-6 flex flex-col gap-md"
      noValidate
    >
      {state?.error ? (
        <p
          role="alert"
          className="rounded-md border border-primary bg-primary-tint/20 px-4 py-3 font-body text-body-md text-ink-strong"
        >
          {state.error}
        </p>
      ) : null}

      <Input
        label="Correo electronico"
        name="email"
        type="email"
        autoComplete="username"
        inputMode="email"
        required
      />
      <Input
        label="Contrasena"
        name="password"
        type="password"
        autoComplete="current-password"
        required
      />
      <Button type="submit" variant="primary" block disabled={pending}>
        {pending ? "Verificando..." : "Ingresar"}
      </Button>
    </form>
  );
}