'use client';

import { useEffect } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import { useAuth, User } from '@/contexts/AuthContext';
import { emitSessionExpired } from '@/lib/sessionAuth';

type PortalRole = 'CUSTOMER' | 'WORKER' | 'ADMIN';

const PORTAL_HOME: Record<PortalRole, string> = {
  CUSTOMER: '/customer/dashboard',
  WORKER: '/worker/dashboard',
  ADMIN: '/admin',
};

interface AuthGuardProps {
  children: React.ReactNode;
  allowedRole: PortalRole;
}

export function AuthGuard({ children, allowedRole }: AuthGuardProps) {
  const { user, token, isLoading, sessionExpired } = useAuth();
  const router = useRouter();
  const pathname = usePathname();

  useEffect(() => {
    if (isLoading || sessionExpired) return;

    if (!user) {
      const redirect = encodeURIComponent(pathname);
      router.replace(`/login?redirect=${redirect}`);
      return;
    }

    if (user.role !== allowedRole) {
      router.replace(PORTAL_HOME[user.role]);
    }
  }, [user, isLoading, sessionExpired, allowedRole, router, pathname]);

  useEffect(() => {
    if (isLoading || sessionExpired || !user) return;

    const stored = localStorage.getItem('accessToken');
    if (!stored || (token && stored !== token)) {
      emitSessionExpired();
    }
  }, [pathname, user, token, isLoading, sessionExpired]);

  if (isLoading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent" />
          <p className="mt-4 text-sm text-gray-500">Loading...</p>
        </div>
      </div>
    );
  }

  if (sessionExpired) {
    return null;
  }

  if (!user || user.role !== allowedRole) {
    return null;
  }

  return <>{children}</>;
}

export function getPortalHome(role: User['role']) {
  return PORTAL_HOME[role];
}