"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useSearchParams } from "next/navigation";
import { useUser } from "@clerk/nextjs";
import { useInviteLink } from "@/lib/supabase/invite-actions";
import { Button } from "@/components/ui/button";
import { Check, X, Loader2 } from "lucide-react";

export default function InviteJoinPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const { isLoaded, isSignedIn } = useUser();
  const [token, setToken] = useState<string | null>(null);
  const [status, setStatus] = useState<"loading" | "joining" | "success" | "error">("loading");
  const [error, setError] = useState("");

  useEffect(() => {
    const t = searchParams.get("token");
    if (t) setToken(t);
    else {
      setStatus("error");
      setError("No invite token provided.");
    }
  }, [searchParams]);

  useEffect(() => {
    if (isLoaded && isSignedIn && token && status === "loading") {
      handleJoin();
    }
  }, [isLoaded, isSignedIn, token, status]);

  const handleJoin = async () => {
    if (!token) return;
    setStatus("joining");
    try {
      const result = await useInviteLink(token);
      if (result.success) {
        setStatus("success");
        setTimeout(() => router.push("/home"), 2000);
      } else {
        setStatus("error");
        setError(result.error || "Failed to join");
      }
    } catch (e: any) {
      setStatus("error");
      setError(e.message || "An unexpected error occurred");
    }
  };

  return (
    <div className="min-h-screen bg-[#E1F5EE] flex items-center justify-center px-4">
      <div className="bg-white rounded-xl shadow-lg p-8 max-w-md w-full text-center">
        {status === "loading" && (
          <>
            <Loader2 className="w-8 h-8 text-teal-600 mx-auto animate-spin mb-4" />
            <h2 className="text-xl font-semibold text-gray-900">Checking invite...</h2>
            <p className="text-gray-500 mt-2 text-sm">Please sign in to accept the invite.</p>
          </>
        )}
        {status === "joining" && (
          <>
            <Loader2 className="w-8 h-8 text-teal-600 mx-auto animate-spin mb-4" />
            <h2 className="text-xl font-semibold text-gray-900">Joining organisation...</h2>
          </>
        )}
        {status === "success" && (
          <>
            <div className="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
              <Check className="w-6 h-6 text-emerald-600" />
            </div>
            <h2 className="text-xl font-semibold text-gray-900">Welcome aboard!</h2>
            <p className="text-gray-500 mt-2 text-sm">You've joined the organisation. Redirecting...</p>
          </>
        )}
        {status === "error" && (
          <>
            <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
              <X className="w-6 h-6 text-red-600" />
            </div>
            <h2 className="text-xl font-semibold text-gray-900">Invite Error</h2>
            <p className="text-gray-500 mt-2 text-sm">{error}</p>
            <Button onClick={() => router.push("/home")} className="mt-4 bg-[#1D9E75] hover:bg-[#1a8b66] text-white cursor-pointer">
              Go Home
            </Button>
          </>
        )}
      </div>
    </div>
  );
}