// 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";


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

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

  if (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 ? 'border-gray-100' : 'border-gray-900'} mx-auto`}></div>
          <p className={`mt-4 text-lg font-semibold ${darkMode ? 'text-gray-100' : 'text-gray-900'}`}>
            Loading...
          </p>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return null;
  }

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 p-6">
      <h1 className={`text-3xl font-bold mb-6 ${darkMode ? 'text-white' : 'text-gray-900'}`}>
        Dashboard
      </h1>
  {/* -------------user role-------------- */}
  <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
  User Profile
</h2>
<div className="flex items-center space-x-4">
  <div className={`w-16 h-16 rounded-full ${darkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
  <div>
    <p className={`font-medium ${darkMode ? 'text-white' : 'text-gray-800'}`}>John Doe</p>
    <p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>john@example.com</p>
    <p className={`text-xs mt-1 ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>Role: {userRole}</p> {/* 👈 Added */}
  </div>
</div>
{/*  */}

      {/* 2x2 Grid Layout */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        {/* Box 1 - User Profile */}
        <div className={`p-6 rounded-lg shadow-md ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
          <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
            User Profile
          </h2>
          <div className="flex items-center space-x-4">
            <div className={`w-16 h-16 rounded-full ${darkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
            <div>
              <p className={`font-medium ${darkMode ? 'text-white' : 'text-gray-800'}`}>John Doe</p>
              <p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}>john@example.com</p>
            </div>
          </div>
        </div>

        {/* Box 2 - Statistics */}
        <div className={`p-6 rounded-lg shadow-md ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
          <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
            Statistics
          </h2>
          <div className="grid grid-cols-2 gap-4">
            <div className={`p-3 rounded ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
              <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Projects</p>
              <p className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-gray-800'}`}>12</p>
            </div>
            <div className={`p-3 rounded ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
              <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Tasks</p>
              <p className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-gray-800'}`}>24</p>
            </div>
          </div>
        </div>

        {/* Box 3 - Recent Activity */}
        <div className={`p-6 rounded-lg shadow-md ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
          <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
            Recent Activity
          </h2>
          <div className="space-y-3">
            <div className="flex items-start">
              <div className={`w-2 h-2 mt-2 rounded-full ${darkMode ? 'bg-blue-400' : 'bg-blue-500'}`}></div>
              <div className="ml-3">
                <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Logged in</p>
                <p className={`text-xs ${darkMode ? 'text-gray-500' : 'text-gray-400'}`}>2 minutes ago</p>
              </div>
            </div>
            <div className="flex items-start">
              <div className={`w-2 h-2 mt-2 rounded-full ${darkMode ? 'bg-green-400' : 'bg-green-500'}`}></div>
              <div className="ml-3">
                <p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}>Project created</p>
                <p className={`text-xs ${darkMode ? 'text-gray-500' : 'text-gray-400'}`}>15 minutes ago</p>
              </div>
            </div>
          </div>
        </div>

        {/* Box 4 - Quick Actions */}
        <div className={`p-6 rounded-lg shadow-md ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
          <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
            Quick Actions
          </h2>
          <div className="grid grid-cols-2 gap-3">
            <button className={`py-2 px-3 rounded-md text-sm font-medium ${darkMode ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-blue-100 hover:bg-blue-200 text-blue-800'}`}>
              New Project
            </button>
            <button className={`py-2 px-3 rounded-md text-sm font-medium ${darkMode ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-green-100 hover:bg-green-200 text-green-800'}`}>
              Add Task
            </button>
          </div>
        </div>
      </div>

      {/* Additional content can go here */}
      <div className={`mt-6 p-6 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'}`}>
        <h2 className={`text-xl font-semibold mb-4 ${darkMode ? 'text-white' : 'text-gray-800'}`}>
          Welcome to Your Dashboard
        </h2>
        <p className={darkMode ? 'text-gray-300' : 'text-gray-600'}>
          This is a simple dashboard layout with four main components arranged in a 2x2 grid.
          You can easily add more components or modify these boxes as needed.
        </p>
      </div>
    </div>
  );
}