// src/app/dashboard/page.js
"use client";
import { useRouter } from "next/navigation";
import { useAuth } from "../context/AuthContext";
import { useEffect } from "react";
import { useTheme } from "../context/ThemeContext";
import EntriesTable from "../pages/entries/EntriesTable";

export default function DashboardPage() {
  const router = useRouter();
  const { isAuthenticated, loading, userRole } = useAuth();
  const { darkMode } = useTheme();

  useEffect(() => {
    if (!loading && !isAuthenticated) {
      router.push("/");
    }
  }, [isAuthenticated, loading, router]);

  // Handle theme loading state
  if (darkMode === undefined || loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-white dark:bg-gray-900">
        <div className="text-center">
          <div className={`animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto ${
            darkMode === true ? 'border-gray-100' : 'border-gray-900'
          }`}></div>
          <p className={`mt-4 text-lg font-semibold ${
            darkMode === true ? 'text-gray-100' : 'text-gray-900'
          }`}>
            Loading...
          </p>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return null;
  }

  return (
    <main className={`min-h-screen transition-colors duration-300 ${
      darkMode ? 'dark bg-gray-900' : 'bg-white'
    }`}>
      <div className="p-6">
        <EntriesTable />
      </div>
    </main>
  );
}