"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/Button";
import { Logo } from "@/components/Logo";
import { fieldClassName, fieldInvalidClassName } from "@/components/ui/field-styles";
import { writeAdminCache } from "@/components/admin/AdminShell";
import { ApiError } from "@/lib/api";
import { adminApi } from "@/lib/api/admin";
import { cn } from "@/lib/cn";

export function AdminSignInPage() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setIsSubmitting(true);

    try {
      const admin = await adminApi.login({ email, password });
      writeAdminCache(admin);
      router.replace("/admin/dashboard");
    } catch (err) {
      if (err instanceof ApiError) {
        setError(err.message);
      } else {
        setError("Unable to sign in.");
      }
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-[#F7F8FA] px-4 py-10">
      <div className="w-full max-w-[24rem]">
        <div className="mb-8 flex flex-col items-center text-center">
          <Logo href="/admin/signin" variant="mark" />
          <p className="mt-4 text-[0.6875rem] font-medium uppercase tracking-[0.08em] text-ink-40">
            Postvertise
          </p>
          <h1 className="mt-1.5 text-[1.375rem] font-semibold tracking-[-0.02em] text-primary">
            Admin sign in
          </h1>
          <p className="mt-1.5 text-[0.875rem] text-ink-60">Internal operations access</p>
        </div>

        <div className="rounded-[10px] border border-line/80 bg-surface p-5 shadow-pv sm:p-6">
          <form onSubmit={handleSubmit} className="space-y-4" noValidate>
            <label className="block space-y-1.5">
              <span className="text-[0.8125rem] font-medium text-primary">Email</span>
              <input
                type="email"
                autoComplete="username"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className={cn(fieldClassName, "h-11", error ? fieldInvalidClassName : null)}
                disabled={isSubmitting}
                aria-invalid={error ? true : undefined}
              />
            </label>
            <label className="block space-y-1.5">
              <span className="text-[0.8125rem] font-medium text-primary">Password</span>
              <input
                type="password"
                autoComplete="current-password"
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className={cn(fieldClassName, "h-11", error ? fieldInvalidClassName : null)}
                disabled={isSubmitting}
                aria-invalid={error ? true : undefined}
              />
            </label>

            {error ? (
              <p
                className="rounded-[10px] border border-red-200 bg-red-50 px-3 py-2 text-[0.8125rem] text-red-800"
                role="alert"
              >
                {error}
              </p>
            ) : null}

            <Button type="submit" className="w-full" disabled={isSubmitting}>
              {isSubmitting ? "Signing in…" : "Sign in"}
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
}