'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/store/auth.store';
import { UserRole } from '@/types';

interface AuthGuardProps {
  children: React.ReactNode;
  requiredRoles?: UserRole[];
  redirectTo?: string;
}

/**
 * AuthGuard — Komponen pelindung route di sisi klien.
 * Digunakan sebagai lapisan tambahan di bawah middleware.ts.
 *
 * Contoh penggunaan:
 * <AuthGuard requiredRoles={["admin"]}>
 *   <AdminPage />
 * </AuthGuard>
 */
export function AuthGuard({
  children,
  requiredRoles,
  redirectTo = '/auth/login',
}: AuthGuardProps) {
  const router = useRouter();
  const { isAuthenticated, user, isInitialized } = useAuthStore();

  useEffect(() => {
    if (!isInitialized) return;

    if (!isAuthenticated) {
      router.replace(redirectTo);
      return;
    }

    if (requiredRoles && user) {
      const hasRequiredRole = requiredRoles.some((role) =>
        user.roles.includes(role)
      );

      if (!hasRequiredRole) {
        // Redirect ke dashboard yang sesuai
        const userDashboard = user.roles.includes('admin')
          ? '/dashboard/admin'
          : '/dashboard/user/cart';
        router.replace(userDashboard);
      }
    }
  }, [isAuthenticated, isInitialized, user, requiredRoles, redirectTo, router]);

  // Tampilkan loading saat session belum diinisialisasi
  if (!isInitialized) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="flex flex-col items-center gap-3">
          <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
          <p className="text-sm text-gray-500">Memverifikasi sesi...</p>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) return null;

  if (requiredRoles && user) {
    const hasRequiredRole = requiredRoles.some((role) =>
      user.roles.includes(role)
    );
    if (!hasRequiredRole) return null;
  }

  return <>{children}</>;
}