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

interface EmployeeStats {
  total: number;
  active: number;
  onboarding: number;
  terminated: number;
}

interface PayrollSummary {
  lastPayroll: string;
  totalPaid: number;
  nextPayDate: string;
  employeesInNext: number;
}

export default function EmployeeDashboard() {
  const [stats, setStats] = useState<EmployeeStats>({
    total: 0,
    active: 0,
    onboarding: 0,
    terminated: 0
  });

  const [payroll, setPayroll] = useState<PayrollSummary>({
    lastPayroll: '2024-02-01',
    totalPaid: 0,
    nextPayDate: '2024-02-15',
    employeesInNext: 0
  });

  const [departments, setDepartments] = useState([
    { name: 'Engineering', count: 45, avgSalary: 125000 },
    { name: 'Sales', count: 32, avgSalary: 95000 },
    { name: 'Marketing', count: 18, avgSalary: 85000 },
    { name: 'Operations', count: 22, avgSalary: 75000 },
  ]);

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP tools
    setStats({
      total: 127,
      active: 124,
      onboarding: 3,
      terminated: 8
    });

    setPayroll({
      lastPayroll: '2024-02-01',
      totalPaid: 387500,
      nextPayDate: '2024-02-15',
      employeesInNext: 124
    });
  }, []);

  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-blue-400" size={36} />
            Employee Dashboard
          </h1>
          <p className="text-slate-400">Company-wide headcount and payroll overview</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <StatCard
            title="Total Employees"
            value={stats.total}
            icon={<Users className="text-blue-400" />}
            trend="+5 this month"
          />
          <StatCard
            title="Active"
            value={stats.active}
            icon={<TrendingUp className="text-green-400" />}
            trend={`${((stats.active / stats.total) * 100).toFixed(1)}% active`}
          />
          <StatCard
            title="Onboarding"
            value={stats.onboarding}
            icon={<Clock className="text-yellow-400" />}
            trend="3 pending"
          />
          <StatCard
            title="Last Payroll"
            value={`$${(payroll.totalPaid / 1000).toFixed(0)}k`}
            icon={<DollarSign className="text-emerald-400" />}
            trend={payroll.lastPayroll}
          />
        </div>

        {/* Main Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Department Breakdown */}
          <div className="lg:col-span-2 bg-slate-900 rounded-lg p-6 border border-slate-800">
            <h2 className="text-xl font-semibold mb-4 flex items-center justify-between">
              Department Breakdown
              <button className="text-sm text-slate-400 hover:text-slate-200 flex items-center gap-1">
                <Filter size={16} />
                Filter
              </button>
            </h2>
            <div className="space-y-4">
              {departments.map((dept, idx) => (
                <div
                  key={idx}
                  className="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg hover:bg-slate-800 transition-colors"
                >
                  <div className="flex-1">
                    <div className="font-medium text-slate-100">{dept.name}</div>
                    <div className="text-sm text-slate-400">{dept.count} employees</div>
                  </div>
                  <div className="text-right">
                    <div className="font-semibold text-slate-100">
                      ${(dept.avgSalary / 1000).toFixed(0)}k
                    </div>
                    <div className="text-sm text-slate-400">avg salary</div>
                  </div>
                  <div className="ml-4 w-24 bg-slate-700 rounded-full h-2">
                    <div
                      className="bg-blue-500 h-2 rounded-full"
                      style={{ width: `${(dept.count / stats.total) * 100}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Upcoming Payroll */}
          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
            <h2 className="text-xl font-semibold mb-4">Next Payroll</h2>
            <div className="space-y-4">
              <div className="p-4 bg-blue-500/10 border border-blue-500/20 rounded-lg">
                <div className="text-sm text-blue-400 mb-1">Pay Date</div>
                <div className="text-2xl font-bold">{payroll.nextPayDate}</div>
              </div>
              <div className="p-4 bg-slate-800/50 rounded-lg">
                <div className="text-sm text-slate-400 mb-1">Employees</div>
                <div className="text-xl font-semibold">{payroll.employeesInNext}</div>
              </div>
              <div className="p-4 bg-slate-800/50 rounded-lg">
                <div className="text-sm text-slate-400 mb-1">Est. Total</div>
                <div className="text-xl font-semibold text-emerald-400">
                  ${(payroll.totalPaid / 1000).toFixed(0)}k
                </div>
              </div>
              <button className="w-full py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-colors">
                View Payroll Details
              </button>
            </div>
          </div>
        </div>

        {/* Quick Actions */}
        <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
          <button className="p-4 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-lg text-center transition-colors">
            <Users size={24} className="mx-auto mb-2 text-blue-400" />
            <div className="text-sm font-medium">Add Employee</div>
          </button>
          <button className="p-4 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-lg text-center transition-colors">
            <DollarSign size={24} className="mx-auto mb-2 text-emerald-400" />
            <div className="text-sm font-medium">Run Payroll</div>
          </button>
          <button className="p-4 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-lg text-center transition-colors">
            <Search size={24} className="mx-auto mb-2 text-purple-400" />
            <div className="text-sm font-medium">Search</div>
          </button>
          <button className="p-4 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-lg text-center transition-colors">
            <TrendingUp size={24} className="mx-auto mb-2 text-yellow-400" />
            <div className="text-sm font-medium">Reports</div>
          </button>
        </div>
      </div>
    </div>
  );
}

interface StatCardProps {
  title: string;
  value: number | string;
  icon: React.ReactNode;
  trend: string;
}

function StatCard({ title, value, icon, trend }: StatCardProps) {
  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 mb-2">{value}</div>
      <div className="text-sm text-slate-500">{trend}</div>
    </div>
  );
}
