hr-portal/app/frontend/app/admin/reimbursements/page.tsx

'use client';
import { useEffect, useState } from 'react';
import { reimbursementsApi } from '@/lib/api';
import { formatDate, formatCurrency, getStatusColor } from '@/lib/utils';
import Topbar from '@/components/layout/Topbar';

export default function AdminReimbursementsPage() {
  const [reimbursements, setReimbursements] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState('pending');
  const [actionLoading, setActionLoading] = useState<string | null>(null);
  const [rejectModal, setRejectModal] = useState<{ id: string } | null>(null);
  const [rejectReason, setRejectReason] = useState('');

  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await reimbursementsApi.getAll({ status: filter, limit: 50 });
      setReimbursements(res.data.data || []);
    } catch {}
    setLoading(false);
  };

  useEffect(() => { fetchData(); }, [filter]);

  const handleApprove = async (id: string) => {
    setActionLoading(id);
    try {
      await reimbursementsApi.approve(id);
      await fetchData();
    } catch (err: any) { alert(err.response?.data?.message || 'Failed'); }
    setActionLoading(null);
  };

  const handleReject = async () => {
    if (!rejectModal || !rejectReason.trim()) return;
    setActionLoading(rejectModal.id);
    try {
      await reimbursementsApi.reject(rejectModal.id, rejectReason);
      setRejectModal(null);
      setRejectReason('');
      await fetchData();
    } catch (err: any) { alert(err.response?.data?.message || 'Failed'); }
    setActionLoading(null);
  };

  const handleMarkPaid = async (id: string) => {
    setActionLoading(id);
    try {
      await reimbursementsApi.markPaid(id);
      await fetchData();
    } catch (err: any) { alert(err.response?.data?.message || 'Failed'); }
    setActionLoading(null);
  };

  return (
    <div className="min-h-screen bg-[#F8FAFC]">
      <Topbar title="Reimbursements" />
      <div className="p-6">
        <div className="bg-white rounded-xl shadow-sm border border-gray-100">
          <div className="p-5 border-b border-gray-100 flex gap-2">
            {['pending', 'approved', 'rejected', 'paid'].map((s) => (
              <button key={s} onClick={() => setFilter(s)}
                className={`px-4 py-2 rounded-lg text-sm font-medium capitalize transition ${filter === s ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}>
                {s}
              </button>
            ))}
          </div>
          {loading ? (
            <div className="text-center py-12"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto"></div></div>
          ) : reimbursements.length === 0 ? (
            <div className="text-center py-16 text-gray-500">
              <p className="text-4xl mb-2">📄</p><p>No {filter} reimbursements</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-gray-100 bg-gray-50">
                    <th className="text-left px-5 py-3 text-gray-500 font-medium">Employee</th>
                    <th className="text-left px-5 py-3 text-gray-500 font-medium">Category</th>
                    <th className="text-left px-5 py-3 text-gray-500 font-medium">Amount</th>
                    <th className="text-left px-5 py-3 text-gray-500 font-medium">Description</th>
                    <th className="text-left px-5 py-3 text-gray-500 font-medium">Date</th>
                    <th className="text-left px-5 py-3 text-gray-500 font-medium">Status</th>
                    <th className="text-left px-5 py-3 text-gray-500 font-medium">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {reimbursements.map((r: any) => {
                    const emp = r.employeeId;
                    return (
                      <tr key={r._id} className="border-b border-gray-50 hover:bg-gray-50">
                        <td className="px-5 py-3"><p className="font-medium">{emp?.firstName} {emp?.lastName}</p><p className="text-xs text-gray-400">{emp?.employeeId}</p></td>
                        <td className="px-5 py-3 capitalize">{r.category}</td>
                        <td className="px-5 py-3 font-medium">{formatCurrency(r.amount)}</td>
                        <td className="px-5 py-3 max-w-xs truncate">{r.description}</td>
                        <td className="px-5 py-3">{formatDate(r.createdAt)}</td>
                        <td className="px-5 py-3"><span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(r.status)}`}>{r.status}</span></td>
                        <td className="px-5 py-3">
                          <div className="flex gap-1">
                            {r.status === 'pending' && (
                              <>
                                <button onClick={() => handleApprove(r._id)} disabled={actionLoading === r._id} className="bg-green-600 text-white text-xs px-2 py-1 rounded hover:bg-green-700 disabled:opacity-50">Approve</button>
                                <button onClick={() => setRejectModal({ id: r._id })} className="bg-red-500 text-white text-xs px-2 py-1 rounded hover:bg-red-600">Reject</button>
                              </>
                            )}
                            {r.status === 'approved' && (
                              <button onClick={() => handleMarkPaid(r._id)} disabled={actionLoading === r._id} className="bg-blue-600 text-white text-xs px-2 py-1 rounded hover:bg-blue-700 disabled:opacity-50">Mark Paid</button>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>

        {rejectModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div className="bg-white rounded-xl p-6 max-w-md w-full">
              <h3 className="font-semibold text-gray-800 mb-3">Reject Reimbursement</h3>
              <textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)} placeholder="Reason (required)" rows={3} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm mb-4" />
              <div className="flex gap-3">
                <button onClick={handleReject} disabled={!rejectReason.trim()} className="bg-red-500 text-white text-sm px-4 py-2 rounded-lg disabled:opacity-50">Confirm Reject</button>
                <button onClick={() => { setRejectModal(null); setRejectReason(''); }} className="text-gray-600 text-sm px-4 py-2 rounded-lg border border-gray-300">Cancel</button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}