"use client";

import { useContext, useEffect } from "react";
import { usePathname, useRouter } from "next/navigation";
import { AuthContext } from "@/contexts/AuthContext";
import { Loader2 } from "lucide-react";

export default function ProtectedLayoutWrapper({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const { isAuthenticated, isChecking, checkAuth } = useContext(AuthContext)!;
  const pathname = usePathname();
  const router = useRouter();

  useEffect(() => {
    // Only check auth if not authenticated and not already checking
    if (!isAuthenticated && !isChecking) {
      checkAuth().then((isValid) => {
        // Redirect to login if auth check fails (and not already on login page)
        if (!isValid && pathname !== "/admin/login") {
          router.replace("/admin/login");
        }
      });
    }
  }, [isAuthenticated, isChecking, checkAuth, router, pathname]);

  // Show spinner only while checking auth
  if (isChecking) {
    return (
      <div className="h-screen w-full flex items-center justify-center bg-slate-50">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    );
  }

  // If not authenticated, don't render children (redirect handled above)
  if (!isAuthenticated) {
    return null;
  }

  return children;
}