"use client";

import { Suspense, useEffect, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { AuthCard } from "@/components/AuthCard";
import { apiPost } from "@/lib/client-api";

function VerifyEmailInner() {
  const token = useSearchParams().get("token") ?? "";
  const [state, setState] = useState<"working" | "done" | "failed">("working");
  const [message, setMessage] = useState<string>("");

  useEffect(() => {
    if (!token) return;
    let cancelled = false;
    apiPost("/api/auth/verify-email", { token }).then((result) => {
      if (cancelled) return;
      if (result.ok) setState("done");
      else {
        setState("failed");
        setMessage(result.error);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [token]);

  if (!token) {
    return (
      <p className="text-sm text-red-700">This verification link is missing its token.</p>
    );
  }
  if (state === "working") return <p className="text-sm text-slate-600">Verifying your email…</p>;
  if (state === "done")
    return (
      <div className="text-sm text-slate-600">
        <p>Your email address is verified. You&apos;re all set.</p>
        <Link href="/dashboard" className="mt-4 inline-block font-medium text-slate-900 underline">
          Go to your dashboard
        </Link>
      </div>
    );
  return (
    <div className="text-sm text-slate-600">
      <p className="text-red-700">{message}</p>
      <p className="mt-2">Log in and request a fresh verification email from your settings.</p>
    </div>
  );
}

export default function VerifyEmailPage() {
  return (
    <AuthCard title="Email verification">
      <Suspense fallback={<p className="text-sm text-slate-500">Loading…</p>}>
        <VerifyEmailInner />
      </Suspense>
    </AuthCard>
  );
}