import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

function DashboardHome() {
  const [departments, setDepartments] = useState([]);
  const [employees, setEmployees] = useState([]);
  const [salaries, setSalaries] = useState([]);

  useEffect(() => {
    const headers = { Authorization: `Bearer ${localStorage.getItem('token')}` };
    Promise.all([
      axios.get('http://localhost:5001/api/departments/list', { headers }),
      axios.get('http://localhost:5001/api/employees/list', { headers }),
      axios.get('http://localhost:5001/api/salaries/list', { headers }),
    ])
      .then(([deptRes, empRes, salRes]) => {
        setDepartments(deptRes.data);
        setEmployees(empRes.data);
        setSalaries(salRes.data);
      })
      .catch((err) => console.error('Overview load failed:', err));
  }, []);

  return (
    <div>
      <h1 className="mb-6 text-2xl font-bold">Overview</h1>

      <div className="mb-6 grid gap-4 sm:grid-cols-3">
        <div className="box">
          <p className="text-sm text-gray-600">Employees</p>
          <p className="text-2xl font-bold">{employees.length}</p>
        </div>
        <div className="box">
          <p className="text-sm text-gray-600">Departments</p>
          <p className="text-2xl font-bold">{departments.length}</p>
        </div>
        <div className="box">
          <p className="text-sm text-gray-600">Salary Records</p>
          <p className="text-2xl font-bold">{salaries.length}</p>
        </div>
      </div>

      <div className="box">
        <h2 className="mb-3 font-semibold">Quick links</h2>
        <ul className="space-y-2 text-blue-600">
          <li><Link to="/dashboard/employee" className="hover:underline">Manage Employees</Link></li>
          <li><Link to="/dashboard/department" className="hover:underline">Manage Departments</Link></li>
          <li><Link to="/dashboard/salary" className="hover:underline">Manage Salaries</Link></li>
          <li><Link to="/dashboard/reports" className="hover:underline">View Reports</Link></li>
        </ul>
      </div>
    </div>
  );
}

export default DashboardHome;
