import { useEffect, useState } from 'react'
import { employeeAPI } from '../services/api'

function StatusReport() {
  const [employees, setEmployees] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    employeeAPI.getStatusReport().then(res => setEmployees(res.data)).catch(console.error).finally(() => setLoading(false))
  }, [])

  const onLeave = employees.filter(e => e.EmpStatus === 'On Leave')
  const onMission = employees.filter(e => e.EmpStatus === 'On Mission')

  return (
    <div className="space-y-4">
      <div>
        <h1 className="page-title">Employee Status Report</h1>
        <p className="page-subtitle">Employees currently On Leave or On Mission</p>
      </div>

      {loading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[...Array(2)].map((_, i) => <div key={i} className="card p-4 animate-pulse"><div className="h-4 bg-slate-200 rounded w-1/3 mb-3"></div><div className="h-4 bg-slate-100 rounded w-full"></div></div>)}
        </div>
      ) : employees.length === 0 ? (
        <div className="card p-8 text-center text-slate-500">No employees are currently On Leave or On Mission.</div>
      ) : (
        <>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="card">
              <div className="px-4 py-3 bg-amber-500 text-white font-semibold text-sm">On Leave ({onLeave.length})</div>
              <div className="p-4">
                {onLeave.length === 0 ? <p className="text-sm text-slate-400">None</p> : (
                  <div className="space-y-2">
                    {onLeave.map(emp => (
                      <div key={emp._id} className="flex items-center justify-between py-2 px-3 bg-amber-50 rounded text-sm">
                        <span className="font-medium text-slate-800">{emp.EmpFirstName} {emp.EmpLastName}</span>
                        <span className="text-xs text-slate-400">{emp.Department?.DepartName || '—'}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>

            <div className="card">
              <div className="px-4 py-3 bg-cyan-500 text-white font-semibold text-sm">On Mission ({onMission.length})</div>
              <div className="p-4">
                {onMission.length === 0 ? <p className="text-sm text-slate-400">None</p> : (
                  <div className="space-y-2">
                    {onMission.map(emp => (
                      <div key={emp._id} className="flex items-center justify-between py-2 px-3 bg-cyan-50 rounded text-sm">
                        <span className="font-medium text-slate-800">{emp.EmpFirstName} {emp.EmpLastName}</span>
                        <span className="text-xs text-slate-400">{emp.Department?.DepartName || '—'}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>

          <div className="card overflow-hidden">
            <div className="px-4 py-3 bg-slate-800 text-white font-semibold text-sm">Full Report</div>
            <table className="w-full">
              <thead>
                <tr className="bg-slate-50">
                  <th className="table-header">Employee</th>
                  <th className="table-header">Department</th>
                  <th className="table-header">Position</th>
                  <th className="table-header">Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
                {employees.map(emp => (
                  <tr key={emp._id}>
                    <td className="table-cell font-medium text-slate-900">{emp.EmpFirstName} {emp.EmpLastName}</td>
                    <td className="table-cell text-slate-500">{emp.Department?.DepartName || '—'}</td>
                    <td className="table-cell text-slate-500">{emp.Position?.PosName || '—'}</td>
                    <td className="table-cell">
                      <span className={`badge ${emp.EmpStatus === 'On Leave' ? 'bg-amber-50 text-amber-700 border-amber-200' : 'bg-cyan-50 text-cyan-700 border-cyan-200'}`}>{emp.EmpStatus}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </>
      )}
    </div>
  )
}

export default StatusReport
