import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import Navbar from './Navbar';

const Dashboard = () => {
  const [stats, setStats] = useState({
    employees: 0,
    departments: 0,
    salaries: 0
  });
  const navigate = useNavigate();

  useEffect(() => {
    fetchStats();
  }, []);

  const fetchStats = async () => {
    try {
      const [empRes, deptRes, salRes] = await Promise.all([
        axios.get('http://localhost:5000/api/employees', { withCredentials: true }),
        axios.get('http://localhost:5000/api/departments', { withCredentials: true }),
        axios.get('http://localhost:5000/api/salaries', { withCredentials: true })
      ]);
      
      setStats({
        employees: empRes.data.length,
        departments: deptRes.data.length,
        salaries: salRes.data.length
      });
    } catch (error) {
      console.error('Error fetching stats:', error);
    }
  };

  const cards = [
    { title: 'Total Employees', value: stats.employees, link: '/employees' },
    { title: 'Departments', value: stats.departments,link: '/departments' },
    { title: 'Salary Records', value: stats.salaries, link: '/salaries' },
  ];

  return (
    <div>
      <Navbar />
      <div className="p-6 bg-gray-100 min-h-screen">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-800">Dashboard</h1>
          <p className="text-gray-600 mt-2">Welcome to SmartPark Payroll Management System</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          {cards.map((card, index) => (
            <div
              key={index}
              onClick={() => navigate(card.link)}
              className="bg-white rounded-lg shadow-md p-6 cursor-pointer hover:shadow-lg transition duration-200"
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-gray-500 text-sm">{card.title}</p>
                  <p className="text-3xl font-bold text-gray-800 mt-2">{card.value}</p>
                </div>
                <div className={`${card.color} w-12 h-12 rounded-full flex items-center justify-center text-2xl`}>
                  {card.icon}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-white rounded-lg shadow-md p-6">
            <h2 className="text-xl font-bold text-gray-800 mb-4">Quick Actions</h2>
            <div className="space-y-3">
              <button
                onClick={() => navigate('/employees')}
                className="w-full text-left px-4 py-2 bg-gray-50 rounded-md hover:bg-blue-50 transition"
              >
                Add New Employee
              </button>
              <button
                onClick={() => navigate('/departments')}
                className="w-full text-left px-4 py-2 bg-gray-50 rounded-md hover:bg-blue-50 transition"
              >
                Add New Department
              </button>
              <button
                onClick={() => navigate('/salaries')}
                className="w-full text-left px-4 py-2 bg-gray-50 rounded-md hover:bg-blue-50 transition"
              >
                Add Salary Record
              </button>
              <button
                onClick={() => navigate('/reports')}
                className="w-full text-left px-4 py-2 bg-gray-50 rounded-md hover:bg-blue-50 transition"
              >
                Generate Monthly Report
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
};

export default Dashboard;