import React, { useState, useEffect } from 'react';
import { DollarSign, Users, Calendar, FileText, Download, CheckCircle } from 'lucide-react';

interface PayrollDetail {
  id: string;
  checkDate: string;
  payPeriod: { startDate: string; endDate: string };
  status: string;
  totals: {
    companyDebit: number;
    reimbursements: number;
    netPay: number;
    taxes: number;
    deductions: number;
    benefits: number;
  };
  employeeBreakdown: Array<{
    id: string;
    name: string;
    grossPay: number;
    netPay: number;
    taxes: number;
    deductions: number;
  }>;
}

export default function PayrollDetail() {
  const [payroll, setPayroll] = useState<PayrollDetail | null>(null);

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP
    setPayroll({
      id: 'payroll_123',
      checkDate: '2024-02-16',
      payPeriod: { startDate: '2024-02-01', endDate: '2024-02-15' },
      status: 'processed',
      totals: {
        companyDebit: 425000,
        reimbursements: 5000,
        netPay: 298000,
        taxes: 112000,
        deductions: 10000,
        benefits: 15000
      },
      employeeBreakdown: [
        { id: '1', name: 'Sarah Johnson', grossPay: 12500, netPay: 8750, taxes: 3125, deductions: 625 },
        { id: '2', name: 'Michael Chen', grossPay: 11000, netPay: 7700, taxes: 2750, deductions: 550 },
        { id: '3', name: 'Emily Rodriguez', grossPay: 9500, netPay: 6650, taxes: 2375, deductions: 475 },
        { id: '4', name: 'David Kim', grossPay: 8000, netPay: 5600, taxes: 2000, deductions: 400 },
        { id: '5', name: 'Lisa Wang', grossPay: 10000, netPay: 7000, taxes: 2500, deductions: 500 }
      ]
    });
  }, []);

  if (!payroll) {
    return (
      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
        <div className="text-slate-400">Loading...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="bg-slate-900 rounded-lg p-8 mb-6 border border-slate-800">
          <div className="flex items-start justify-between mb-6">
            <div>
              <h1 className="text-3xl font-bold mb-2">Payroll Details</h1>
              <div className="flex items-center gap-4 text-slate-400">
                <span className="flex items-center gap-1">
                  <Calendar size={16} />
                  {payroll.payPeriod.startDate} - {payroll.payPeriod.endDate}
                </span>
                <span className="flex items-center gap-1">
                  <CheckCircle size={16} className="text-green-400" />
                  {payroll.status}
                </span>
              </div>
            </div>
            <div className="flex gap-2">
              <button className="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg font-medium transition-colors flex items-center gap-2">
                <Download size={18} />
                Export
              </button>
              <button className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-colors">
                Reprocess
              </button>
            </div>
          </div>

          {/* Totals Grid */}
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            <TotalCard label="Company Debit" value={payroll.totals.companyDebit} color="blue" />
            <TotalCard label="Net Pay" value={payroll.totals.netPay} color="emerald" />
            <TotalCard label="Taxes" value={payroll.totals.taxes} color="red" />
            <TotalCard label="Deductions" value={payroll.totals.deductions} color="yellow" />
            <TotalCard label="Benefits" value={payroll.totals.benefits} color="purple" />
            <TotalCard label="Reimbursements" value={payroll.totals.reimbursements} color="cyan" />
          </div>
        </div>

        {/* Employee Breakdown */}
        <div className="bg-slate-900 rounded-lg border border-slate-800">
          <div className="p-6 border-b border-slate-800">
            <h2 className="text-xl font-semibold flex items-center gap-2">
              <Users size={24} />
              Employee Breakdown
            </h2>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-slate-800/50">
                <tr>
                  <th className="px-6 py-4 text-left text-sm font-medium text-slate-400">Employee</th>
                  <th className="px-6 py-4 text-right text-sm font-medium text-slate-400">Gross Pay</th>
                  <th className="px-6 py-4 text-right text-sm font-medium text-slate-400">Taxes</th>
                  <th className="px-6 py-4 text-right text-sm font-medium text-slate-400">Deductions</th>
                  <th className="px-6 py-4 text-right text-sm font-medium text-slate-400">Net Pay</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800">
                {payroll.employeeBreakdown.map(emp => (
                  <tr key={emp.id} className="hover:bg-slate-800/30">
                    <td className="px-6 py-4 font-medium">{emp.name}</td>
                    <td className="px-6 py-4 text-right">${emp.grossPay.toLocaleString()}</td>
                    <td className="px-6 py-4 text-right text-red-400">${emp.taxes.toLocaleString()}</td>
                    <td className="px-6 py-4 text-right text-yellow-400">${emp.deductions.toLocaleString()}</td>
                    <td className="px-6 py-4 text-right font-semibold text-emerald-400">
                      ${emp.netPay.toLocaleString()}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Summary Cards */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
            <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
              <FileText size={20} />
              Payroll Summary
            </h3>
            <div className="space-y-3">
              <SummaryRow label="Total Employees" value="124" />
              <SummaryRow label="Check Date" value={payroll.checkDate} />
              <SummaryRow label="Pay Period" value={`${payroll.payPeriod.startDate} - ${payroll.payPeriod.endDate}`} />
              <SummaryRow label="Processing Status" value={payroll.status} highlight />
            </div>
          </div>

          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
            <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
              <DollarSign size={20} />
              Financial Breakdown
            </h3>
            <div className="space-y-3">
              <SummaryRow label="Gross Wages" value={`$${payroll.totals.companyDebit.toLocaleString()}`} />
              <SummaryRow label="Tax Withholdings" value={`$${payroll.totals.taxes.toLocaleString()}`} />
              <SummaryRow label="Employee Deductions" value={`$${payroll.totals.deductions.toLocaleString()}`} />
              <SummaryRow label="Net Distribution" value={`$${payroll.totals.netPay.toLocaleString()}`} highlight />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function TotalCard({ label, value, color }: { label: string; value: number; color: string }) {
  const colors: Record<string, string> = {
    blue: 'text-blue-400',
    emerald: 'text-emerald-400',
    red: 'text-red-400',
    yellow: 'text-yellow-400',
    purple: 'text-purple-400',
    cyan: 'text-cyan-400'
  };

  return (
    <div className="bg-slate-800/50 rounded-lg p-4">
      <div className="text-slate-400 text-xs mb-1">{label}</div>
      <div className={`text-xl font-bold ${colors[color]}`}>
        ${(value / 1000).toFixed(0)}k
      </div>
    </div>
  );
}

function SummaryRow({ label, value, highlight }: { label: string; value: string; highlight?: boolean }) {
  return (
    <div className="flex justify-between items-center py-2 border-b border-slate-800 last:border-0">
      <span className="text-slate-400">{label}</span>
      <span className={`font-medium ${highlight ? 'text-blue-400' : 'text-slate-100'}`}>{value}</span>
    </div>
  );
}
