import { useEffect, useState } from 'react';
import axios from 'axios';

function Reports() {
  const [report, setReport] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    axios
      .get('/api/reports/on-leave-by-department', { withCredentials: true })
      .then((res) => setReport(res.data))
      .catch((err) => setError(err.response?.data?.message || 'Failed to load report'))
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return <p className="text-gray-600">Loading report...</p>;
  }

  if (error) {
    return <p className="alert-error">{error}</p>;
  }

  return (
    <div>
      <h1 className="mb-2 text-2xl font-bold">Employee Status Report</h1>
      <p className="mb-6 text-sm text-gray-600">
        Employees currently on leave, organized by department
      </p>

      <div className="mb-6 box border-l-4 border-teal-700">
        <p className="text-sm text-gray-600">Total employees on leave</p>
        <p className="text-3xl font-bold text-teal-900">{report.totalOnLeave}</p>
      </div>

      {report.departments.length === 0 ? (
        <div className="box">
          <p className="text-gray-600">
            No employees are currently on leave. Set an employee&apos;s status to{' '}
            <strong>on leave</strong> on the Employees page to include them in this report.
          </p>
        </div>
      ) : (
        report.departments.map((dept) => (
          <div key={dept.departmentName} className="mb-6 box">
            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
              <h2 className="text-lg font-semibold">{dept.departmentName}</h2>
              <span className="rounded-full bg-teal-100 px-3 py-1 text-sm font-medium text-teal-900">
                {dept.count} on leave
              </span>
            </div>

            <div className="overflow-x-auto">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Telephone</th>
                    <th>Position</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  {dept.employees.map((emp) => (
                    <tr key={emp.id}>
                      <td>{emp.firstName} {emp.lastName}</td>
                      <td>{emp.email}</td>
                      <td>{emp.telephone}</td>
                      <td>{emp.position}</td>
                      <td>{emp.status}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        ))
      )}

      <div className="box bg-teal-50">
        <p className="font-semibold text-teal-900">
          Grand total on leave: {report.totalOnLeave}
        </p>
      </div>
    </div>
  );
}

export default Reports;


