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

interface ContractorPayment {
  id: string;
  contractor: { name: string; id: string };
  amount: number;
  paymentDate: string;
  invoiceNumber?: string;
  description: string;
  status: 'paid' | 'pending' | 'scheduled';
  paymentMethod: 'ACH' | 'Check' | 'Wire';
}

export default function ContractorPayments() {
  const [payments, setPayments] = useState<ContractorPayment[]>([]);
  const [filter, setFilter] = useState<string>('all');

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP
    setPayments([
      {
        id: '1',
        contractor: { name: 'Alex Rivera', id: 'c1' },
        amount: 7500,
        paymentDate: '2024-02-01',
        invoiceNumber: 'INV-2024-001',
        description: 'Web development services - January 2024',
        status: 'paid',
        paymentMethod: 'ACH'
      },
      {
        id: '2',
        contractor: { name: 'Taylor Systems LLC', id: 'c2' },
        amount: 12000,
        paymentDate: '2024-02-01',
        invoiceNumber: 'INV-TS-456',
        description: 'Cloud infrastructure consulting',
        status: 'paid',
        paymentMethod: 'ACH'
      },
      {
        id: '3',
        contractor: { name: 'Jordan Martinez', id: 'c3' },
        amount: 5500,
        paymentDate: '2024-02-15',
        invoiceNumber: 'INV-2024-002',
        description: 'Marketing strategy consulting',
        status: 'scheduled',
        paymentMethod: 'ACH'
      },
      {
        id: '4',
        contractor: { name: 'Casey Design Co', id: 'c4' },
        amount: 8500,
        paymentDate: '2024-02-20',
        description: 'UI/UX design for mobile app',
        status: 'pending',
        paymentMethod: 'Check'
      },
      {
        id: '5',
        contractor: { name: 'Alex Rivera', id: 'c1' },
        amount: 8000,
        paymentDate: '2024-03-01',
        invoiceNumber: 'INV-2024-003',
        description: 'Web development services - February 2024',
        status: 'scheduled',
        paymentMethod: 'ACH'
      }
    ]);
  }, []);

  const filteredPayments = filter === 'all'
    ? payments
    : payments.filter(p => p.status === filter);

  const stats = {
    totalPaid: payments.filter(p => p.status === 'paid').reduce((sum, p) => sum + p.amount, 0),
    totalScheduled: payments.filter(p => p.status === 'scheduled').reduce((sum, p) => sum + p.amount, 0),
    pending: payments.filter(p => p.status === 'pending').length,
    totalPayments: payments.length
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-2 flex items-center gap-3">
            <DollarSign className="text-emerald-400" size={36} />
            Contractor Payments
          </h1>
          <p className="text-slate-400">Track and manage contractor payment details</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
          <StatCard
            title="Total Paid"
            value={`$${(stats.totalPaid / 1000).toFixed(1)}k`}
            icon={<CheckCircle className="text-green-400" />}
          />
          <StatCard
            title="Scheduled"
            value={`$${(stats.totalScheduled / 1000).toFixed(1)}k`}
            icon={<Calendar className="text-blue-400" />}
          />
          <StatCard
            title="Pending Approval"
            value={stats.pending}
            icon={<Clock className="text-yellow-400" />}
          />
          <StatCard
            title="Total Payments"
            value={stats.totalPayments}
            icon={<FileText className="text-purple-400" />}
          />
        </div>

        {/* Filters */}
        <div className="bg-slate-900 rounded-lg p-6 mb-6 border border-slate-800">
          <div className="flex gap-2">
            {['all', 'paid', 'scheduled', 'pending'].map(status => (
              <button
                key={status}
                onClick={() => setFilter(status)}
                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                  filter === status
                    ? 'bg-blue-600 text-white'
                    : 'bg-slate-800 text-slate-300 hover:bg-slate-700'
                }`}
              >
                {status.charAt(0).toUpperCase() + status.slice(1)}
              </button>
            ))}
          </div>
          <div className="mt-4 text-slate-400">
            Showing {filteredPayments.length} payment{filteredPayments.length !== 1 ? 's' : ''}
          </div>
        </div>

        {/* Payments List */}
        <div className="space-y-4">
          {filteredPayments.map(payment => (
            <PaymentCard key={payment.id} payment={payment} />
          ))}
        </div>
      </div>
    </div>
  );
}

function StatCard({ title, value, icon }: {
  title: string;
  value: string | number;
  icon: React.ReactNode;
}) {
  return (
    <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
      <div className="flex items-start justify-between mb-4">
        <div className="text-slate-400 text-sm font-medium">{title}</div>
        {icon}
      </div>
      <div className="text-3xl font-bold">{value}</div>
    </div>
  );
}

function PaymentCard({ payment }: { payment: ContractorPayment }) {
  const statusConfig = {
    paid: {
      icon: <CheckCircle size={20} className="text-green-400" />,
      bg: 'bg-green-500/10',
      border: 'border-green-500/30',
      text: 'text-green-400'
    },
    scheduled: {
      icon: <Calendar size={20} className="text-blue-400" />,
      bg: 'bg-blue-500/10',
      border: 'border-blue-500/30',
      text: 'text-blue-400'
    },
    pending: {
      icon: <Clock size={20} className="text-yellow-400" />,
      bg: 'bg-yellow-500/10',
      border: 'border-yellow-500/30',
      text: 'text-yellow-400'
    }
  };

  const config = statusConfig[payment.status];

  return (
    <div className="bg-slate-900 rounded-lg p-6 border border-slate-800 hover:border-emerald-500/50 transition-colors">
      <div className="flex items-start justify-between mb-4">
        <div className="flex-1">
          <div className="flex items-center gap-3 mb-2">
            <h3 className="text-xl font-semibold">{payment.contractor.name}</h3>
            <span className={`px-3 py-1 rounded-full text-sm font-medium border ${config.bg} ${config.border} ${config.text} flex items-center gap-1`}>
              {config.icon}
              {payment.status.toUpperCase()}
            </span>
          </div>
          <p className="text-slate-400 mb-4">{payment.description}</p>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div>
              <div className="text-slate-400 text-sm mb-1">Amount</div>
              <div className="text-2xl font-bold text-emerald-400">
                ${payment.amount.toLocaleString()}
              </div>
            </div>

            <div>
              <div className="text-slate-400 text-sm mb-1">Payment Date</div>
              <div className="font-medium">{payment.paymentDate}</div>
            </div>

            <div>
              <div className="text-slate-400 text-sm mb-1">Payment Method</div>
              <div className="font-medium">{payment.paymentMethod}</div>
            </div>

            <div>
              <div className="text-slate-400 text-sm mb-1">Invoice Number</div>
              <div className="font-medium">{payment.invoiceNumber || 'N/A'}</div>
            </div>
          </div>
        </div>

        <button className="ml-4 px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg font-medium transition-colors">
          View Details
        </button>
      </div>
    </div>
  );
}
