"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";

export function AdminLoginForm() {
  const router = useRouter();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);
    setError("");
    const form = new FormData(event.currentTarget);
    const response = await fetch("/api/v1/auth/login", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ email: form.get("email"), password: form.get("password"), totpCode: form.get("totpCode") || undefined }),
    });
    const body = (await response.json()) as { error?: string };
    if (!response.ok) {
      setError(body.error ?? "Giriş başarısız");
      setLoading(false);
      return;
    }
    router.replace("/admin");
    router.refresh();
  }

  return (
    <form className="space-y-4" onSubmit={submit}>
      <label className="block text-sm font-semibold text-slate-700">
        E-posta
        <input className="mt-2 w-full rounded-xl border border-slate-300 px-4 py-3" name="email" required type="email" />
      </label>
      <label className="block text-sm font-semibold text-slate-700">
        Şifre
        <input className="mt-2 w-full rounded-xl border border-slate-300 px-4 py-3" minLength={12} name="password" required type="password" />
      </label>
      <label className="block text-sm font-semibold text-slate-700">
        2FA kodu (etkinse)
        <input className="mt-2 w-full rounded-xl border border-slate-300 px-4 py-3" inputMode="numeric" maxLength={6} name="totpCode" pattern="[0-9]{6}" />
      </label>
      {error ? <p className="rounded-xl bg-red-50 p-3 text-sm text-red-700">{error}</p> : null}
      <button className="w-full rounded-xl bg-blue-700 px-4 py-3 font-bold text-white disabled:opacity-50" disabled={loading} type="submit">
        {loading ? "Kontrol ediliyor…" : "Admin girişi"}
      </button>
    </form>
  );
}