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

import React from 'react';
import { useSelector } from 'react-redux';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { RootState } from '@/store';

interface ZMDialogProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  editingZMId: string | null;
  zmManagerId: string;
  setZmManagerId: (id: string) => void;
  zmStatus: 'active' | 'inactive';
  setZmStatus: (status: 'active' | 'inactive') => void;
  selectedZone: string;
  setSelectedZone: (id: string) => void;
  selectedRegions: string[];
  setSelectedRegions: (regions: string[]) => void;
  onSave: () => void;
  userAssignedData: any[];
}

export const ZMDialog: React.FC<ZMDialogProps> = ({
  isOpen, onOpenChange, editingZMId, zmManagerId, setZmManagerId,
  zmStatus, setZmStatus, selectedZone, setSelectedZone,
  selectedRegions, setSelectedRegions, onSave,
  userAssignedData
}) => {
  const { zones, regionalOffices } = useSelector((state: RootState) => state.master);

  const filteredZMUsers = userAssignedData.filter(u => {
    const roles = u.allRoles || [];
    return roles.some((r: string) => {
      const roleStr = (r || '').toUpperCase();
      return ['ZM', 'ZONAL MANAGER', 'ZBH', 'ZONE BUSINESS HEAD', 'RM', 'RBM', 'REGIONAL MANAGER'].includes(roleStr) || 
             roleStr.includes('ZONAL') || roleStr.includes('REGIONAL');
    });
  });

  const availableRegions = regionalOffices.filter(r => r.zoneId === selectedZone);

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{editingZMId ? 'Edit' : 'Add'} Zonal Manager</DialogTitle>
          <DialogDescription>Assign Zonal Manager to Regions within a Zone</DialogDescription>
        </DialogHeader>
        <div className="space-y-6">
          <div className="border-b border-slate-100 pb-4">
            <Label>Select Zonal Manager User <span className="text-red-500">*</span></Label>
            <Select
              value={zmManagerId}
              onValueChange={(value) => {
                setZmManagerId(value);
                const selectedUser = userAssignedData.find(u => u.id === value);
                if (selectedUser) {
                  if (selectedUser.zoneId) setSelectedZone(selectedUser.zoneId);
                  if (selectedUser.assignedRegionIds) setSelectedRegions(selectedUser.assignedRegionIds);
                }
              }}
              disabled={!!editingZMId}
            >
              <SelectTrigger className="mt-2 w-full text-slate-900 border-slate-200">
                <SelectValue placeholder="Select ZM User" />
              </SelectTrigger>
              <SelectContent className="max-h-60">
                {filteredZMUsers.map((user) => (
                  <SelectItem key={user.id} value={user.id}>
                    <div className="flex flex-col text-left">
                      <span className="font-medium text-slate-900">{user.name}</span>
                      <span className="text-xs text-slate-500">{user.email}</span>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div>
            <Label>Managed Zone <span className="text-red-500">*</span></Label>
            <Select value={selectedZone} onValueChange={(value) => {
              setSelectedZone(value);
              setSelectedRegions([]);
            }}>
              <SelectTrigger className="mt-2">
                <SelectValue placeholder="Select zone" />
              </SelectTrigger>
              <SelectContent>
                {zones.map((z) => (
                  <SelectItem key={z.id} value={z.id}>{z.name}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {selectedZone && (
            <div>
              <Label className="mb-2 block">Assigned Regions <span className="text-red-500">*</span></Label>
              <div className="border border-slate-200 rounded-lg p-4 bg-slate-50/50 max-h-60 overflow-y-auto">
                <div className="grid grid-cols-1 gap-3">
                  {availableRegions.map((region) => (
                    <div key={region.id} className="flex items-center space-x-3 p-2 rounded hover:bg-white transition-colors">
                      <Checkbox
                        id={`region-${region.id}`}
                        checked={selectedRegions.includes(region.id)}
                        onCheckedChange={(checked) => {
                          if (checked) {
                            setSelectedRegions([...selectedRegions, region.id]);
                          } else {
                            setSelectedRegions(selectedRegions.filter(id => id !== region.id));
                          }
                        }}
                      />
                      <label htmlFor={`region-${region.id}`} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer flex-1">
                        {region.name}
                        <span className="text-xs text-slate-500 block mt-1">
                          {region.code || 'No Code'}
                        </span>
                      </label>
                    </div>
                  ))}
                  {availableRegions.length === 0 && (
                    <p className="text-sm text-slate-500 italic text-center py-4">No regions found for this zone</p>
                  )}
                </div>
              </div>
            </div>
          )}

          <div>
            <Label>Status</Label>
            <Select value={zmStatus} onValueChange={(val: 'active' | 'inactive') => setZmStatus(val)}>
              <SelectTrigger className="mt-2">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="inactive">Inactive</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex gap-3 pt-6">
            <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
            <Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={onSave}>Save Zonal Manager</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};