import React, { useState, useEffect } from 'react';
import { Shield, Users, DollarSign, TrendingUp, Heart, Eye, Tooth } from 'lucide-react';

interface BenefitPlan {
  id: string;
  name: string;
  type: 'health' | 'dental' | 'vision' | '401k' | 'life';
  provider: string;
  enrolled: number;
  eligible: number;
  monthlyCost: number;
  status: 'active' | 'pending' | 'inactive';
}

export default function BenefitsOverview() {
  const [plans, setPlans] = useState<BenefitPlan[]>([]);
  const [stats, setStats] = useState({
    totalPlans: 8,
    activeEnrollments: 312,
    totalMonthly: 45600,
    participationRate: 78
  });

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP
    setPlans([
      {
        id: '1',
        name: 'Blue Shield PPO',
        type: 'health',
        provider: 'Blue Shield',
        enrolled: 98,
        eligible: 124,
        monthlyCost: 24500,
        status: 'active'
      },
      {
        id: '2',
        name: 'Delta Dental Plus',
        type: 'dental',
        provider: 'Delta Dental',
        enrolled: 87,
        eligible: 124,
        monthlyCost: 4350,
        status: 'active'
      },
      {
        id: '3',
        name: 'VSP Vision Care',
        type: 'vision',
        provider: 'VSP',
        enrolled: 76,
        eligible: 124,
        monthlyCost: 1520,
        status: 'active'
      },
      {
        id: '4',
        name: 'Company 401(k)',
        type: '401k',
        provider: 'Vanguard',
        enrolled: 112,
        eligible: 124,
        monthlyCost: 14800,
        status: 'active'
      },
      {
        id: '5',
        name: 'Life Insurance',
        type: 'life',
        provider: 'MetLife',
        enrolled: 104,
        eligible: 124,
        monthlyCost: 2080,
        status: 'active'
      }
    ]);
  }, []);

  const benefitIcons = {
    health: <Heart className="text-red-400" size={24} />,
    dental: <Tooth className="text-blue-400" size={24} />,
    vision: <Eye className="text-purple-400" size={24} />,
    '401k': <TrendingUp className="text-emerald-400" size={24} />,
    life: <Shield className="text-yellow-400" size={24} />
  };

  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">
            <Shield className="text-blue-400" size={36} />
            Benefits Overview
          </h1>
          <p className="text-slate-400">Company benefits plans and enrollment summary</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 Plans"
            value={stats.totalPlans}
            icon={<Shield className="text-blue-400" />}
            trend="5 active"
          />
          <StatCard
            title="Active Enrollments"
            value={stats.activeEnrollments}
            icon={<Users className="text-emerald-400" />}
            trend="Across all plans"
          />
          <StatCard
            title="Monthly Cost"
            value={`$${(stats.totalMonthly / 1000).toFixed(1)}k`}
            icon={<DollarSign className="text-purple-400" />}
            trend="Company contribution"
          />
          <StatCard
            title="Participation"
            value={`${stats.participationRate}%`}
            icon={<TrendingUp className="text-yellow-400" />}
            trend="Eligible employees"
          />
        </div>

        {/* Benefits Plans */}
        <div className="space-y-4">
          {plans.map(plan => (
            <div
              key={plan.id}
              className="bg-slate-900 rounded-lg p-6 border border-slate-800 hover:border-blue-500/50 transition-colors"
            >
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-start gap-4">
                  <div className="p-3 bg-slate-800 rounded-lg">
                    {benefitIcons[plan.type]}
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold mb-1">{plan.name}</h3>
                    <div className="text-slate-400">{plan.provider}</div>
                  </div>
                </div>
                <StatusBadge status={plan.status} />
              </div>

              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div>
                  <div className="text-slate-400 text-sm mb-1">Enrollment</div>
                  <div className="text-2xl font-bold">
                    {plan.enrolled}/{plan.eligible}
                  </div>
                  <div className="text-sm text-slate-500">
                    {((plan.enrolled / plan.eligible) * 100).toFixed(0)}% enrolled
                  </div>
                </div>

                <div>
                  <div className="text-slate-400 text-sm mb-1">Monthly Cost</div>
                  <div className="text-2xl font-bold text-emerald-400">
                    ${(plan.monthlyCost / 1000).toFixed(1)}k
                  </div>
                  <div className="text-sm text-slate-500">
                    ${(plan.monthlyCost / plan.enrolled).toFixed(0)}/employee
                  </div>
                </div>

                <div>
                  <div className="text-slate-400 text-sm mb-1">Plan Type</div>
                  <div className="text-lg font-semibold capitalize">{plan.type}</div>
                </div>

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

              {/* Enrollment Progress Bar */}
              <div className="mt-4 pt-4 border-t border-slate-800">
                <div className="flex items-center justify-between text-sm mb-2">
                  <span className="text-slate-400">Enrollment Progress</span>
                  <span className="text-slate-300">{plan.enrolled} of {plan.eligible} employees</span>
                </div>
                <div className="w-full bg-slate-800 rounded-full h-2">
                  <div
                    className="bg-blue-500 h-2 rounded-full transition-all"
                    style={{ width: `${(plan.enrolled / plan.eligible) * 100}%` }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Cost Breakdown */}
        <div className="mt-6 bg-slate-900 rounded-lg p-6 border border-slate-800">
          <h2 className="text-xl font-semibold mb-4">Monthly Cost Breakdown</h2>
          <div className="space-y-3">
            {plans.map(plan => (
              <div key={plan.id} className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  {benefitIcons[plan.type]}
                  <span>{plan.name}</span>
                </div>
                <span className="font-semibold">${plan.monthlyCost.toLocaleString()}</span>
              </div>
            ))}
            <div className="flex items-center justify-between pt-3 border-t border-slate-800 text-lg font-bold">
              <span>Total Monthly</span>
              <span className="text-emerald-400">${stats.totalMonthly.toLocaleString()}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StatCard({ title, value, icon, trend }: {
  title: string;
  value: number | string;
  icon: React.ReactNode;
  trend: string;
}) {
  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>
  );
}

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

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