import { TextField } from "@repo/rdx-ui/components";
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Form,
  Spinner,
} from "@repo/shadcn-ui/components";
import type { UseFormReturn } from "react-hook-form";

import type { LoginForm } from "../entities";

interface LoginCardProps {
  form: UseFormReturn<LoginForm>;
  onSubmit: () => void;
}

export function LoginCard({ form, onSubmit }: LoginCardProps) {
  const rootError = form.formState.errors.root?.message;

  return (
    <Card className="border-border/70 bg-card/95 shadow-lg backdrop-blur-sm">
      <CardHeader className="space-y-2">
        <CardTitle className="text-2xl font-semibold tracking-tight">Accede al ERP</CardTitle>
        <CardDescription>Introduce tu email y contraseña para continuar.</CardDescription>
      </CardHeader>

      <CardContent>
        <Form {...form}>
          <form className="flex flex-col gap-5" onSubmit={onSubmit}>
            <TextField<LoginForm>
              autoComplete="email"
              id="login-email"
              label="Email"
              name="email"
              placeholder="tu@email.com"
              required
              typePreset="email"
            />

            <TextField<LoginForm>
              autoComplete="current-password"
              id="login-password"
              label="Contraseña"
              name="password"
              placeholder="••••••••"
              required
              typePreset="password"
            />

            {rootError ? (
              <p
                aria-live="polite"
                className="text-sm text-destructive"
                id="login-error"
                role="alert"
              >
                {rootError}
              </p>
            ) : null}

            <Button
              className="mt-1 w-full"
              disabled={form.formState.isSubmitting}
              id="login-submit"
              type="submit"
            >
              {form.formState.isSubmitting ? (
                <>
                  <Spinner className="size-4" />
                  Iniciando sesión...
                </>
              ) : (
                "Entrar"
              )}
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}