"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import useAuth from "@/hooks/useAuth";
import { getToken } from "@/lib/api";
import { DashboardPageSkeleton } from "@/components/common/PageSkeleton";

export default function ProtectedRoute({ children, requiredRole = null }) {
  const { isAuthenticated, loading, user, refresh } = useAuth();
  const router = useRouter();
  const [restoringSession, setRestoringSession] = useState(false);

  useEffect(() => {
    if (loading || restoringSession) return;
    if (!isAuthenticated) {
      if (getToken()) {
        setRestoringSession(true);
        refresh()
          .then((restoredUser) => {
            if (!restoredUser) router.replace("/login");
          })
          .finally(() => setRestoringSession(false));
        return;
      }
      router.replace("/login");
      return;
    }
    if (requiredRole && user?.role !== requiredRole) {
      if (user?.role === "seller") router.replace("/seller/dashboard");
      else router.replace("/customer/dashboard");
    }
  }, [isAuthenticated, loading, restoringSession, user?.role, requiredRole, router, refresh]);

  if (loading || restoringSession) return <DashboardPageSkeleton />;
  if (!isAuthenticated) return null;
  if (requiredRole && user?.role !== requiredRole) return null;

  return children;
}