"use client";
import { useState, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";

function LoginFormulier() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [wachtwoord, setWachtwoord] = useState("");
  const [fout, setFout] = useState<string | null>(null);
  const [bezig, setBezig] = useState(false);

  async function inloggen(e: React.FormEvent) {
    e.preventDefault();
    setBezig(true);
    setFout(null);
    try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ wachtwoord }),
      });
      if (!response.ok) {
        setFout("Ongeldig wachtwoord.");
        setBezig(false);
        return;
      }
      const van = searchParams.get("from") || "/";
      router.push(van);
      router.refresh();
    } catch {
      setFout("Er ging iets mis. Probeer opnieuw.");
      setBezig(false);
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-paper px-4">
      <div className="w-full max-w-sm">
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-2 mb-1">
            <p className="text-xs uppercase tracking-widest text-slate-400">Notary.AI</p>
            <span className="text-xs bg-gold-500 text-white px-1.5 py-0.5 rounded font-medium leading-none">
              BETA
            </span>
          </div>
          <h1 className="text-xl font-semibold text-slate-900">Notarieel assistent</h1>
          <p className="text-xs text-slate-500 mt-0.5">door de notarissen in Tervuren</p>
        </div>

        <form
          onSubmit={inloggen}
          className="rounded-xl border border-slate-200 bg-white p-7 shadow-sm space-y-4"
        >
          <div>
            <label htmlFor="wachtwoord" className="block text-sm font-medium text-slate-700 mb-1.5">
              Kantoorwachtwoord
            </label>
            <input
              id="wachtwoord"
              type="password"
              autoFocus
              value={wachtwoord}
              onChange={(e) => setWachtwoord(e.target.value)}
              className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
              placeholder="••••••••"
            />
          </div>

          {fout && (
            <p className="text-sm text-rose-600 bg-rose-50 border border-rose-200 rounded-md px-3 py-2">
              {fout}
            </p>
          )}

          <button
            type="submit"
            disabled={bezig || !wachtwoord}
            className="w-full rounded-md bg-brand-600 text-white text-sm font-medium py-2.5 hover:bg-brand-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
          >
            {bezig ? "Bezig met inloggen…" : "Inloggen"}
          </button>
        </form>

        <p className="text-center text-xs text-slate-400 mt-6">
          Enkel toegankelijk voor het kantoor te Tervuren.
        </p>
      </div>
    </div>
  );
}

export default function LoginPagina() {
  return (
    <Suspense fallback={null}>
      <LoginFormulier />
    </Suspense>
  );
}