"use client";

import { KeyRound } from "lucide-react";
import { useActionState } from "react";
import { LogoMark } from "@/components/brand/logo";
import { Button } from "@/components/ui";
import { loginAction, type LoginState } from "@/app/admin/login/actions";

export function LoginForm({ next, reason }: { next: string; reason?: string }) {
  const [state, action, pending] = useActionState<LoginState, FormData>(loginAction, {});
  return (
    <div className="w-full max-w-[380px] rounded-sm border border-hair bg-surface">
      <div className="flex items-center gap-2.5 border-b border-hair px-4 py-3">
        <LogoMark size={22} />
        <div>
          <div className="text-[13.5px] font-semibold leading-tight text-ink">DataCenterIndex · Admin</div>
          <div className="text-[11.5px] text-ink-3">Operations console</div>
        </div>
      </div>
      <form action={action} className="space-y-3 px-4 py-4">
        <input type="hidden" name="next" value={next} />
        {reason === "expired" && !state.error && <p className="rounded-xs border border-warn/30 bg-warn/10 px-2.5 py-2 text-[12.5px] text-warn">Your session expired or the token was rejected. Sign in again.</p>}
        {reason === "logged-out" && !state.error && <p className="rounded-xs border border-hair bg-surface-2 px-2.5 py-2 text-[12.5px] text-ink-2">Signed out.</p>}
        <label className="block">
          <span className="label-caps mb-1 block">Admin token</span>
          <input
            name="token"
            type="password"
            autoComplete="current-password"
            required
            autoFocus
            spellCheck={false}
            className="h-10 w-full rounded-sm border border-hair-2 bg-paper px-3 font-mono text-[13px] text-ink outline-none focus:border-ink"
            placeholder="x-dci-admin-token"
          />
        </label>
        {state.error && (
          <p role="alert" className="rounded-xs border border-danger/30 bg-danger/10 px-2.5 py-2 text-[12.5px] text-danger">
            {state.error}
          </p>
        )}
        <Button type="submit" variant="primary" className="w-full" disabled={pending}>
          <KeyRound className="size-4" strokeWidth={1.75} />
          {pending ? "Checking…" : "Sign in"}
        </Button>
        <p className="text-[11.5px] leading-snug text-ink-4">The token is verified against the API and kept in an httpOnly cookie for 12 hours. It is never sent to the browser bundle.</p>
      </form>
    </div>
  );
}