import Image from "next/image";
import { loginAdmin } from "@/lib/actions/admin-auth";

export default async function AdminLoginPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const { error } = await searchParams;

  return (
    <div className="mx-auto flex min-h-[70vh] max-w-sm flex-col justify-center px-4">
      <Image src="/brand/logo.png" alt="Iniyaval Return Gifts" width={56} height={56} className="h-14 w-14" />
      <h1 className="mt-4 font-[family-name:var(--font-heading)] text-xl font-bold text-stone-800">Admin login</h1>
      <p className="mt-1 text-sm text-stone-500">Iniyaval Return Gifts store management</p>

      <form action={loginAdmin} className="mt-6 space-y-4">
        <div>
          <label className="text-sm font-medium text-stone-700">Username (leave blank to use the store password)</label>
          <input
            type="text"
            name="email"
            autoFocus
            autoCapitalize="off"
            autoCorrect="off"
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm"
          />
        </div>
        <div>
          <label className="text-sm font-medium text-stone-700">Password</label>
          <input
            type="password"
            name="password"
            required
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm"
          />
        </div>
        {error === "2" && (
          <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">
            Too many failed attempts. Try again in a few minutes.
          </p>
        )}
        {error === "1" && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">Incorrect username or password.</p>}
        <button type="submit" className="w-full rounded-md bg-rose-700 py-2.5 text-sm font-semibold text-white hover:bg-rose-800">
          Log in
        </button>
      </form>
    </div>
  );
}