import React, { useState, useMemo } from "react";
import { base44 } from "@/api/base44Client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Checkbox } from "@/components/ui/checkbox";
import { Calendar, Users, Check, Plus, X, Clock, MapPin, ChevronLeft, ChevronRight, AlertTriangle, RefreshCw, Search } from "lucide-react";
import { format, parseISO, isWithinInterval } from "date-fns";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/use-toast";

const convertTo12Hour = (time24) => {
  if (!time24) return '';
  const [hours, minutes] = time24.split(':');
  const hour = parseInt(hours);
  const ampm = hour >= 12 ? 'PM' : 'AM';
  const hour12 = hour % 12 || 12;
  return `${hour12}:${minutes} ${ampm}`;
};

const getInitials = (name) => {
  if (!name) return 'S';
  return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
};

const avatarColors = [
  'bg-blue-500',
  'bg-purple-500',
  'bg-green-500',
  'bg-orange-500',
  'bg-pink-500',
  'bg-indigo-500',
  'bg-teal-500',
  'bg-red-500',
];

// Helper to check if times overlap
const hasTimeConflict = (existingStart, existingEnd, newStart, newEnd, existingDate, newDate) => {
  // If different dates, no conflict
  if (existingDate !== newDate) return false;
  
  if (!existingStart || !existingEnd || !newStart || !newEnd) return false;
  
  const parseTime = (time) => {
    const [hours, minutes] = time.split(':').map(Number);
    return hours * 60 + minutes;
  };
  
  const existingStartMin = parseTime(existingStart);
  const existingEndMin = parseTime(existingEnd);
  const newStartMin = parseTime(newStart);
  const newEndMin = parseTime(newEnd);
  
  return (newStartMin < existingEndMin && newEndMin > existingStartMin);
};

export default function EventAssignmentModal({ open, onClose, order, onUpdate }) {
  const [selectedShiftIndex, setSelectedShiftIndex] = useState(0);
  const [selectedRoleIndex, setSelectedRoleIndex] = useState(0);
  const [selectedStaffIds, setSelectedStaffIds] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [swapMode, setSwapMode] = useState(null); // { employeeId, assignmentIndex }
  const queryClient = useQueryClient();
  const { toast } = useToast();

  const { data: allStaff = [] } = useQuery({
    queryKey: ['staff-for-assignment'],
    queryFn: () => base44.entities.Staff.list(),
    enabled: open,
  });

  const { data: allOrders = [] } = useQuery({
    queryKey: ['orders-for-conflict-check'],
    queryFn: () => base44.entities.Order.list(),
    enabled: open,
  });

  const updateOrderMutation = useMutation({
    mutationFn: (updatedOrder) => base44.entities.Order.update(order.id, updatedOrder),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['orders'] });
      if (onUpdate) onUpdate();
      setSelectedStaffIds([]);
      toast({
        title: "✅ Staff assigned successfully",
        description: "The order has been updated with new assignments.",
      });
    },
  });

  if (!order || !order.shifts_data || order.shifts_data.length === 0) {
    return null;
  }

  const currentShift = order.shifts_data[selectedShiftIndex];
  const currentRole = currentShift?.roles[selectedRoleIndex];

  if (!currentRole) return null;

  // Check for conflicts
  const getStaffConflicts = (staffId) => {
    const conflicts = [];
    
    allOrders.forEach(existingOrder => {
      if (existingOrder.id === order.id) return; // Skip current order
      if (!existingOrder.shifts_data) return;
      
      existingOrder.shifts_data.forEach(shift => {
        shift.roles.forEach(role => {
          if (!role.assignments) return;
          
          role.assignments.forEach(assignment => {
            if (assignment.employee_id === staffId) {
              const hasConflict = hasTimeConflict(
                role.start_time,
                role.end_time,
                currentRole.start_time,
                currentRole.end_time,
                existingOrder.event_date,
                order.event_date
              );
              
              if (hasConflict) {
                conflicts.push({
                  orderName: existingOrder.event_name,
                  role: role.service,
                  time: `${convertTo12Hour(role.start_time)} - ${convertTo12Hour(role.end_time)}`,
                  date: existingOrder.event_date
                });
              }
            }
          });
        });
      });
    });
    
    return conflicts;
  };

  // Role-based filtering
  const roleKeywords = {
    'bartender': ['bartender', 'bar'],
    'cook': ['cook', 'chef', 'kitchen'],
    'server': ['server', 'waiter', 'waitress'],
    'cashier': ['cashier', 'register'],
    'host': ['host', 'hostess', 'greeter'],
    'busser': ['busser', 'bus'],
    'dishwasher': ['dishwasher', 'dish'],
    'manager': ['manager', 'supervisor'],
  };

  const getRoleCategory = (roleName) => {
    const lowerRole = roleName.toLowerCase();
    for (const [category, keywords] of Object.entries(roleKeywords)) {
      if (keywords.some(keyword => lowerRole.includes(keyword))) {
        return category;
      }
    }
    return null;
  };

  const matchesRole = (staffPosition, requiredRole) => {
    const staffLower = (staffPosition || '').toLowerCase();
    const requiredLower = (requiredRole || '').toLowerCase();
    
    // Direct match
    if (staffLower.includes(requiredLower) || requiredLower.includes(staffLower)) {
      return true;
    }
    
    // Category match
    const staffCategory = getRoleCategory(staffPosition || '');
    const requiredCategory = getRoleCategory(requiredRole);
    
    return staffCategory && requiredCategory && staffCategory === requiredCategory;
  };

  const handleBulkAssign = () => {
    if (selectedStaffIds.length === 0) {
      toast({
        title: "No staff selected",
        description: "Please select staff members to assign.",
        variant: "destructive",
      });
      return;
    }

    const updatedOrder = { ...order };
    const assignments = updatedOrder.shifts_data[selectedShiftIndex].roles[selectedRoleIndex].assignments || [];
    
    // Check for conflicts
    const conflictingStaff = [];
    selectedStaffIds.forEach(staffId => {
      const conflicts = getStaffConflicts(staffId);
      if (conflicts.length > 0) {
        const staff = allStaff.find(s => s.id === staffId);
        conflictingStaff.push(staff?.employee_name);
      }
    });

    if (conflictingStaff.length > 0) {
      toast({
        title: "⚠️ Time Conflict Detected",
        description: `${conflictingStaff.join(', ')} ${conflictingStaff.length === 1 ? 'is' : 'are'} already assigned to overlapping shifts.`,
        variant: "destructive",
      });
      return;
    }

    const needed = parseInt(currentRole.count) || 0;
    const currentAssigned = assignments.length;
    const remaining = needed - currentAssigned;

    if (selectedStaffIds.length > remaining) {
      toast({
        title: "Too many selected",
        description: `Only ${remaining} more staff ${remaining === 1 ? 'is' : 'are'} needed.`,
        variant: "destructive",
      });
      return;
    }

    // Add all selected staff
    const newAssignments = selectedStaffIds.map(staffId => {
      const staff = allStaff.find(s => s.id === staffId);
      return {
        employee_id: staff.id,
        employee_name: staff.employee_name,
        position: currentRole.service,
        shift_date: order.event_date,
        shift_start: currentRole.start_time,
        shift_end: currentRole.end_time,
        location: currentShift.address || order.event_address,
        hub_location: order.hub_location,
      };
    });

    updatedOrder.shifts_data[selectedShiftIndex].roles[selectedRoleIndex].assignments = [
      ...assignments,
      ...newAssignments
    ];

    updateOrderMutation.mutate(updatedOrder);
  };

  const handleAssignStaff = (staffMember) => {
    const updatedOrder = { ...order };
    const assignments = updatedOrder.shifts_data[selectedShiftIndex].roles[selectedRoleIndex].assignments || [];
    
    // Check if already assigned
    if (assignments.some(a => a.employee_id === staffMember.id)) {
      toast({
        title: "Already assigned",
        description: `${staffMember.employee_name} is already assigned to this role.`,
        variant: "destructive",
      });
      return;
    }

    // Check for conflicts
    const conflicts = getStaffConflicts(staffMember.id);
    if (conflicts.length > 0) {
      toast({
        title: "⚠️ Time Conflict",
        description: `${staffMember.employee_name} is already assigned to ${conflicts[0].orderName} at ${conflicts[0].time}`,
        variant: "destructive",
      });
      return;
    }

    // Add new assignment
    const newAssignment = {
      employee_id: staffMember.id,
      employee_name: staffMember.employee_name,
      position: currentRole.service,
      shift_date: order.event_date,
      shift_start: currentRole.start_time,
      shift_end: currentRole.end_time,
      location: currentShift.address || order.event_address,
      hub_location: order.hub_location,
    };

    updatedOrder.shifts_data[selectedShiftIndex].roles[selectedRoleIndex].assignments = [
      ...assignments,
      newAssignment
    ];

    updateOrderMutation.mutate(updatedOrder);
  };

  const handleRemoveStaff = (employeeId) => {
    const updatedOrder = { ...order };
    const assignments = updatedOrder.shifts_data[selectedShiftIndex].roles[selectedRoleIndex].assignments || [];
    
    updatedOrder.shifts_data[selectedShiftIndex].roles[selectedRoleIndex].assignments = 
      assignments.filter(a => a.employee_id !== employeeId);

    updateOrderMutation.mutate(updatedOrder);
  };

  const handleSwapStaff = (newStaffMember) => {
    if (!swapMode) return;

    const updatedOrder = { ...order };
    const assignments = updatedOrder.shifts_data[selectedShiftIndex].roles[selectedRoleIndex].assignments || [];
    
    // Check for conflicts
    const conflicts = getStaffConflicts(newStaffMember.id);
    if (conflicts.length > 0) {
      toast({
        title: "⚠️ Time Conflict",
        description: `${newStaffMember.employee_name} is already assigned to ${conflicts[0].orderName} at ${conflicts[0].time}`,
        variant: "destructive",
      });
      return;
    }

    // Replace the assignment
    assignments[swapMode.assignmentIndex] = {
      employee_id: newStaffMember.id,
      employee_name: newStaffMember.employee_name,
      position: currentRole.service,
      shift_date: order.event_date,
      shift_start: currentRole.start_time,
      shift_end: currentRole.end_time,
      location: currentShift.address || order.event_address,
      hub_location: order.hub_location,
    };

    updatedOrder.shifts_data[selectedShiftIndex].roles[selectedRoleIndex].assignments = assignments;
    updateOrderMutation.mutate(updatedOrder);
    setSwapMode(null);
  };

  const assignments = currentRole.assignments || [];
  const needed = parseInt(currentRole.count) || 0;
  const assigned = assignments.length;
  const isFullyStaffed = assigned >= needed;

  // Filter staff by role and exclude already assigned
  const assignedIds = new Set(assignments.map(a => a.employee_id));
  const roleFilteredStaff = allStaff.filter(s => 
    matchesRole(s.position, currentRole.service) || 
    matchesRole(s.position_2, currentRole.service)
  );
  
  const availableStaff = roleFilteredStaff
    .filter(s => !assignedIds.has(s.id))
    .filter(s => {
      if (!searchTerm) return true;
      const lowerSearch = searchTerm.toLowerCase();
      return (
        s.employee_name?.toLowerCase().includes(lowerSearch) ||
        s.position?.toLowerCase().includes(lowerSearch) ||
        s.position_2?.toLowerCase().includes(lowerSearch)
      );
    });

  // Calculate total assignments across all roles in this shift
  let totalNeeded = 0;
  let totalAssigned = 0;
  currentShift.roles.forEach(role => {
    totalNeeded += parseInt(role.count) || 0;
    totalAssigned += role.assignments?.length || 0;
  });

  const toggleStaffSelection = (staffId) => {
    setSelectedStaffIds(prev => 
      prev.includes(staffId) 
        ? prev.filter(id => id !== staffId)
        : [...prev, staffId]
    );
  };

  const selectAll = () => {
    const remaining = needed - assigned;
    const selectableStaff = availableStaff.slice(0, remaining);
    setSelectedStaffIds(selectableStaff.map(s => s.id));
  };

  const deselectAll = () => {
    setSelectedStaffIds([]);
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
        <DialogHeader className="border-b pb-4">
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <DialogTitle className="text-2xl font-bold text-slate-900 mb-1">
                {order.event_name}
              </DialogTitle>
              <p className="text-sm text-slate-600">{order.client_business}</p>
            </div>
            <Badge 
              className={`${
                totalAssigned >= totalNeeded
                  ? 'bg-emerald-500 text-white border-0 animate-pulse' 
                  : 'bg-orange-500 text-white border-0'
              } font-semibold px-3 py-1 shadow-md`}
            >
              {totalAssigned >= totalNeeded ? (
                <>
                  <Check className="w-3 h-3 mr-1" />
                  Fully Staffed
                </>
              ) : (
                <>
                  <AlertTriangle className="w-3 h-3 mr-1" />
                  Needs Staff
                </>
              )}
            </Badge>
          </div>

          <div className="flex items-center gap-2 text-slate-700 mt-3">
            <Calendar className="w-4 h-4 text-blue-600" />
            <span className="text-sm font-medium">
              {order.event_date ? format(new Date(order.event_date), 'EEEE, MMMM d, yyyy') : 'No date'}
            </span>
          </div>

          {currentShift.address && (
            <div className="flex items-center gap-2 text-slate-700 mt-2">
              <MapPin className="w-4 h-4 text-blue-600" />
              <span className="text-sm">{currentShift.address}</span>
            </div>
          )}
        </DialogHeader>

        <div className="flex-1 overflow-y-auto py-4">
          {/* Staff Assignment Summary */}
          <div className="mb-6">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <Users className="w-5 h-5 text-purple-600" />
                <h3 className="font-semibold text-slate-900">Staff Assignment</h3>
              </div>
              <Badge 
                variant="outline" 
                className={`text-sm font-bold border-2 ${
                  totalAssigned >= totalNeeded 
                    ? 'border-emerald-500 text-emerald-700 bg-emerald-50' 
                    : 'border-orange-500 text-orange-700 bg-orange-50'
                }`}
              >
                {totalAssigned} / {totalNeeded}
              </Badge>
            </div>

            {totalAssigned >= totalNeeded && (
              <div className="mb-3 p-3 rounded-lg bg-gradient-to-r from-emerald-50 to-green-50 border-2 border-emerald-200">
                <div className="flex items-center gap-2 text-emerald-700 text-sm font-semibold">
                  <Check className="w-5 h-5" />
                  ✨ Fully staffed - All positions filled!
                </div>
              </div>
            )}
          </div>

          {/* Position Selection */}
          {currentShift.roles.length > 1 && (
            <div className="mb-6">
              <label className="text-sm font-semibold text-slate-700 mb-2 block">Select Position:</label>
              <Select 
                value={selectedRoleIndex.toString()} 
                onValueChange={(value) => {
                  setSelectedRoleIndex(parseInt(value));
                  setSelectedStaffIds([]);
                  setSwapMode(null);
                }}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {currentShift.roles.map((role, idx) => {
                    const roleAssigned = role.assignments?.length || 0;
                    const roleNeeded = parseInt(role.count) || 0;
                    const roleFilled = roleAssigned >= roleNeeded;
                    return (
                      <SelectItem key={idx} value={idx.toString()}>
                        <div className="flex items-center justify-between gap-4 w-full">
                          <span className="font-medium">{role.service}</span>
                          <Badge 
                            className={`${
                              roleFilled 
                                ? 'bg-emerald-100 text-emerald-700' 
                                : 'bg-orange-100 text-orange-700'
                            } text-xs font-bold ml-2`}
                          >
                            {roleAssigned}/{roleNeeded}
                          </Badge>
                        </div>
                      </SelectItem>
                    );
                  })}
                </SelectContent>
              </Select>
            </div>
          )}

          {/* Current Position Details */}
          <div className="mb-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200">
            <div className="flex items-center justify-between mb-3">
              <h4 className="font-bold text-slate-900 text-lg">{currentRole.service}</h4>
              <Badge 
                className={`${
                  assigned >= needed 
                    ? 'bg-emerald-500 text-white' 
                    : 'bg-orange-500 text-white'
                } font-bold px-3 py-1 text-base`}
              >
                {assigned}/{needed}
              </Badge>
            </div>
            
            {currentRole.start_time && (
              <div className="flex items-center gap-2 text-sm text-slate-700 font-medium">
                <Clock className="w-4 h-4 text-blue-600" />
                <span>
                  {convertTo12Hour(currentRole.start_time)} - {convertTo12Hour(currentRole.end_time)}
                </span>
              </div>
            )}
          </div>

          {/* Swap Mode Banner */}
          {swapMode && (
            <div className="mb-4 p-4 bg-purple-50 border-2 border-purple-300 rounded-xl">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <RefreshCw className="w-5 h-5 text-purple-600" />
                  <span className="font-semibold text-purple-900">
                    Swap Mode Active - Select replacement for {assignments[swapMode.assignmentIndex]?.employee_name}
                  </span>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setSwapMode(null)}
                  className="text-purple-600 hover:bg-purple-100"
                >
                  Cancel
                </Button>
              </div>
            </div>
          )}

          {/* Assigned Staff List */}
          {assignments.length > 0 && (
            <div className="mb-6">
              <h4 className="text-sm font-bold text-slate-700 mb-3 uppercase tracking-wide">✅ Assigned Staff:</h4>
              <div className="space-y-2">
                {assignments.map((assignment, idx) => {
                  const conflicts = getStaffConflicts(assignment.employee_id);
                  return (
                    <div 
                      key={idx}
                      className="flex items-center justify-between p-3 bg-white rounded-xl border-2 border-slate-200 hover:border-blue-300 transition-all shadow-sm"
                    >
                      <div className="flex items-center gap-3 flex-1">
                        <Avatar className={`w-10 h-10 ${avatarColors[idx % avatarColors.length]}`}>
                          <AvatarFallback className="text-white font-bold">
                            {getInitials(assignment.employee_name)}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <p className="font-bold text-slate-900">{assignment.employee_name}</p>
                          <p className="text-xs text-slate-500">{currentRole.service}</p>
                          {conflicts.length > 0 && (
                            <div className="flex items-center gap-1 mt-1">
                              <AlertTriangle className="w-3 h-3 text-red-500" />
                              <span className="text-xs text-red-600 font-medium">Time conflict detected</span>
                            </div>
                          )}
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => setSwapMode({ employeeId: assignment.employee_id, assignmentIndex: idx })}
                          className="text-purple-600 hover:bg-purple-50 border-purple-300"
                        >
                          <RefreshCw className="w-3 h-3 mr-1" />
                          Swap
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleRemoveStaff(assignment.employee_id)}
                          className="text-red-600 hover:text-red-700 hover:bg-red-50"
                        >
                          <X className="w-4 h-4" />
                        </Button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Add Staff Section */}
          {(assigned < needed || swapMode) && (
            <div>
              <div className="flex items-center justify-between mb-3">
                <h4 className="text-sm font-bold text-slate-700 uppercase tracking-wide">
                  {swapMode ? '🔄 Select Replacement:' : '➕ Add Staff:'}
                </h4>
                {!swapMode && availableStaff.length > 0 && (
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={selectAll}
                      disabled={needed - assigned === 0}
                    >
                      Select All ({Math.min(availableStaff.length, needed - assigned)})
                    </Button>
                    {selectedStaffIds.length > 0 && (
                      <>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={deselectAll}
                        >
                          Clear
                        </Button>
                        <Button
                          size="sm"
                          onClick={handleBulkAssign}
                          className="bg-blue-600 hover:bg-blue-700"
                        >
                          <Plus className="w-4 h-4 mr-1" />
                          Assign {selectedStaffIds.length}
                        </Button>
                      </>
                    )}
                  </div>
                )}
              </div>

              {/* Search */}
              <div className="mb-4">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400" />
                  <Input
                    placeholder="Search staff by name or position..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
                <p className="text-xs text-slate-500 mt-2">
                  Showing {availableStaff.length} {currentRole.service.toLowerCase()}(s)
                  {roleFilteredStaff.length !== allStaff.length && (
                    <span className="text-blue-600 font-medium"> (filtered by role)</span>
                  )}
                </p>
              </div>

              {availableStaff.length > 0 ? (
                <div className="space-y-2 max-h-80 overflow-y-auto pr-2">
                  {availableStaff.map((staff, idx) => {
                    const isSelected = selectedStaffIds.includes(staff.id);
                    const conflicts = getStaffConflicts(staff.id);
                    const hasConflict = conflicts.length > 0;
                    
                    return (
                      <div 
                        key={staff.id}
                        className={`flex items-center justify-between p-3 bg-white rounded-xl border-2 transition-all ${
                          hasConflict 
                            ? 'border-red-200 bg-red-50' 
                            : isSelected 
                            ? 'border-blue-400 bg-blue-50' 
                            : 'border-slate-200 hover:border-blue-300'
                        }`}
                      >
                        <div className="flex items-center gap-3 flex-1">
                          {!swapMode && (
                            <Checkbox
                              checked={isSelected}
                              onCheckedChange={() => toggleStaffSelection(staff.id)}
                              disabled={hasConflict}
                              className="border-2"
                            />
                          )}
                          <Avatar className={`w-10 h-10 ${avatarColors[idx % avatarColors.length]}`}>
                            <AvatarFallback className="text-white font-bold">
                              {getInitials(staff.employee_name)}
                            </AvatarFallback>
                          </Avatar>
                          <div className="flex-1 min-w-0">
                            <p className="font-bold text-slate-900 truncate">{staff.employee_name}</p>
                            <div className="flex items-center gap-2 flex-wrap">
                              <p className="text-xs text-slate-500">{staff.position || 'Staff Member'}</p>
                              {staff.position_2 && (
                                <Badge variant="outline" className="text-[10px]">{staff.position_2}</Badge>
                              )}
                            </div>
                            {hasConflict && (
                              <div className="flex items-center gap-1 mt-1">
                                <AlertTriangle className="w-3 h-3 text-red-500" />
                                <span className="text-xs text-red-600 font-medium">
                                  Conflict: {conflicts[0].orderName} ({conflicts[0].time})
                                </span>
                              </div>
                            )}
                          </div>
                        </div>
                        <Button
                          size="sm"
                          onClick={() => swapMode ? handleSwapStaff(staff) : handleAssignStaff(staff)}
                          disabled={hasConflict}
                          className={`${
                            swapMode 
                              ? 'bg-purple-600 hover:bg-purple-700' 
                              : 'bg-blue-600 hover:bg-blue-700'
                          } ${hasConflict ? 'opacity-50 cursor-not-allowed' : ''}`}
                        >
                          {swapMode ? (
                            <>
                              <RefreshCw className="w-4 h-4 mr-1" />
                              Swap
                            </>
                          ) : (
                            <>
                              <Plus className="w-4 h-4 mr-1" />
                              Assign
                            </>
                          )}
                        </Button>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div className="text-center py-12 bg-slate-50 rounded-xl border-2 border-dashed border-slate-200">
                  <Users className="w-16 h-16 mx-auto mb-3 text-slate-300" />
                  <p className="font-medium text-slate-600">
                    {searchTerm 
                      ? 'No staff match your search' 
                      : `No available ${currentRole.service.toLowerCase()}s found`
                    }
                  </p>
                  <p className="text-sm text-slate-400 mt-1">
                    {searchTerm ? 'Try a different search term' : 'All matching staff have been assigned'}
                  </p>
                </div>
              )}
            </div>
          )}
        </div>

        <div className="border-t pt-4 flex items-center justify-between bg-slate-50 -mx-6 px-6 -mb-6 pb-6">
          <div className="flex gap-2">
            {selectedShiftIndex > 0 && (
              <Button
                variant="outline"
                onClick={() => {
                  setSelectedShiftIndex(selectedShiftIndex - 1);
                  setSelectedRoleIndex(0);
                  setSelectedStaffIds([]);
                  setSwapMode(null);
                }}
              >
                <ChevronLeft className="w-4 h-4 mr-1" />
                Previous Shift
              </Button>
            )}
            {selectedShiftIndex < order.shifts_data.length - 1 && (
              <Button
                variant="outline"
                onClick={() => {
                  setSelectedShiftIndex(selectedShiftIndex + 1);
                  setSelectedRoleIndex(0);
                  setSelectedStaffIds([]);
                  setSwapMode(null);
                }}
              >
                Next Shift
                <ChevronRight className="w-4 h-4 ml-1" />
              </Button>
            )}
          </div>
          <div className="flex gap-2">
            <Badge 
              variant="outline" 
              className={`px-4 py-2 text-base font-bold ${
                totalAssigned >= totalNeeded 
                  ? 'bg-emerald-50 border-emerald-500 text-emerald-700' 
                  : 'bg-orange-50 border-orange-500 text-orange-700'
              }`}
            >
              {totalAssigned}/{totalNeeded} Filled
            </Badge>
            <Button onClick={onClose} className="bg-blue-600 hover:bg-blue-700">
              Done
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}