import React from 'react';
import { useSelector } from 'react-redux';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/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 } = useSelector((state: RootState) => state.master);

  return (
    <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
      {zones.map((zone: any) => {
        return (
          <Card
            key={zone.id}
            className={`border-2 transition-all cursor-pointer ${selectedZone === zone.id ? 'border-re-red shadow-lg' : 'hover:border-red-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-re-red" />
                  <CardTitle className="text-lg">{zone.name.toUpperCase().endsWith('ZONE') ? zone.name : `${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">{zone.regionCount}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-slate-500">Regional Officers</span>
                  <Badge className="bg-purple-600">{zone.regionalOfficerCount}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-slate-500">ASMs</span>
                  <Badge className="bg-green-600">{zone.asmCount}</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>
  );
};
