import React, { useEffect, useState } from 'react';
import { 
  Calendar, Clock, TrendingUp, Trash2, ChevronLeft, ChevronRight, 
  Sparkles, Crown, Activity, X, AlertCircle, Plus, Edit, Search, 
  Users, XCircle, BarChart3, Settings
} from 'lucide-react';
import staffShiftService, { StaffShift } from '../../features/staffShifts/services/staffShiftService';
import userService, { User } from '../../features/auth/services/userService';
import { toast } from 'react-toastify';
import Loading from '../../shared/components/Loading';
import Pagination from '../../shared/components/Pagination';
import { formatDate } from '../../shared/utils/format';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

// Custom scrollbar styles - Luxury design
const customScrollbarStyles = `
  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
  }
  @media (min-width: 640px) {
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
    }
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.6), rgba(245, 158, 11, 0.6));
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.3);
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.8), rgba(245, 158, 11, 0.8));
  }
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(251, 191, 36, 0.6) rgba(255, 255, 255, 0.05);
  }
`;

interface MonthlyStats {
  month: string;
  monthKey: string;
  total: number;
  scheduled: number;
  in_progress: number;
  completed: number;
  cancelled: number;
  no_show: number;
}

interface DailyStats {
  date: string;
  total: number;
  scheduled: number;
  in_progress: number;
  completed: number;
  cancelled: number;
  no_show: number;
  shifts: StaffShift[];
}

type TabType = 'dashboard' | 'management';

const StaffShiftDashboardPage: React.FC = () => {
  // Tab state
  const [activeTab, setActiveTab] = useState<TabType>('dashboard');
  
  // Dashboard states
  const [allShifts, setAllShifts] = useState<StaffShift[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedMonth, setSelectedMonth] = useState(new Date());
  const [monthlyStats, setMonthlyStats] = useState<MonthlyStats[]>([]);
  const [dailyStats, setDailyStats] = useState<DailyStats[]>([]);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [shiftToDelete, setShiftToDelete] = useState<StaffShift | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [expandedMonths, setExpandedMonths] = useState<Set<string>>(new Set());
  const [actionBlocked, setActionBlocked] = useState<{ title: string; message: string } | null>(null);

  // Management states
  const [shifts, setShifts] = useState<StaffShift[]>([]);
  const [showModal, setShowModal] = useState(false);
  const [editingShift, setEditingShift] = useState<StaffShift | null>(null);
  const [staffMembers, setStaffMembers] = useState<User[]>([]);
  const [showCancelModal, setShowCancelModal] = useState(false);
  const [selectedShift, setSelectedShift] = useState<StaffShift | null>(null);
  const [cancelReason, setCancelReason] = useState('');
  const [cancelNotes, setCancelNotes] = useState('');
  const [processingStatus, setProcessingStatus] = useState<number | null>(null);
  const [filters, setFilters] = useState({
    search: '',
    status: '',
    staff_id: '',
    shift_date: '',
    department: '',
  });
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalItems, setTotalItems] = useState(0);
  const itemsPerPage = 20;
  const [formData, setFormData] = useState({
    staff_id: 0,
    shift_date: new Date(),
    shift_type: 'full_day',
    start_time: '08:00',
    end_time: '20:00',
    break_duration_minutes: 30,
    department: '',
    notes: '',
  });

  const shiftTypes = [
    { value: 'morning', label: 'Morning (6 AM - 2 PM)' },
    { value: 'afternoon', label: 'Afternoon (2 PM - 10 PM)' },
    { value: 'night', label: 'Night (10 PM - 6 AM)' },
    { value: 'full_day', label: 'Full Day (8 AM - 8 PM)' },
    { value: 'custom', label: 'Custom' },
  ];

  const statuses = [
    { value: 'scheduled', label: 'Scheduled', color: 'bg-yellow-100 text-yellow-800' },
    { value: 'in_progress', label: 'In Progress', color: 'bg-blue-100 text-blue-800' },
    { value: 'completed', label: 'Completed', color: 'bg-green-100 text-green-800' },
    { value: 'cancelled', label: 'Cancelled', color: 'bg-gray-100 text-gray-800' },
    { value: 'no_show', label: 'No Show', color: 'bg-red-100 text-red-800' },
  ];

  // Fetch all shifts for dashboard
  const fetchAllShifts = async () => {
    try {
      setLoading(true);
      const response = await staffShiftService.getShifts({ limit: 1000 });
      if (response.status === 'success' && response.data) {
        setAllShifts(response.data.shifts || []);
      }
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to load shifts');
    } finally {
      setLoading(false);
    }
  };

  // Fetch shifts for management (paginated)
  const fetchShifts = async () => {
    try {
      setLoading(true);
      const params: { page: number; limit: number; status?: string; staff_id?: number } = { page: currentPage, limit: itemsPerPage };
      if (filters.status) params.status = filters.status;
      if (filters.staff_id) params.staff_id = parseInt(filters.staff_id);
      if (filters.shift_date) params.shift_date = filters.shift_date;
      if (filters.department) params.department = filters.department;

      const response = await staffShiftService.getShifts(params);
      if (response.status === 'success' && response.data) {
        let shiftList = response.data.shifts || [];
        if (filters.search) {
          shiftList = shiftList.filter((shift: StaffShift) =>
            shift.staff_name?.toLowerCase().includes(filters.search.toLowerCase()) ||
            shift.department?.toLowerCase().includes(filters.search.toLowerCase())
          );
        }
        setShifts(shiftList);
        setTotalPages(response.data.pagination?.total_pages || 1);
        setTotalItems(response.data.pagination?.total || 0);
      }
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to load shifts');
    } finally {
      setLoading(false);
    }
  };

  const fetchStaffMembers = async () => {
    try {
      const [staffResponse, housekeepingResponse] = await Promise.all([
        userService.getUsers({ role: 'staff', limit: 100 }),
        userService.getUsers({ role: 'housekeeping', limit: 100 })
      ]);
      const allUsers: User[] = [];
      if (staffResponse.data?.users) allUsers.push(...staffResponse.data.users);
      if (housekeepingResponse.data?.users) allUsers.push(...housekeepingResponse.data.users);
      setStaffMembers(allUsers);
    } catch (error) {
      console.error('Error fetching staff members:', error);
    }
  };

  useEffect(() => {
    if (activeTab === 'dashboard') {
      fetchAllShifts();
    } else {
      fetchShifts();
      fetchStaffMembers();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeTab]);

  useEffect(() => {
    if (activeTab === 'management') {
      setCurrentPage(1);
    }
  }, [filters, activeTab]);

  useEffect(() => {
    if (activeTab === 'management') {
      fetchShifts();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filters, currentPage, activeTab]);

  useEffect(() => {
    if (allShifts.length > 0 && activeTab === 'dashboard') {
      calculateStats();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [allShifts, selectedMonth, activeTab]);

  // Auto-refresh for management tab
  useEffect(() => {
    if (activeTab === 'management') {
      const interval = setInterval(() => fetchShifts(), 30000);
      return () => clearInterval(interval);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filters, currentPage, activeTab]);

  const calculateStats = () => {
    const months: { [key: string]: MonthlyStats } = {};
    allShifts.forEach(shift => {
      const shiftDate = new Date(shift.shift_date);
      const monthKey = `${shiftDate.getFullYear()}-${String(shiftDate.getMonth() + 1).padStart(2, '0')}`;
      const monthName = shiftDate.toLocaleString('default', { month: 'long', year: 'numeric' });
      if (!months[monthKey]) {
        months[monthKey] = {
          month: monthName,
          monthKey,
          total: 0,
          scheduled: 0,
          in_progress: 0,
          completed: 0,
          cancelled: 0,
          no_show: 0,
        };
      }
      months[monthKey].total++;
      months[monthKey][shift.status as keyof MonthlyStats]++;
    });
    setMonthlyStats(Object.values(months).sort((a, b) => b.monthKey.localeCompare(a.monthKey)));

    const selectedMonthStart = new Date(selectedMonth.getFullYear(), selectedMonth.getMonth(), 1);
    const selectedMonthEnd = new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() + 1, 0);
    const days: { [key: string]: DailyStats } = {};
    allShifts.forEach(shift => {
      const shiftDate = new Date(shift.shift_date);
      if (shiftDate >= selectedMonthStart && shiftDate <= selectedMonthEnd) {
        const dayKey = shiftDate.toISOString().split('T')[0];
        if (!days[dayKey]) {
          days[dayKey] = {
            date: dayKey,
            total: 0,
            scheduled: 0,
            in_progress: 0,
            completed: 0,
            cancelled: 0,
            no_show: 0,
            shifts: [],
          };
        }
        days[dayKey].total++;
        days[dayKey][shift.status as keyof DailyStats]++;
        days[dayKey].shifts.push(shift);
      }
    });
    setDailyStats(Object.values(days).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()));
  };

  const handleDelete = async () => {
    if (!shiftToDelete) return;
    try {
      setDeleting(true);
      await staffShiftService.deleteShift(shiftToDelete.id);
      toast.success('Shift deleted successfully');
      setShowDeleteModal(false);
      setShiftToDelete(null);
      fetchAllShifts();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to delete shift');
    } finally {
      setDeleting(false);
    }
  };

  const canEditShift = (shift: StaffShift) =>
    !(shift.status === 'in_progress' || shift.status === 'completed');

  const canDeleteShift = (shift: StaffShift) =>
    shift.status === 'scheduled' || shift.status === 'cancelled';

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.staff_id) {
      toast.error('Please select a staff member or housekeeping user');
      return;
    }
    try {
      const dataToSubmit: { staff_id: number; shift_date: string; shift_type: string; start_time: string; end_time: string; break_duration_minutes: number; department?: string; notes?: string } = {
        staff_id: formData.staff_id,
        shift_date: formData.shift_date.toISOString(),
        shift_type: formData.shift_type,
        start_time: formData.start_time,
        end_time: formData.end_time,
        break_duration_minutes: formData.break_duration_minutes,
      };
      if (formData.department) dataToSubmit.department = formData.department;
      if (formData.notes) dataToSubmit.notes = formData.notes;

      if (editingShift) {
        await staffShiftService.updateShift(editingShift.id, dataToSubmit);
        toast.success('Shift updated successfully');
      } else {
        await staffShiftService.createShift(dataToSubmit);
        toast.success('Shift created successfully');
      }
      setShowModal(false);
      resetForm();
      fetchShifts();
      fetchAllShifts();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to save shift');
    }
  };

  const handleEdit = (shift: StaffShift) => {
    if (!canEditShift(shift)) {
      setActionBlocked({
        title: 'Edit not allowed',
        message: 'Shifts that are in progress or completed cannot be modified. Please cancel and recreate if needed.',
      });
      return;
    }
    setEditingShift(shift);
    const shiftDate = shift.shift_date ? new Date(shift.shift_date) : new Date();
    setFormData({
      staff_id: shift.staff_id,
      shift_date: shiftDate,
      shift_type: shift.shift_type,
      start_time: shift.start_time || '08:00',
      end_time: shift.end_time || '20:00',
      break_duration_minutes: shift.break_duration_minutes || 30,
      department: shift.department || '',
      notes: shift.notes || '',
    });
    setShowModal(true);
  };

  const handleCancelShift = async () => {
    if (!selectedShift) return;
    try {
      setProcessingStatus(selectedShift.id);
      await staffShiftService.cancelShift(selectedShift.id, cancelReason || 'MANUAL_CANCEL', cancelNotes);
      toast.success('Shift cancelled successfully');
      setShowCancelModal(false);
      setSelectedShift(null);
      setCancelReason('');
      setCancelNotes('');
      fetchShifts();
      fetchAllShifts();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to cancel shift');
    } finally {
      setProcessingStatus(null);
    }
  };

  const canCancelShift = (shift: StaffShift) => {
    return shift.status === 'scheduled' || shift.status === 'in_progress';
  };

  const resetForm = () => {
    setEditingShift(null);
    setFormData({
      staff_id: 0,
      shift_date: new Date(),
      shift_type: 'full_day',
      start_time: '08:00',
      end_time: '20:00',
      break_duration_minutes: 30,
      department: '',
      notes: '',
    });
  };

  const getStatusColor = (status: string) => {
    const colors: { [key: string]: string } = {
      scheduled: 'bg-gradient-to-r from-amber-400 to-amber-600',
      in_progress: 'bg-gradient-to-r from-blue-400 to-blue-600',
      completed: 'bg-gradient-to-r from-emerald-400 to-emerald-600',
      cancelled: 'bg-gradient-to-r from-slate-400 to-slate-600',
      no_show: 'bg-gradient-to-r from-red-400 to-red-600',
    };
    return colors[status] || 'bg-gradient-to-r from-gray-400 to-gray-600';
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'scheduled': return <Clock className="w-4 h-4" />;
      case 'in_progress': return <Activity className="w-4 h-4" />;
      case 'completed': return <TrendingUp className="w-4 h-4" />;
      case 'cancelled': return <X className="w-4 h-4" />;
      case 'no_show': return <AlertCircle className="w-4 h-4" />;
      default: return <Calendar className="w-4 h-4" />;
    }
  };

  const getStatusBadge = (status: string) => {
    return statuses.find((s) => s.value === status) || statuses[0];
  };

  const navigateMonth = (direction: 'prev' | 'next') => {
    const newDate = new Date(selectedMonth);
    if (direction === 'prev') {
      newDate.setMonth(newDate.getMonth() - 1);
    } else {
      newDate.setMonth(newDate.getMonth() + 1);
    }
    setSelectedMonth(newDate);
  };

  const toggleMonthExpansion = (monthKey: string) => {
    const newExpanded = new Set(expandedMonths);
    if (newExpanded.has(monthKey)) {
      newExpanded.delete(monthKey);
    } else {
      newExpanded.add(monthKey);
    }
    setExpandedMonths(newExpanded);
  };

  if (loading && (activeTab === 'dashboard' ? allShifts.length === 0 : shifts.length === 0)) {
    return <Loading fullScreen text="Loading dashboard..." />;
  }

  return (
    <>
      <style>{customScrollbarStyles}</style>
      <div className="h-screen w-full flex flex-col bg-gradient-to-br from-slate-900 via-purple-900/40 to-slate-900 overflow-hidden relative">
        {/* Luxury Background Effects */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute top-0 left-1/4 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl animate-pulse"></div>
          <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
        </div>

        {/* Luxury Header - Fixed */}
        <div className="flex-shrink-0 p-2 sm:p-3 md:p-4 lg:p-6 border-b border-white/10 bg-gradient-to-r from-slate-900/95 via-slate-900/90 to-slate-900/95 backdrop-blur-xl shadow-2xl relative z-10">
          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 md:gap-4 mb-2 sm:mb-3 md:mb-4">
            <div className="p-1.5 sm:p-2 md:p-2.5 bg-gradient-to-br from-amber-400 via-amber-500 to-amber-600 rounded-lg sm:rounded-xl md:rounded-2xl shadow-2xl shadow-amber-500/50 ring-2 ring-amber-400/30">
              <Crown className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 lg:w-7 lg:h-7 text-white" />
            </div>
            <div className="flex-1 min-w-0">
              <h1 className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl font-bold text-white tracking-tight leading-tight">
                <span className="bg-gradient-to-r from-white via-amber-100 to-white bg-clip-text text-transparent drop-shadow-lg">
                  Staff Shift Management
                </span>
              </h1>
              <p className="text-slate-300 mt-0.5 sm:mt-1 text-xs sm:text-sm md:text-base font-light flex items-center gap-1.5 sm:gap-2">
                <Sparkles className="w-3 h-3 sm:w-4 sm:h-4 text-amber-400 flex-shrink-0 animate-pulse" />
                <span>Analytics, insights and management</span>
              </p>
            </div>
            {activeTab === 'management' && (
              <button
                onClick={() => {
                  resetForm();
                  setShowModal(true);
                }}
                className="px-3 sm:px-4 md:px-6 py-1.5 sm:py-2 md:py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg sm:rounded-xl font-semibold transition-all duration-200 hover:scale-105 shadow-lg shadow-amber-500/50 flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm md:text-base"
              >
                <Plus className="w-3 h-3 sm:w-4 sm:h-4" />
                <span className="hidden sm:inline">New Shift</span>
                <span className="sm:hidden">New</span>
              </button>
            )}
          </div>

          {/* Tabs */}
          <div className="flex flex-wrap gap-1.5 sm:gap-2 md:gap-3">
            <button
              onClick={() => setActiveTab('dashboard')}
              className={`px-3 sm:px-4 md:px-5 lg:px-6 py-1.5 sm:py-2 md:py-2.5 rounded-lg sm:rounded-xl text-xs sm:text-sm md:text-base font-semibold transition-all duration-300 transform hover:scale-105 flex items-center gap-1.5 sm:gap-2 ${
                activeTab === 'dashboard'
                  ? 'bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-500/50 ring-2 ring-amber-400/30'
                  : 'bg-white/10 text-slate-300 hover:bg-white/20 backdrop-blur-sm border border-white/10'
              }`}
            >
              <BarChart3 className="w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5" />
              <span className="hidden xs:inline">Dashboard</span>
              <span className="xs:hidden">Stats</span>
            </button>
            <button
              onClick={() => setActiveTab('management')}
              className={`px-3 sm:px-4 md:px-5 lg:px-6 py-1.5 sm:py-2 md:py-2.5 rounded-lg sm:rounded-xl text-xs sm:text-sm md:text-base font-semibold transition-all duration-300 transform hover:scale-105 flex items-center gap-1.5 sm:gap-2 ${
                activeTab === 'management'
                  ? 'bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-500/50 ring-2 ring-amber-400/30'
                  : 'bg-white/10 text-slate-300 hover:bg-white/20 backdrop-blur-sm border border-white/10'
              }`}
            >
              <Settings className="w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5" />
              <span className="hidden xs:inline">Management</span>
              <span className="xs:hidden">Manage</span>
            </button>
          </div>

          {/* Month Navigation for Dashboard */}
          {activeTab === 'dashboard' && (
            <div className="flex items-center justify-between gap-2 sm:gap-3 mt-2 sm:mt-3">
              <button
                onClick={() => navigateMonth('prev')}
                className="p-1.5 sm:p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all duration-200 hover:scale-110 flex-shrink-0 ring-1 ring-white/10"
              >
                <ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
              </button>
              <h2 className="text-sm sm:text-base md:text-lg lg:text-xl font-bold text-white text-center flex-1 truncate">
                {selectedMonth.toLocaleString('default', { month: 'long', year: 'numeric' })}
              </h2>
              <button
                onClick={() => navigateMonth('next')}
                className="p-1.5 sm:p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all duration-200 hover:scale-110 flex-shrink-0 ring-1 ring-white/10"
              >
                <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
              </button>
            </div>
          )}
        </div>

        {/* Scrollable Content Area */}
        <div className="flex-1 min-h-0 overflow-hidden p-2 sm:p-3 md:p-4 lg:p-6 w-full relative z-10">
          <div className="h-full overflow-y-auto overflow-x-hidden custom-scrollbar">
            {activeTab === 'dashboard' ? (
              // Dashboard View
              <div className="space-y-2 sm:space-y-3 md:space-y-4 lg:space-y-6 w-full max-w-full">
                {monthlyStats.length === 0 ? (
                  <div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-xl sm:rounded-2xl p-4 sm:p-6 md:p-8 border border-white/20 shadow-2xl text-center ring-1 ring-white/10">
                    <Calendar className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-slate-400 mx-auto mb-2 sm:mb-3" />
                    <p className="text-slate-300 text-xs sm:text-sm md:text-base">No shifts found</p>
                  </div>
                ) : (
                  monthlyStats.map((stat, index) => {
                    const isExpanded = expandedMonths.has(stat.monthKey);
                    const monthDate = new Date(stat.monthKey + '-01');
                    const monthDailyStats = dailyStats.filter(day => {
                      const dayDate = new Date(day.date);
                      return dayDate.getMonth() === monthDate.getMonth() && 
                             dayDate.getFullYear() === monthDate.getFullYear();
                    });

                    return (
                      <div
                        key={index}
                        className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-lg sm:rounded-xl md:rounded-2xl p-2 sm:p-3 md:p-4 lg:p-6 border border-white/20 shadow-2xl hover:shadow-amber-500/30 transition-all duration-300 w-full max-w-full ring-1 ring-white/10 hover:ring-amber-500/30"
                      >
                        <button
                          onClick={() => toggleMonthExpansion(stat.monthKey)}
                          className="w-full text-left"
                        >
                          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3 mb-2 sm:mb-3 md:mb-4 pb-2 sm:pb-3 md:pb-4 border-b border-white/10">
                            <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3 min-w-0">
                              <div className="p-1 sm:p-1.5 md:p-2 bg-gradient-to-br from-amber-400 via-amber-500 to-amber-600 rounded-lg sm:rounded-xl shadow-lg shadow-amber-500/50 flex-shrink-0 ring-1 ring-amber-400/30">
                                <Calendar className="w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 text-white" />
                              </div>
                              <div className="min-w-0">
                                <h3 className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl font-bold text-white truncate">{stat.month}</h3>
                                <p className="text-slate-400 mt-0.5 text-xs">Complete monthly overview</p>
                              </div>
                            </div>
                            <div className="flex items-center gap-2 sm:gap-3">
                              <div className="text-left sm:text-right flex-shrink-0">
                                <div className="text-xl sm:text-2xl md:text-3xl font-bold bg-gradient-to-r from-amber-400 to-amber-300 bg-clip-text text-transparent">
                                  {stat.total}
                                </div>
                                <p className="text-slate-400 text-xs mt-0.5">Total Shifts</p>
                              </div>
                              <ChevronRight className={`w-4 h-4 sm:w-5 sm:h-5 text-amber-400 transition-transform duration-300 ${isExpanded ? 'rotate-90' : ''}`} />
                            </div>
                          </div>
                        </button>

                        {/* Status Grid */}
                        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-1.5 sm:gap-2 md:gap-3 mb-2 sm:mb-3 md:mb-4">
                          <div className="bg-gradient-to-br from-amber-500/20 to-amber-600/20 rounded-lg sm:rounded-xl p-2 sm:p-2.5 md:p-3 border border-amber-500/30 backdrop-blur-sm ring-1 ring-amber-500/20 hover:ring-amber-500/40 transition-all">
                            <div className="flex items-center gap-1 sm:gap-1.5 mb-1 sm:mb-1.5">
                              <div className="p-0.5 sm:p-1 bg-amber-500/30 rounded-md flex-shrink-0">
                                <Clock className="w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-4 md:h-4 text-amber-300" />
                              </div>
                              <span className="text-[10px] sm:text-xs font-semibold text-amber-200 truncate">Scheduled</span>
                            </div>
                            <div className="text-lg sm:text-xl md:text-2xl font-bold text-white">{stat.scheduled}</div>
                            <div className="text-[10px] sm:text-xs text-amber-300/70 mt-0.5 sm:mt-1">
                              {stat.total > 0 ? Math.round((stat.scheduled / stat.total) * 100) : 0}%
                            </div>
                          </div>
                          
                          <div className="bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-lg sm:rounded-xl p-2 sm:p-2.5 md:p-3 border border-blue-500/30 backdrop-blur-sm ring-1 ring-blue-500/20 hover:ring-blue-500/40 transition-all">
                            <div className="flex items-center gap-1 sm:gap-1.5 mb-1 sm:mb-1.5">
                              <div className="p-0.5 sm:p-1 bg-blue-500/30 rounded-md flex-shrink-0">
                                <Activity className="w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-4 md:h-4 text-blue-300" />
                              </div>
                              <span className="text-[10px] sm:text-xs font-semibold text-blue-200 truncate">In Progress</span>
                            </div>
                            <div className="text-lg sm:text-xl md:text-2xl font-bold text-white">{stat.in_progress}</div>
                            <div className="text-[10px] sm:text-xs text-blue-300/70 mt-0.5 sm:mt-1">
                              {stat.total > 0 ? Math.round((stat.in_progress / stat.total) * 100) : 0}%
                            </div>
                          </div>
                          
                          <div className="bg-gradient-to-br from-emerald-500/20 to-emerald-600/20 rounded-lg sm:rounded-xl p-2 sm:p-2.5 md:p-3 border border-emerald-500/30 backdrop-blur-sm ring-1 ring-emerald-500/20 hover:ring-emerald-500/40 transition-all">
                            <div className="flex items-center gap-1 sm:gap-1.5 mb-1 sm:mb-1.5">
                              <div className="p-0.5 sm:p-1 bg-emerald-500/30 rounded-md flex-shrink-0">
                                <TrendingUp className="w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-4 md:h-4 text-emerald-300" />
                              </div>
                              <span className="text-[10px] sm:text-xs font-semibold text-emerald-200 truncate">Completed</span>
                            </div>
                            <div className="text-lg sm:text-xl md:text-2xl font-bold text-white">{stat.completed}</div>
                            <div className="text-[10px] sm:text-xs text-emerald-300/70 mt-0.5 sm:mt-1">
                              {stat.total > 0 ? Math.round((stat.completed / stat.total) * 100) : 0}%
                            </div>
                          </div>
                          
                          <div className="bg-gradient-to-br from-slate-500/20 to-slate-600/20 rounded-lg sm:rounded-xl p-2 sm:p-2.5 md:p-3 border border-slate-500/30 backdrop-blur-sm ring-1 ring-slate-500/20 hover:ring-slate-500/40 transition-all">
                            <div className="flex items-center gap-1 sm:gap-1.5 mb-1 sm:mb-1.5">
                              <div className="p-0.5 sm:p-1 bg-slate-500/30 rounded-md flex-shrink-0">
                                <X className="w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-4 md:h-4 text-slate-300" />
                              </div>
                              <span className="text-[10px] sm:text-xs font-semibold text-slate-200 truncate">Cancelled</span>
                            </div>
                            <div className="text-lg sm:text-xl md:text-2xl font-bold text-white">{stat.cancelled}</div>
                            <div className="text-[10px] sm:text-xs text-slate-300/70 mt-0.5 sm:mt-1">
                              {stat.total > 0 ? Math.round((stat.cancelled / stat.total) * 100) : 0}%
                            </div>
                          </div>
                          
                          {stat.no_show > 0 && (
                            <div className="bg-gradient-to-br from-red-500/20 to-red-600/20 rounded-lg sm:rounded-xl p-2 sm:p-2.5 md:p-3 border border-red-500/30 backdrop-blur-sm ring-1 ring-red-500/20 hover:ring-red-500/40 transition-all">
                              <div className="flex items-center gap-1 sm:gap-1.5 mb-1 sm:mb-1.5">
                                <div className="p-0.5 sm:p-1 bg-red-500/30 rounded-md flex-shrink-0">
                                  <AlertCircle className="w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-4 md:h-4 text-red-300" />
                                </div>
                                <span className="text-[10px] sm:text-xs font-semibold text-red-200 truncate">No Show</span>
                              </div>
                              <div className="text-lg sm:text-xl md:text-2xl font-bold text-white">{stat.no_show}</div>
                              <div className="text-[10px] sm:text-xs text-red-300/70 mt-0.5 sm:mt-1">
                                {stat.total > 0 ? Math.round((stat.no_show / stat.total) * 100) : 0}%
                              </div>
                            </div>
                          )}
                        </div>

                        {/* Expanded Daily Breakdown */}
                        {isExpanded && (
                          <div className="space-y-2 sm:space-y-3 md:space-y-4 mt-2 sm:mt-3 md:mt-4 pt-2 sm:pt-3 md:pt-4 border-t border-white/10">
                            {monthDailyStats.length > 0 ? (
                              monthDailyStats.map((day, dayIndex) => (
                                <div
                                  key={dayIndex}
                                  className="bg-gradient-to-br from-white/5 to-white/0 backdrop-blur-md rounded-lg sm:rounded-xl p-2 sm:p-2.5 md:p-3 border border-white/10 shadow-lg hover:shadow-blue-500/20 transition-all duration-200 ring-1 ring-white/5"
                                >
                                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1.5 sm:gap-2 mb-2 sm:mb-2.5 pb-1.5 sm:pb-2 border-b border-white/5">
                                    <div className="flex items-center gap-1.5 sm:gap-2 min-w-0">
                                      <div className="p-1 sm:p-1.5 bg-gradient-to-br from-blue-400 to-blue-600 rounded-md sm:rounded-lg shadow-md flex-shrink-0 ring-1 ring-blue-400/30">
                                        <Calendar className="w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-4 md:h-4 text-white" />
                                      </div>
                                      <div className="min-w-0">
                                        <h4 className="text-xs sm:text-sm md:text-base font-bold text-white truncate">
                                          {formatDate(day.date)}
                                        </h4>
                                        <p className="text-slate-400 text-[10px] sm:text-xs mt-0.5">
                                          {new Date(day.date).toLocaleDateString('en-US', { weekday: 'long' })}
                                        </p>
                                      </div>
                                    </div>
                                    <div className="flex items-center justify-between sm:justify-end gap-1.5 sm:gap-2">
                                      <div className="text-left sm:text-right flex-shrink-0">
                                        <div className="text-base sm:text-lg md:text-xl font-bold text-white">{day.total}</div>
                                        <p className="text-slate-400 text-[10px] sm:text-xs">Shifts</p>
                                      </div>
                                      <div className="flex flex-wrap gap-1">
                                        {day.scheduled > 0 && (
                                          <span className="px-1 sm:px-1.5 py-0.5 bg-amber-500/20 border border-amber-500/30 text-amber-300 rounded text-[10px] sm:text-xs font-semibold backdrop-blur-sm">
                                            {day.scheduled}
                                          </span>
                                        )}
                                        {day.in_progress > 0 && (
                                          <span className="px-1 sm:px-1.5 py-0.5 bg-blue-500/20 border border-blue-500/30 text-blue-300 rounded text-[10px] sm:text-xs font-semibold backdrop-blur-sm">
                                            {day.in_progress}
                                          </span>
                                        )}
                                        {day.completed > 0 && (
                                          <span className="px-1 sm:px-1.5 py-0.5 bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 rounded text-[10px] sm:text-xs font-semibold backdrop-blur-sm">
                                            {day.completed}
                                          </span>
                                        )}
                                        {day.cancelled > 0 && (
                                          <span className="px-1 sm:px-1.5 py-0.5 bg-slate-500/20 border border-slate-500/30 text-slate-300 rounded text-[10px] sm:text-xs font-semibold backdrop-blur-sm">
                                            {day.cancelled}
                                          </span>
                                        )}
                                      </div>
                                    </div>
                                  </div>

                                  <div className="space-y-1 sm:space-y-1.5 max-h-32 sm:max-h-40 md:max-h-48 overflow-y-auto pr-1 custom-scrollbar">
                                    {day.shifts
                                      .sort((a, b) => {
                                        const statusOrder = { 'in_progress': 0, 'scheduled': 1, 'completed': 2, 'cancelled': 3, 'no_show': 4 };
                                        return (statusOrder[a.status as keyof typeof statusOrder] || 99) - 
                                               (statusOrder[b.status as keyof typeof statusOrder] || 99);
                                      })
                                      .map((shift) => (
                                        <div
                                          key={shift.id}
                                          className={`bg-gradient-to-r from-white/5 to-white/0 rounded-md p-1.5 sm:p-2 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1.5 hover:bg-white/10 transition-all duration-200 border backdrop-blur-sm ${
                                            shift.status === 'completed' 
                                              ? 'border-emerald-500/20 ring-1 ring-emerald-500/10' 
                                              : shift.status === 'in_progress'
                                              ? 'border-blue-500/20 ring-1 ring-blue-500/10'
                                              : 'border-white/10 ring-1 ring-white/5'
                                          }`}
                                        >
                                          <div className="flex items-start sm:items-center gap-1.5 flex-1 min-w-0">
                                            <div className={`p-1 rounded-md ${getStatusColor(shift.status)} shadow-md flex-shrink-0 ring-1 ring-white/20`}>
                                              {getStatusIcon(shift.status)}
                                            </div>
                                            <div className="flex-1 min-w-0">
                                              <div className="flex flex-wrap items-center gap-1 mb-0.5">
                                                <span className="text-[10px] sm:text-xs font-bold text-white truncate">
                                                  {shift.staff_name || `Staff #${shift.staff_id}`}
                                                </span>
                                                <span className={`px-1 py-0.5 rounded text-[10px] font-bold ${getStatusColor(shift.status)} text-white whitespace-nowrap`}>
                                                  {shift.status.replace('_', ' ').toUpperCase()}
                                                </span>
                                              </div>
                                              <div className="flex flex-wrap items-center gap-1 text-[10px] text-slate-300">
                                                <span className="flex items-center gap-0.5">
                                                  <Clock className="w-2.5 h-2.5 flex-shrink-0" />
                                                  <span className="font-medium whitespace-nowrap">{shift.start_time} - {shift.end_time}</span>
                                                </span>
                                                {shift.department && (
                                                  <span className="text-slate-400 whitespace-nowrap">{shift.department}</span>
                                                )}
                                              </div>
                                            </div>
                                          </div>
                                          <div className="flex items-center justify-end gap-1.5 flex-shrink-0">
                                            <button
                                              onClick={(e) => {
                                                e.stopPropagation();
                                                if (!canDeleteShift(shift)) {
                                                  setActionBlocked({
                                                    title: 'Delete not allowed',
                                                    message: 'Only scheduled or cancelled shifts can be deleted. Please cancel first if it is in progress, or leave completed shifts archived.',
                                                  });
                                                  return;
                                                }
                                                setShiftToDelete(shift);
                                                setShowDeleteModal(true);
                                              }}
                                              className={`p-1 bg-red-500/20 border border-red-500/30 text-red-300 rounded-md transition-all duration-200 flex-shrink-0 ${canDeleteShift(shift) ? 'hover:bg-red-500/30 hover:scale-110' : 'opacity-60 cursor-not-allowed'}`}
                                              title={canDeleteShift(shift) ? 'Delete shift' : 'Cannot delete this shift'}
                                            >
                                              <Trash2 className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
                                            </button>
                                            {shift.status === 'completed' && (
                                              <div className="px-1.5 py-0.5 bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 rounded-md text-[10px] font-semibold flex items-center gap-1 whitespace-nowrap">
                                                <Crown className="w-2.5 h-2.5" />
                                                <span className="hidden sm:inline">Archived</span>
                                              </div>
                                            )}
                                          </div>
                                        </div>
                                      ))}
                                  </div>
                                </div>
                              ))
                            ) : (
                              <div className="bg-white/5 rounded-lg p-3 text-center border border-white/10">
                                <p className="text-slate-400 text-xs sm:text-sm">No daily shifts for this month</p>
                              </div>
                            )}
                          </div>
                        )}

                        {/* Monthly Shifts Summary */}
                        <div className="mt-2 sm:mt-3 md:mt-4 pt-2 sm:pt-3 md:pt-4 border-t border-white/10">
                          <h4 className="text-xs sm:text-sm md:text-base font-semibold text-white mb-1.5 sm:mb-2 md:mb-3">All Shifts in {stat.month}</h4>
                          <div className="space-y-1.5 sm:space-y-2 max-h-32 sm:max-h-40 md:max-h-48 lg:max-h-56 overflow-y-auto pr-1 sm:pr-2 custom-scrollbar">
                            {allShifts
                              .filter(shift => {
                                const shiftDate = new Date(shift.shift_date);
                                const monthKey = `${shiftDate.getFullYear()}-${String(shiftDate.getMonth() + 1).padStart(2, '0')}`;
                                return monthKey === stat.monthKey;
                              })
                              .sort((a, b) => {
                                const dateA = new Date(a.shift_date);
                                const dateB = new Date(b.shift_date);
                                return dateB.getTime() - dateA.getTime();
                              })
                              .map((shift) => (
                                <div
                                  key={shift.id}
                                  className={`bg-gradient-to-r from-white/5 to-white/0 rounded-md sm:rounded-lg p-1.5 sm:p-2 md:p-2.5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1.5 sm:gap-2 hover:bg-white/10 transition-all duration-200 border backdrop-blur-sm ${
                                    shift.status === 'completed' 
                                      ? 'border-emerald-500/20 ring-1 ring-emerald-500/10' 
                                      : shift.status === 'in_progress'
                                      ? 'border-blue-500/20 ring-1 ring-blue-500/10'
                                      : 'border-white/10 ring-1 ring-white/5'
                                  }`}
                                >
                                  <div className="flex items-start sm:items-center gap-1.5 sm:gap-2 flex-1 min-w-0">
                                    <div className={`p-1 sm:p-1.5 rounded-md ${getStatusColor(shift.status)} shadow-md flex-shrink-0 ring-1 ring-white/20`}>
                                      {getStatusIcon(shift.status)}
                                    </div>
                                    <div className="flex-1 min-w-0">
                                      <div className="flex flex-wrap items-center gap-1 sm:gap-1.5 mb-0.5 sm:mb-1">
                                        <span className="text-[10px] sm:text-xs md:text-sm font-bold text-white truncate">
                                          {shift.staff_name || `Staff #${shift.staff_id}`}
                                        </span>
                                        <span className={`px-1 sm:px-1.5 py-0.5 rounded text-[10px] sm:text-xs font-bold ${getStatusColor(shift.status)} text-white whitespace-nowrap`}>
                                          {shift.status.replace('_', ' ').toUpperCase()}
                                        </span>
                                      </div>
                                      <div className="flex flex-wrap items-center gap-1 sm:gap-1.5 md:gap-2 text-[10px] sm:text-xs text-slate-300">
                                        <span className="whitespace-nowrap">{formatDate(shift.shift_date)}</span>
                                        <span className="whitespace-nowrap">{shift.start_time} - {shift.end_time}</span>
                                        {shift.department && (
                                          <span className="text-slate-400 whitespace-nowrap">{shift.department}</span>
                                        )}
                                      </div>
                                    </div>
                                  </div>
                                  <div className="flex items-center justify-end gap-1.5 sm:gap-2 flex-shrink-0">
                                <button
                                  onClick={() => {
                                    if (!canDeleteShift(shift)) {
                                      setActionBlocked({
                                        title: 'Delete not allowed',
                                        message: 'Only scheduled or cancelled shifts can be deleted. Please cancel first if it is in progress, or leave completed shifts archived.',
                                      });
                                      return;
                                    }
                                    setShiftToDelete(shift);
                                    setShowDeleteModal(true);
                                  }}
                                  className={`p-1 sm:p-1.5 bg-red-500/20 border border-red-500/30 text-red-300 rounded-md transition-all duration-200 flex-shrink-0 ${canDeleteShift(shift) ? 'hover:bg-red-500/30 hover:scale-110' : 'opacity-60 cursor-not-allowed'}`}
                                  title={canDeleteShift(shift) ? 'Delete shift' : 'Cannot delete this shift'}
                                >
                                  <Trash2 className="w-3 h-3 sm:w-3.5 sm:h-3.5 md:w-4 md:h-4" />
                                </button>
                                    {shift.status === 'completed' && (
                                      <div className="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 rounded-md text-[10px] sm:text-xs font-semibold flex items-center gap-1 whitespace-nowrap">
                                        <Crown className="w-2.5 h-2.5 sm:w-3 sm:h-3" />
                                        <span className="hidden sm:inline">Archived</span>
                                      </div>
                                    )}
                                  </div>
                                </div>
                              ))}
                            {allShifts.filter(shift => {
                              const shiftDate = new Date(shift.shift_date);
                              const monthKey = `${shiftDate.getFullYear()}-${String(shiftDate.getMonth() + 1).padStart(2, '0')}`;
                              return monthKey === stat.monthKey;
                            }).length === 0 && (
                              <p className="text-slate-400 text-[10px] sm:text-xs text-center py-2 sm:py-3">No shifts to display</p>
                            )}
                          </div>
                        </div>
                      </div>
                    );
                  })
                )}
              </div>
            ) : (
              // Management View
              <div className="space-y-2 sm:space-y-3 md:space-y-4 w-full max-w-full">
                {/* Filters */}
                <div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-lg sm:rounded-xl p-2 sm:p-3 md:p-4 border border-white/20 shadow-2xl ring-1 ring-white/10">
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-2 sm:gap-3">
                    <div className="relative group">
                      <Search className="absolute left-2 sm:left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-4 h-4 sm:w-5 sm:h-5 group-focus-within:text-amber-500 transition-colors" />
                      <input
                        type="text"
                        placeholder="Search..."
                        value={filters.search}
                        onChange={(e) => setFilters({ ...filters, search: e.target.value })}
                        className="w-full pl-8 sm:pl-10 pr-3 sm:pr-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 transition-all text-white placeholder-slate-400 text-xs sm:text-sm backdrop-blur-sm"
                      />
                    </div>
                    <select
                      value={filters.status}
                      onChange={(e) => setFilters({ ...filters, status: e.target.value })}
                      className="px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 transition-all text-white text-xs sm:text-sm backdrop-blur-sm cursor-pointer"
                    >
                      <option value="" className="bg-slate-800">All Statuses</option>
                      {statuses.map((status) => (
                        <option key={status.value} value={status.value} className="bg-slate-800">
                          {status.label}
                        </option>
                      ))}
                    </select>
                    <select
                      value={filters.staff_id}
                      onChange={(e) => setFilters({ ...filters, staff_id: e.target.value })}
                      className="px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 transition-all text-white text-xs sm:text-sm backdrop-blur-sm cursor-pointer"
                    >
                      <option value="" className="bg-slate-800">All Staff</option>
                      {staffMembers.map((staff) => (
                        <option key={staff.id} value={staff.id} className="bg-slate-800">
                          {staff.full_name}
                        </option>
                      ))}
                    </select>
                    <input
                      type="date"
                      value={filters.shift_date}
                      onChange={(e) => setFilters({ ...filters, shift_date: e.target.value })}
                      className="px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 transition-all text-white text-xs sm:text-sm backdrop-blur-sm"
                    />
                    <input
                      type="text"
                      value={filters.department}
                      onChange={(e) => setFilters({ ...filters, department: e.target.value })}
                      placeholder="Department"
                      className="px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 transition-all text-white placeholder-slate-400 text-xs sm:text-sm backdrop-blur-sm"
                    />
                  </div>
                </div>

                {/* Stats Cards */}
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3">
                  <div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-lg sm:rounded-xl p-2 sm:p-3 border border-white/20 shadow-lg ring-1 ring-white/10">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-slate-400 text-[10px] sm:text-xs font-medium">Total</p>
                        <p className="text-lg sm:text-xl md:text-2xl font-bold text-white mt-1">{totalItems}</p>
                      </div>
                      <Calendar className="w-6 h-6 sm:w-8 sm:h-8 text-amber-400" />
                    </div>
                  </div>
                  <div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-lg sm:rounded-xl p-2 sm:p-3 border border-white/20 shadow-lg ring-1 ring-white/10">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-slate-400 text-[10px] sm:text-xs font-medium">Scheduled</p>
                        <p className="text-lg sm:text-xl md:text-2xl font-bold text-amber-400 mt-1">
                          {shifts.filter(s => s.status === 'scheduled').length}
                        </p>
                      </div>
                      <Clock className="w-6 h-6 sm:w-8 sm:h-8 text-amber-400" />
                    </div>
                  </div>
                  <div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-lg sm:rounded-xl p-2 sm:p-3 border border-white/20 shadow-lg ring-1 ring-white/10">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-slate-400 text-[10px] sm:text-xs font-medium">In Progress</p>
                        <p className="text-lg sm:text-xl md:text-2xl font-bold text-blue-400 mt-1">
                          {shifts.filter(s => s.status === 'in_progress').length}
                        </p>
                      </div>
                      <Users className="w-6 h-6 sm:w-8 sm:h-8 text-blue-400" />
                    </div>
                  </div>
                  <div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-lg sm:rounded-xl p-2 sm:p-3 border border-white/20 shadow-lg ring-1 ring-white/10">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-slate-400 text-[10px] sm:text-xs font-medium">Completed</p>
                        <p className="text-lg sm:text-xl md:text-2xl font-bold text-emerald-400 mt-1">
                          {shifts.filter(s => s.status === 'completed').length}
                        </p>
                      </div>
                      <Clock className="w-6 h-6 sm:w-8 sm:h-8 text-emerald-400" />
                    </div>
                  </div>
                </div>

                {/* Shifts Table */}
                <div className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-xl rounded-lg sm:rounded-xl border border-white/20 shadow-2xl overflow-hidden ring-1 ring-white/10">
                  <div className="overflow-x-auto">
                    <table className="w-full">
                      <thead className="bg-white/5 border-b border-white/10">
                        <tr>
                          <th className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 text-left text-[10px] sm:text-xs font-semibold text-slate-300 uppercase tracking-wider">Staff</th>
                          <th className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 text-left text-[10px] sm:text-xs font-semibold text-slate-300 uppercase tracking-wider">Date</th>
                          <th className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 text-left text-[10px] sm:text-xs font-semibold text-slate-300 uppercase tracking-wider hidden sm:table-cell">Type</th>
                          <th className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 text-left text-[10px] sm:text-xs font-semibold text-slate-300 uppercase tracking-wider">Time</th>
                          <th className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 text-left text-[10px] sm:text-xs font-semibold text-slate-300 uppercase tracking-wider hidden md:table-cell">Dept</th>
                          <th className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 text-left text-[10px] sm:text-xs font-semibold text-slate-300 uppercase tracking-wider">Status</th>
                          <th className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 text-right text-[10px] sm:text-xs font-semibold text-slate-300 uppercase tracking-wider">Actions</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-white/10">
                        {shifts.map((shift) => {
                          const statusBadge = getStatusBadge(shift.status);
                          return (
                            <tr key={shift.id} className="hover:bg-white/5 transition-colors">
                              <td className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3">
                                <div className="font-semibold text-white text-xs sm:text-sm">{shift.staff_name || `Staff #${shift.staff_id}`}</div>
                              </td>
                              <td className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3">
                                <div className="text-white font-medium text-xs sm:text-sm">{formatDate(shift.shift_date)}</div>
                              </td>
                              <td className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 hidden sm:table-cell">
                                <span className="px-2 py-1 rounded text-[10px] sm:text-xs font-medium bg-white/10 text-slate-300">
                                  {shiftTypes.find((t) => t.value === shift.shift_type)?.label || shift.shift_type}
                                </span>
                              </td>
                              <td className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3">
                                <div className="text-white font-medium text-xs sm:text-sm">{shift.start_time} - {shift.end_time}</div>
                                {shift.break_duration_minutes && (
                                  <div className="text-[10px] text-slate-400 mt-0.5">Break: {shift.break_duration_minutes} min</div>
                                )}
                              </td>
                              <td className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 text-slate-300 text-xs sm:text-sm hidden md:table-cell">
                                {shift.department || '—'}
                              </td>
                              <td className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3">
                                <div className="flex items-center gap-1 sm:gap-2 flex-wrap">
                                  <span className={`px-2 py-1 rounded text-[10px] sm:text-xs font-medium ${statusBadge.color}`}>
                                    {statusBadge.label}
                                  </span>
                                  {shift.actual_start_time && (
                                    <span className="text-[10px] text-slate-400" title={`Started: ${new Date(shift.actual_start_time).toLocaleTimeString()}`}>
                                      ✓
                                    </span>
                                  )}
                                </div>
                              </td>
                              <td className="px-2 sm:px-3 md:px-4 lg:px-6 py-2 sm:py-3 text-right">
                                <div className="flex items-center justify-end gap-1 sm:gap-2">
                                  <button
                                    onClick={() => {
                                      if (!canEditShift(shift)) {
                                        setActionBlocked({
                                          title: 'Edit not allowed',
                                          message: 'Shifts that are in progress or completed cannot be modified. Please cancel and recreate if needed.',
                                        });
                                        return;
                                      }
                                      handleEdit(shift);
                                    }}
                                    className={`p-1 sm:p-1.5 text-blue-400 rounded-lg transition-colors ${canEditShift(shift) ? 'hover:bg-blue-500/20' : 'opacity-60 cursor-not-allowed'}`}
                                    title={canEditShift(shift) ? 'Edit' : 'Cannot edit this shift'}
                                  >
                                    <Edit className="w-3 h-3 sm:w-4 sm:h-4" />
                                  </button>
                                  {canCancelShift(shift) && (
                                    <button
                                      onClick={() => {
                                        setSelectedShift(shift);
                                        setShowCancelModal(true);
                                      }}
                                      disabled={processingStatus === shift.id}
                                      className="flex items-center gap-1 px-2 py-1 text-[10px] sm:text-xs bg-red-500/20 text-red-300 rounded-lg hover:bg-red-500/30 transition-colors disabled:opacity-50"
                                      title="Cancel"
                                    >
                                      <XCircle className="w-3 h-3 sm:w-4 sm:h-4" />
                                      <span className="hidden sm:inline">Cancel</span>
                                    </button>
                                  )}
                                </div>
                              </td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                  {shifts.length === 0 && !loading && (
                    <div className="text-center py-8 sm:py-12">
                      <Calendar className="w-12 h-12 sm:w-16 sm:h-16 text-slate-400 mx-auto mb-3 sm:mb-4" />
                      <p className="text-slate-300 text-sm sm:text-base md:text-lg">No shifts found</p>
                    </div>
                  )}
                </div>

                {/* Pagination */}
                {totalPages > 1 && (
                  <div className="flex justify-center">
                    <Pagination
                      currentPage={currentPage}
                      totalPages={totalPages}
                      onPageChange={setCurrentPage}
                    />
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

        {/* Delete Confirmation Modal */}
        {showDeleteModal && shiftToDelete && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/70 backdrop-blur-md">
            <div className="bg-gradient-to-br from-slate-800/95 to-slate-900/95 backdrop-blur-xl rounded-xl sm:rounded-2xl shadow-2xl max-w-md w-full border border-white/20 ring-2 ring-white/10">
              <div className="p-3 sm:p-4 md:p-6">
                <div className="flex items-center gap-2 sm:gap-3 mb-3 sm:mb-4">
                  <div className="p-1.5 sm:p-2 bg-red-500/20 rounded-lg ring-1 ring-red-500/30">
                    <AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 text-red-400" />
                  </div>
                  <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white">Delete Shift</h3>
                </div>
                <p className="text-slate-300 mb-3 sm:mb-4 md:mb-6 text-xs sm:text-sm md:text-base leading-relaxed">
                  Are you sure you want to delete the shift for{' '}
                  <span className="font-semibold text-white">
                    {shiftToDelete.staff_name || `Staff #${shiftToDelete.staff_id}`}
                  </span>{' '}
                  on {formatDate(shiftToDelete.shift_date)}? This action cannot be undone.
                </p>
                <div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
                  <button
                    onClick={() => {
                      setShowDeleteModal(false);
                      setShiftToDelete(null);
                    }}
                    className="flex-1 px-3 sm:px-4 md:px-6 py-2 sm:py-2.5 md:py-3 bg-white/10 hover:bg-white/20 text-white rounded-lg sm:rounded-xl font-semibold transition-all duration-200 text-xs sm:text-sm md:text-base ring-1 ring-white/10 hover:ring-white/20"
                    disabled={deleting}
                  >
                    Cancel
                  </button>
                  <button
                    onClick={handleDelete}
                    disabled={deleting}
                    className="flex-1 px-3 sm:px-4 md:px-6 py-2 sm:py-2.5 md:py-3 bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white rounded-lg sm:rounded-xl font-semibold transition-all duration-200 shadow-lg shadow-red-500/50 disabled:opacity-50 text-xs sm:text-sm md:text-base ring-2 ring-red-500/30 hover:ring-red-500/50"
                  >
                    {deleting ? 'Deleting...' : 'Delete'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Create/Edit Modal */}
        {showModal && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/70 backdrop-blur-md">
            <div className="bg-gradient-to-br from-slate-800/95 to-slate-900/95 backdrop-blur-xl rounded-xl sm:rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-white/20 ring-2 ring-white/10 custom-scrollbar">
              <div className="sticky top-0 bg-slate-800/95 backdrop-blur-xl border-b border-white/10 px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between">
                <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-white">
                  {editingShift ? 'Edit Shift' : 'Create Shift'}
                </h2>
                <button
                  onClick={() => {
                    setShowModal(false);
                    resetForm();
                  }}
                  className="p-2 hover:bg-white/10 rounded-lg transition-colors"
                >
                  <X className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                </button>
              </div>
              <form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-4 sm:space-y-6">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                  <div>
                    <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Staff Member / Housekeeping *</label>
                    <select
                      value={formData.staff_id}
                      onChange={(e) => setFormData({ ...formData, staff_id: parseInt(e.target.value) || 0 })}
                      className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white text-xs sm:text-sm backdrop-blur-sm"
                      required
                      disabled={!!editingShift}
                    >
                      <option value={0} className="bg-slate-800">Select Staff or Housekeeping</option>
                      {staffMembers.map((staff) => (
                        <option key={staff.id} value={staff.id} className="bg-slate-800">
                          {staff.full_name} ({staff.role})
                        </option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Shift Date *</label>
                    <DatePicker
                      selected={formData.shift_date}
                      onChange={(date: Date | null) => {
                        if (date) setFormData({ ...formData, shift_date: date });
                      }}
                      dateFormat="MMMM d, yyyy"
                      className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white text-xs sm:text-sm backdrop-blur-sm"
                      required
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                  <div>
                    <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Shift Type *</label>
                    <select
                      value={formData.shift_type}
                      onChange={(e) => setFormData({ ...formData, shift_type: e.target.value })}
                      className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white text-xs sm:text-sm backdrop-blur-sm"
                      required
                    >
                      {shiftTypes.map((type) => (
                        <option key={type.value} value={type.value} className="bg-slate-800">
                          {type.label}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div>
                    <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Status</label>
                    <input
                      type="text"
                      value="Scheduled (Auto-managed)"
                      disabled
                      className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/5 border border-white/10 rounded-lg sm:rounded-xl text-slate-400 text-xs sm:text-sm cursor-not-allowed"
                    />
                    <p className="text-[10px] sm:text-xs text-slate-400 mt-1">
                      Shifts are automatically managed. Status will change based on time.
                    </p>
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
                  <div>
                    <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Start Time *</label>
                    <input
                      type="time"
                      value={formData.start_time}
                      onChange={(e) => setFormData({ ...formData, start_time: e.target.value })}
                      className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white text-xs sm:text-sm backdrop-blur-sm"
                      required
                    />
                  </div>
                  <div>
                    <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">End Time *</label>
                    <input
                      type="time"
                      value={formData.end_time}
                      onChange={(e) => setFormData({ ...formData, end_time: e.target.value })}
                      className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white text-xs sm:text-sm backdrop-blur-sm"
                      required
                    />
                  </div>
                  <div>
                    <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Break (minutes)</label>
                    <input
                      type="number"
                      value={formData.break_duration_minutes}
                      onChange={(e) => setFormData({ ...formData, break_duration_minutes: parseInt(e.target.value) || 30 })}
                      className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white text-xs sm:text-sm backdrop-blur-sm"
                      min="0"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Department</label>
                  <input
                    type="text"
                    value={formData.department}
                    onChange={(e) => setFormData({ ...formData, department: e.target.value })}
                    placeholder="e.g., reception, housekeeping"
                    className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white placeholder-slate-400 text-xs sm:text-sm backdrop-blur-sm"
                  />
                </div>

                <div>
                  <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Notes</label>
                  <textarea
                    value={formData.notes}
                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                    className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white placeholder-slate-400 text-xs sm:text-sm backdrop-blur-sm"
                    rows={3}
                  />
                </div>

                <div className="flex gap-3 sm:gap-4 pt-3 sm:pt-4 border-t border-white/10">
                  <button
                    type="button"
                    onClick={() => {
                      setShowModal(false);
                      resetForm();
                    }}
                    className="flex-1 px-4 sm:px-6 py-2 sm:py-2.5 md:py-3 bg-white/10 text-white rounded-lg sm:rounded-xl font-semibold hover:bg-white/20 transition-colors text-xs sm:text-sm md:text-base"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="flex-1 px-4 sm:px-6 py-2 sm:py-2.5 md:py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg sm:rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all shadow-lg shadow-amber-500/50 text-xs sm:text-sm md:text-base"
                  >
                    {editingShift ? 'Update Shift' : 'Create Shift'}
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}

        {/* Cancel Shift Modal */}
        {showCancelModal && selectedShift && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/70 backdrop-blur-md">
            <div className="bg-gradient-to-br from-slate-800/95 to-slate-900/95 backdrop-blur-xl rounded-xl sm:rounded-2xl shadow-2xl max-w-md w-full border border-white/20 ring-2 ring-white/10">
              <div className="sticky top-0 bg-slate-800/95 backdrop-blur-xl border-b border-white/10 px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between">
                <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-white">Cancel Shift</h2>
                <button
                  onClick={() => {
                    setShowCancelModal(false);
                    setSelectedShift(null);
                    setCancelReason('');
                    setCancelNotes('');
                  }}
                  className="p-2 hover:bg-white/10 rounded-lg transition-colors"
                >
                  <X className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                </button>
              </div>
              <div className="p-4 sm:p-6 space-y-3 sm:space-y-4">
                <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 sm:p-4">
                  <div className="flex items-start gap-2 sm:gap-3">
                    <AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 text-amber-400 mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="font-semibold text-amber-300 text-xs sm:text-sm">Cancel Shift</p>
                      <p className="text-xs sm:text-sm text-amber-200/80 mt-1">
                        Are you sure you want to cancel this shift for {selectedShift.staff_name}?
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Reason (Optional)</label>
                  <input
                    type="text"
                    value={cancelReason}
                    onChange={(e) => setCancelReason(e.target.value)}
                    placeholder="e.g., Staff request, Emergency"
                    className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white placeholder-slate-400 text-xs sm:text-sm backdrop-blur-sm"
                  />
                </div>
                <div>
                  <label className="block text-xs sm:text-sm font-semibold text-slate-300 mb-1.5 sm:mb-2">Notes (Optional)</label>
                  <textarea
                    value={cancelNotes}
                    onChange={(e) => setCancelNotes(e.target.value)}
                    placeholder="Additional notes..."
                    className="w-full px-3 sm:px-4 py-2 sm:py-2.5 bg-white/10 border border-white/20 rounded-lg sm:rounded-xl focus:border-amber-400 focus:ring-2 focus:ring-amber-500/30 text-white placeholder-slate-400 text-xs sm:text-sm backdrop-blur-sm"
                    rows={3}
                  />
                </div>
                <div className="flex gap-3 sm:gap-4 pt-3 sm:pt-4 border-t border-white/10">
                  <button
                    type="button"
                    onClick={() => {
                      setShowCancelModal(false);
                      setSelectedShift(null);
                      setCancelReason('');
                      setCancelNotes('');
                    }}
                    className="flex-1 px-4 sm:px-6 py-2 sm:py-2.5 md:py-3 bg-white/10 text-white rounded-lg sm:rounded-xl font-semibold hover:bg-white/20 transition-colors text-xs sm:text-sm md:text-base"
                  >
                    Cancel
                  </button>
                  <button
                    type="button"
                    onClick={handleCancelShift}
                    disabled={processingStatus === selectedShift.id}
                    className="flex-1 px-4 sm:px-6 py-2 sm:py-2.5 md:py-3 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-lg sm:rounded-xl font-semibold hover:from-red-600 hover:to-red-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-red-500/50 text-xs sm:text-sm md:text-base"
                  >
                    {processingStatus === selectedShift.id ? 'Cancelling...' : 'Confirm Cancel'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Action Blocked Modal */}
        {actionBlocked && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/70 backdrop-blur-md">
            <div className="bg-gradient-to-br from-slate-800/95 to-slate-900/95 backdrop-blur-xl rounded-xl sm:rounded-2xl shadow-2xl max-w-md w-full border border-white/20 ring-2 ring-amber-500/30">
              <div className="p-4 sm:p-5">
                <div className="flex items-center gap-2 sm:gap-3 mb-3">
                  <AlertCircle className="w-5 h-5 sm:w-6 sm:h-6 text-amber-400" />
                  <h3 className="text-lg sm:text-xl font-bold text-white">{actionBlocked.title}</h3>
                </div>
                <p className="text-slate-300 text-sm sm:text-base mb-4">{actionBlocked.message}</p>
                <div className="flex justify-end">
                  <button
                    onClick={() => setActionBlocked(null)}
                    className="px-4 sm:px-5 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg sm:rounded-xl font-semibold transition-all ring-1 ring-white/10"
                  >
                    Got it
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default StaffShiftDashboardPage;
