import React from 'react';
import { DollarSign, TrendingDown, TrendingUp, FileText } from 'lucide-react';
import type { PayStatement } from '../../types/index.js';

interface PayrollDetailProps {
  payStatement?: PayStatement;
}

export const PayrollDetail: React.FC<PayrollDetailProps> = ({ payStatement }) => {
  if (!payStatement) {
    return (
      <div className="p-6 bg-white rounded-lg shadow text-center">
        <p className="text-gray-500">No pay statement data available</p>
      </div>
    );
  }

  const totalEarnings = payStatement.earnings?.reduce((sum, e) => sum + e.amount, 0) || payStatement.grossPay;
  const totalTaxes = payStatement.taxLines?.reduce((sum, t) => sum + t.amount, 0) || payStatement.taxes;
  const totalDeductions = payStatement.deductionLines?.reduce((sum, d) => sum + d.amount, 0) || payStatement.deductions;

  return (
    <div className="p-6 bg-white rounded-lg shadow max-w-4xl">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold">Pay Statement</h2>
        <FileText className="w-8 h-8 text-blue-600" />
      </div>

      <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-6 text-white mb-6">
        <p className="text-sm opacity-90 mb-1">Pay Date</p>
        <p className="text-2xl font-bold mb-4">{payStatement.payDate}</p>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-sm opacity-90">Gross Pay</p>
            <p className="text-3xl font-bold">${payStatement.grossPay.toLocaleString()}</p>
          </div>
          <div>
            <p className="text-sm opacity-90">Net Pay</p>
            <p className="text-3xl font-bold">${payStatement.netPay.toLocaleString()}</p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div className="bg-green-50 border-2 border-green-200 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-2">
            <TrendingUp className="w-5 h-5 text-green-600" />
            <h3 className="font-semibold text-green-900">Earnings</h3>
          </div>
          <p className="text-2xl font-bold text-green-600">${totalEarnings.toLocaleString()}</p>
        </div>

        <div className="bg-red-50 border-2 border-red-200 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-2">
            <TrendingDown className="w-5 h-5 text-red-600" />
            <h3 className="font-semibold text-red-900">Taxes</h3>
          </div>
          <p className="text-2xl font-bold text-red-600">${totalTaxes.toLocaleString()}</p>
        </div>

        <div className="bg-orange-50 border-2 border-orange-200 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-2">
            <TrendingDown className="w-5 h-5 text-orange-600" />
            <h3 className="font-semibold text-orange-900">Deductions</h3>
          </div>
          <p className="text-2xl font-bold text-orange-600">${totalDeductions.toLocaleString()}</p>
        </div>
      </div>

      {payStatement.earnings && payStatement.earnings.length > 0 && (
        <div className="mb-6">
          <h3 className="font-semibold text-lg mb-3">Earnings Breakdown</h3>
          <div className="bg-gray-50 rounded-lg overflow-hidden">
            <table className="w-full">
              <thead className="bg-gray-100">
                <tr>
                  <th className="px-4 py-2 text-left text-sm font-semibold">Type</th>
                  <th className="px-4 py-2 text-right text-sm font-semibold">Hours</th>
                  <th className="px-4 py-2 text-right text-sm font-semibold">Rate</th>
                  <th className="px-4 py-2 text-right text-sm font-semibold">Amount</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {payStatement.earnings.map((earning, idx) => (
                  <tr key={idx}>
                    <td className="px-4 py-2">
                      <div>
                        <p className="font-medium">{earning.type}</p>
                        {earning.description && (
                          <p className="text-sm text-gray-600">{earning.description}</p>
                        )}
                      </div>
                    </td>
                    <td className="px-4 py-2 text-right">{earning.hours || '-'}</td>
                    <td className="px-4 py-2 text-right">
                      {earning.rate ? `$${earning.rate}` : '-'}
                    </td>
                    <td className="px-4 py-2 text-right font-bold text-green-600">
                      ${earning.amount.toLocaleString()}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {payStatement.taxLines && payStatement.taxLines.length > 0 && (
        <div className="mb-6">
          <h3 className="font-semibold text-lg mb-3">Tax Breakdown</h3>
          <div className="bg-gray-50 rounded-lg overflow-hidden">
            <table className="w-full">
              <thead className="bg-gray-100">
                <tr>
                  <th className="px-4 py-2 text-left text-sm font-semibold">Type</th>
                  <th className="px-4 py-2 text-right text-sm font-semibold">Employee</th>
                  <th className="px-4 py-2 text-right text-sm font-semibold">Employer</th>
                  <th className="px-4 py-2 text-right text-sm font-semibold">Total</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {payStatement.taxLines.map((tax, idx) => (
                  <tr key={idx}>
                    <td className="px-4 py-2">
                      <div>
                        <p className="font-medium">{tax.type}</p>
                        {tax.description && (
                          <p className="text-sm text-gray-600">{tax.description}</p>
                        )}
                      </div>
                    </td>
                    <td className="px-4 py-2 text-right">
                      ${(tax.employeeContribution || 0).toLocaleString()}
                    </td>
                    <td className="px-4 py-2 text-right">
                      ${(tax.employerContribution || 0).toLocaleString()}
                    </td>
                    <td className="px-4 py-2 text-right font-bold text-red-600">
                      ${tax.amount.toLocaleString()}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {payStatement.deductionLines && payStatement.deductionLines.length > 0 && (
        <div>
          <h3 className="font-semibold text-lg mb-3">Deductions</h3>
          <div className="bg-gray-50 rounded-lg overflow-hidden">
            <table className="w-full">
              <thead className="bg-gray-100">
                <tr>
                  <th className="px-4 py-2 text-left text-sm font-semibold">Type</th>
                  <th className="px-4 py-2 text-right text-sm font-semibold">Amount</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {payStatement.deductionLines.map((deduction, idx) => (
                  <tr key={idx}>
                    <td className="px-4 py-2">
                      <div>
                        <p className="font-medium">{deduction.type}</p>
                        {deduction.description && (
                          <p className="text-sm text-gray-600">{deduction.description}</p>
                        )}
                      </div>
                    </td>
                    <td className="px-4 py-2 text-right font-bold text-orange-600">
                      ${deduction.amount.toLocaleString()}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
};
