import React, { useState, useEffect } from 'react';
import { FileText, DollarSign, MapPin, Building } from 'lucide-react';

interface TaxForm {
  id: string;
  formType: string;
  year: number;
  status: 'filed' | 'pending' | 'draft';
  filingDate?: string;
  jurisdiction: string;
  amount?: number;
}

interface TaxConfig {
  federal: {
    ein: string;
    filingStatus: string;
    withholdingAllowances: number;
  };
  state: Array<{
    state: string;
    taxId: string;
    rate: number;
    active: boolean;
  }>;
}

export default function TaxOverview() {
  const [config, setConfig] = useState<TaxConfig | null>(null);
  const [forms, setForms] = useState<TaxForm[]>([]);

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP
    setConfig({
      federal: {
        ein: '12-3456789',
        filingStatus: 'Corporation',
        withholdingAllowances: 0
      },
      state: [
        { state: 'CA', taxId: 'CA-123456789', rate: 6.5, active: true },
        { state: 'NY', taxId: 'NY-987654321', rate: 7.1, active: true },
        { state: 'TX', taxId: 'TX-555555555', rate: 0, active: false }
      ]
    });

    setForms([
      {
        id: '1',
        formType: 'W-2',
        year: 2024,
        status: 'pending',
        jurisdiction: 'Federal',
        amount: 4250000
      },
      {
        id: '2',
        formType: '941',
        year: 2024,
        status: 'filed',
        filingDate: '2024-01-31',
        jurisdiction: 'Federal',
        amount: 112000
      },
      {
        id: '3',
        formType: 'DE-9',
        year: 2024,
        status: 'filed',
        filingDate: '2024-01-31',
        jurisdiction: 'California',
        amount: 42000
      },
      {
        id: '4',
        formType: 'NYS-45',
        year: 2024,
        status: 'filed',
        filingDate: '2024-02-01',
        jurisdiction: 'New York',
        amount: 38500
      },
      {
        id: '5',
        formType: '940',
        year: 2023,
        status: 'filed',
        filingDate: '2024-01-31',
        jurisdiction: 'Federal',
        amount: 28000
      }
    ]);
  }, []);

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

  const stats = {
    totalFiled: forms.filter(f => f.status === 'filed').length,
    totalPending: forms.filter(f => f.status === 'pending').length,
    activeStates: config.state.filter(s => s.active).length,
    totalTaxes: forms.reduce((sum, f) => sum + (f.amount || 0), 0)
  };

  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">
            <FileText className="text-red-400" size={36} />
            Tax Overview
          </h1>
          <p className="text-slate-400">Federal and state tax configuration and filing status</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <StatCard
            title="Forms Filed"
            value={stats.totalFiled}
            icon={<FileText className="text-green-400" />}
          />
          <StatCard
            title="Pending Forms"
            value={stats.totalPending}
            icon={<FileText className="text-yellow-400" />}
          />
          <StatCard
            title="Active States"
            value={stats.activeStates}
            icon={<MapPin className="text-blue-400" />}
          />
          <StatCard
            title="Total Taxes YTD"
            value={`$${(stats.totalTaxes / 1000).toFixed(0)}k`}
            icon={<DollarSign className="text-red-400" />}
          />
        </div>

        {/* Federal Configuration */}
        <div className="bg-slate-900 rounded-lg p-6 mb-6 border border-slate-800">
          <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
            <Building className="text-blue-400" />
            Federal Tax Configuration
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <div className="text-slate-400 text-sm mb-1">EIN</div>
              <div className="text-xl font-semibold">{config.federal.ein}</div>
            </div>
            <div>
              <div className="text-slate-400 text-sm mb-1">Filing Status</div>
              <div className="text-xl font-semibold">{config.federal.filingStatus}</div>
            </div>
            <div>
              <div className="text-slate-400 text-sm mb-1">Withholding Allowances</div>
              <div className="text-xl font-semibold">{config.federal.withholdingAllowances}</div>
            </div>
          </div>
        </div>

        {/* State Tax Configuration */}
        <div className="bg-slate-900 rounded-lg p-6 mb-6 border border-slate-800">
          <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
            <MapPin className="text-purple-400" />
            State Tax Configuration
          </h2>
          <div className="space-y-3">
            {config.state.map(state => (
              <div
                key={state.state}
                className={`p-4 rounded-lg border ${
                  state.active
                    ? 'bg-slate-800/50 border-slate-700'
                    : 'bg-slate-800/20 border-slate-800 opacity-60'
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className="flex-1 grid grid-cols-3 gap-4">
                    <div>
                      <div className="text-slate-400 text-sm">State</div>
                      <div className="font-semibold text-lg">{state.state}</div>
                    </div>
                    <div>
                      <div className="text-slate-400 text-sm">Tax ID</div>
                      <div className="font-medium">{state.taxId}</div>
                    </div>
                    <div>
                      <div className="text-slate-400 text-sm">Tax Rate</div>
                      <div className="font-medium">{state.rate}%</div>
                    </div>
                  </div>
                  <div>
                    <span
                      className={`px-3 py-1 rounded-full text-sm font-medium ${
                        state.active
                          ? 'bg-green-500/20 text-green-400 border border-green-500/30'
                          : 'bg-slate-500/20 text-slate-400 border border-slate-500/30'
                      }`}
                    >
                      {state.active ? 'Active' : 'Inactive'}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Tax Forms */}
        <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">Tax Forms</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">Form Type</th>
                  <th className="px-6 py-4 text-left text-sm font-medium text-slate-400">Year</th>
                  <th className="px-6 py-4 text-left text-sm font-medium text-slate-400">Jurisdiction</th>
                  <th className="px-6 py-4 text-right text-sm font-medium text-slate-400">Amount</th>
                  <th className="px-6 py-4 text-left text-sm font-medium text-slate-400">Filing Date</th>
                  <th className="px-6 py-4 text-center text-sm font-medium text-slate-400">Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800">
                {forms.map(form => (
                  <tr key={form.id} className="hover:bg-slate-800/30">
                    <td className="px-6 py-4 font-medium">{form.formType}</td>
                    <td className="px-6 py-4">{form.year}</td>
                    <td className="px-6 py-4">{form.jurisdiction}</td>
                    <td className="px-6 py-4 text-right font-medium">
                      {form.amount ? `$${form.amount.toLocaleString()}` : '-'}
                    </td>
                    <td className="px-6 py-4">{form.filingDate || '-'}</td>
                    <td className="px-6 py-4 text-center">
                      <StatusBadge status={form.status} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </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 StatusBadge({ status }: { status: string }) {
  const colors = {
    filed: 'bg-green-500/20 text-green-400 border-green-500/30',
    pending: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
    draft: 'bg-slate-500/20 text-slate-400 border-slate-500/30'
  };

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