'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 OverallDashboard from '@/components/reports/OverallDashboard';
import BackToDashboard from '@/components/BackToDashboard';

/** Reports are for ADMIN and manager roles (or anyone granted reports.view_reports). */
function canViewReports(user: User): boolean {
  if (user.role === 'ADMIN') return true;
  if ((user.role ?? '').toUpperCase().includes('MANAGER')) return true;
  return user.permissions?.includes('reports.view_reports') ?? false;
}

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

  useEffect(() => {
    if (!user) return;
    if (!canViewReports(user)) {
      toast.error('You do not have permission to view 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">
          <BackToDashboard />
          <div className="max-w-6xl w-full mx-auto">
            <OverallDashboard />
          </div>
        </main>
  );
}