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

interface Contractor {
  id: string;
  name: string;
  email: string;
  type: '1099' | 'corp-to-corp';
  status: 'active' | 'inactive';
  totalPaid: number;
  lastPayment?: { date: string; amount: number };
  startDate: string;
}

export default function ContractorDashboard() {
  const [contractors, setContractors] = useState<Contractor[]>([]);

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP
    setContractors([
      {
        id: '1',
        name: 'Alex Rivera',
        email: 'alex.r@freelance.com',
        type: '1099',
        status: 'active',
        totalPaid: 87500,
        lastPayment: { date: '2024-02-01', amount: 7500 },
        startDate: '2023-06-15'
      },
      {
        id: '2',
        name: 'Taylor Systems LLC',
        email: 'contact@taylorsys.com',
        type: 'corp-to-corp',
        status: 'active',
        totalPaid: 142000,
        lastPayment: { date: '2024-02-01', amount: 12000 },
        startDate: '2023-01-10'
      },
      {
        id: '3',
        name: 'Jordan Martinez',
        email: 'jordan.m@consultant.com',
        type: '1099',
        status: 'active',
        totalPaid: 65000,
        lastPayment: { date: '2024-01-31', amount: 5500 },
        startDate: '2023-09-01'
      },
      {
        id: '4',
        name: 'Casey Design Co',
        email: 'casey@designco.com',
        type: 'corp-to-corp',
        status: 'inactive',
        totalPaid: 28000,
        startDate: '2023-03-20'
      }
    ]);
  }, []);

  const stats = {
    total: contractors.length,
    active: contractors.filter(c => c.status === 'active').length,
    totalPaid: contractors.reduce((sum, c) => sum + c.totalPaid, 0),
    avgPayment: contractors.reduce((sum, c) => sum + c.totalPaid, 0) / contractors.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">
            <Users className="text-orange-400" size={36} />
            Contractor Dashboard
          </h1>
          <p className="text-slate-400">Manage contractors and track payments</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <StatCard
            title="Total Contractors"
            value={stats.total}
            icon={<Users className="text-blue-400" />}
          />
          <StatCard
            title="Active"
            value={stats.active}
            icon={<TrendingUp className="text-green-400" />}
          />
          <StatCard
            title="Total Paid YTD"
            value={`$${(stats.totalPaid / 1000).toFixed(0)}k`}
            icon={<DollarSign className="text-emerald-400" />}
          />
          <StatCard
            title="Avg per Contractor"
            value={`$${(stats.avgPayment / 1000).toFixed(0)}k`}
            icon={<FileText className="text-purple-400" />}
          />
        </div>

        {/* Contractors List */}
        <div className="space-y-4">
          {contractors.map(contractor => (
            <ContractorCard key={contractor.id} contractor={contractor} />
          ))}
        </div>
      </div>
    </div>
  );
}

function StatCard({ title, value, icon }: {
  title: string;
  value: number | string;
  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 ContractorCard({ contractor }: { contractor: Contractor }) {
  const initials = contractor.name.split(' ').map(n => n[0]).join('');

  return (
    <div className="bg-slate-900 rounded-lg p-6 border border-slate-800 hover:border-orange-500/50 transition-colors">
      <div className="flex items-start justify-between">
        <div className="flex items-start gap-4 flex-1">
          <div className="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-600 rounded-full flex items-center justify-center text-xl font-bold">
            {initials}
          </div>
          <div className="flex-1">
            <div className="flex items-center gap-3 mb-2">
              <h3 className="text-xl font-semibold">{contractor.name}</h3>
              <StatusBadge status={contractor.status} />
              <TypeBadge type={contractor.type} />
            </div>
            <div className="text-slate-400 mb-4">{contractor.email}</div>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              <div>
                <div className="text-slate-400 text-sm mb-1">Total Paid</div>
                <div className="text-xl font-semibold text-emerald-400">
                  ${contractor.totalPaid.toLocaleString()}
                </div>
              </div>

              <div>
                <div className="text-slate-400 text-sm mb-1">Last Payment</div>
                <div className="font-medium">
                  {contractor.lastPayment
                    ? `$${contractor.lastPayment.amount.toLocaleString()}`
                    : 'No payments'}
                </div>
                {contractor.lastPayment && (
                  <div className="text-xs text-slate-500">{contractor.lastPayment.date}</div>
                )}
              </div>

              <div>
                <div className="text-slate-400 text-sm mb-1">Start Date</div>
                <div className="font-medium">{contractor.startDate}</div>
              </div>

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

function StatusBadge({ status }: { status: string }) {
  const colors = {
    active: 'bg-green-500/20 text-green-400 border-green-500/30',
    inactive: 'bg-slate-500/20 text-slate-400 border-slate-500/30'
  };

  return (
    <span className={`px-2 py-1 rounded text-xs font-medium border ${colors[status as keyof typeof colors]}`}>
      {status.toUpperCase()}
    </span>
  );
}

function TypeBadge({ type }: { type: string }) {
  return (
    <span className="px-2 py-1 rounded text-xs font-medium bg-blue-500/20 text-blue-400 border border-blue-500/30">
      {type}
    </span>
  );
}
