import React from 'react';
import { Heart, Eye, Briefcase, Shield } from 'lucide-react';
import type { BenefitsPlan, BenefitsEnrollment } from '../../types/index.js';

interface BenefitsOverviewProps {
  plans?: BenefitsPlan[];
  enrollments?: BenefitsEnrollment[];
}

export const BenefitsOverview: React.FC<BenefitsOverviewProps> = ({
  plans = [],
  enrollments = [],
}) => {
  const activeEnrollments = enrollments.filter(e => e.status === 'ACTIVE');

  const getIconForType = (type: string) => {
    switch (type) {
      case 'HEALTH':
        return <Heart className="w-6 h-6" />;
      case 'DENTAL':
      case 'VISION':
        return <Eye className="w-6 h-6" />;
      case '401K':
        return <Briefcase className="w-6 h-6" />;
      default:
        return <Shield className="w-6 h-6" />;
    }
  };

  const getColorForType = (type: string) => {
    const colors: Record<string, string> = {
      HEALTH: 'bg-red-50 text-red-600 border-red-200',
      DENTAL: 'bg-blue-50 text-blue-600 border-blue-200',
      VISION: 'bg-purple-50 text-purple-600 border-purple-200',
      '401K': 'bg-green-50 text-green-600 border-green-200',
      FSA: 'bg-yellow-50 text-yellow-600 border-yellow-200',
      HSA: 'bg-orange-50 text-orange-600 border-orange-200',
      LIFE: 'bg-indigo-50 text-indigo-600 border-indigo-200',
      DISABILITY: 'bg-pink-50 text-pink-600 border-pink-200',
    };
    return colors[type] || 'bg-gray-50 text-gray-600 border-gray-200';
  };

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">Benefits Overview</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <div className="bg-blue-50 p-4 rounded-lg">
          <p className="text-sm text-gray-600">Total Plans</p>
          <p className="text-3xl font-bold text-blue-600">{plans.length}</p>
        </div>
        
        <div className="bg-green-50 p-4 rounded-lg">
          <p className="text-sm text-gray-600">Active Enrollments</p>
          <p className="text-3xl font-bold text-green-600">{activeEnrollments.length}</p>
        </div>
      </div>

      <div className="space-y-4">
        <h3 className="font-semibold text-lg">Available Plans</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {plans.map((plan) => {
            const enrollmentCount = enrollments.filter(e => 
              e.planId === plan.id && e.status === 'ACTIVE'
            ).length;

            return (
              <div
                key={plan.id}
                className={`border-2 rounded-lg p-4 ${getColorForType(plan.type)}`}
              >
                <div className="flex items-start justify-between mb-3">
                  <div className="flex items-center gap-2">
                    {getIconForType(plan.type)}
                    <div>
                      <h4 className="font-bold">{plan.name}</h4>
                      <p className="text-xs opacity-75">{plan.type}</p>
                    </div>
                  </div>
                  {plan.isActive && (
                    <span className="text-xs bg-white/50 px-2 py-1 rounded">
                      Active
                    </span>
                  )}
                </div>

                {plan.carrier && (
                  <p className="text-sm mb-2">Carrier: {plan.carrier}</p>
                )}

                {plan.planYear && (
                  <p className="text-sm mb-2">Plan Year: {plan.planYear}</p>
                )}

                <div className="grid grid-cols-2 gap-2 text-sm mt-3 pt-3 border-t border-current/20">
                  {plan.employeeCost !== undefined && (
                    <div>
                      <p className="text-xs opacity-75">Employee Cost</p>
                      <p className="font-bold">${plan.employeeCost}/mo</p>
                    </div>
                  )}
                  {plan.employerCost !== undefined && (
                    <div>
                      <p className="text-xs opacity-75">Employer Cost</p>
                      <p className="font-bold">${plan.employerCost}/mo</p>
                    </div>
                  )}
                </div>

                <div className="mt-3 pt-3 border-t border-current/20">
                  <p className="text-xs opacity-75">Enrollments</p>
                  <p className="font-bold">{enrollmentCount}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};
