"use client";

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

function AuthCallbackContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [status, setStatus] = useState<"processing" | "success" | "error">(
    "processing"
  );
  const [errorMsg, setErrorMsg] = useState("");

  useEffect(() => {
    const token = searchParams.get("token");
    const error = searchParams.get("error");

    if (error) {
      setStatus("error");
      setErrorMsg(decodeURIComponent(error));
      return;
    }

    if (!token) {
      setStatus("error");
      setErrorMsg("No authentication token received.");
      return;
    }

    // Store token in localStorage
    localStorage.setItem("flh_token", token);

    // Dispatch a custom event so the AuthContext can pick it up
    // (used by popup-based OAuth where the opener listens)
    window.dispatchEvent(
      new StorageEvent("storage", {
        key: "flh_token",
        newValue: token,
        oldValue: null,
        storageArea: localStorage,
      })
    );

    setStatus("success");

    // If this is a popup window, close it after a brief delay
    if (window.opener) {
      setTimeout(() => window.close(), 500);
    } else {
      // Redirect to home
      setTimeout(() => router.push("/"), 500);
    }
  }, [searchParams, router]);

  return (
    <div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
      <div className="text-center">
        {status === "processing" && (
          <div className="flex flex-col items-center gap-4">
            <div className="w-10 h-10 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
            <p className="text-sm text-gray-400">Signing you in...</p>
          </div>
        )}
        {status === "success" && (
          <div className="flex flex-col items-center gap-3">
            <div className="w-12 h-12 rounded-full bg-green-900/30 border border-green-700/40 flex items-center justify-center">
              <span className="text-green-400 text-xl">✓</span>
            </div>
            <p className="text-sm text-green-400">Signed in successfully!</p>
          </div>
        )}
        {status === "error" && (
          <div className="flex flex-col items-center gap-3">
            <div className="w-12 h-12 rounded-full bg-red-900/30 border border-red-700/40 flex items-center justify-center">
              <span className="text-red-400 text-xl">✕</span>
            </div>
            <p className="text-sm text-red-400">{errorMsg}</p>
            <button
              onClick={() => router.push("/auth")}
              className="mt-4 px-6 py-2 rounded-xl bg-[#D4AF37] text-[#0a0a0f] text-sm font-medium"
            >
              Back to Login
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default function AuthCallbackPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-dvh bg-[#0a0a0f] flex items-center justify-center">
          <div className="flex flex-col items-center gap-4">
            <div className="w-10 h-10 rounded-full border-2 border-[#D4AF37]/30 border-t-[#D4AF37] animate-spin" />
            <p className="text-sm text-gray-400">Signing you in...</p>
          </div>
        </div>
      }
    >
      <AuthCallbackContent />
    </Suspense>
  );
}