"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

export function AdminLoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [code, setCode] = useState("");
  const [codeStep, setCodeStep] = useState(false);
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState(false);

  async function requestCode(event: React.FormEvent) {
    event.preventDefault();
    setBusy(true);
    setMessage("");
    try {
      const res = await fetch("/api/admin/auth/request", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      });
      const data = await res.json();
      setMessage(data.message ?? data.error ?? "Wenn E-Mail und Passwort stimmen, wurde ein Einmalcode gesendet.");
      if (data.ok) {
        setCodeStep(true);
        setPassword("");
      }
    } catch {
      setMessage("Login-Anfrage fehlgeschlagen.");
    } finally {
      setBusy(false);
    }
  }

  async function verifyCode(event: React.FormEvent) {
    event.preventDefault();
    setBusy(true);
    setMessage("");
    try {
      const res = await fetch("/api/admin/auth/verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, code }),
      });
      const data = await res.json();
      if (data.ok) {
        window.location.href = "/admin";
        return;
      }
      setMessage(data.error ?? "Code ungültig oder abgelaufen.");
    } catch {
      setMessage("Code-Prüfung fehlgeschlagen.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <section className="rounded-2xl border bg-white p-8 shadow-sm">
      <h1 className="text-3xl font-black text-gray-950">Admin Login</h1>
      <p className="mt-3 text-sm leading-6 text-gray-600">
        E-Mail und Passwort eingeben. Wenn die Daten stimmen, wird ein Einmalcode an die angegebene Admin-Mail gesendet.
      </p>

      {!codeStep ? (
        <form onSubmit={requestCode} className="mt-6 grid gap-4">
          <label className="grid gap-2 text-sm font-bold text-gray-800">
            Admin-E-Mail
            <input
              type="email"
              value={email}
              onChange={(event) => setEmail(event.target.value)}
              className="rounded-lg border px-3 py-3 font-normal"
              autoComplete="username"
              required
            />
          </label>
          <label className="grid gap-2 text-sm font-bold text-gray-800">
            Admin-Passwort
            <input
              type="password"
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              className="rounded-lg border px-3 py-3 font-normal"
              autoComplete="current-password"
              required
            />
          </label>
          <Button type="submit" className="w-full" disabled={busy}>
            {busy ? "Prüfe..." : "Einmalcode senden"}
          </Button>
        </form>
      ) : (
        <form onSubmit={verifyCode} className="mt-6 grid gap-4">
          <label className="grid gap-2 text-sm font-bold text-gray-800">
            Einmalcode
            <input
              value={code}
              onChange={(event) => setCode(event.target.value)}
              className="rounded-lg border px-3 py-3 font-normal tracking-[0.35em]"
              inputMode="numeric"
              maxLength={6}
              required
            />
          </label>
          <Button type="submit" className="w-full" disabled={busy}>
            {busy ? "Prüfe..." : "Admin anmelden"}
          </Button>
          <button type="button" className="text-sm font-bold text-blue-600" onClick={() => setCodeStep(false)}>
            E-Mail oder Passwort ändern
          </button>
        </form>
      )}

      {message && <p className="mt-5 rounded-lg border bg-gray-50 p-3 text-sm font-semibold text-gray-700">{message}</p>}
    </section>
  );
}