import React from 'react';
import { DollarSign, Calendar, TrendingUp, AlertCircle } from 'lucide-react';
import type { PayRun } from '../../types/index.js';

interface PayrollDashboardProps {
  payRuns?: PayRun[];
  totalAnnualPayroll?: number;
  avgPayPerEmployee?: number;
  nextPayDate?: string;
}

export const PayrollDashboard: React.FC<PayrollDashboardProps> = ({
  payRuns = [],
  totalAnnualPayroll = 0,
  avgPayPerEmployee = 0,
  nextPayDate,
}) => {
  const recentRuns = payRuns.slice(0, 5);
  const completedRuns = payRuns.filter(r => r.status === 'COMPLETED');
  const pendingRuns = payRuns.filter(r => r.status === 'PROCESSING' || r.status === 'APPROVED');

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">Payroll Dashboard</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div className="bg-green-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Total Annual Payroll</p>
              <p className="text-2xl font-bold text-green-600">
                ${totalAnnualPayroll.toLocaleString()}
              </p>
            </div>
            <DollarSign className="w-10 h-10 text-green-400" />
          </div>
        </div>

        <div className="bg-blue-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Avg Pay/Employee</p>
              <p className="text-2xl font-bold text-blue-600">
                ${avgPayPerEmployee.toLocaleString()}
              </p>
            </div>
            <TrendingUp className="w-10 h-10 text-blue-400" />
          </div>
        </div>

        <div className="bg-purple-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Next Pay Date</p>
              <p className="text-xl font-bold text-purple-600">{nextPayDate || 'N/A'}</p>
            </div>
            <Calendar className="w-10 h-10 text-purple-400" />
          </div>
        </div>

        <div className="bg-orange-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Pending Runs</p>
              <p className="text-2xl font-bold text-orange-600">{pendingRuns.length}</p>
            </div>
            <AlertCircle className="w-10 h-10 text-orange-400" />
          </div>
        </div>
      </div>

      <div className="mt-6">
        <h3 className="text-lg font-semibold mb-3">Recent Pay Runs</h3>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-2 text-left text-sm font-semibold">Pay Date</th>
                <th className="px-4 py-2 text-left text-sm font-semibold">Period</th>
                <th className="px-4 py-2 text-left text-sm font-semibold">Employees</th>
                <th className="px-4 py-2 text-left text-sm font-semibold">Gross Pay</th>
                <th className="px-4 py-2 text-left text-sm font-semibold">Net Pay</th>
                <th className="px-4 py-2 text-left text-sm font-semibold">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {recentRuns.map((run) => (
                <tr key={run.id} className="hover:bg-gray-50">
                  <td className="px-4 py-3">{run.payDate}</td>
                  <td className="px-4 py-3 text-sm text-gray-600">
                    {run.payPeriodStart} - {run.payPeriodEnd}
                  </td>
                  <td className="px-4 py-3">{run.employeeCount}</td>
                  <td className="px-4 py-3 font-medium">
                    ${run.totalGrossPay?.toLocaleString()}
                  </td>
                  <td className="px-4 py-3 font-medium">
                    ${run.totalNetPay?.toLocaleString()}
                  </td>
                  <td className="px-4 py-3">
                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                      run.status === 'COMPLETED' ? 'bg-green-100 text-green-800' :
                      run.status === 'PROCESSING' ? 'bg-blue-100 text-blue-800' :
                      run.status === 'APPROVED' ? 'bg-purple-100 text-purple-800' :
                      run.status === 'DRAFT' ? 'bg-gray-100 text-gray-800' :
                      'bg-red-100 text-red-800'
                    }`}>
                      {run.status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};
