"use client";

import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { acceptPlatformInvitation } from "@/platform/api/access-api";
import { getApiErrorMessage } from "@/lib/api-error";
import { toast } from "sonner";

export default function AcceptInvitePage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const token = searchParams.get("token") || "";
  const [status, setStatus] = useState<"idle" | "loading" | "done" | "error">("idle");
  const [message, setMessage] = useState("");

  useEffect(() => {
    if (!token) {
      setStatus("error");
      setMessage("Missing invitation token.");
      return;
    }
    let cancelled = false;
    (async () => {
      setStatus("loading");
      try {
        const result = await acceptPlatformInvitation(token);
        if (cancelled) return;
        setStatus("done");
        const orgName = result?.organization?.name || "the organization";
        setMessage(`You joined ${orgName}.`);
        toast.success("Invitation accepted");
        setTimeout(() => router.replace("/client/dashboard"), 1500);
      } catch (e) {
        if (cancelled) return;
        setStatus("error");
        setMessage(getApiErrorMessage(e, "Could not accept invitation. Sign in with the invited email first."));
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [token, router]);

  return (
    <div className="container flex min-h-[60vh] flex-col items-center justify-center py-12">
      <div className="w-full max-w-md rounded-lg border bg-white p-8 text-center shadow-sm">
        <h1 className="text-xl font-semibold">Accept invitation</h1>
        {status === "loading" ? (
          <p className="mt-4 text-gray-600">Processing…</p>
        ) : (
          <p className="mt-4 text-gray-600">{message}</p>
        )}
        {status === "error" ? (
          <Button className="mt-6" onClick={() => router.push("/sign-in")}>
            Sign in
          </Button>
        ) : null}
      </div>
    </div>
  );
}