import React, { useState, useEffect } from 'react';
import { User, Shield, Calendar, CheckCircle, XCircle } from 'lucide-react';

interface Enrollment {
  id: string;
  employee: { name: string; id: string };
  planName: string;
  planType: string;
  status: 'active' | 'pending' | 'cancelled';
  enrollmentDate: string;
  effectiveDate: string;
  monthlyCost: number;
  employeeCost: number;
  coverageLevel: string;
}

export default function BenefitsEnrollment() {
  const [enrollments, setEnrollments] = useState<Enrollment[]>([]);
  const [filter, setFilter] = useState<string>('all');

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP
    setEnrollments([
      {
        id: '1',
        employee: { name: 'Sarah Johnson', id: 'emp_001' },
        planName: 'Blue Shield PPO',
        planType: 'Health',
        status: 'active',
        enrollmentDate: '2024-01-15',
        effectiveDate: '2024-02-01',
        monthlyCost: 650,
        employeeCost: 125,
        coverageLevel: 'Employee + Family'
      },
      {
        id: '2',
        employee: { name: 'Michael Chen', id: 'emp_002' },
        planName: 'Delta Dental Plus',
        planType: 'Dental',
        status: 'active',
        enrollmentDate: '2024-01-15',
        effectiveDate: '2024-02-01',
        monthlyCost: 85,
        employeeCost: 25,
        coverageLevel: 'Employee Only'
      },
      {
        id: '3',
        employee: { name: 'Emily Rodriguez', id: 'emp_003' },
        planName: 'VSP Vision Care',
        planType: 'Vision',
        status: 'pending',
        enrollmentDate: '2024-02-10',
        effectiveDate: '2024-03-01',
        monthlyCost: 45,
        employeeCost: 15,
        coverageLevel: 'Employee + Spouse'
      },
      {
        id: '4',
        employee: { name: 'David Kim', id: 'emp_004' },
        planName: 'Company 401(k)',
        planType: '401k',
        status: 'active',
        enrollmentDate: '2024-01-01',
        effectiveDate: '2024-01-01',
        monthlyCost: 500,
        employeeCost: 500,
        coverageLevel: '5% contribution'
      },
      {
        id: '5',
        employee: { name: 'Lisa Wang', id: 'emp_005' },
        planName: 'Blue Shield PPO',
        planType: 'Health',
        status: 'cancelled',
        enrollmentDate: '2023-06-01',
        effectiveDate: '2023-07-01',
        monthlyCost: 425,
        employeeCost: 100,
        coverageLevel: 'Employee Only'
      }
    ]);
  }, []);

  const filteredEnrollments = filter === 'all'
    ? enrollments
    : enrollments.filter(e => e.status === filter);

  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-emerald-400" size={36} />
            Benefits Enrollment
          </h1>
          <p className="text-slate-400">Track employee benefit enrollments and status</p>
        </div>

        {/* Filters */}
        <div className="bg-slate-900 rounded-lg p-6 mb-6 border border-slate-800">
          <div className="flex gap-2">
            {['all', 'active', 'pending', 'cancelled'].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 {filteredEnrollments.length} enrollment{filteredEnrollments.length !== 1 ? 's' : ''}
          </div>
        </div>

        {/* Enrollments List */}
        <div className="space-y-4">
          {filteredEnrollments.map(enrollment => (
            <EnrollmentCard key={enrollment.id} enrollment={enrollment} />
          ))}
        </div>
      </div>
    </div>
  );
}

function EnrollmentCard({ enrollment }: { enrollment: Enrollment }) {
  const statusConfig = {
    active: {
      icon: <CheckCircle size={20} className="text-green-400" />,
      bg: 'bg-green-500/10',
      border: 'border-green-500/30',
      text: 'text-green-400'
    },
    pending: {
      icon: <Calendar size={20} className="text-yellow-400" />,
      bg: 'bg-yellow-500/10',
      border: 'border-yellow-500/30',
      text: 'text-yellow-400'
    },
    cancelled: {
      icon: <XCircle size={20} className="text-red-400" />,
      bg: 'bg-red-500/10',
      border: 'border-red-500/30',
      text: 'text-red-400'
    }
  };

  const config = statusConfig[enrollment.status];

  return (
    <div 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="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center font-bold">
            {enrollment.employee.name.split(' ').map(n => n[0]).join('')}
          </div>
          <div>
            <h3 className="text-xl font-semibold mb-1">{enrollment.employee.name}</h3>
            <div className="text-slate-400">{enrollment.planName} • {enrollment.planType}</div>
          </div>
        </div>
        <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}
          {enrollment.status.toUpperCase()}
        </span>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
        <div>
          <div className="text-slate-400 text-sm mb-1">Coverage Level</div>
          <div className="font-medium">{enrollment.coverageLevel}</div>
        </div>

        <div>
          <div className="text-slate-400 text-sm mb-1">Effective Date</div>
          <div className="font-medium">{enrollment.effectiveDate}</div>
        </div>

        <div>
          <div className="text-slate-400 text-sm mb-1">Employee Cost</div>
          <div className="font-medium text-yellow-400">
            ${enrollment.employeeCost}/mo
          </div>
        </div>

        <div>
          <div className="text-slate-400 text-sm mb-1">Total Cost</div>
          <div className="font-medium text-emerald-400">
            ${enrollment.monthlyCost}/mo
          </div>
        </div>
      </div>

      <div className="mt-4 pt-4 border-t border-slate-800 flex items-center justify-between">
        <div className="text-sm text-slate-400">
          Enrolled on {enrollment.enrollmentDate}
        </div>
        <button className="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-sm font-medium transition-colors">
          View Details
        </button>
      </div>
    </div>
  );
}
