"use client";

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

function VerifyInner() {
  const router = useRouter();
  const params = useSearchParams();
  const [status, setStatus] = useState<"checking" | "error">("checking");
  const [error, setError] = useState("");

  useEffect(() => {
    const token = params.get("token");
    if (!token) {
      setStatus("error");
      setError("Missing token");
      return;
    }
    fetch("/api/auth/verify", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token }),
    })
      .then(async (res) => {
        const data = await res.json();
        if (data.ok) {
          router.push("/dashboard");
        } else {
          setStatus("error");
          setError(data.error || "Verification failed");
        }
      })
      .catch(() => {
        setStatus("error");
        setError("Network error");
      });
  }, [params, router]);

  if (status === "checking") {
    return (
      <>
        <div className="inline-block w-10 h-10 border-4 border-accent-500 border-t-transparent rounded-full animate-spin mb-4" />
        <p className="text-white/60">Signing you in…</p>
      </>
    );
  }
  return (
    <>
      <div className="text-5xl mb-4">⚠️</div>
      <h1 className="text-xl font-bold mb-2">Sign-in failed</h1>
      <p className="text-white/60 text-sm mb-6">{error}</p>
      <a
        href="/login"
        className="inline-block bg-accent-500 hover:bg-accent-400 text-ink-950 font-bold px-6 py-3 rounded-lg"
      >
        Try again
      </a>
    </>
  );
}

export default function VerifyPage() {
  return (
    <main className="min-h-screen flex items-center justify-center px-6">
      <div className="text-center max-w-md">
        <Suspense fallback={<p className="text-white/60">Loading…</p>}>
          <VerifyInner />
        </Suspense>
      </div>
    </main>
  );
}