/**
 * Owner Scheduler - Horizontal timeline view for owner/manager/staff users
 */

import React, { useState, useRef, useEffect, useMemo } from 'react';
import { Appointment, AppointmentStatus, User, Business, Resource } from '../types';
import { Clock, Calendar as CalendarIcon, Filter, GripVertical, CheckCircle2, Trash2, X, User as UserIcon, Mail, Phone, Undo, Redo, ChevronLeft, ChevronRight, Check, AlertTriangle } from 'lucide-react';
import { useAppointments, useUpdateAppointment, useDeleteAppointment } from '../hooks/useAppointments';
import { useResources } from '../hooks/useResources';
import { useServices } from '../hooks/useServices';
import { useAppointmentWebSocket } from '../hooks/useAppointmentWebSocket';
import Portal from '../components/Portal';
import EventAutomations from '../components/EventAutomations';
import { getOverQuotaResourceIds } from '../utils/quotaUtils';

// Time settings
const START_HOUR = 0;  // Midnight
const END_HOUR = 24;   // Midnight next day
const PIXELS_PER_MINUTE = 2.5;
const OVERLAY_HOUR_HEIGHT = 60;
const OVERLAY_RESOURCE_WIDTH = 150; // Width of each resource column in month overlay
const HEADER_HEIGHT = 48;
const SIDEBAR_WIDTH = 250;

// Format duration as hours and minutes when >= 60 min
const formatDuration = (minutes: number): string => {
  if (minutes >= 60) {
    const hours = Math.floor(minutes / 60);
    const mins = minutes % 60;
    return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
  }
  return `${minutes} min`;
};

// Layout settings
const MIN_ROW_HEIGHT = 104;
const EVENT_HEIGHT = 88;
const EVENT_GAP = 8;

interface OwnerSchedulerProps {
  user: User;
  business: Business;
}

const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
  type ViewMode = 'day' | 'week' | 'month';
  const [viewMode, setViewMode] = useState<ViewMode>('day');
  const [viewDate, setViewDate] = useState(new Date());

  // Calculate date range for fetching appointments based on current view
  const dateRange = useMemo(() => {
    const getStartOfWeek = (date: Date): Date => {
      const d = new Date(date);
      const day = d.getDay();
      d.setDate(d.getDate() - day);
      d.setHours(0, 0, 0, 0);
      return d;
    };

    if (viewMode === 'day') {
      const start = new Date(viewDate);
      start.setHours(0, 0, 0, 0);
      const end = new Date(start);
      end.setDate(end.getDate() + 1);
      return { startDate: start, endDate: end };
    } else if (viewMode === 'week') {
      const start = getStartOfWeek(viewDate);
      const end = new Date(start);
      end.setDate(end.getDate() + 7);
      return { startDate: start, endDate: end };
    } else {
      // Month view
      const start = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
      const end = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
      return { startDate: start, endDate: end };
    }
  }, [viewMode, viewDate]);

  // Fetch only appointments in the visible date range (plus pending ones)
  const { data: appointments = [] } = useAppointments(dateRange);
  const { data: resources = [] } = useResources();
  const { data: services = [] } = useServices();
  const updateMutation = useUpdateAppointment();
  const deleteMutation = useDeleteAppointment();

  // Calculate over-quota resources (will be auto-archived when grace period ends)
  const overQuotaResourceIds = useMemo(
    () => getOverQuotaResourceIds(resources as Resource[], user.quota_overages),
    [resources, user.quota_overages]
  );

  // Connect to WebSocket for real-time updates
  useAppointmentWebSocket();
  const [zoomLevel, setZoomLevel] = useState(1);
  const [draggedAppointmentId, setDraggedAppointmentId] = useState<string | null>(null);
  const [dragOffsetMinutes, setDragOffsetMinutes] = useState<number>(0); // Track where on appointment drag started
  const [previewState, setPreviewState] = useState<{ resourceId: string; startTime: Date; } | null>(null);
  const [resizeState, setResizeState] = useState<{ appointmentId: string; direction: 'start' | 'end'; startX: number; originalStart: Date; originalDuration: number; newStart?: Date; newDuration?: number; } | null>(null);
  const [selectedAppointment, setSelectedAppointment] = useState<Appointment | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [isResizing, setIsResizing] = useState(false);
  const [monthDropTarget, setMonthDropTarget] = useState<{ date: Date; rect: DOMRect } | null>(null);
  const [overlayPreview, setOverlayPreview] = useState<{ resourceId: string; hour: number; minute: number } | null>(null);
  const overlayAutoScrollRef = useRef<NodeJS.Timeout | null>(null);
  const monthOverlayDelayRef = useRef<NodeJS.Timeout | null>(null);
  const pendingMonthDropRef = useRef<{ date: Date; rect: DOMRect } | null>(null);

  // State for editing appointments
  const [editDateTime, setEditDateTime] = useState('');
  const [editResource, setEditResource] = useState('');
  const [editDuration, setEditDuration] = useState(0);
  const [editStatus, setEditStatus] = useState<AppointmentStatus>('CONFIRMED');

  // Filter state
  const [showFilterMenu, setShowFilterMenu] = useState(false);
  const [filterStatuses, setFilterStatuses] = useState<Set<AppointmentStatus>>(new Set(['PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'NO_SHOW']));
  const [filterResources, setFilterResources] = useState<Set<string>>(new Set()); // Empty means all
  const [filterServices, setFilterServices] = useState<Set<string>>(new Set()); // Empty means all
  const filterMenuRef = useRef<HTMLDivElement>(null);

  // Update edit state when selected appointment changes
  useEffect(() => {
    if (selectedAppointment) {
      // Format date in local time for datetime-local input (toISOString uses UTC)
      const date = new Date(selectedAppointment.startTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      setEditDateTime(`${year}-${month}-${day}T${hours}:${minutes}`);
      setEditResource(selectedAppointment.resourceId || '');
      setEditDuration(selectedAppointment.durationMinutes);
      setEditStatus(selectedAppointment.status);
    }
  }, [selectedAppointment]);

  // Undo/Redo history
  type HistoryAction = {
    type: 'move' | 'resize';
    appointmentId: string;
    before: { startTime: Date; resourceId: string | null; durationMinutes?: number };
    after: { startTime: Date; resourceId: string | null; durationMinutes?: number };
  };
  const [history, setHistory] = useState<HistoryAction[]>([]);
  const [historyIndex, setHistoryIndex] = useState(-1);

  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const overlayScrollRef = useRef<HTMLDivElement>(null); // Ref for the MonthDropOverlay's scrollable area
  const overlayContainerRef = useRef<HTMLDivElement>(null); // Ref for the overlay container (for wheel events)
  const isOverOverlayRef = useRef(false); // Track if mouse is over the month drop overlay

  // Keyboard shortcuts for undo/redo
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
        e.preventDefault();
        undo();
      } else if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
        e.preventDefault();
        redo();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [historyIndex, history]);

  // Handle wheel events on month drop overlay for horizontal scrolling
  // Use a callback ref pattern to attach the listener when the element is available
  const overlayWheelHandler = React.useCallback((e: WheelEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (overlayScrollRef.current) {
      // Convert vertical scroll to horizontal: scroll up = scroll left, scroll down = scroll right
      overlayScrollRef.current.scrollLeft += e.deltaY;
      // Sync the header
      const header = overlayScrollRef.current.previousElementSibling as HTMLElement;
      if (header) header.scrollLeft = overlayScrollRef.current.scrollLeft;
    }
  }, []);

  // Callback ref that attaches the wheel listener when the overlay mounts
  const overlayContainerCallbackRef = React.useCallback((node: HTMLDivElement | null) => {
    // Remove listener from previous node if any
    if (overlayContainerRef.current) {
      overlayContainerRef.current.removeEventListener('wheel', overlayWheelHandler);
    }
    // Store the new ref
    overlayContainerRef.current = node;
    // Add listener to new node
    if (node) {
      node.addEventListener('wheel', overlayWheelHandler, { passive: false });
    }
  }, [overlayWheelHandler]);

  // Close filter menu when clicking outside
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (filterMenuRef.current && !filterMenuRef.current.contains(e.target as Node)) {
        setShowFilterMenu(false);
      }
    };

    if (showFilterMenu) {
      document.addEventListener('mousedown', handleClickOutside);
      return () => document.removeEventListener('mousedown', handleClickOutside);
    }
  }, [showFilterMenu]);

  // Filter toggle helpers
  const toggleStatusFilter = (status: AppointmentStatus) => {
    const newSet = new Set(filterStatuses);
    if (newSet.has(status)) {
      newSet.delete(status);
    } else {
      newSet.add(status);
    }
    setFilterStatuses(newSet);
  };

  const toggleResourceFilter = (resourceId: string) => {
    const newSet = new Set(filterResources);
    if (newSet.has(resourceId)) {
      newSet.delete(resourceId);
    } else {
      newSet.add(resourceId);
    }
    setFilterResources(newSet);
  };

  const toggleServiceFilter = (serviceId: string) => {
    const newSet = new Set(filterServices);
    if (newSet.has(serviceId)) {
      newSet.delete(serviceId);
    } else {
      newSet.add(serviceId);
    }
    setFilterServices(newSet);
  };

  const clearAllFilters = () => {
    setFilterStatuses(new Set(['PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'NO_SHOW']));
    setFilterResources(new Set());
    setFilterServices(new Set());
  };

  const hasActiveFilters = filterStatuses.size < 5 || filterResources.size > 0 || filterServices.size > 0;

  // Scroll to current time on mount (centered in view)
  useEffect(() => {
    if (!scrollContainerRef.current) return;

    const now = new Date();
    const today = new Date(viewDate);
    today.setHours(0, 0, 0, 0);
    const nowDay = new Date(now);
    nowDay.setHours(0, 0, 0, 0);

    // Only scroll if today is in the current view
    if (viewMode === 'day' && nowDay.getTime() !== today.getTime()) return;

    const container = scrollContainerRef.current;
    const containerWidth = container.clientWidth;

    // Calculate current time offset in pixels
    const startOfDay = new Date(now);
    startOfDay.setHours(START_HOUR, 0, 0, 0);
    const minutesSinceStart = (now.getTime() - startOfDay.getTime()) / (1000 * 60);
    const currentTimeOffset = minutesSinceStart * PIXELS_PER_MINUTE * zoomLevel;

    // Scroll so current time is centered
    const scrollPosition = currentTimeOffset - (containerWidth / 2);
    container.scrollLeft = Math.max(0, scrollPosition);
  }, []);

  const addToHistory = (action: HistoryAction) => {
    // Remove any history after current index (when doing new action after undo)
    const newHistory = history.slice(0, historyIndex + 1);
    newHistory.push(action);
    // Limit history to 50 actions
    if (newHistory.length > 50) {
      newHistory.shift();
    } else {
      setHistoryIndex(historyIndex + 1);
    }
    setHistory(newHistory);
  };

  const undo = () => {
    if (historyIndex < 0) return;
    const action = history[historyIndex];
    const appointment = appointments.find(a => a.id === action.appointmentId);
    if (!appointment) return;

    // Revert to "before" state
    updateMutation.mutate({
      id: action.appointmentId,
      updates: {
        startTime: action.before.startTime,
        resourceId: action.before.resourceId,
        ...(action.before.durationMinutes !== undefined && { durationMinutes: action.before.durationMinutes })
      }
    });
    setHistoryIndex(historyIndex - 1);
  };

  const redo = () => {
    if (historyIndex >= history.length - 1) return;
    const action = history[historyIndex + 1];
    const appointment = appointments.find(a => a.id === action.appointmentId);
    if (!appointment) return;

    // Apply "after" state
    updateMutation.mutate({
      id: action.appointmentId,
      updates: {
        startTime: action.after.startTime,
        resourceId: action.after.resourceId,
        ...(action.after.durationMinutes !== undefined && { durationMinutes: action.after.durationMinutes })
      }
    });
    setHistoryIndex(historyIndex + 1);
  };

  // Date navigation helpers
  const getStartOfWeek = (date: Date): Date => {
    const d = new Date(date);
    const day = d.getDay();
    const diff = d.getDate() - day; // Sunday as start of week
    return new Date(d.setDate(diff));
  };

  const getStartOfMonth = (date: Date): Date => {
    return new Date(date.getFullYear(), date.getMonth(), 1);
  };

  const getEndOfMonth = (date: Date): Date => {
    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
  };

  // Generate calendar grid data for month view
  const getMonthCalendarData = () => {
    const firstDay = getStartOfMonth(viewDate);
    const lastDay = getEndOfMonth(viewDate);
    const startDayOfWeek = firstDay.getDay(); // 0 = Sunday
    const daysInMonth = lastDay.getDate();

    // Create array of week rows
    const weeks: (Date | null)[][] = [];
    let currentWeek: (Date | null)[] = [];

    // Add empty cells for days before the first of the month
    for (let i = 0; i < startDayOfWeek; i++) {
      currentWeek.push(null);
    }

    // Add all days of the month
    for (let day = 1; day <= daysInMonth; day++) {
      currentWeek.push(new Date(viewDate.getFullYear(), viewDate.getMonth(), day));
      if (currentWeek.length === 7) {
        weeks.push(currentWeek);
        currentWeek = [];
      }
    }

    // Add empty cells for remaining days after the last of the month
    if (currentWeek.length > 0) {
      while (currentWeek.length < 7) {
        currentWeek.push(null);
      }
      weeks.push(currentWeek);
    }

    return weeks;
  };

  // Get appointments for a specific day (for month view)
  const getAppointmentsForDay = (date: Date) => {
    const dayStart = new Date(date);
    dayStart.setHours(0, 0, 0, 0);
    const dayEnd = new Date(date);
    dayEnd.setHours(23, 59, 59, 999);

    return filteredAppointments.filter(apt => {
      if (!apt.resourceId) return false; // Exclude pending
      const aptDate = new Date(apt.startTime);
      return aptDate >= dayStart && aptDate <= dayEnd;
    }).sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
  };

  const navigateDate = (direction: 'prev' | 'next') => {
    const newDate = new Date(viewDate);

    if (viewMode === 'day') {
      newDate.setDate(newDate.getDate() + (direction === 'next' ? 1 : -1));
    } else if (viewMode === 'week') {
      newDate.setDate(newDate.getDate() + (direction === 'next' ? 7 : -7));
    } else if (viewMode === 'month') {
      newDate.setMonth(newDate.getMonth() + (direction === 'next' ? 1 : -1));
    }

    setViewDate(newDate);
  };

  const getDateRangeLabel = (): string => {
    if (viewMode === 'day') {
      return viewDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
    } else if (viewMode === 'week') {
      const weekStart = getStartOfWeek(viewDate);
      const weekEnd = new Date(weekStart);
      weekEnd.setDate(weekEnd.getDate() + 6);
      return `${weekStart.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${weekEnd.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;
    } else {
      return viewDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
    }
  };

  // Get the date range for filtering appointments
  const getDateRange = (): { start: Date; end: Date; days: Date[] } => {
    if (viewMode === 'day') {
      const start = new Date(viewDate);
      start.setHours(0, 0, 0, 0);
      const end = new Date(start);
      end.setDate(end.getDate() + 1);
      return { start, end, days: [start] };
    } else if (viewMode === 'week') {
      const start = getStartOfWeek(viewDate);
      start.setHours(0, 0, 0, 0);
      const end = new Date(start);
      end.setDate(end.getDate() + 7);
      const days = Array.from({ length: 7 }, (_, i) => {
        const day = new Date(start);
        day.setDate(day.getDate() + i);
        return day;
      });
      return { start, end, days };
    } else {
      const start = getStartOfMonth(viewDate);
      start.setHours(0, 0, 0, 0);
      const end = new Date(getEndOfMonth(viewDate));
      end.setDate(end.getDate() + 1);
      end.setHours(0, 0, 0, 0);
      const daysInMonth = end.getDate() - start.getDate();
      const days = Array.from({ length: daysInMonth }, (_, i) => {
        const day = new Date(start);
        day.setDate(day.getDate() + i);
        return day;
      });
      return { start, end, days };
    }
  };

  const handleResizeStart = (
    e: React.MouseEvent,
    appointment: Appointment,
    direction: 'start' | 'end'
  ) => {
    e.preventDefault();
    e.stopPropagation();
    setIsResizing(true);
    setResizeState({
      appointmentId: appointment.id,
      direction,
      startX: e.clientX,
      originalStart: new Date(appointment.startTime),
      originalDuration: appointment.durationMinutes,
    });
  };

  useEffect(() => {
    if (!resizeState) return;
    const handleMouseMove = (e: MouseEvent) => {
      const pixelDelta = e.clientX - resizeState.startX;
      const minuteDelta = pixelDelta / (PIXELS_PER_MINUTE * zoomLevel);
      const snappedMinutes = Math.round(minuteDelta / 15) * 15;
      if (snappedMinutes === 0 && resizeState.direction === 'end') return;

      const appointment = appointments.find(apt => apt.id === resizeState.appointmentId);
      if (!appointment) return;

      let newStart = new Date(resizeState.originalStart);
      let newDuration = resizeState.originalDuration;
      if (resizeState.direction === 'end') {
        newDuration = Math.max(15, resizeState.originalDuration + snappedMinutes);
      } else {
        if (resizeState.originalDuration - snappedMinutes >= 15) {
          newStart = new Date(resizeState.originalStart.getTime() + snappedMinutes * 60000);
          newDuration = resizeState.originalDuration - snappedMinutes;
        }
      }

      setResizeState(prev => prev ? { ...prev, newStart, newDuration } : null);
    };

    const handleMouseUp = () => {
      if (resizeState && 'newStart' in resizeState && 'newDuration' in resizeState) {
        const appointment = appointments.find(a => a.id === resizeState.appointmentId);
        if (appointment) {
          // Add to history
          addToHistory({
            type: 'resize',
            appointmentId: resizeState.appointmentId,
            before: {
              startTime: resizeState.originalStart,
              resourceId: appointment.resourceId,
              durationMinutes: resizeState.originalDuration
            },
            after: {
              startTime: resizeState.newStart as Date,
              resourceId: appointment.resourceId,
              durationMinutes: resizeState.newDuration as number
            }
          });

          updateMutation.mutate({
            id: resizeState.appointmentId,
            updates: {
              startTime: resizeState.newStart as Date,
              durationMinutes: resizeState.newDuration as number
            }
          });
        }
      }
      setResizeState(null);
      // Reset isResizing after a brief delay to prevent click handler from firing
      setTimeout(() => setIsResizing(false), 100);
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    };
  }, [resizeState, zoomLevel, appointments, updateMutation]);

  const getOffset = (date: Date) => {
    const { days } = getDateRange();

    // Find which day this appointment belongs to
    const appointmentDate = new Date(date);
    appointmentDate.setHours(0, 0, 0, 0);

    let dayIndex = 0;
    for (let i = 0; i < days.length; i++) {
      const day = new Date(days[i]);
      day.setHours(0, 0, 0, 0);
      if (day.getTime() === appointmentDate.getTime()) {
        dayIndex = i;
        break;
      }
    }

    // Calculate offset within the day
    const startOfDay = new Date(date);
    startOfDay.setHours(START_HOUR, 0, 0, 0);
    const diffMinutes = (date.getTime() - startOfDay.getTime()) / (1000 * 60);
    const offsetWithinDay = Math.max(0, diffMinutes * (PIXELS_PER_MINUTE * zoomLevel));

    // Add the day offset
    const dayOffset = dayIndex * dayWidth;
    return dayOffset + offsetWithinDay;
  };

  const getWidth = (durationMinutes: number) => durationMinutes * (PIXELS_PER_MINUTE * zoomLevel);

  const getStatusColor = (status: Appointment['status'], startTime: Date, endTime: Date) => {
    if (status === 'COMPLETED') return 'bg-green-100 border-green-500 text-green-900 dark:bg-green-900/50 dark:border-green-500 dark:text-green-200';
    if (status === 'NO_SHOW') return 'bg-orange-100 border-orange-500 text-orange-900 dark:bg-orange-900/50 dark:border-orange-500 dark:text-orange-200';
    if (status === 'CANCELLED') return 'bg-gray-100 border-gray-400 text-gray-500 opacity-75 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400';
    const now = new Date();
    if (now > endTime) return 'bg-red-100 border-red-500 text-red-900 dark:bg-red-900/50 dark:border-red-500 dark:text-red-200';
    if (now >= startTime && now <= endTime) return 'bg-yellow-100 border-yellow-500 text-yellow-900 dark:bg-yellow-900/50 dark:border-yellow-500 dark:text-yellow-200';
    return 'bg-blue-100 border-blue-500 text-blue-900 dark:bg-blue-900/50 dark:border-blue-500 dark:text-blue-200';
  };

  // Simplified status colors for month view (no border classes)
  const getMonthStatusColor = (status: Appointment['status'], startTime: Date, endTime: Date) => {
    if (status === 'COMPLETED') return 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800/50';
    if (status === 'NO_SHOW') return 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-200 hover:bg-orange-200 dark:hover:bg-orange-800/50';
    if (status === 'CANCELLED') return 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 opacity-75 hover:bg-gray-200 dark:hover:bg-gray-600';
    const now = new Date();
    if (now > endTime) return 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800/50';
    if (now >= startTime && now <= endTime) return 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-800/50';
    return 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-800/50';
  };

  // Filter appointments by date range and user filters
  const { start: rangeStart, end: rangeEnd } = getDateRange();
  const filteredAppointments = useMemo(() => {
    return appointments.filter(apt => {
      // Apply status filter
      if (!filterStatuses.has(apt.status)) return false;

      // Apply resource filter (empty set means show all)
      if (filterResources.size > 0 && apt.resourceId && !filterResources.has(apt.resourceId)) return false;

      // Apply service filter (empty set means show all)
      if (filterServices.size > 0 && !filterServices.has(apt.serviceId)) return false;

      // Always include pending requests (no resourceId) if they pass above filters
      if (!apt.resourceId) return true;

      // Filter scheduled appointments by date range
      const aptDate = new Date(apt.startTime);
      return aptDate >= rangeStart && aptDate < rangeEnd;
    });
  }, [appointments, rangeStart, rangeEnd, filterStatuses, filterResources, filterServices]);

  const resourceLayouts = useMemo(() => {
    return resources.map(resource => {
      const allResourceApps = filteredAppointments.filter(a => a.resourceId === resource.id);
      const layoutApps = allResourceApps.filter(a => a.id !== draggedAppointmentId);

      // Add preview for dragged appointment
      if (previewState && previewState.resourceId === resource.id && draggedAppointmentId) {
        const original = filteredAppointments.find(a => a.id === draggedAppointmentId);
        if (original) {
          layoutApps.push({ ...original, startTime: previewState.startTime, id: 'PREVIEW' });
        }
      }

      // Apply resize state to appointments for live preview
      const layoutAppsWithResize = layoutApps.map(apt => {
        if (resizeState && apt.id === resizeState.appointmentId && resizeState.newStart && resizeState.newDuration) {
          return { ...apt, startTime: resizeState.newStart, durationMinutes: resizeState.newDuration };
        }
        return apt;
      });

      layoutAppsWithResize.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime() || b.durationMinutes - a.durationMinutes);

      const lanes: number[] = [];
      const visibleAppointments = layoutAppsWithResize.map(apt => {
        const start = new Date(apt.startTime).getTime();
        const end = start + apt.durationMinutes * 60000;
        let laneIndex = -1;

        for (let i = 0; i < lanes.length; i++) {
          if (lanes[i] <= start) {
            laneIndex = i;
            lanes[i] = end;
            break;
          }
        }
        if (laneIndex === -1) {
          lanes.push(end);
          laneIndex = lanes.length - 1;
        }
        return { ...apt, laneIndex };
      });

      const laneCount = Math.max(1, lanes.length);
      const requiredHeight = Math.max(MIN_ROW_HEIGHT, (laneCount * (EVENT_HEIGHT + EVENT_GAP)) + EVENT_GAP);
      const finalAppointments = [...visibleAppointments, ...allResourceApps.filter(a => a.id === draggedAppointmentId).map(a => ({ ...a, laneIndex: 0 }))];

      return { resource, height: requiredHeight, appointments: finalAppointments, laneCount };
    });
  }, [filteredAppointments, draggedAppointmentId, previewState, resources, resizeState]);

  const handleDragStart = (e: React.DragEvent, appointmentId: string) => {
    if (resizeState) return e.preventDefault();
    setIsDragging(true);
    e.dataTransfer.setData('appointmentId', appointmentId);
    e.dataTransfer.effectAllowed = 'move';

    // In month view, we don't track minute offset
    if (viewMode === 'month') {
      setDragOffsetMinutes(0);
    } else {
      // Calculate where on the appointment the drag started (relative to appointment, not timeline)
      const target = e.currentTarget as HTMLElement;
      const rect = target.getBoundingClientRect();
      const offsetX = e.clientX - rect.left;  // Just the offset within the appointment itself
      const offsetMinutes = Math.round((offsetX / (PIXELS_PER_MINUTE * zoomLevel)) / 15) * 15;
      setDragOffsetMinutes(offsetMinutes);
    }

    setTimeout(() => setDraggedAppointmentId(appointmentId), 0);
  };

  const handleDragEnd = () => {
    setDraggedAppointmentId(null);
    setPreviewState(null);
    setMonthDropTarget(null);
    setOverlayPreview(null);
    isOverOverlayRef.current = false;
    pendingMonthDropRef.current = null;
    // Clear any pending overlay delay timeout
    if (monthOverlayDelayRef.current) {
      clearTimeout(monthOverlayDelayRef.current);
      monthOverlayDelayRef.current = null;
    }
    // Clear any auto-scroll interval
    if (overlayAutoScrollRef.current) {
      clearInterval(overlayAutoScrollRef.current);
      overlayAutoScrollRef.current = null;
    }
    // Reset isDragging after a short delay to allow click detection
    setTimeout(() => setIsDragging(false), 100);
  };

  const handleMonthCellDragOver = (e: React.DragEvent, date: Date) => {
    if (!draggedAppointmentId) return;
    // Don't update target if mouse is over the overlay
    if (isOverOverlayRef.current) return;

    e.preventDefault();
    e.stopPropagation();

    const target = e.currentTarget as HTMLElement;
    const rect = target.getBoundingClientRect();

    // If we're already showing the overlay for this date, do nothing
    if (monthDropTarget && monthDropTarget.date.getTime() === date.getTime()) {
      return;
    }

    // If we moved to a different date, cancel any pending timeout and clear overlay
    if (pendingMonthDropRef.current && pendingMonthDropRef.current.date.getTime() !== date.getTime()) {
      if (monthOverlayDelayRef.current) {
        clearTimeout(monthOverlayDelayRef.current);
        monthOverlayDelayRef.current = null;
      }
      setMonthDropTarget(null);
    }

    // Store the pending drop target
    pendingMonthDropRef.current = { date, rect };

    // Start a new timeout if not already pending for this date
    if (!monthOverlayDelayRef.current) {
      monthOverlayDelayRef.current = setTimeout(() => {
        if (pendingMonthDropRef.current) {
          setMonthDropTarget(pendingMonthDropRef.current);
        }
        monthOverlayDelayRef.current = null;
      }, 1000); // 1 second delay
    }
  };

  const handleMonthTimeDrop = (e: React.DragEvent, targetHour: number, targetMinute: number, targetResourceId?: string) => {
    e.preventDefault();
    e.stopPropagation();
    if (!draggedAppointmentId || !monthDropTarget) return;

    const appointment = appointments.find(a => a.id === draggedAppointmentId);
    if (appointment) {
      const newStartTime = new Date(monthDropTarget.date);
      newStartTime.setHours(targetHour, targetMinute, 0, 0);

      // Use target resource if provided, otherwise keep existing
      const newResourceId = targetResourceId !== undefined ? targetResourceId : appointment.resourceId;

      // Add to history
      addToHistory({
        type: 'move',
        appointmentId: appointment.id,
        before: {
          startTime: new Date(appointment.startTime),
          resourceId: appointment.resourceId,
          durationMinutes: appointment.durationMinutes
        },
        after: {
          startTime: newStartTime,
          resourceId: newResourceId,
          durationMinutes: appointment.durationMinutes
        }
      });

      updateMutation.mutate({
        id: appointment.id,
        updates: {
          startTime: newStartTime,
          resourceId: newResourceId,
          durationMinutes: appointment.durationMinutes // Required to calculate end_time
        }
      });
    }
    setMonthDropTarget(null);
    setDraggedAppointmentId(null);
    setOverlayPreview(null);
    isOverOverlayRef.current = false;
  };

  const handleOverlayAutoScroll = (e: React.DragEvent) => {
    if (!overlayScrollRef.current) return;

    const rect = overlayScrollRef.current.getBoundingClientRect();
    const mouseX = e.clientX;
    const scrollThreshold = 50; // pixels from edge to start scrolling
    const scrollSpeed = 8;      // pixels per scroll step

    // Clear any existing auto-scroll
    if (overlayAutoScrollRef.current) {
      clearInterval(overlayAutoScrollRef.current);
      overlayAutoScrollRef.current = null;
    }

    // Start auto-scrolling if near left or right edge
    if (mouseX < rect.left + scrollThreshold && overlayScrollRef.current.scrollLeft > 0) {
      // Auto-scroll left
      overlayAutoScrollRef.current = setInterval(() => {
        if (overlayScrollRef.current) {
          overlayScrollRef.current.scrollLeft -= scrollSpeed;
          // Sync header
          const header = overlayScrollRef.current.previousElementSibling as HTMLElement;
          if (header) header.scrollLeft = overlayScrollRef.current.scrollLeft;
        }
      }, 16);
    } else if (mouseX > rect.right - scrollThreshold &&
               overlayScrollRef.current.scrollLeft < overlayScrollRef.current.scrollWidth - overlayScrollRef.current.clientWidth) {
      // Auto-scroll right
      overlayAutoScrollRef.current = setInterval(() => {
        if (overlayScrollRef.current) {
          overlayScrollRef.current.scrollLeft += scrollSpeed;
          // Sync header
          const header = overlayScrollRef.current.previousElementSibling as HTMLElement;
          if (header) header.scrollLeft = overlayScrollRef.current.scrollLeft;
        }
      }, 16);
    }
  };

  const handleAppointmentClick = (appointment: Appointment) => {
    // Only open modal if we didn't actually drag or resize
    if (!isDragging && !isResizing) {
      setSelectedAppointment(appointment);
    }
  };

  const handleSaveAppointment = () => {
    if (!selectedAppointment) return;

    // Validate duration is at least 15 minutes
    const validDuration = editDuration >= 15 ? editDuration : 15;

    const updates: any = {
      startTime: new Date(editDateTime),
      durationMinutes: validDuration,
      status: editStatus,
    };

    if (editResource) {
      updates.resourceId = editResource;
    }

    updateMutation.mutate({
      id: selectedAppointment.id,
      updates
    });

    setSelectedAppointment(null);
  };

  const handleTimelineDragOver = (e: React.DragEvent) => {
    if (resizeState) return;
    e.preventDefault(); e.dataTransfer.dropEffect = 'move';
    if (!scrollContainerRef.current || !draggedAppointmentId) return;

    const container = scrollContainerRef.current;
    const rect = container.getBoundingClientRect();
    const offsetX = e.clientX - rect.left + container.scrollLeft;
    const offsetY = e.clientY - rect.top + container.scrollTop - HEADER_HEIGHT;
    if (offsetY < 0) return;

    let targetResourceId: string | null = null;
    for (let i = 0, currentTop = 0; i < resourceLayouts.length; i++) {
      if (offsetY >= currentTop && offsetY < currentTop + resourceLayouts[i].height) {
        targetResourceId = resourceLayouts[i].resource.id; break;
      }
      currentTop += resourceLayouts[i].height;
    }
    if (!targetResourceId) return;

    // Calculate new start time, accounting for where on the appointment the drag started
    const mouseMinutes = Math.round((offsetX / (PIXELS_PER_MINUTE * zoomLevel)) / 15) * 15;
    const newStartMinutes = mouseMinutes - dragOffsetMinutes;
    const newStartTime = new Date(viewDate);
    newStartTime.setHours(START_HOUR, 0, 0, 0);
    newStartTime.setTime(newStartTime.getTime() + newStartMinutes * 60000);

    if (!previewState || previewState.resourceId !== targetResourceId || previewState.startTime.getTime() !== newStartTime.getTime()) {
      setPreviewState({ resourceId: targetResourceId, startTime: newStartTime });
    }
  };

  const handleTimelineDrop = (e: React.DragEvent) => {
    e.preventDefault(); if (resizeState) return;
    const appointmentId = e.dataTransfer.getData('appointmentId');
    if (appointmentId && previewState) {
      const appointment = appointments.find(a => a.id === appointmentId);
      if (appointment) {
        // Add to history
        addToHistory({
          type: 'move',
          appointmentId,
          before: {
            startTime: new Date(appointment.startTime),
            resourceId: appointment.resourceId,
            durationMinutes: appointment.durationMinutes
          },
          after: {
            startTime: previewState.startTime,
            resourceId: previewState.resourceId,
            durationMinutes: appointment.durationMinutes
          }
        });

        updateMutation.mutate({
          id: appointmentId,
          updates: {
            startTime: previewState.startTime,
            durationMinutes: appointment.durationMinutes,
            resourceId: previewState.resourceId,
            status: appointment.status === 'PENDING' ? 'CONFIRMED' : appointment.status
          }
        });
      }
    }
    setDraggedAppointmentId(null); setPreviewState(null);
  };

  const handleDropToPending = (e: React.DragEvent) => {
    e.preventDefault();
    const appointmentId = e.dataTransfer.getData('appointmentId');
    if (appointmentId) {
      updateMutation.mutate({
        id: appointmentId,
        updates: { resourceId: null, status: 'PENDING' }
      });
    }
    setDraggedAppointmentId(null); setPreviewState(null);
  };

  const handleDropToArchive = (e: React.DragEvent) => {
    e.preventDefault();
    const appointmentId = e.dataTransfer.getData('appointmentId');
    if (appointmentId) {
      deleteMutation.mutate(appointmentId);
    }
    setDraggedAppointmentId(null); setPreviewState(null);
  };

  const handleSidebarDragOver = (e: React.DragEvent) => {
    e.preventDefault(); e.dataTransfer.dropEffect = 'move';
    if (previewState) setPreviewState(null);
  };

  const { days } = getDateRange();
  const dayWidth = (END_HOUR - START_HOUR) * 60 * (PIXELS_PER_MINUTE * zoomLevel);
  const timelineWidth = dayWidth * days.length;
  const timeMarkers = Array.from({ length: END_HOUR - START_HOUR + 1 }, (_, i) => START_HOUR + i);
  const pendingAppointments = filteredAppointments.filter(a => !a.resourceId);

  return (
    <div className="flex flex-col h-full overflow-hidden select-none bg-white dark:bg-gray-900 transition-colors duration-200">
      <div className="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm shrink-0 z-10 transition-colors duration-200">
        <div className="flex items-center gap-4">
          {/* Date Navigation */}
          <div className="flex items-center gap-2">
            <button
              onClick={() => navigateDate('prev')}
              className="p-1.5 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
              title="Previous"
            >
              <ChevronLeft size={20} />
            </button>
            <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 rounded-md text-gray-700 dark:text-gray-200 font-medium transition-colors duration-200 w-[320px] justify-center">
              <CalendarIcon size={16} />
              <span className="text-center">{getDateRangeLabel()}</span>
            </div>
            <button
              onClick={() => navigateDate('next')}
              className="p-1.5 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
              title="Next"
            >
              <ChevronRight size={20} />
            </button>
          </div>

          {/* View Mode Switcher */}
          <div className="flex items-center gap-1 border-l border-gray-300 dark:border-gray-600 pl-4">
            <button
              onClick={() => setViewMode('day')}
              className={`px-3 py-1.5 text-sm font-medium rounded transition-colors ${
                viewMode === 'day'
                  ? 'bg-blue-500 text-white'
                  : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
              }`}
            >
              Day
            </button>
            <button
              onClick={() => setViewMode('week')}
              className={`px-3 py-1.5 text-sm font-medium rounded transition-colors ${
                viewMode === 'week'
                  ? 'bg-blue-500 text-white'
                  : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
              }`}
            >
              Week
            </button>
            <button
              onClick={() => setViewMode('month')}
              className={`px-3 py-1.5 text-sm font-medium rounded transition-colors ${
                viewMode === 'month'
                  ? 'bg-blue-500 text-white'
                  : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
              }`}
            >
              Month
            </button>
          </div>
          {viewMode !== 'month' && (
            <div className="flex items-center gap-2">
              <button className="p-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors" onClick={() => setZoomLevel(Math.max(0.5, zoomLevel - 0.25))}>-</button>
              <span className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Zoom</span>
              <button className="p-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors" onClick={() => setZoomLevel(Math.min(2, zoomLevel + 0.25))}>+</button>
            </div>
          )}
          <div className="flex items-center gap-1 border-l border-gray-300 dark:border-gray-600 pl-4">
            <button
              onClick={undo}
              disabled={historyIndex < 0}
              className={`p-2 rounded transition-colors ${
                historyIndex < 0
                  ? 'text-gray-300 dark:text-gray-600 cursor-not-allowed'
                  : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
              }`}
              title="Undo (Ctrl+Z)"
            >
              <Undo size={18} />
            </button>
            <button
              onClick={redo}
              disabled={historyIndex >= history.length - 1}
              className={`p-2 rounded transition-colors ${
                historyIndex >= history.length - 1
                  ? 'text-gray-300 dark:text-gray-600 cursor-not-allowed'
                  : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
              }`}
              title="Redo (Ctrl+Y)"
            >
              <Redo size={18} />
            </button>
          </div>
          {/* Status Legend */}
          <div className="flex items-center gap-3 border-l border-gray-300 dark:border-gray-600 pl-4">
            <span className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Status:</span>
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-1">
                <div className="w-3 h-3 rounded bg-blue-100 border border-blue-500"></div>
                <span className="text-xs text-gray-600 dark:text-gray-400">Upcoming</span>
              </div>
              <div className="flex items-center gap-1">
                <div className="w-3 h-3 rounded bg-yellow-100 border border-yellow-500"></div>
                <span className="text-xs text-gray-600 dark:text-gray-400">In Progress</span>
              </div>
              <div className="flex items-center gap-1">
                <div className="w-3 h-3 rounded bg-red-100 border border-red-500"></div>
                <span className="text-xs text-gray-600 dark:text-gray-400">Overdue</span>
              </div>
              <div className="flex items-center gap-1">
                <div className="w-3 h-3 rounded bg-green-100 border border-green-500"></div>
                <span className="text-xs text-gray-600 dark:text-gray-400">Completed</span>
              </div>
              <div className="flex items-center gap-1">
                <div className="w-3 h-3 rounded bg-gray-100 border border-gray-400"></div>
                <span className="text-xs text-gray-600 dark:text-gray-400">Cancelled</span>
              </div>
            </div>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-brand-500 rounded-lg hover:bg-brand-600 transition-colors shadow-sm">
            + New Appointment
          </button>
          {/* Filter Dropdown */}
          <div className="relative" ref={filterMenuRef}>
            <button
              onClick={() => setShowFilterMenu(!showFilterMenu)}
              className={`p-2 rounded-lg border transition-colors relative ${
                hasActiveFilters
                  ? 'text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-900/30 border-brand-300 dark:border-brand-700 hover:bg-brand-100 dark:hover:bg-brand-900/50'
                  : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 border-gray-200 dark:border-gray-600'
              }`}
            >
              <Filter size={18} />
              {hasActiveFilters && (
                <span className="absolute -top-1 -right-1 w-3 h-3 bg-brand-500 rounded-full"></span>
              )}
            </button>
            {showFilterMenu && (
              <div className="absolute right-0 top-full mt-2 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50 overflow-hidden">
                <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                  <h3 className="font-semibold text-gray-900 dark:text-white text-sm">Filters</h3>
                  {hasActiveFilters && (
                    <button
                      onClick={clearAllFilters}
                      className="text-xs text-brand-600 dark:text-brand-400 hover:underline"
                    >
                      Clear all
                    </button>
                  )}
                </div>
                <div className="max-h-80 overflow-y-auto">
                  {/* Status Filter */}
                  <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
                    <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Status</h4>
                    <div className="space-y-1">
                      {(['PENDING', 'CONFIRMED', 'COMPLETED', 'CANCELLED', 'NO_SHOW'] as AppointmentStatus[]).map(status => (
                        <div
                          key={status}
                          onClick={() => toggleStatusFilter(status)}
                          className="flex items-center gap-2 py-1 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 px-2 -mx-2 rounded"
                        >
                          <div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${
                            filterStatuses.has(status)
                              ? 'bg-brand-500 border-brand-500'
                              : 'border-gray-300 dark:border-gray-600'
                          }`}>
                            {filterStatuses.has(status) && <Check size={12} className="text-white" />}
                          </div>
                          <span className="text-sm text-gray-700 dark:text-gray-300 capitalize">
                            {status.toLowerCase().replace('_', ' ')}
                          </span>
                          <div className={`w-2 h-2 rounded-full ml-auto ${
                            status === 'COMPLETED' ? 'bg-green-500' :
                            status === 'CANCELLED' ? 'bg-gray-400' :
                            status === 'NO_SHOW' ? 'bg-orange-500' :
                            status === 'CONFIRMED' ? 'bg-blue-500' :
                            'bg-yellow-400'
                          }`}></div>
                        </div>
                      ))}
                    </div>
                  </div>
                  {/* Resource Filter */}
                  <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
                    <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Resources</h4>
                    <div className="space-y-1">
                      {resources.map(resource => (
                        <div
                          key={resource.id}
                          onClick={() => toggleResourceFilter(resource.id)}
                          className="flex items-center gap-2 py-1 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 px-2 -mx-2 rounded"
                        >
                          <div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${
                            filterResources.size === 0 || filterResources.has(resource.id)
                              ? 'bg-brand-500 border-brand-500'
                              : 'border-gray-300 dark:border-gray-600'
                          }`}>
                            {(filterResources.size === 0 || filterResources.has(resource.id)) && <Check size={12} className="text-white" />}
                          </div>
                          <span className="text-sm text-gray-700 dark:text-gray-300 truncate">{resource.name}</span>
                          <span className="text-xs text-gray-400 dark:text-gray-500 capitalize ml-auto">{resource.type.toLowerCase()}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                  {/* Service Filter */}
                  <div className="px-4 py-3">
                    <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Services</h4>
                    <div className="space-y-1">
                      {services.map(service => (
                        <div
                          key={service.id}
                          onClick={() => toggleServiceFilter(service.id)}
                          className="flex items-center gap-2 py-1 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 px-2 -mx-2 rounded"
                        >
                          <div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${
                            filterServices.size === 0 || filterServices.has(service.id)
                              ? 'bg-brand-500 border-brand-500'
                              : 'border-gray-300 dark:border-gray-600'
                          }`}>
                            {(filterServices.size === 0 || filterServices.has(service.id)) && <Check size={12} className="text-white" />}
                          </div>
                          <span className="text-sm text-gray-700 dark:text-gray-300 truncate">{service.name}</span>
                          <span className="text-xs text-gray-400 dark:text-gray-500 ml-auto">{service.durationMinutes}min</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Month View - Calendar Grid */}
      {viewMode === 'month' && (
        <div className="flex flex-1 overflow-hidden">
          {/* Pending Sidebar for Month View */}
          <div className="flex flex-col bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shrink-0 shadow-lg z-20 transition-colors duration-200" style={{ width: SIDEBAR_WIDTH }}>
            <div className={`flex-1 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-4 flex flex-col transition-colors duration-200 ${draggedAppointmentId ? 'bg-blue-50/50 dark:bg-blue-900/20' : ''}`}>
              <h3 className="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2 shrink-0"><Clock size={12} /> Pending Requests ({pendingAppointments.length})</h3>
              <div className="space-y-2 overflow-y-auto flex-1 mb-2">
                {pendingAppointments.length === 0 && (<div className="text-xs text-gray-400 italic text-center py-4">No pending requests</div>)}
                {pendingAppointments.map(apt => {
                  const service = services.find(s => s.id === apt.serviceId);
                  return (
                    <div
                      key={apt.id}
                      className="p-3 bg-white dark:bg-gray-700 border border-l-4 border-gray-200 dark:border-gray-600 border-l-orange-400 dark:border-l-orange-500 rounded shadow-sm cursor-pointer hover:shadow-md transition-all"
                      onClick={() => handleAppointmentClick(apt)}
                    >
                      <p className="font-semibold text-sm text-gray-900 dark:text-white">{apt.customerName}</p>
                      <p className="text-xs text-gray-500 dark:text-gray-400">{service?.name}</p>
                      <div className="mt-2 flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
                        <Clock size={10} /> {formatDuration(apt.durationMinutes)}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Calendar Grid */}
          <div className="flex-1 flex flex-col overflow-hidden bg-white dark:bg-gray-900 transition-colors duration-200">
            <div className="flex-1 overflow-auto p-4">
              {/* Day headers */}
              <div className="grid grid-cols-7 gap-px bg-gray-200 dark:bg-gray-700 rounded-t-lg overflow-hidden">
                {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
                  <div key={day} className="bg-gray-50 dark:bg-gray-800 px-2 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    {day}
                  </div>
                ))}
              </div>

              {/* Calendar weeks */}
              <div className="grid grid-cols-7 gap-px bg-gray-200 dark:bg-gray-700 rounded-b-lg overflow-hidden">
                {getMonthCalendarData().flat().map((date, index) => {
                  const isToday = date && new Date().toDateString() === date.toDateString();
                  const dayAppointments = date ? getAppointmentsForDay(date) : [];
                  const displayedAppointments = dayAppointments.slice(0, 3);
                  const remainingCount = dayAppointments.length - 3;

                  return (
                    <div
                      key={index}
                      className={`min-h-[120px] p-2 transition-colors relative ${
                        date && date.getMonth() !== viewDate.getMonth()
                          ? 'bg-gray-100 dark:bg-gray-800/70 opacity-50'
                          : date
                            ? 'bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800'
                            : 'bg-gray-50 dark:bg-gray-800/50'
                      } ${monthDropTarget?.date.getTime() === date?.getTime() && date?.getMonth() === viewDate.getMonth() ? 'ring-2 ring-brand-500 ring-inset bg-brand-50 dark:bg-brand-900/20' : ''}`}
                      onClick={() => { if (date) { setViewDate(date); setViewMode('day'); } }}
                      onDragOver={(e) => date && handleMonthCellDragOver(e, date)}
                    >
                      {date && (
                        <>
                          <div className={`text-sm font-medium mb-1 ${
                            isToday
                              ? 'w-7 h-7 flex items-center justify-center rounded-full bg-brand-500 text-white'
                              : 'text-gray-700 dark:text-gray-300'
                          }`}>
                            {date.getDate()}
                          </div>
                          <div className="space-y-1">
                            {displayedAppointments.map(apt => {
                              const service = services.find(s => s.id === apt.serviceId);
                              const resource = resources.find(r => r.id === apt.resourceId);
                              const startTime = new Date(apt.startTime);
                              const isDragged = apt.id === draggedAppointmentId;
                              
                              const endTime = new Date(startTime.getTime() + apt.durationMinutes * 60000);

                              return (
                                <div
                                  key={apt.id}
                                  className={`text-xs p-1.5 rounded truncate cursor-grab active:cursor-grabbing transition-colors ${getMonthStatusColor(apt.status, startTime, endTime)} ${isDragged ? 'opacity-50' : ''}`}
                                  draggable
                                  onDragStart={(e) => handleDragStart(e, apt.id)}
                                  onDragEnd={handleDragEnd}
                                  onClick={(e) => { e.stopPropagation(); handleAppointmentClick(apt); }}
                                  title={`${apt.customerName} - ${service?.name} with ${resource?.name}`}
                                >
                                  <span className="font-medium">{startTime.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}</span>
                                  {' '}{apt.customerName}
                                </div>
                              );
                            })}
                            {remainingCount > 0 && (
                              <div className="text-xs text-gray-500 dark:text-gray-400 font-medium pl-1">
                                +{remainingCount} more
                              </div>
                            )}
                          </div>
                        </>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* Month View Drop Overlay - Mini Day Scheduler with Resource Rows */}
      {monthDropTarget && draggedAppointmentId && (() => {
        // Pre-calculate resource layouts with lanes for this day
        const dayStart = new Date(monthDropTarget.date);
        dayStart.setHours(0, 0, 0, 0);
        const dayEnd = new Date(dayStart);
        dayEnd.setHours(23, 59, 59, 999);

        const OVERLAY_ROW_HEIGHT = 50; // Height per lane in overlay
        const OVERLAY_LANE_GAP = 2;
        const OVERLAY_PIXELS_PER_MINUTE = 1.5;
        const overlayTimelineWidth = (END_HOUR - START_HOUR) * 60 * OVERLAY_PIXELS_PER_MINUTE;

        // Get the dragged appointment for preview calculations
        const draggedApt = appointments.find(a => a.id === draggedAppointmentId);

        const overlayResourceLayouts = resources.map(resource => {
          // Get existing appointments for this resource on this day (excluding the dragged one)
          let resourceApps = appointments.filter(apt => {
            if (apt.resourceId !== resource.id || apt.id === draggedAppointmentId) return false;
            const t = new Date(apt.startTime);
            return t >= dayStart && t <= dayEnd;
          });

          // Add preview appointment if hovering over this resource
          if (overlayPreview?.resourceId === resource.id && draggedApt) {
            const previewStartMinutes = (overlayPreview.hour - START_HOUR) * 60 + overlayPreview.minute;
            resourceApps = [...resourceApps, {
              ...draggedApt,
              id: 'PREVIEW',
              startTime: new Date(dayStart.getTime() + previewStartMinutes * 60000),
            }];
          }

          // Sort by start time, then by duration (longer first)
          resourceApps.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime() || b.durationMinutes - a.durationMinutes);

          // Calculate lanes (respecting maxConcurrentEvents)
          const lanes: number[] = [];
          const maxLanes = resource.maxConcurrentEvents === 0 ? Infinity : resource.maxConcurrentEvents;
          const laidOutApps = resourceApps.map(apt => {
            const start = new Date(apt.startTime);
            const startMinutes = (start.getHours() - START_HOUR) * 60 + start.getMinutes();
            const endMinutes = startMinutes + apt.durationMinutes;

            let laneIndex = -1;
            for (let i = 0; i < Math.min(lanes.length, maxLanes); i++) {
              if (lanes[i] <= startMinutes) {
                laneIndex = i;
                lanes[i] = endMinutes;
                break;
              }
            }
            if (laneIndex === -1 && lanes.length < maxLanes) {
              lanes.push(endMinutes);
              laneIndex = lanes.length - 1;
            } else if (laneIndex === -1) {
              laneIndex = Math.min(lanes.length - 1, maxLanes - 1);
            }

            return { ...apt, laneIndex, startMinutes, endMinutes, isPreview: apt.id === 'PREVIEW' };
          });

          const laneCount = Math.max(1, Math.min(lanes.length, maxLanes === Infinity ? lanes.length : maxLanes));
          const rowHeight = laneCount * OVERLAY_ROW_HEIGHT + OVERLAY_LANE_GAP;

          return { resource, appointments: laidOutApps, laneCount, rowHeight };
        });

        const totalRowsHeight = overlayResourceLayouts.reduce((sum, r) => sum + r.rowHeight, 0);

        return (
          <Portal>
            <div
              ref={overlayContainerCallbackRef}
              className="fixed z-50 bg-white dark:bg-gray-800 shadow-xl rounded-lg border border-brand-200 dark:border-brand-800 overflow-hidden flex flex-col"
              style={{
                top: Math.min(window.innerHeight - 400, Math.max(10, monthDropTarget.rect.top - 50)),
                left: Math.max(10, monthDropTarget.rect.left - 200),
                width: Math.min(900, window.innerWidth - 40),
                height: Math.min(400, totalRowsHeight + 80),
                animation: 'fadeIn 0.2s ease-out'
              }}
              onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
              onDragEnter={() => { isOverOverlayRef.current = true; }}
              onDragLeave={(e) => {
                // Only set to false if we're actually leaving the overlay (not entering a child)
                const rect = e.currentTarget.getBoundingClientRect();
                if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {
                  isOverOverlayRef.current = false;
                }
              }}
            >
              {/* Header */}
              <div className="bg-brand-50 dark:bg-brand-900/30 px-3 py-2 border-b border-brand-100 dark:border-brand-800 flex items-center justify-between shrink-0">
                <span className="text-xs font-bold text-brand-700 dark:text-brand-300 uppercase tracking-wider">
                  {monthDropTarget.date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
                </span>
                <div className="text-[10px] text-brand-500 dark:text-brand-400 bg-brand-100 dark:bg-brand-800/50 px-1.5 py-0.5 rounded-full">
                  Drop on resource row
                </div>
              </div>

              {/* Main content area */}
              <div className="flex-1 flex overflow-hidden">
                {/* Resource names sidebar - fixed */}
                <div className="w-28 shrink-0 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col">
                  {/* Corner cell above resource names */}
                  <div className="h-6 border-b border-gray-200 dark:border-gray-700 shrink-0"></div>
                  {/* Resource names - synced scroll */}
                  <div className="flex-1 overflow-y-auto overflow-x-hidden" style={{ scrollbarWidth: 'none' }} ref={(el) => {
                    if (el && overlayScrollRef.current) {
                      el.scrollTop = overlayScrollRef.current.scrollTop;
                    }
                  }}>
                    {overlayResourceLayouts.map(layout => (
                      <div
                        key={layout.resource.id}
                        className="border-b border-gray-100 dark:border-gray-800 px-2 flex items-center"
                        style={{ height: layout.rowHeight }}
                      >
                        <div className="truncate">
                          <span className="text-[10px] font-semibold text-gray-700 dark:text-gray-300 block truncate">
                            {layout.resource.name}
                          </span>
                          {layout.laneCount > 1 && (
                            <span className="text-[8px] text-brand-500 dark:text-brand-400">
                              {layout.laneCount} lanes
                            </span>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Timeline area - scrollable both ways */}
                <div className="flex-1 flex flex-col overflow-hidden">
                  {/* Time header - horizontal scroll only */}
                  <div className="h-6 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 overflow-x-auto overflow-y-hidden shrink-0" style={{ scrollbarWidth: 'none' }}>
                    <div className="flex" style={{ width: overlayTimelineWidth }}>
                      {Array.from({ length: END_HOUR - START_HOUR }, (_, i) => START_HOUR + i).map(hour => (
                        <div
                          key={hour}
                          className="border-r border-gray-200 dark:border-gray-700 text-[9px] font-medium text-gray-500 dark:text-gray-400 px-1 flex items-center"
                          style={{ width: 60 * OVERLAY_PIXELS_PER_MINUTE }}
                        >
                          {hour === 0 ? '12a' : hour === 12 ? '12p' : hour > 12 ? `${hour - 12}p` : `${hour}a`}
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Timeline grid with appointments */}
                  <div className="flex-1 overflow-auto custom-scrollbar" ref={overlayScrollRef} onDragOver={(e) => {
                    e.preventDefault();
                    handleOverlayAutoScroll(e);
                  }} onScroll={(e) => {
                    // Sync horizontal scroll with header
                    const header = e.currentTarget.previousElementSibling as HTMLElement;
                    if (header) header.scrollLeft = e.currentTarget.scrollLeft;
                  }}>
                    <div style={{ width: overlayTimelineWidth, minHeight: totalRowsHeight }}>
                      {overlayResourceLayouts.map((layout) => (
                        <div
                          key={layout.resource.id}
                          className="relative border-b border-gray-100 dark:border-gray-800"
                          style={{ height: layout.rowHeight }}
                        >
                          {/* Hour grid lines */}
                          {Array.from({ length: END_HOUR - START_HOUR }, (_, i) => START_HOUR + i).map(hour => (
                            <React.Fragment key={hour}>
                              {/* Hour line */}
                              <div
                                className="absolute top-0 bottom-0 border-r border-gray-200 dark:border-gray-700"
                                style={{ left: hour * 60 * OVERLAY_PIXELS_PER_MINUTE }}
                              ></div>
                              {/* Half-hour line */}
                              <div
                                className="absolute top-0 bottom-0 border-r border-dashed border-gray-100 dark:border-gray-800"
                                style={{ left: (hour * 60 + 30) * OVERLAY_PIXELS_PER_MINUTE }}
                              ></div>
                            </React.Fragment>
                          ))}

                          {/* Drop zones for each half-hour */}
                          {Array.from({ length: (END_HOUR - START_HOUR) * 2 }, (_, i) => {
                            const hour = START_HOUR + Math.floor(i / 2);
                            const minute = (i % 2) * 30;
                            return (
                              <div
                                key={i}
                                className="absolute top-0 bottom-0"
                                style={{
                                  left: (hour * 60 + minute - START_HOUR * 60) * OVERLAY_PIXELS_PER_MINUTE,
                                  width: 30 * OVERLAY_PIXELS_PER_MINUTE
                                }}
                                onDrop={(e) => handleMonthTimeDrop(e, hour, minute, layout.resource.id)}
                                onDragOver={(e) => {
                                  e.preventDefault();
                                  e.dataTransfer.dropEffect = 'move';
                                  // Set preview state
                                  if (!overlayPreview || overlayPreview.resourceId !== layout.resource.id ||
                                      overlayPreview.hour !== hour || overlayPreview.minute !== minute) {
                                    setOverlayPreview({ resourceId: layout.resource.id, hour, minute });
                                  }
                                }}
                                onDragLeave={() => {
                                  // Only clear if leaving this specific zone
                                  if (overlayPreview?.resourceId === layout.resource.id &&
                                      overlayPreview?.hour === hour && overlayPreview?.minute === minute) {
                                    // Don't clear immediately - let dragover on another zone set it
                                  }
                                }}
                              ></div>
                            );
                          })}

                          {/* Appointments (including preview) */}
                          {layout.appointments.map(apt => {
                            const left = apt.startMinutes * OVERLAY_PIXELS_PER_MINUTE;
                            const width = apt.durationMinutes * OVERLAY_PIXELS_PER_MINUTE;
                            const top = apt.laneIndex * OVERLAY_ROW_HEIGHT + OVERLAY_LANE_GAP;
                            const service = services.find(s => s.id === apt.serviceId);
                            const startTime = new Date(apt.startTime);
                            const endTime = new Date(startTime.getTime() + apt.durationMinutes * 60000);
                            const isPreview = apt.isPreview;

                            return (
                              <div
                                key={apt.id}
                                className={`absolute rounded border-l-2 p-1 overflow-hidden pointer-events-none ${
                                  isPreview
                                    ? 'border-dashed border-brand-400 dark:border-brand-600 bg-brand-50 dark:bg-brand-900/40 shadow-md opacity-80'
                                    : `shadow-sm ${getMonthStatusColor(apt.status, startTime, endTime)}`
                                }`}
                                style={{
                                  left: `${left}px`,
                                  width: `${Math.max(30, width - 2)}px`,
                                  top: `${top}px`,
                                  height: `${OVERLAY_ROW_HEIGHT - OVERLAY_LANE_GAP * 2}px`,
                                  zIndex: isPreview ? 50 : 10
                                }}
                              >
                                <div className={`text-[9px] font-bold truncate leading-tight ${isPreview ? 'text-brand-700 dark:text-brand-300' : ''}`}>
                                  {apt.customerName}
                                </div>
                                <div className={`text-[8px] truncate leading-tight ${isPreview ? 'text-brand-600 dark:text-brand-400' : 'opacity-80'}`}>
                                  {service?.name}
                                </div>
                              </div>
                            );
                          })}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Portal>
        );
      })()}

      {/* Day/Week View - Timeline */}
      {viewMode !== 'month' && (
      <div className="flex flex-1 overflow-hidden">
        <div className="flex flex-col bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shrink-0 shadow-lg z-20 transition-colors duration-200" style={{ width: SIDEBAR_WIDTH }}>
          <div className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 flex items-center px-4 font-semibold text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wider shrink-0 transition-colors duration-200" style={{ height: HEADER_HEIGHT }}>Resources</div>
          <div className="flex-1 overflow-hidden flex flex-col">
            <div className="overflow-y-auto flex-1">
              {resourceLayouts.map(layout => {
                const isOverQuota = overQuotaResourceIds.has(layout.resource.id);
                return (
                  <div
                    key={layout.resource.id}
                    className={`flex items-center px-4 border-b border-gray-100 dark:border-gray-700 transition-colors group ${
                      isOverQuota
                        ? 'bg-amber-50/50 dark:bg-amber-900/10 opacity-60'
                        : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
                    }`}
                    style={{ height: layout.height }}
                    title={isOverQuota ? 'Over quota - will be archived if not resolved' : undefined}
                  >
                    <div className="flex items-center gap-3 w-full">
                      <div className={`flex items-center justify-center w-8 h-8 rounded transition-colors shrink-0 ${
                        isOverQuota
                          ? 'bg-amber-100 dark:bg-amber-800/50 text-amber-600 dark:text-amber-400'
                          : 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 group-hover:bg-brand-100 dark:group-hover:bg-brand-900 group-hover:text-brand-600 dark:group-hover:text-brand-400'
                      }`}>
                        {isOverQuota ? <AlertTriangle size={16} /> : <GripVertical size={16} />}
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className={`font-medium text-sm ${isOverQuota ? 'text-amber-800 dark:text-amber-300' : 'text-gray-900 dark:text-white'}`}>{layout.resource.name}</p>
                        <p className="text-xs text-gray-400 dark:text-gray-500 capitalize flex items-center gap-1">
                          {layout.resource.type.toLowerCase()}
                          {layout.laneCount > 1 && <span className="text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-900/50 px-1 rounded text-[10px]">{layout.laneCount} lanes</span>}
                          {isOverQuota && <span className="text-amber-600 dark:text-amber-400 bg-amber-100 dark:bg-amber-800/50 px-1 rounded text-[10px] ml-1">Over quota</span>}
                        </p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className={`border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-4 h-80 flex flex-col transition-colors duration-200 ${draggedAppointmentId ? 'bg-blue-50/50 dark:bg-blue-900/20' : ''}`} onDragOver={handleSidebarDragOver} onDrop={handleDropToPending}>
            <h3 className="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2 shrink-0"><Clock size={12} /> Pending Requests ({pendingAppointments.length})</h3>
            <div className="space-y-2 overflow-y-auto flex-1 mb-2">
              {pendingAppointments.length === 0 && !draggedAppointmentId && (<div className="text-xs text-gray-400 italic text-center py-4">No pending requests</div>)}
              {draggedAppointmentId && (<div className="border-2 border-dashed border-blue-300 dark:border-blue-700 rounded-lg p-4 text-center mb-2 bg-blue-50 dark:bg-blue-900/30"><span className="text-sm text-blue-600 dark:text-blue-400 font-medium">Drop here to unassign</span></div>)}
              {pendingAppointments.map(apt => {
                const service = services.find(s => s.id === apt.serviceId);
                return (
                  <div
                    key={apt.id}
                    className={`p-3 bg-white dark:bg-gray-700 border border-l-4 border-gray-200 dark:border-gray-600 border-l-orange-400 dark:border-l-orange-500 rounded shadow-sm cursor-grab active:cursor-grabbing hover:shadow-md transition-all ${draggedAppointmentId === apt.id ? 'opacity-50' : ''}`}
                    draggable
                    onDragStart={(e) => handleDragStart(e, apt.id)}
                    onDragEnd={handleDragEnd}
                    onClick={() => handleAppointmentClick(apt)}
                  >
                    <p className="font-semibold text-sm text-gray-900 dark:text-white">{apt.customerName}</p>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{service?.name}</p>
                    <div className="mt-2 flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
                      <Clock size={10} /> {formatDuration(apt.durationMinutes)}
                    </div>
                  </div>
                )
              })}
            </div>
            <div className={`shrink-0 mt-2 border-t border-gray-200 dark:border-gray-700 pt-2 transition-all duration-200 ${draggedAppointmentId ? 'opacity-100 translate-y-0' : 'opacity-50 translate-y-0'}`} onDragOver={handleSidebarDragOver} onDrop={handleDropToArchive}><div className={`flex items-center justify-center gap-2 p-3 rounded-lg border-2 border-dashed transition-colors ${draggedAppointmentId ? 'border-red-300 bg-red-50 text-red-600 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400' : 'border-gray-200 dark:border-gray-700 bg-transparent text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-500'}`}><Trash2 size={16} /><span className="text-xs font-medium">Drop here to archive</span></div></div>
          </div>
        </div>

        <div className="flex-1 flex flex-col overflow-hidden bg-white dark:bg-gray-900 relative transition-colors duration-200">
          <div className="flex-1 overflow-auto timeline-scroll" ref={scrollContainerRef} onDragOver={handleTimelineDragOver} onDrop={handleTimelineDrop}>
            <div style={{ width: timelineWidth, minWidth: '100%' }} className="relative min-h-full">
              {/* Timeline Header */}
              <div className="sticky top-0 z-10 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 transition-colors duration-200">
                {viewMode !== 'day' && (
                  <div className="flex border-b border-gray-200 dark:border-gray-700">
                    {days.map((day, dayIndex) => (
                      <div
                        key={dayIndex}
                        className="flex-shrink-0 border-r border-gray-200 dark:border-gray-700 px-2 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 text-center bg-gray-100 dark:bg-gray-700/50"
                        style={{ width: dayWidth }}
                      >
                        {day.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
                      </div>
                    ))}
                  </div>
                )}
                <div className="flex" style={{ height: HEADER_HEIGHT }}>
                  {days.map((day, dayIndex) => (
                    <div key={dayIndex} className="flex flex-shrink-0" style={{ width: dayWidth }}>
                      {timeMarkers.map(hour => (
                        <div
                          key={`${dayIndex}-${hour}`}
                          className="flex-shrink-0 border-r border-gray-200 dark:border-gray-700 px-2 py-2 text-xs font-medium text-gray-400 select-none"
                          style={{ width: 60 * (PIXELS_PER_MINUTE * zoomLevel) }}
                        >
                          {hour > 12 ? `${hour - 12} PM` : `${hour} ${hour === 12 ? 'PM' : 'AM'}`}
                        </div>
                      ))}
                    </div>
                  ))}
                </div>
              </div>
              {/* Current time indicator - only show if current day is in view */}
              {days.some(day => {
                const today = new Date();
                const dayDate = new Date(day);
                return today.toDateString() === dayDate.toDateString();
              }) && (
                <div
                  className="absolute top-0 bottom-0 border-l-2 border-red-500 z-30 pointer-events-none"
                  style={{ left: getOffset(new Date()), marginTop: viewMode === 'day' ? HEADER_HEIGHT : HEADER_HEIGHT * 2 }}
                >
                  <div className="absolute -top-1 -left-1.5 w-3 h-3 bg-red-500 rounded-full"></div>
                </div>
              )}
              <div className="relative">
                {/* Vertical grid lines for each day */}
                <div className="absolute inset-0 pointer-events-none">
                  {days.map((day, dayIndex) => (
                    <React.Fragment key={dayIndex}>
                      {timeMarkers.map(hour => (
                        <div
                          key={`${dayIndex}-${hour}`}
                          className="absolute top-0 bottom-0 border-r border-dashed border-gray-100 dark:border-gray-800"
                          style={{ left: (dayIndex * dayWidth) + ((hour - START_HOUR) * 60 * (PIXELS_PER_MINUTE * zoomLevel)) }}
                        ></div>
                      ))}
                    </React.Fragment>
                  ))}
                </div>
                {resourceLayouts.map(layout => {
                  const isResourceOverQuota = overQuotaResourceIds.has(layout.resource.id);
                  return (<div key={layout.resource.id} className={`relative border-b border-gray-100 dark:border-gray-800 transition-colors ${isResourceOverQuota ? 'bg-amber-50/30 dark:bg-amber-900/10' : ''}`} style={{ height: layout.height }}>{layout.appointments.map(apt => {
                  const isPreview = apt.id === 'PREVIEW'; const isDragged = apt.id === draggedAppointmentId; const startTime = new Date(apt.startTime); const endTime = new Date(startTime.getTime() + apt.durationMinutes * 60000); const colorClass = isPreview ? 'bg-brand-50 dark:bg-brand-900/30 border-brand-400 dark:border-brand-700 border-dashed text-brand-700 dark:text-brand-400 opacity-80' : getStatusColor(apt.status, startTime, endTime); const topOffset = (apt.laneIndex * (EVENT_HEIGHT + EVENT_GAP)) + EVENT_GAP;
                  const service = services.find(s => s.id === apt.serviceId);
                  return (<div key={apt.id} className={`absolute rounded p-3 border-l-4 shadow-sm group overflow-hidden transition-all ${colorClass} ${isPreview ? 'z-40' : 'hover:shadow-md hover:z-50'} ${isDragged ? 'opacity-0 pointer-events-none' : ''}`} style={{ left: getOffset(startTime), width: getWidth(apt.durationMinutes), height: EVENT_HEIGHT, top: topOffset, zIndex: isPreview ? 40 : 10 + apt.laneIndex, cursor: resizeState ? 'grabbing' : 'grab', pointerEvents: isPreview ? 'none' : 'auto' }} draggable={!resizeState && !isPreview} onDragStart={(e) => handleDragStart(e, apt.id)} onDragEnd={handleDragEnd} onClick={() => handleAppointmentClick(apt)}>
                    {!isPreview && (<><div className="absolute left-0 top-0 bottom-0 w-3 cursor-ew-resize bg-transparent hover:bg-blue-500/20 z-50" style={{ marginLeft: '-4px' }} onMouseDown={(e) => handleResizeStart(e, apt, 'start')} /><div className="absolute right-0 top-0 bottom-0 w-3 cursor-ew-resize bg-transparent hover:bg-blue-500/20 z-50" style={{ marginRight: '-4px' }} onMouseDown={(e) => handleResizeStart(e, apt, 'end')} /></>)}
                    <div className="font-semibold text-sm truncate pointer-events-none">{apt.customerName}</div><div className="text-xs truncate opacity-80 pointer-events-none">{service?.name}</div><div className="mt-2 flex items-center gap-1 text-xs opacity-75 pointer-events-none truncate">{apt.status === 'COMPLETED' ? <CheckCircle2 size={12} className="flex-shrink-0" /> : <Clock size={12} className="flex-shrink-0" />}<span className="truncate">{startTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span><span className="mx-1 flex-shrink-0">•</span><span className="truncate">{formatDuration(apt.durationMinutes)}</span></div>
                  </div>);
                })}</div>);
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
      )}

      {/* Appointment Detail/Edit Modal */}
      {selectedAppointment && (
        <Portal>
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={() => setSelectedAppointment(null)}>
            <div className="w-full max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden" onClick={e => e.stopPropagation()}>
              <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-brand-50 to-brand-100 dark:from-brand-900/30 dark:to-brand-800/30">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {!selectedAppointment.resourceId ? 'Schedule Appointment' : 'Edit Appointment'}
                </h3>
                <button onClick={() => setSelectedAppointment(null)} className="p-1 text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50 rounded-full transition-colors">
                  <X size={20} />
                </button>
              </div>
            <div className="p-6 space-y-4">
                {/* Customer Info */}
                <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                  <div className="flex-shrink-0 w-10 h-10 rounded-full bg-brand-100 dark:bg-brand-900/50 flex items-center justify-center">
                    <UserIcon size={20} className="text-brand-600 dark:text-brand-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-500 dark:text-gray-400">Customer</p>
                    <p className="text-lg font-semibold text-gray-900 dark:text-white">{selectedAppointment.customerName}</p>
                    {selectedAppointment.customerEmail && (
                      <div className="flex items-center gap-2 mt-1 text-sm text-gray-600 dark:text-gray-300">
                        <Mail size={14} />
                        <span>{selectedAppointment.customerEmail}</span>
                      </div>
                    )}
                    {selectedAppointment.customerPhone && (
                      <div className="flex items-center gap-2 mt-1 text-sm text-gray-600 dark:text-gray-300">
                        <Phone size={14} />
                        <span>{selectedAppointment.customerPhone}</span>
                      </div>
                    )}
                  </div>
                </div>

                {/* Service & Status */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                    <p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Service</p>
                    <p className="text-sm font-semibold text-gray-900 dark:text-white">{services.find(s => s.id === selectedAppointment.serviceId)?.name}</p>
                  </div>
                  <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                    <label className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 block">Status</label>
                    <select
                      value={editStatus}
                      onChange={(e) => setEditStatus(e.target.value as AppointmentStatus)}
                      className="w-full px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-semibold text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
                    >
                      <option value="PENDING">Pending</option>
                      <option value="CONFIRMED">Confirmed</option>
                      <option value="COMPLETED">Completed</option>
                      <option value="CANCELLED">Cancelled</option>
                      <option value="NO_SHOW">No Show</option>
                    </select>
                  </div>
                </div>

                {/* Editable Fields */}
                <div className="space-y-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                  <h4 className="text-sm font-semibold text-gray-900 dark:text-white">Schedule Details</h4>

                  {/* Date & Time Picker */}
                  <div>
                    <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
                      Date & Time
                    </label>
                    <input
                      type="datetime-local"
                      value={editDateTime}
                      onChange={(e) => setEditDateTime(e.target.value)}
                      className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
                    />
                  </div>

                  {/* Resource Selector */}
                  <div>
                    <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
                      Assign to Resource {!selectedAppointment.resourceId && <span className="text-red-500">*</span>}
                    </label>
                    <select
                      value={editResource}
                      onChange={(e) => setEditResource(e.target.value)}
                      className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
                    >
                      <option value="">Unassigned</option>
                      {resources.map(resource => (
                        <option key={resource.id} value={resource.id}>
                          {resource.name}
                        </option>
                      ))}
                    </select>
                  </div>

                  {/* Duration Input */}
                  <div>
                    <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
                      Duration (minutes) {!selectedAppointment.resourceId && <span className="text-red-500">*</span>}
                    </label>
                    <input
                      type="number"
                      min="15"
                      step="15"
                      value={editDuration || 15}
                      onChange={(e) => {
                        const value = parseInt(e.target.value);
                        setEditDuration(value >= 15 ? value : 15);
                      }}
                      className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
                    />
                  </div>
                </div>

                {/* Notes */}
                {selectedAppointment.notes && (
                  <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                    <p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Notes</p>
                    <p className="text-sm text-gray-700 dark:text-gray-200">{selectedAppointment.notes}</p>
                  </div>
                )}

                {/* Automations - only show for saved appointments */}
                {selectedAppointment.id && (
                  <div className="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                    <EventAutomations eventId={selectedAppointment.id} compact />
                  </div>
                )}

                {/* Action Buttons */}
                <div className="pt-4 flex justify-end gap-3 border-t border-gray-200 dark:border-gray-700">
                  <button
                    onClick={() => setSelectedAppointment(null)}
                    className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                  >
                    Cancel
                  </button>
                  <button
                    onClick={handleSaveAppointment}
                    disabled={!selectedAppointment.resourceId && (!editResource || !editDuration || editDuration < 15)}
                    className="px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {!selectedAppointment.resourceId ? 'Schedule Appointment' : 'Save Changes'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </Portal>
      )}
    </div>
  );
};

export default OwnerScheduler;