'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { toast } from 'react-toastify';
import type { User } from '@/types';
import { useAuth } from '@/components/auth-context';
import CandidateReportsPage from '@/components/reports/CandidateReportsPage';

/** Candidate reports: ADMIN + managers fully; recruiters view their assigned JDs' candidates. */
function canViewCandidateReports(user: User): boolean {
  if (user.role === 'ADMIN') return true;
  const role = (user.role ?? '').toUpperCase();
  if (role.includes('MANAGER') || role === 'RECRUITER') return true;
  return user.permissions?.includes('reports.view_candidatereport')
    || user.permissions?.includes('reports.view_reports')
    || false;
}

export default function CandidateReportsRoute() {
  const router = useRouter();
  const { user } = useAuth();

  useEffect(() => {
    if (!user) return;
    if (!canViewCandidateReports(user)) {
      toast.error('You do not have permission to view candidate reports.');
      router.push('/dashboard');
    }
  }, [user, router]);

  if (!user) return null;

  return (
    <main className="flex-1 p-4 sm:p-8 overflow-y-auto w-full">
      <div className="max-w-7xl w-full mx-auto">
        <CandidateReportsPage user={user} />
      </div>
    </main>
  );
}