"use client";

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import AuditLogViewer from "@/components/AuditLogViewer";

export default function AuditLogsPage() {
	const { data: session, status } = useSession();
	const router = useRouter();

	useEffect(() => {
		if (status === "loading") return; // Still loading

		if (!session) {
			router.push("/auth/signin");
			return;
		}

		// Only allow admins and project managers to view audit logs
		if (!["admin", "project_manager"].includes(session.user.role)) {
			router.push("/");
			return;
		}
	}, [session, status, router]);

	if (status === "loading") {
		return (
			<div className="min-h-screen flex items-center justify-center">
				<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
			</div>
		);
	}

	if (!session || !["admin", "project_manager"].includes(session.user.role)) {
		return (
			<div className="min-h-screen flex items-center justify-center">
				<div className="text-center">
					<h1 className="text-2xl font-bold text-gray-900 mb-4">
						Access Denied
					</h1>
					<p className="text-gray-600">
						You don&apos;t have permission to view this page.
					</p>
				</div>
			</div>
		);
	}

	return (
		<div className="min-h-screen bg-gray-100">
			<AuditLogViewer />
		</div>
	);
}