"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAppSelector } from "@/lib/store";
import { useCurrentUser } from "@/modules/auth/hooks/auth.hooks";
import { Skeleton } from "@/components/ui/skeleton";

interface AuthGuardProps {
  children: React.ReactNode;
  allowedRoles?: string[];
}

const roleRedirect: Record<string, string> = {
  SUPERADMIN: "/superadmin/dashboard",
  ADMIN: "/admin/dashboard",
  MANAGER: "/manager/dashboard",
  EMPLOYEE: "/employee/dashboard",
  CLIENT: "/client/dashboard",
};

export default function AuthGuard({ children, allowedRoles }: AuthGuardProps) {
  const router = useRouter();
  const { isAuthenticated, isLoading, user } = useAppSelector(
    (state) => state.auth
  );
  const { isLoading: isQueryLoading } = useCurrentUser();

  const loading = isLoading || isQueryLoading;

  useEffect(() => {
    if (loading) return;

    if (!isAuthenticated) {
      router.replace("/login");
      return;
    }

    if (allowedRoles && user) {
      const allowed = allowedRoles.some(
        (r) => r.toUpperCase() === user.role.toUpperCase()
      );
      if (!allowed) {
        const dest = roleRedirect[user.role.toUpperCase()] ?? "/login";
        router.replace(dest);
      }
    }
  }, [loading, isAuthenticated, user, allowedRoles, router]);

  // if (loading) {
  //   return (
  //     <div className="flex h-[60vh] items-center justify-center">
  //       <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
  //     </div>
  //   );
  // }



if (isLoading) {
  return (
    <div className="space-y-6">
      {/* Header skeleton */}
      <div className="flex items-center justify-between">
        <div className="space-y-2">
          <Skeleton className="h-7 w-40" />
          <Skeleton className="h-4 w-64" />
        </div>
        <Skeleton className="h-9 w-32 rounded-md" />
      </div>

      {/* Search bar skeleton */}
      <Skeleton className="h-9 w-72 rounded-md" />

      {/* Table skeleton */}
      <div className="rounded-lg border border-border overflow-hidden">
        <div className="bg-muted px-4 py-3">
          <Skeleton className="h-4 w-full max-w-md" />
        </div>
        <div className="divide-y divide-border">
          {[1, 2, 3, 4, 5].map((i) => (
            <div key={i} className="flex items-center gap-4 px-4 py-3">
              <Skeleton className="h-4 w-8" />
              <Skeleton className="h-4 flex-1" />
              <Skeleton className="h-4 w-24" />
              <Skeleton className="h-4 w-20" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

  if (!isAuthenticated) return null;

  if (allowedRoles && user) {
    const allowed = allowedRoles.some(
      (r) => r.toUpperCase() === user.role.toUpperCase()
    );
    if (!allowed) return null;
  }

  return <>{children}</>;
}