Dealer_Onboard_Frontend/src/features/master/components/ZoneDetails.tsx

import React from 'react';
import { useSelector } from 'react-redux';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Label } from '@/components/ui/label';
import { Globe, Plus, Edit2, Mail, Users, Shield } 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)}
                      className="h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"
                    >
                      <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 border-transparent bg-secondary text-secondary-foreground"
                      >
                        {state}
                      </Badge>
                    ))}
                  </div>
                </div>

                {zone.zonalBusinessHead && (
                  <div className="border-t pt-3">
                    <Label className="text-xs text-slate-600 mb-2 block">
                      Zonal Business Head (ZBH)
                    </Label>
                    <div className="bg-amber-50 border border-amber-100 rounded-lg p-3 space-y-2">
                      <div className="flex items-center gap-2">
                        <Shield className="w-4 h-4 text-amber-600" />
                        <span className="text-sm font-semibold text-slate-900">{zone.zonalBusinessHead.name}</span>
                        <Badge className="bg-amber-600 text-white text-[10px] ml-auto">ZBH</Badge>
                      </div>
                      
                      <div className="flex items-center gap-2 ml-6 text-slate-600">
                        <Mail className="w-3 h-3" />
                        <span className="text-xs">{zone.zonalBusinessHead.email}</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.regions && zm.regions.length > 0 && (
                            <div className="ml-6 mt-2">
                              <Label className="text-xs text-slate-500 mb-1 block">
                                Managed Regions ({zm.regions.length})
                              </Label>
                              <div className="flex flex-wrap gap-1">
                                {zm.regions.map((region: string, rIdx: number) => (
                                  <Badge 
                                    key={rIdx} 
                                    variant="outline" 
                                    className="text-xs bg-white text-foreground"
                                  >
                                    <Globe className="w-2.5 h-2.5 mr-1" />
                                    {region}
                                  </Badge>
                                ))}
                              </div>
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
};