import React from 'react';
import { useSelector } from 'react-redux';
import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card';
import { Badge } from '../../ui/badge';
import { Globe } from 'lucide-react';
import { RootState } from '../../../store';

interface ZonesOverviewProps {
  selectedZone: string;
  onZoneClick: (zoneId: string) => void;
}

export const ZonesOverview: React.FC<ZonesOverviewProps> = ({ selectedZone, onZoneClick }) => {
  const { zones, regionalOffices, asms } = useSelector((state: RootState) => state.master);

  return (
    <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
      {zones.map((zone: any) => {
        const zoneRegions = regionalOffices.filter((r: any) => r.zoneId === zone.id);
        const zoneASMs = asms.filter((a: any) => a.zoneId === zone.id);
        const totalRegionalOfficers = zoneRegions.reduce((sum: number, region: any) => sum + region.regionalOfficerCount, 0);

        return (
          <Card
            key={zone.id}
            className={`border-2 transition-all cursor-pointer ${selectedZone === zone.id ? 'border-amber-600 shadow-lg' : 'hover:border-amber-400'
              }`}
            onClick={() => onZoneClick(zone.id)}
          >
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Globe className="w-5 h-5 text-amber-600" />
                  <CardTitle className="text-lg">{zone.name} Zone</CardTitle>
                </div>
                <Badge variant="outline" className="text-xs">{zone.code}</Badge>
              </div>
            </CardHeader>
            <CardContent className="space-y-3 text-sm">
              <p className="text-slate-600 text-xs leading-relaxed mb-3">{zone.description}</p>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-slate-500">States</span>
                  <Badge variant="outline">{zone.states.length}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-slate-500">Regions</span>
                  <Badge className="bg-indigo-600">{zoneRegions.length}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-slate-500">Regional Officers</span>
                  <Badge className="bg-purple-600">{totalRegionalOfficers}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-slate-500">ASMs</span>
                  <Badge className="bg-green-600">{zoneASMs.length}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-slate-500">ZMs</span>
                  <Badge className="bg-blue-600">{zone.zmCount}</Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
};