"use client";

import { useEffect, useState, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

function VerifyContent() {
  const params = useSearchParams();
  const token = params.get("token") ?? "";
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
  const [message, setMessage] = useState("");

  useEffect(() => {
    if (!token) {
      setStatus("error");
      setMessage("Kein Token angegeben.");
      return;
    }
    fetch(`/api/auth/verify?token=${encodeURIComponent(token)}`, { credentials: "include" })
      .then(async (res) => {
        const data = await res.json().catch(() => ({}));
        if (res.ok) {
          setStatus("ok");
          setMessage((data as { message?: string }).message ?? "E-Mail bestätigt.");
        } else {
          setStatus("error");
          setMessage((data as { error?: string }).error ?? "Ungültiger oder abgelaufener Link.");
        }
      })
      .catch(() => {
        setStatus("error");
        setMessage("Netzwerkfehler. Bitte versuche es erneut.");
      });
  }, [token]);

  return (
    <Card className="w-full max-w-sm">
      <CardHeader className="text-center">
        <CardTitle>{status === "ok" ? "E-Mail bestätigt" : status === "error" ? "Fehler" : "Bestätigen..."}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4 text-center">
        {status === "loading" && <p className="text-sm text-muted-foreground">Bitte warten...</p>}
        {status !== "loading" && <p className="text-sm">{message}</p>}
        {status === "ok" && (
          <Button className="w-full" onClick={() => window.location.href = "/"}>
            Zur Anmeldung
          </Button>
        )}
      </CardContent>
    </Card>
  );
}

export default function VerifyPage() {
  return (
    <div className="flex min-h-screen items-center justify-center px-4">
      <Suspense>
        <VerifyContent />
      </Suspense>
    </div>
  );
}
