Dealer_Onboard_Frontend/src/components/applications/MasterPage/ZoneDetails.tsx

import React from 'react';
import { useSelector } from 'react-redux';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card';
import { Button } from '../../ui/button';
import { Badge } from '../../ui/badge';
import { ScrollArea } from '../../ui/scroll-area';
import { Label } from '../../ui/label';
import { Globe, Plus, Edit2, UserCog, Mail, Users, MapPin } from 'lucide-react';
import { RootState } from '../../../store';

interface ZoneDetailsProps {
  selectedZone: string;
  onAddZone: () => void;
  onEditZone: (zone: any) => void;
}

export const ZoneDetails: React.FC<ZoneDetailsProps> = ({ selectedZone, onAddZone, onEditZone }) => {
  const { zones } = useSelector((state: RootState) => state.master);

  const filteredZones = zones.filter(z => selectedZone === 'all' || z.id === selectedZone);

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Zone Details</CardTitle>
            <CardDescription>Geographical coverage and state mappings for each zone</CardDescription>
          </div>
          <Button onClick={onAddZone} className="bg-amber-600 hover:bg-amber-700">
            <Plus className="w-4 h-4 mr-2" />
            Add Zone
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-[400px]">
          <div className="space-y-4">
            {filteredZones.map((zone) => (
              <div key={zone.id} className="border rounded-lg p-5 space-y-4 bg-gradient-to-br from-white to-slate-50">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-lg flex items-center justify-center shadow-md">
                      <Globe className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="text-slate-900">{zone.name}</h3>
                      <p className="text-slate-500 text-sm">{zone.code}</p>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" onClick={() => onEditZone(zone)}>
                      <Edit2 className="w-4 h-4" />
                    </Button>
                  </div>
                </div>

                {zone.description && (
                  <div className="bg-slate-50 rounded-lg p-3">
                    <p className="text-sm text-slate-600">{zone.description}</p>
                  </div>
                )}

                <div>
                  <Label className="text-xs text-slate-600 mb-2 block">States Covered ({zone.states.length})</Label>
                  <div className="flex flex-wrap gap-1">
                    {zone.states.map((state: string, idx: number) => (
                      <Badge key={idx} variant="secondary" className="text-xs">
                        {state}
                      </Badge>
                    ))}
                  </div>
                </div>

                {zone.zonalBusinessHead && zone.zonalBusinessHead.name && (
                  <div className="border-t pt-3">
                    <Label className="text-xs text-slate-600 mb-2 block">Zone Business Head (ZBH)</Label>
                    <div className="bg-amber-50 rounded-lg p-3 space-y-1">
                      <div className="flex items-center gap-2">
                        <UserCog className="w-4 h-4 text-amber-600" />
                        <span className="text-sm text-slate-900">{zone.zonalBusinessHead.name}</span>
                      </div>
                      {zone.zonalBusinessHead.email && (
                        <div className="flex items-center gap-2 ml-6">
                          <Mail className="w-3 h-3 text-slate-400" />
                          <span className="text-xs text-slate-600">{zone.zonalBusinessHead.email}</span>
                        </div>
                      )}
                      {zone.zonalBusinessHead.phone && (
                        <div className="flex items-center gap-2 ml-6">
                          <span className="text-xs text-slate-600">{zone.zonalBusinessHead.phone}</span>
                        </div>
                      )}
                    </div>
                  </div>
                )}

                {zone.zonalManagers && zone.zonalManagers.length > 0 && (
                  <div className="border-t pt-3">
                    <Label className="text-xs text-slate-600 mb-2 block">
                      Zonal Managers ({zone.zonalManagers.length})
                    </Label>
                    <div className="space-y-2">
                      {zone.zonalManagers.map((zm: any, idx: number) => (
                        <div key={idx} className="bg-slate-50 rounded-lg p-3 space-y-2">
                          <div className="flex items-center gap-2">
                            <Users className="w-4 h-4 text-slate-600" />
                            <span className="text-sm text-slate-900">{zm.name}</span>
                            <Badge variant="outline" className="text-xs ml-auto">ZM-{idx + 1}</Badge>
                          </div>
                          {zm.email && (
                            <div className="flex items-center gap-2 ml-6">
                              <Mail className="w-3 h-3 text-slate-400" />
                              <span className="text-xs text-slate-600">{zm.email}</span>
                            </div>
                          )}
                          {zm.phone && (
                            <div className="flex items-center gap-2 ml-6">
                              <span className="text-xs text-slate-600">{zm.phone}</span>
                            </div>
                          )}
                          {zm.districts && zm.districts.length > 0 && (
                            <div className="ml-6 mt-2">
                              <Label className="text-xs text-slate-500 mb-1 block">
                                Assigned Districts ({zm.districts.length})
                              </Label>
                              <div className="flex flex-wrap gap-1">
                                {zm.districts.map((district: string, dIdx: number) => (
                                  <Badge key={dIdx} variant="outline" className="text-xs bg-white">
                                    <MapPin className="w-2.5 h-2.5 mr-1" />
                                    {district}
                                  </Badge>
                                ))}
                              </div>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
};