import React, {useState, useEffect, useRef, useCallback} from "react";
import { useNavigate } from "react-router-dom";
import { AuthService, EventsService, CustomerService, ResourceService, VehicleService, EmployeeService } from "../../services";
import moment from 'moment';
import { Breadcrumb, Tabs, Tab, Button, Modal, Dropdown, Spinner } from "react-bootstrap";
import { useCalendarApp, ScheduleXCalendar } from '@schedule-x/react';
import {
  viewMonthGrid,
	createViewDay,
	createViewWeek,
	createViewMonthGrid
} from '@schedule-x/calendar';
import { createEventsServicePlugin } from '@schedule-x/events-service';
import { createEventModalPlugin} from '@schedule-x/event-modal';
import { createEventRecurrencePlugin } from "@schedule-x/event-recurrence";
import '@schedule-x/theme-default/dist/calendar.css';
import { Archive, PencilSquare, Filter, Plus, X } from "react-bootstrap-icons";
import DatePicker from "react-datepicker";
import { vehicleSlice } from "../../store";
import Select from 'react-select';
// import { Scheduler } from "@aldabil/react-scheduler";


const EventsCalendar = () => {
  const navigate = useNavigate();
  const calendarTabOrder = ['medicalCalendar', 'activitiesCalendar', 'incidentsCalendar', 'mealPlanCalendar', 'reminderDatesCalendar'];
  const getFirstVisibleCalendarTab = () => {
    return calendarTabOrder.find((tabKey) => AuthService.canViewCalendarTab(tabKey) || AuthService.canEditCalendarTab(tabKey)) || 'medicalCalendar';
  };
  const [events, setEvents] = useState([]);
  const calendarColumnRef = useRef(null);
  const [listHeight, setListHeight] = useState(null);
	const [allEvents, setAllEvents] = useState([]);
	const [targetedEventType, setTargetedEventType] = useState('medical');
	const [currentTab, setCurrentTab] = useState(getFirstVisibleCalendarTab());
	const currentTabRef = useRef(getFirstVisibleCalendarTab());
  const [customers, setCustomers] = useState([]);
	const [resources, setResources] = useState([]);
	const [fromDate, setFromDate] = useState(new Date(new Date().getFullYear(), new Date().getMonth(), 1));
  const [toDate, setToDate] = useState(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0));
	const [currentTotalTranslate1, setCurrentTotalTranslate1] = useState(0);
	const [currentTotalTranslate2, setCurrentTotalTranslate2] = useState(0);
	const [currentTotalResource, setCurrentTotalResource] = useState(0);
	const [showDeletedItems, setShowDeletedItems] = useState(false);
	const [selectedColorFilters, setSelectedColorFilters] = useState([]);
	const [timeData, setTimeData] = useState([]);
	const [showFilterDropdown, setShowFilterDropdown] = useState(false);
	const eventsServicePlugin = createEventsServicePlugin();
	const eventModalService = createEventModalPlugin();
	const eventRecurrence = createEventRecurrencePlugin();
	const [groupedEvents, setGroupedEvents] = useState(new Map());
	const [currentRangeStart, setCurrentRangeStart] = useState(null);
	const [currentRangeEnd, setCurrentRangeEnd] = useState(null);
	const [showCreationModal, setShowCreationModal] = useState(false);
	const [newEventStartDateTime, setNewEventStartDateTime] = useState(new Date());
	const [newEventEndDateTime, setNewEventEndDateTime] = useState(new Date())
	const [newEventType, setNewEventType] = useState('');
	const [newEventTitle, setNewEventTitle] = useState('');
	const [newEventDescription, setNewEventDescription] = useState('');
	const [newEventLocation, setNewEventLocation] = useState('');
	const [newEventTarget, setNewEventTarget] = useState(undefined);
	const [newEventSource, setNewEventSource] = useState(undefined);
	const [newEventDepartment, setNewEventDepartment] = useState('');
	const [newEventColor, setNewEventColor] = useState('');
	const [newEventSourceType, setNewEventSourceType] = useState('');
	const [newEventTargetType, setNewEventTargetType] = useState('');
	const [newEventFutureDate, setNewEventFutureDate] = useState(undefined);
	const [newEventReminderType, setNewEventReminderType] = useState('');
	const [newEventRecurring, setNewEventRecurring] = useState(undefined);
	const [vehicles, setVehicles] = useState([]);
	const [employees, setEmployees] = useState([]);
	
	// Medical appointment specific fields
	const [newEventCustomer, setNewEventCustomer] = useState('');
	const [newEventResource, setNewEventResource] = useState('');
	const [newEventInterpreter, setNewEventInterpreter] = useState('');
	const [newEventFasting, setNewEventFasting] = useState('');
	const [newEventNeedId, setNewEventNeedId] = useState('');
	const [newEventNewPatient, setNewEventNewPatient] = useState('');
	const [newEventDisability, setNewEventDisability] = useState('');
	const [newEventTransMethod, setNewEventTransMethod] = useState('');
	
	// Activity specific fields
	const [newActivityCategory, setNewActivityCategory] = useState('');
	
	// Attendance Note specific fields
	const [newAttendanceCustomer, setNewAttendanceCustomer] = useState(null);
	const [newAttendanceReason, setNewAttendanceReason] = useState('');
	
	// Meal Plan specific fields
	const [newMealType, setNewMealType] = useState('');
	const [newMealIngredients, setNewMealIngredients] = useState('');
	
	// Important Dates specific fields
	const [newReminderTitleCategory, setNewReminderTitleCategory] = useState('');
	const [newReminderAssociatedEntity, setNewReminderAssociatedEntity] = useState(null);

	// Repeat date fields (new modal)
	const [newRepeatStartDate, setNewRepeatStartDate] = useState(null);
	const [newRepeatEndDate, setNewRepeatEndDate] = useState(null);
	const [newIndefiniteRepeat, setNewIndefiniteRepeat] = useState(false);

	// Event recurrences data
	const [allEventRecurrences, setAllEventRecurrences] = useState([]);

	// Edit modal state (for non-medical tabs)
	const [showEditModal, setShowEditModal] = useState(false);
	const [editingEventId, setEditingEventId] = useState(null);
	const [editEventTitle, setEditEventTitle] = useState('');
	const [editEventStartDateTime, setEditEventStartDateTime] = useState(null);
	const [editEventLocation, setEditEventLocation] = useState('');
	const [editEventRecurring, setEditEventRecurring] = useState('');
	// Activity edit fields
	const [editActivityCategory, setEditActivityCategory] = useState('');
	// Attendance edit fields
	const [editAttendanceCustomer, setEditAttendanceCustomer] = useState(null);
	const [editAttendanceReason, setEditAttendanceReason] = useState('');
	// Meal Plan edit fields
	const [editMealType, setEditMealType] = useState('');
	const [editMealIngredients, setEditMealIngredients] = useState('');
	// Important Dates edit fields
	const [editReminderTitleCategory, setEditReminderTitleCategory] = useState('');
	const [editReminderAssociatedEntity, setEditReminderAssociatedEntity] = useState(null);
	// Repeat date fields (edit modal)
	const [editRepeatStartDate, setEditRepeatStartDate] = useState(null);
	const [editRepeatEndDate, setEditRepeatEndDate] = useState(null);
	const [editIndefiniteRepeat, setEditIndefiniteRepeat] = useState(false);
	const [editingRecurId, setEditingRecurId] = useState(null); // tracks if editing a recurrence rule
	// Delete confirmation modal
	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
	const [deleteTargetId, setDeleteTargetId] = useState(null);
	const [showSpinner, setShowSpinner] = useState(false);
  const visibleCalendarTabs = calendarTabOrder.filter((tabKey) => AuthService.canViewCalendarTab(tabKey) || AuthService.canEditCalendarTab(tabKey));
  const canEditCurrentTab = () => AuthService.canEditCalendarTab(currentTab);

	// Helper function to format name from "lastname, firstname" to "firstname lastname"
	const formatFullName = (name) => {
		if (!name) return '';
		if (name.includes(',')) {
			const parts = name.split(',').map(part => part.trim());
			return `${parts[1]} ${parts[0]}`; // firstname lastname
		}
		return name;
	};

	// Helper function to get shortened name
	const getShortenedName = (name) => {
		if (!name) return '';
		const fullName = formatFullName(name);
		const parts = fullName.split(' ');
		if (parts.length >= 2) {
			return `${parts[0]} ${parts[parts.length - 1].charAt(0)}`; // FirstName L
		}
		return fullName;
	};

	// Helper function to format event title - now uses full name, CSS handles overflow
	const formatEventTitle = (customerName, startTime) => {
		const fullName = formatFullName(customerName);
		// Return full name - CSS will handle truncation with text-overflow: ellipsis
		return fullName;
	};

	// Get full name for description/tooltip
	const getEventDescription = (customerName, doctorName) => {
		const fullName = formatFullName(customerName);
		return doctorName ? `${fullName} - ${doctorName}` : fullName;
	};

	// Helper: expand a recurring rule into individual event instances for a date range
	const expandRecurrence = (rule, rangeFrom, rangeTo) => {
		const instances = [];
		const startDate = new Date(rule.start_repeat_date);
		const endDate = new Date(rule.end_repeat_date);
		const from = new Date(rangeFrom);
		const to = new Date(rangeTo);

		// Determine the effective range (overlap of rule range and visible range)
		const effectiveStart = from > startDate ? from : startDate;
		const effectiveEnd = to < endDate ? to : endDate;
		if (effectiveStart > effectiveEnd) return instances;

		const freq = rule.rrule; // e.g. 'FREQ=DAILY', 'FREQ=WEEKLY', 'FREQ=MONTHLY', 'FREQ=YEARLY'
		let current = new Date(startDate);

		// Limit to 1000 instances max to avoid infinite loops
		let count = 0;
		while (current <= effectiveEnd && count < 1000) {
			if (current >= effectiveStart) {
				const dateStr = moment(current).format('YYYY-MM-DD');
				instances.push({
					...rule,
					id: `recur-${rule.id}-${dateStr}`,
					_recur_id: rule.id,
					start_time: new Date(current),
					stop_time: new Date(current),
				});
			}
			// Advance to next occurrence
			if (freq === 'FREQ=DAILY') {
				current = new Date(current.getTime() + 24 * 60 * 60 * 1000);
			} else if (freq === 'FREQ=WEEKLY') {
				current = new Date(current.getTime() + 7 * 24 * 60 * 60 * 1000);
			} else if (freq === 'FREQ=MONTHLY') {
				const next = new Date(current);
				next.setMonth(next.getMonth() + 1);
				current = next;
			} else if (freq === 'FREQ=YEARLY') {
				const next = new Date(current);
				next.setFullYear(next.getFullYear() + 1);
				current = next;
			} else {
				break;
			}
			count++;
		}
		return instances;
	};

	const buildDynamicBirthdayEvents = (customerList = [], rangeFrom, rangeTo) => {
		if (!rangeFrom || !rangeTo) return [];
		const from = new Date(rangeFrom);
		const to = new Date(rangeTo);
		const startYear = from.getFullYear();
		const endYear = to.getFullYear();
		const dynamicEvents = [];

		customerList.forEach((customer) => {
			const birthDate = `${customer?.birth_date || ''}`;
			const [month, day] = birthDate.split('/').map(Number);
			if (!month || !day) return;

			for (let year = startYear; year <= endYear; year++) {
				const birthday = new Date(year, month - 1, day);
				if (Number.isNaN(birthday.getTime())) continue;
				if (birthday < from || birthday > to) continue;
				dynamicEvents.push({
					id: `dynamic-birthday-${customer.id}-${year}`,
					type: 'reminder',
					status: 'active',
					title: `${customer?.name}'s Birthday`,
					description: `Happy Birthday to ${customer?.name}`,
					start_time: birthday,
					stop_time: new Date(birthday.getTime() + 10 * 60 * 1000),
					color: 'member_related',
					target_type: 'customer',
					target_uuid: customer?.id,
					target_name: customer?.name,
					event_reminder_type: 'birthday',
					rrule: 'FREQ=YEARLY',
					create_by: 'system-dynamic',
					edit_by: 'system-dynamic'
				});
			}
		});

		return dynamicEvents;
	};

	const eventTypeMap = {
		medicalCalendar: 'medical',
		activitiesCalendar: 'activity',
		incidentsCalendar: 'incident',
		mealPlanCalendar: 'meal_plan',
		reminderDatesCalendar: 'reminder'
	}

	const calendar = useCalendarApp({
		views: [createViewMonthGrid(), createViewDay(), createViewWeek()],
		monthGridOptions: {
			/**
			 * Number of events to display in a day cell before the "+ N events" button is shown
			 * */
			nEventsPerDay: 50,
		},
		defaultView: viewMonthGrid.name,
		skipValidation: true,
		selectedDate: moment(new Date()).format('YYYY-MM-DD HH:mm'),
		events: events,
		plugins: [eventModalService, eventsServicePlugin, eventRecurrence],
		callbacks: {
			onRangeUpdate(range) {
				console.log('new calendar range start date', range.start);
				console.log('new calendar range end date', range.end);
				setCurrentRangeStart(range.start);
				setCurrentRangeEnd(range.end);
				// Update fromDate/toDate for API fetching based on the range
				const startDate = new Date(range.start);
				const endDate = new Date(range.end);
				setFromDate(new Date(startDate.getFullYear(), startDate.getMonth(), 1)); 
				setToDate(new Date(endDate.getFullYear(), endDate.getMonth() + 1, 0));
			},
			onClickDate(date) {
				if (currentTabRef.current === 'medicalCalendar' || !AuthService.canEditCalendarTab(currentTabRef.current)) return;
				// Parse as local date to avoid UTC timezone offset shifting the day
				const [y, m, d] = date.split('-').map(Number);
				const localDate = new Date(y, m - 1, d);
				// Default to 10:00 AM for Activities tab
				if (currentTabRef.current === 'activitiesCalendar') {
					localDate.setHours(10, 0, 0, 0);
				}
				setNewEventStartDateTime(localDate);
				setNewEventEndDateTime(localDate);
				setShowCreationModal(true);
			},
			onClickDateTime(dateTime) {
				if (currentTabRef.current === 'medicalCalendar' || !AuthService.canEditCalendarTab(currentTabRef.current)) return;
				setNewEventStartDateTime(new Date(dateTime.replace(' ', 'T')));
				setNewEventEndDateTime(new Date(dateTime.replace(' ', 'T')));
				setShowCreationModal(true);
			}
		}
	});

	// Filter events based on current calendar range
	const getFilteredEvents = () => {
		console.log("CenterCalendar - range:", currentRangeStart, "to", currentRangeEnd, "events:", events.length);
		
		if (!currentRangeStart || !currentRangeEnd) {
			// If no range set yet, show all events for current month
			const now = moment();
			return events.filter(event => {
				const eventDate = moment(event.start_time);
				return eventDate.isSame(now, 'month');
			});
		}
		
		// Filter events within the calendar's visible range
		const rangeStart = moment(currentRangeStart);
		const rangeEnd = moment(currentRangeEnd);
		
		return events.filter(event => {
			const eventDate = moment(event.start_time);
			return eventDate.isBetween(rangeStart, rangeEnd, 'day', '[]');
		});
	};

	const getGroupedEvents = () => {
		const eventsDateMap = new Map();
		const filteredEvents = getFilteredEvents();
		const sortedFilteredEvents = [...filteredEvents].sort((a, b) => {
			const aTime = moment(a?.start_time).valueOf();
			const bTime = moment(b?.start_time).valueOf();
			return aTime - bTime;
		});
		for (const eventItem of sortedFilteredEvents) {
			const dateString = moment(eventItem.start_time).format('MMM Do, YYYY');
			if (eventsDateMap.has(dateString)) {
				eventsDateMap.set(dateString, [...eventsDateMap.get(dateString), eventItem]);
			} else {
				const value = [];
				value.push(eventItem);				
				eventsDateMap.set(dateString, value);
			}
		}
		// Sort each day by earliest start time first
		eventsDateMap.forEach((items, key) => {
			const sortedItems = [...items].sort((a, b) => {
				const aTime = moment(a?.start_time).valueOf();
				const bTime = moment(b?.start_time).valueOf();
				return aTime - bTime;
			});
			eventsDateMap.set(key, sortedItems);
		});
		return new Map(
			[...eventsDateMap.entries()].sort((a, b) => {
				const aDate = moment(a[1]?.[0]?.start_time).valueOf();
				const bDate = moment(b[1]?.[0]?.start_time).valueOf();
				return aDate - bDate;
			})
		);
	};


  useEffect(() => {
    if (!AuthService.canViewCalendar()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
      AuthService.logout();
      navigate(`/login`);
    }
    setShowSpinner(true);
		Promise.all([
			VehicleService.getAllActiveVehicles().then((data) => {
				setVehicles(data.data)
			}),
			EmployeeService.getAllEmployees().then((data) => {
				setEmployees(data.data);
			}),
			CustomerService.getAllActiveCustomers().then((data) => {
				setCustomers(data.data);
			}),
			ResourceService.getAll().then((data) => {
				setResources(data.data);
			}),
			EventsService.getTimeData().then(data => {
				setTimeData(data.data);
			})
		]).finally(() => {
			setShowSpinner(false);
		});
  }, []);

  useEffect(() => {
    if (!visibleCalendarTabs.includes(currentTab)) {
      const nextTab = getFirstVisibleCalendarTab();
      setCurrentTab(nextTab);
      currentTabRef.current = nextTab;
    }
  }, [currentTab]);

	useEffect(() => {
		EventsService.getAllEvents({ from: EventsService.formatDate(fromDate), to: EventsService.formatDate(toDate) }).then(data => setAllEvents(data?.data));
		EventsService.getAllEventRecurrences().then(data => setAllEventRecurrences(data?.data || []));
	}, [fromDate, toDate]);

	// Auto-fill repeat start date from event date when repeat option is selected (new modal)
	useEffect(() => {
		if (newEventRecurring && newEventStartDateTime) {
			setNewRepeatStartDate(new Date(newEventStartDateTime));
		}
		if (!newEventRecurring) {
			setNewRepeatStartDate(null);
			setNewRepeatEndDate(null);
			setNewIndefiniteRepeat(false);
		}
	}, [newEventRecurring, newEventStartDateTime]);

	useEffect(() => {
		setNewEventType(eventTypeMap[currentTab]);
		if (currentTab === 'medicalCalendar') {
			if (customers?.length > 0 && resources.length > 0) {
				const orignialEvents = [...allEvents];
				setEvents(orignialEvents?.filter(item => item.type === 'medical')?.map((item) => {
					const customerField = item?.data?.customer ? (customers?.find(c => c.id === item?.data?.customer)?.name || item?.data?.client_name || '') : (item?.data?.client_name || '');
					const doctorField = item?.data?.resource ? ((resources?.find(r => r.id === item?.data?.resource))?.name || item?.data?.resource_name || '') : (item?.data?.resource_name || '');
					item.event_id = item.id;
					item.customer = customerField;
					item.doctor = doctorField;
					item.phone = item?.data?.resource ? ((resources?.find(r => r.id === item?.data?.resource))?.phone || item?.data?.resource_phone || '') : (item?.data?.resource_phone || '');
					item.contact = item?.data?.resource? ((resources?.find(r => r.id === item?.data?.resource))?.contact || item?.data?.resource_contact || '') : (item?.data?.resource_contact || '')
					item.address = item?.data?.resource ? ((resources?.find(r => r.id === item?.data?.resource))?.address || item?.data?.resource_address || '') : (item?.data?.resource_address || '');
					item.translation = item?.data?.interpreter || '';
					item.newPatient = item?.data?.new_patient || '';
					item.needId = item?.data?.need_id || '';
					item.disability = item?.data?.disability || '';
					item.startTime = item?.start_time? `${moment(new Date(item?.start_time)).format('YYYY-MM-DD HH:mm')}` : '' ;
					item.endTime = item?.start_time? `${moment(new Date(item?.end_time)).format('YYYY-MM-DD HH:mm')}` : '' ;
					item.fasting = item?.data?.fasting || '';
					item.transportation = item?.link_event_name || '';
					item.title = currentTab==='medicalCalendar' ? formatEventTitle(customerField, item?.start_time) : item.title;
					item.description = currentTab==='medicalCalendar' ? getEventDescription(customerField, doctorField) : item.description; // Full info for tooltip
					item.start = item?.start_time? `${moment(new Date(item?.start_time)).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}`;
					item.end = item?.stop_time? `${moment(new Date(item?.stop_time)).format('YYYY-MM-DD HH:mm')}` : (item?.start_time? `${moment(item?.start_time).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}`);
					const transportationInfo = EventsService.getTransportationInfo(allEvents, item, timeData);
					const { isFutureEvent, maxTranslate1, maxTranslate2, maxResource, totalTranslate1, totalTranslate2, totalResource} = transportationInfo;
					item.color = item?.color;
					item._options = { additionalClasses: [`event-${item?.color || 'primary'}`]};
					item.showWarnings = isFutureEvent;
					item.maxTranslate1 = maxTranslate1;
					item.maxTranslate2 = maxTranslate2;
					item.maxResource = maxResource;
					item.totalTranslate1 = totalTranslate1;
					setCurrentTotalTranslate1(item.totalTranslate1);
					item.totalTranslate2 = totalTranslate2;
					setCurrentTotalTranslate2(item.totalTranslate2);
					item.totalResource = totalResource;
					setCurrentTotalResource(item.totalResource);
					return item;
				})?.filter(item => (!showDeletedItems && item.status === 'active') || showDeletedItems)
				?.filter(item => {
					if (selectedColorFilters.length === 0) return true;
					if (selectedColorFilters.includes(item.color)) return true;
					// When "Drop-Off Only" (purple) is selected, also show events with no label
					if (selectedColorFilters.includes('purple') && !item.color) return true;
					return false;
				}));
			}
	} else {
		// Expand recurring event rules into individual instances and merge with regular events
		let recurInstances = allEventRecurrences
			.filter(rule => rule.type === eventTypeMap[currentTab] && rule.status === 'active')
			.flatMap(rule => expandRecurrence(rule, fromDate, toDate));
		let baseEvents = [...allEvents];
		if (currentTab === 'reminderDatesCalendar') {
			// Birthday reminders are rendered dynamically from customer data.
			baseEvents = baseEvents.filter((item) => item?.event_reminder_type !== 'birthday');
			recurInstances = recurInstances.filter((item) => item?.event_reminder_type !== 'birthday');
		}
		const originalEvents = [...baseEvents, ...recurInstances];
		const dynamicBirthdayEvents = currentTab === 'reminderDatesCalendar'
			? buildDynamicBirthdayEvents(customers, fromDate, toDate)
			: [];
		const mergedEvents = [...originalEvents, ...dynamicBirthdayEvents];
		let filteredEvents = mergedEvents?.filter(item => item.type === eventTypeMap[currentTab])?.map(item => {
				// For Important Dates, remap old blue/orange colors to new member_related/vehicle_maintenance
				let eventColor = item?.color;
				if (currentTab === 'reminderDatesCalendar') {
					const isMember = ['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(item?.event_reminder_type) || item?.target_type === 'customer';
					eventColor = isMember ? 'member_related' : 'vehicle_maintenance';
				}
				const additionalClasses = [`event-${eventColor || 'primary'}`];
				// Disable clicking for birthday events on Important Dates tab
				if (currentTab === 'reminderDatesCalendar' && item?.event_reminder_type === 'birthday') {
					additionalClasses.push('event-no-click');
				}
				// For Important Dates, use date-only format so tiles don't show hour:minute
				const dateFormat = (currentTab === 'reminderDatesCalendar' || currentTab === 'incidentsCalendar') ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm';
				return {
					...item,
					color: eventColor,
					title: item?.title,
					start: item?.start_time? `${moment(new Date(item?.start_time)).format(dateFormat)}` : `${moment().format(dateFormat)}`,
					end: item?.stop_time? `${moment(new Date(item?.stop_time)).format(dateFormat)}` : (item?.start_time? `${moment(item?.start_time).format(dateFormat)}` : `${moment().format(dateFormat)}`),
					_options: { additionalClasses }
				};
			})?.filter(item => (!showDeletedItems && item.status === 'active') || showDeletedItems)
			?.filter(item => {
				if (selectedColorFilters.length === 0) return true;
				// For Important Dates, filter by event_reminder_type
				if (currentTab === 'reminderDatesCalendar') {
					return selectedColorFilters.includes(item.event_reminder_type);
				}
				if (selectedColorFilters.includes(item.color)) return true;
				// When "Drop-Off Only" (purple) is selected, also show events with no label
				if (selectedColorFilters.includes('purple') && !item.color) return true;
				return false;
			});
			
			// For Important Dates tab, filter to only show events for active customers
			if (currentTab === 'reminderDatesCalendar' && customers?.length > 0) {
				filteredEvents = filteredEvents?.filter(item => {
					// If it's a customer-related event, check if the customer is active
					if (item.target_type === 'customer' && item.target_uuid) {
						const customer = customers.find(c => c.id === item.target_uuid);
						// Only show if customer exists and is active (not discharged/transferred/deceased)
						return customer && customer.status === 'active' && 
							customer.type !== 'discharged' && 
							customer.type !== 'transferred' && 
							customer.type !== 'deceased';
					}
					// Vehicle-related events are always shown
					return true;
				});
			}
			
			setEvents(filteredEvents);
		}
	}, [customers, resources, timeData, currentTab, allEvents, allEventRecurrences, showDeletedItems, selectedColorFilters])



	useEffect(() => {	
		if (events && calendar) {
			console.log("CenterCalendar useEffect - events:", events.length, "range:", currentRangeStart, "to", currentRangeEnd);
			calendar?.eventsService?.set(events);
			setGroupedEvents(getGroupedEvents());
		}
	}, [events, currentRangeStart, currentRangeEnd]);

	// Fallback close handler: ensure ScheduleX modal can always be dismissed via X button.
	useEffect(() => {
		const onDocumentClickCapture = (event) => {
			const target = event.target;
			if (!(target instanceof HTMLElement)) return;
			if (!target.closest('.sx__event-modal')) return;
			const closeControl = target.closest('button,[role="button"]');
			if (!closeControl) return;
			const closeAriaLabel = `${closeControl.getAttribute('aria-label') || ''}`.toLowerCase();
			const closeText = `${closeControl.textContent || ''}`.trim().toLowerCase();
			const isCloseControl = closeAriaLabel.includes('close') || closeText === '\u00d7' || closeText === 'x' || closeText === '\u2715';
			if (!isCloseControl) return;
			event.preventDefault();
			event.stopPropagation();
			eventModalService?.close?.();
			try {
				calendar?.config?.plugins?.eventModal?.close();
			} catch (_) {
				// no-op fallback
			}
			setTimeout(() => {
				document.querySelectorAll('.sx__event-modal').forEach(el => el.remove());
			}, 0);
		};
		document.addEventListener('click', onDocumentClickCapture, true);
		return () => {
			document.removeEventListener('click', onDocumentClickCapture, true);
		};
	}, [calendar, eventModalService]);

	// Sync list column height with calendar column height
	useEffect(() => {
		const updateListHeight = () => {
			if (calendarColumnRef.current) {
				const calendarHeight = calendarColumnRef.current.offsetHeight;
				setListHeight(calendarHeight);
			}
		};
		
		// Initial measurement after render
		const timer = setTimeout(updateListHeight, 100);
		
		// Update on window resize
		window.addEventListener('resize', updateListHeight);
		
		return () => {
			clearTimeout(timer);
			window.removeEventListener('resize', updateListHeight);
		};
	}, [events, currentTab]);

	
  const redirectToAdmin = () => {
    navigate(`/medical`)
  }

  const goToEdit = (id) => {
    if (!AuthService.canEditMedicalEvents()) return;
    navigate(`/medical/events/edit/${id}?from=calendar`)
  }

  const goToCreateNew = () => {
    if (!AuthService.canEditMedicalEvents()) return;
    navigate(`/medical/events`)
  }

  const goToList = () => {
		navigate(`/medical/events/list`)
  }

  const goToMultipleList = () => {
		navigate(`/medical/events/multiple-list`)
  }


  const goToView = (id) => {
    navigate(`/medical/events/${id}`)
  }

	const disableEvent = (id) => {
		if (currentTab === 'medicalCalendar') {
			if (!AuthService.canEditMedicalEvents()) return;
		} else {
			if (!AuthService.canEditCalendarTab(currentTab)) return;
		}
		// Handle recurring event instances
		const isRecurInstance = typeof id === 'string' && id.startsWith('recur-');
		if (isRecurInstance) {
			const currentEvent = events.find(item => item.id === id);
			const recurId = currentEvent?._recur_id || id.split('-')[1];
			EventsService.disableEventRecurrence(recurId, { status: 'inactive' }).then(() => {
				Promise.all([
					EventsService.getAllEvents({ from: EventsService.formatDate(fromDate), to: EventsService.formatDate(toDate) }),
					EventsService.getAllEventRecurrences()
				]).then(([eventsRes, recurRes]) => {
					setAllEvents(eventsRes.data);
					setAllEventRecurrences(recurRes.data || []);
				});
			});
			return;
		}
		const currentEvent = events.find(item => item.id === id);
		EventsService.disableEvent(id, { status: 'inactive', edit_by: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name,
			edit_date: new Date(),
			edit_history: currentEvent?.edit_history? [...currentEvent.edit_history, { employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }] : [{ employee: localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name, date: new Date() }]}).then(() => {
			EventsService.getAllEvents({ from: EventsService.formatDate(fromDate), to: EventsService.formatDate(toDate) }).then((data) => {
				setAllEvents(data?.data);
				// if (currentTab === 'medicalCalendar') {
				// 	setEvents(data.data.filter((item) => {
				// 		const customerField = item?.data?.customer ? (customers?.find(c => c.id === item?.data?.customer)?.name || item?.data?.client_name || '') : (item?.data?.client_name || '');
				// 		const doctorField = item?.data?.resource ? ((resources?.find(r => r.id === item?.data?.resource))?.name || item?.data?.resource_name || '') : (item?.data?.resource_name || '');
				// 		item.event_id = item.id;
				// 		item.customer = customerField;
				// 		item.doctor = doctorField;
				// 		item.phone = item?.data?.resource ? ((resources?.find(r => r.id === item?.data?.resource))?.phone || item?.data?.resource_phone || '') : (item?.data?.resource_phone || '');
				// 		item.contact = item?.data?.resource? ((resources?.find(r => r.id === item?.data?.resource))?.contact || item?.data?.resource_contact || '') : (item?.data?.resource_contact || '')
				// 		item.address = item?.data?.resource ? ((resources?.find(r => r.id === item?.data?.resource))?.address || item?.data?.resource_address || '') : (item?.data?.resource_address || '');
				// 		item.translation = item?.data?.interpreter || '';
				// 		item.newPatient = item?.data?.new_patient || '';
				// 		item.needId = item?.data?.need_id || '';
				// 		item.disability = item?.data?.disability || '';
				// 		item.startTime = item?.start_time? `${moment(new Date(item?.start_time)).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}` ;
				// 		item.endTime = item.stop_time? `${moment(new Date(item?.stop_time)).format('YYYY-MM-DD HH:mm')}` : (item?.start_time? `${moment(item?.start_time).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}`);
				// 		item.fasting = item?.data?.fasting || '';
				// 		item.transportation = item?.link_event_name || '';
				// 		item.title = `${customerField}, provider: ${doctorField}`;
				// 		item.start = item?.start_time? `${moment(new Date(item?.start_time)).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}`;
				// 		item.end = item.stop_time? `${moment(new Date(item?.stop_time)).format('YYYY-MM-DD HH:mm')}` : (item?.start_time? `${moment(item?.start_time).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}`);
				// 		item._options = { additionalClasses: [`event-${item?.color || 'primary'}`]};
				// 		const transportationInfo = EventsService.getTransportationInfo(data.data, item, timeData);
				// 		const { isFutureEvent, maxTranslate1, maxTranslate2, maxResource, totalTranslate1, totalTranslate2, totalResource} = transportationInfo;
				// 		item.color = item?.color;
				// 		item.showWarnings = isFutureEvent;
				// 		item.maxTranslate1 = maxTranslate1;
				// 		item.maxTranslate2 = maxTranslate2;
				// 		item.maxResource = maxResource;
				// 		item.totalTranslate1 = totalTranslate1;
				// 		setCurrentTotalTranslate1(item.totalTranslate1);
				// 		item.totalTranslate2 = totalTranslate2;
				// 		setCurrentTotalTranslate2(item.totalTranslate2);
				// 		item.totalResource = totalResource;
				// 		setCurrentTotalResource(item.totalResource);
				// 		return item;
				// 	}).filter(item => item.type === 'medical'));
				// }
			})
		});
	}

	// Edit modal functions (for non-medical tabs)
	const openEditModal = (calendarEvent) => {
		if (!AuthService.canEditCalendarTab(currentTab)) return;
		// Check if this is a recurring event instance (ID starts with 'recur-')
		const isRecurInstance = typeof calendarEvent.id === 'string' && calendarEvent.id.startsWith('recur-');
		let eventData;
		
		if (isRecurInstance) {
			// Find the recurrence rule using the _recur_id stored on expanded instances
			const recurId = calendarEvent._recur_id || calendarEvent.id.split('-')[1];
			const recurRule = allEventRecurrences.find(r => r.id === recurId);
			if (recurRule) {
				eventData = { ...recurRule };
				setEditingRecurId(recurId);
				setEditingEventId(null);
				setEditRepeatStartDate(recurRule.start_repeat_date ? new Date(recurRule.start_repeat_date) : null);
				setEditRepeatEndDate(recurRule.end_repeat_date ? new Date(recurRule.end_repeat_date) : null);
				setEditIndefiniteRepeat(recurRule.indefinite_repeat || false);
			} else {
				return; // Can't find rule, bail
			}
		} else {
			eventData = allEvents.find(e => e.id === calendarEvent.id) || calendarEvent;
			setEditingEventId(eventData.id);
			setEditingRecurId(null);
			setEditRepeatStartDate(null);
			setEditRepeatEndDate(null);
			setEditIndefiniteRepeat(false);
		}
		
		setEditEventStartDateTime(eventData.start_time ? new Date(eventData.start_time) : (eventData.start_repeat_date ? new Date(eventData.start_repeat_date) : new Date()));
		
		if (currentTab === 'activitiesCalendar') {
			setEditEventTitle(eventData.title || '');
			setEditActivityCategory(eventData.activity_category || eventData.color || '');
			setEditEventLocation(eventData.event_location || '');
			setEditEventRecurring(eventData.rrule || '');
		} else if (currentTab === 'incidentsCalendar') {
			setEditAttendanceCustomer(eventData.target_uuid ? { value: eventData.target_uuid, label: eventData.target_name } : null);
			setEditAttendanceReason(eventData.description || '');
			setEditEventRecurring(eventData.rrule || '');
		} else if (currentTab === 'mealPlanCalendar') {
			setEditEventTitle(eventData.title || '');
			setEditMealType(eventData.meal_type || '');
			setEditMealIngredients(eventData.ingredients || '');
			setEditEventRecurring(eventData.rrule || '');
		} else if (currentTab === 'reminderDatesCalendar') {
			setEditReminderTitleCategory(eventData.event_reminder_type || '');
			setEditReminderAssociatedEntity(eventData.target_uuid ? { value: eventData.target_uuid, label: eventData.target_name } : null);
			setEditEventRecurring(eventData.rrule || '');
		}

		// If editing a regular event that has an rrule, populate repeat date fields
		if (!isRecurInstance && eventData.rrule) {
			setEditRepeatStartDate(eventData.start_time ? new Date(eventData.start_time) : null);
			setEditRepeatEndDate(null);
			setEditIndefiniteRepeat(false);
		}
		
		setShowEditModal(true);
	};

	const closeEditModal = () => {
		setShowEditModal(false);
		setEditingEventId(null);
		setEditingRecurId(null);
		setEditEventTitle('');
		setEditEventStartDateTime(null);
		setEditEventLocation('');
		setEditEventRecurring('');
		setEditActivityCategory('');
		setEditAttendanceCustomer(null);
		setEditAttendanceReason('');
		setEditMealType('');
		setEditMealIngredients('');
		setEditReminderTitleCategory('');
		setEditReminderAssociatedEntity(null);
		setEditRepeatStartDate(null);
		setEditRepeatEndDate(null);
		setEditIndefiniteRepeat(false);
	};

	const handleEditSave = () => {
		if (!AuthService.canEditCalendarTab(currentTab)) return;
		const userName = localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name;
		
		let data = {
			edit_by: userName,
			edit_date: new Date(),
		};

		if (currentTab === 'activitiesCalendar') {
			data = {
				...data,
				title: editEventTitle,
				start_time: editEventStartDateTime,
				stop_time: editEventStartDateTime,
				activity_category: editActivityCategory,
				color: editActivityCategory,
				event_location: editEventLocation,
			};
		} else if (currentTab === 'incidentsCalendar') {
			data = {
				...data,
				title: editAttendanceCustomer?.label ? `Attendance Note - ${editAttendanceCustomer.label}` : 'Attendance Note',
				start_time: editEventStartDateTime,
				stop_time: editEventStartDateTime,
				target_type: 'customer',
				target_uuid: editAttendanceCustomer?.value,
				target_name: editAttendanceCustomer?.label,
				description: editAttendanceReason,
			};
		} else if (currentTab === 'mealPlanCalendar') {
			data = {
				...data,
				title: editEventTitle,
				start_time: editEventStartDateTime,
				stop_time: editEventStartDateTime,
				meal_type: editMealType,
				color: editMealType === 'breakfast' ? 'brown' : (editMealType === 'lunch' ? 'green' : 'red'),
				ingredients: editMealIngredients,
			};
		} else if (currentTab === 'reminderDatesCalendar') {
			const isMemberCategory = ['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(editReminderTitleCategory);
			data = {
				...data,
				title: getReminderTitleLabel(editReminderTitleCategory),
				start_time: editEventStartDateTime,
				stop_time: editEventStartDateTime,
				event_reminder_type: editReminderTitleCategory,
				target_type: isMemberCategory ? 'customer' : 'vehicle',
				target_uuid: editReminderAssociatedEntity?.value,
				target_name: editReminderAssociatedEntity?.label,
				color: isMemberCategory ? 'member_related' : 'vehicle_maintenance',
			};
		}

		const refreshAll = () => {
			Promise.all([
				EventsService.getAllEvents({ from: EventsService.formatDate(fromDate), to: EventsService.formatDate(toDate) }),
				EventsService.getAllEventRecurrences()
			]).then(([eventsRes, recurRes]) => {
				setAllEvents(eventsRes.data);
				setAllEventRecurrences(recurRes.data || []);
				closeEditModal();
			});
		};

		// If editing a recurrence rule
		if (editingRecurId) {
			const recurData = {
				...data,
				rrule: editEventRecurring,
				start_repeat_date: editRepeatStartDate,
				end_repeat_date: editIndefiniteRepeat ? new Date('2099-12-31') : editRepeatEndDate,
				indefinite_repeat: editIndefiniteRepeat,
			};
			delete recurData.start_time;
			delete recurData.stop_time;

			if (!editEventRecurring) {
				// Changed from recurring to one-time: delete recurrence rule, create regular event
				EventsService.deleteEventRecurrence(editingRecurId).then(() => {
					const eventData = { ...data };
					delete eventData.rrule;
					eventData.start_time = editEventStartDateTime;
					eventData.stop_time = editEventStartDateTime;
					eventData.type = eventTypeMap[currentTab];
					eventData.status = 'active';
					EventsService.createNewEvent(eventData).then(() => refreshAll());
				});
			} else {
				EventsService.updateEventRecurrence(editingRecurId, recurData).then(() => refreshAll());
			}
		} else if (editingEventId) {
			// Editing a regular event
			if (editEventRecurring) {
				// Changed from one-time to recurring: create recurrence rule, delete regular event
				const recurData = {
					...data,
					type: eventTypeMap[currentTab],
					status: 'active',
					rrule: editEventRecurring,
					start_repeat_date: editRepeatStartDate || editEventStartDateTime,
					end_repeat_date: editIndefiniteRepeat ? new Date('2099-12-31') : editRepeatEndDate,
					indefinite_repeat: editIndefiniteRepeat,
					create_by: data.edit_by,
					create_date: new Date(),
				};
				delete recurData.start_time;
				delete recurData.stop_time;
				EventsService.createEventRecurrence(recurData).then(() => {
					EventsService.disableEvent(editingEventId, {}).then(() => refreshAll());
				});
			} else {
				// Still one-time, just update normally
				delete data.rrule;
				EventsService.updateEvent(editingEventId, data).then(() => refreshAll());
			}
		}
	};

	const toggleColorFilter = (colorValue) => {
		setSelectedColorFilters(prev => 
			prev.includes(colorValue) 
				? prev.filter(c => c !== colorValue) 
				: [...prev, colorValue]
		);
	};

	const FilterAndClose = () => {
    setShowFilterDropdown(false);
  }

	const cleanFilterAndClose = () => {
    setShowFilterDropdown(false);
    setShowDeletedItems(false);
		setSelectedColorFilters([]);
  }

	const goToTab = (value) => {
    if (!value || !visibleCalendarTabs.includes(value)) return;
		setTargetedEventType(eventTypeMap[value]);
		setCurrentTab(value);
		currentTabRef.current = value;
		// Always hide deleted events by default when switching tabs.
		setShowDeletedItems(false);
		setSelectedColorFilters([]);
		// Dismiss any open calendar event tile popup via plugin API
		try {
			calendar?.config?.plugins?.eventModal?.close();
		} catch (e) {
			// Fallback: remove the modal element from DOM
			document.querySelectorAll('.sx__event-modal').forEach(el => el.remove());
		}
	}

	const dismissEventModal = (e) => {
		e?.preventDefault?.();
		e?.stopPropagation?.();
		try {
			eventModalService?.close?.();
		} catch (_e) {}
		try {
			calendar?.config?.plugins?.eventModal?.close();
		} catch (e) {
			document.querySelectorAll('.sx__event-modal').forEach(el => el.remove());
		}
	};

	
	const customComponents = {
		eventModal: ({calendarEvent}) => {
			return <>
				<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '8px' }}>
					<div className="sx__event-modal__title">{currentTab === 'medicalCalendar' ? calendarEvent?.customer : calendarEvent?.title}</div>
					<button
						type="button"
						onClick={dismissEventModal}
						aria-label="Close"
						title="Close"
						style={{
							border: 'none',
							background: 'transparent',
							padding: '8px',
							marginTop: '4px',
							marginRight: '4px',
							cursor: 'pointer',
							lineHeight: 1,
							color: '#666',
							minWidth: '36px',
							minHeight: '36px',
							display: 'inline-flex',
							alignItems: 'center',
							justifyContent: 'center'
						}}
					>
						<X size={24} />
					</button>
				</div>
				{calendarEvent?.doctor && <div className="sx__event-modal__time">{`${calendarEvent?.doctor}`}</div>}
				<div className="sx__event-modal__time">{`${calendarEvent?.start}`}</div>
				<div className="sx__event-modal__time" style={{ display: 'flex', gap: '12px', marginTop: '8px' }}>
				{((currentTab === 'medicalCalendar' && AuthService.canEditMedicalEvents()) || (currentTab !== 'medicalCalendar' && AuthService.canEditCalendarTab(currentTab))) && <PencilSquare 
					size={16} 
					onClick={() => currentTab === 'medicalCalendar' ? goToEdit(calendarEvent?.id) : openEditModal(calendarEvent)} 
					style={{ cursor: 'pointer' }}
					title="Edit"
				/>}
				{((currentTab === 'medicalCalendar' && AuthService.canEditMedicalEvents()) || (currentTab !== 'medicalCalendar' && AuthService.canEditCalendarTab(currentTab))) && <Archive 
					size={16} 
					onClick={() => { setDeleteTargetId(calendarEvent?.id); setShowDeleteConfirm(true); }} 
					style={{ cursor: 'pointer' }}
					title="Delete"
				/>}
				</div>
			</>
		}
	};

	const customMenu = React.forwardRef(
    ({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
      return (
        <div
          ref={ref}
          style={style}
          className={className}
          aria-labelledby={labeledBy}
        >
          <h6>Filter By</h6>
					<div style={{ display: 'flex', flexDirection: 'column' }}>
						<div className="field-label" style={{ marginBottom: '8px' }}>Filter by Type</div>
						{currentTab === 'reminderDatesCalendar' ? (
							<>
								<div style={{ fontSize: '11px', fontWeight: '600', color: '#0066B1', marginBottom: '4px', marginTop: '4px' }}>Member-Related</div>
								{EventsService.importantDatesFilterOptions.filter(o => o.group === 'member_related').map((item) => (
									<div key={item.value} className="d-flex align-items-center mb-1" style={{ cursor: 'pointer', paddingLeft: '4px' }} onClick={() => toggleColorFilter(item.value)}>
										<input 
											type="checkbox" 
											checked={selectedColorFilters.includes(item.value)} 
											onChange={() => toggleColorFilter(item.value)} 
											style={{ marginRight: '8px', marginLeft: '0' }}
											onClick={(e) => e.stopPropagation()}
										/>
										<span 
											className="event-member_related"
											style={{ 
												width: '14px', 
												height: '14px', 
												borderRadius: '3px', 
												display: 'inline-block', 
												marginRight: '6px',
												flexShrink: 0
											}}
										></span>
										<span style={{ fontSize: '12px' }}>{item.label}</span>
									</div>
								))}
								<div style={{ fontSize: '11px', fontWeight: '600', color: '#9C2A10', marginBottom: '4px', marginTop: '8px' }}>Vehicle Maintenance</div>
								{EventsService.importantDatesFilterOptions.filter(o => o.group === 'vehicle_maintenance').map((item) => (
									<div key={item.value} className="d-flex align-items-center mb-1" style={{ cursor: 'pointer', paddingLeft: '4px' }} onClick={() => toggleColorFilter(item.value)}>
										<input 
											type="checkbox" 
											checked={selectedColorFilters.includes(item.value)} 
											onChange={() => toggleColorFilter(item.value)} 
											style={{ marginRight: '8px', marginLeft: '0' }}
											onClick={(e) => e.stopPropagation()}
										/>
										<span 
											className="event-vehicle_maintenance"
											style={{ 
												width: '14px', 
												height: '14px', 
												borderRadius: '3px', 
												display: 'inline-block', 
												marginRight: '6px',
												flexShrink: 0
											}}
										></span>
										<span style={{ fontSize: '12px' }}>{item.label}</span>
									</div>
								))}
							</>
						) : (
							getLegendOptions().map((item) => (
								<div key={item.value} className="d-flex align-items-center mb-1" style={{ cursor: 'pointer' }} onClick={() => toggleColorFilter(item.value)}>
									<input 
										type="checkbox" 
										checked={selectedColorFilters.includes(item.value)} 
										onChange={() => toggleColorFilter(item.value)} 
										style={{ marginRight: '8px', marginLeft: '0' }}
										onClick={(e) => e.stopPropagation()}
									/>
									<span 
										className={`event-${item.value}`}
										style={{ 
											width: '14px', 
											height: '14px', 
											borderRadius: '3px', 
											display: 'inline-block', 
											marginRight: '6px',
											flexShrink: 0
										}}
									></span>
									<span style={{ fontSize: '12px' }}>{item.label}</span>
								</div>
							))
						)}
						{selectedColorFilters.length > 0 && (
							<div style={{ marginTop: '4px' }}>
								<span 
									style={{ fontSize: '11px', color: '#0066B1', cursor: 'pointer', textDecoration: 'underline' }} 
									onClick={() => setSelectedColorFilters([])}
								>
									Clear all
								</span>
							</div>
						)}
					</div>
          <div className="list row" style={{ marginTop: '8px' }}>
            <div className="col-md-12">
              <button className="btn btn-default btn-sm float-right" onClick={() => cleanFilterAndClose()}> Cancel </button>
              <button className="btn btn-primary btn-sm float-right" onClick={() => FilterAndClose()}> Filter </button>
            </div>
          </div>
        </div>
      );
    },
  );

	// Get legend options based on current tab
	const getLegendOptions = () => {
		switch (currentTab) {
			case 'medicalCalendar':
				return EventsService.labelOptions;
			case 'activitiesCalendar':
				return EventsService.activityColorOptions;
			case 'incidentsCalendar':
				return EventsService.incidentColorOptions;
			case 'mealPlanCalendar':
				return EventsService.mealPlanColorOptions;
			case 'reminderDatesCalendar':
				return EventsService.importantDatesLegendOptions;
			default:
				return [];
		}
	};

	const calendarView = <div className="multi-columns-container" style={{ display: 'flex', alignItems: 'flex-start', width: '100%' }}>
		<div className="column-container" ref={calendarColumnRef} style={{ minWidth: '1000px', flexShrink: 0, display: 'flex', flexDirection: 'column' }}>
			{calendar && <ScheduleXCalendar customComponents={customComponents} calendarApp={calendar} />}
			{/* Dynamic Legend */}
			<div className="calendar-legend mt-3">
				<h6 className="text-muted mb-2" style={{ fontSize: '12px' }}>Legend:</h6>
				<div className="d-flex flex-wrap gap-3">
					{getLegendOptions().map((item) => (
						<div key={item.value} className="d-flex align-items-center">
							<span 
								className={`event-${item.value}`}
								style={{ 
									width: '16px', 
									height: '16px', 
									borderRadius: '4px', 
									display: 'inline-block', 
									marginRight: '6px'
								}}
							></span>
							<span style={{ fontSize: '12px' }}>{item.label}</span>
						</div>
					))}
				</div>
			</div>
		</div>
		<div className="column-container calendar-list-column" style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: '320px', flexShrink: 0 }}>
			<div className="column-card" style={{ height: listHeight ? `${listHeight}px` : 'auto', overflowY: 'auto', overflowX: 'auto', padding: '16px', display: 'flex', flexDirection: 'column', width: '100%', minWidth: '320px', boxSizing: 'border-box' }}>
				<h6 className="text-primary mb-3">List</h6>
				<div style={{ flex: 1, overflowY: 'auto', overflowX: 'auto', width: '100%' }}>
					{(!groupedEvents || groupedEvents.size === 0) && (
						<div style={{ padding: '24px', textAlign: 'center', color: '#999' }}>
							No events for this period
						</div>
					)}
					{
						Array.from(groupedEvents?.keys())?.map((key) => {
							return <div key={key}>
								<h6 className="text-primary me-2">{key}</h6>
								{
									groupedEvents.get(key).map(eventItem => <div 
										key={eventItem.id}
										className={`event-${eventItem.color || 'primary'} mb-3 event-list-item-container`}
										onClick={() => currentTab === 'medicalCalendar' && goToView(eventItem.id)}
										style={{ cursor: currentTab === 'medicalCalendar' ? 'pointer' : 'default', padding: '8px 12px', borderRadius: '4px' }}
									>
										{/* Medical Events */}
										{currentTab === 'medicalCalendar' && (
											<>
												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
													<span className="sx__month-agenda-event__title">{formatFullName(eventItem.customer)}</span>
													<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')} - {moment(eventItem?.stop_time || eventItem?.start_time).format('HH:mm')}</span>
												</div>
												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Provider: {eventItem?.doctor || '-'}</div>
											</>
										)}
										
										{/* Activities */}
										{currentTab === 'activitiesCalendar' && (
											<>
												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
													<span className="sx__month-agenda-event__title">{eventItem.title}</span>
													<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')}</span>
												</div>
												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Location: {eventItem?.event_location || '-'}</div>
											</>
										)}
										
										{/* Attendance Notes */}
										{currentTab === 'incidentsCalendar' && (
											<>
												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
													<span className="sx__month-agenda-event__title">{eventItem?.target_name || eventItem.title}</span>
													<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
												</div>
												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Reason: {eventItem?.description || '-'}</div>
											</>
										)}
										
										{/* Meal Plan */}
										{currentTab === 'mealPlanCalendar' && (
											<>
												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
													<span className="sx__month-agenda-event__title">{eventItem.title}</span>
													<span style={{ fontSize: '12px', textTransform: 'capitalize' }}>{eventItem?.meal_type || '-'}</span>
												</div>
												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Ingredients: {eventItem?.ingredients || '-'}</div>
											</>
										)}
										
										{/* Important Dates / Reminders */}
										{currentTab === 'reminderDatesCalendar' && (
											<>
												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
													<span className="sx__month-agenda-event__title">{eventItem.title}</span>
													<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
												</div>
												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>{eventItem?.target_type === 'vehicle' ? 'Vehicle' : 'Person'}: {eventItem?.target_name || '-'}</div>
												{eventItem?.event_prediction_date && <div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '2px' }}>Deadline: {moment(eventItem?.event_prediction_date).format('MM/DD/YYYY')}</div>}
											</>
										)}
									</div>)
								}
							</div>
						})
					}
				</div>
			</div>
		</div>
	</div>

const handleClose = () => {
	setNewEventDescription('');
	setNewEventTitle('');
	setNewEventLocation('');
	setNewEventSource(undefined);
	setNewEventTarget(undefined);
	setNewEventStartDateTime(undefined);
	setNewEventType('');
	setNewEventFutureDate(undefined);
	setNewEventSourceType('');
	setNewEventTargetType('');
	setShowCreationModal(false);
	setNewEventEndDateTime(undefined);
	setNewEventColor('');
	setNewEventRecurring(undefined);
	setNewRepeatStartDate(null);
	setNewRepeatEndDate(null);
	setNewIndefiniteRepeat(false);
	setNewEventReminderType('');
	// Reset medical fields
	setNewEventCustomer('');
	setNewEventResource('');
	setNewEventInterpreter('');
	setNewEventFasting('');
	setNewEventNeedId('');
	setNewEventNewPatient('');
	setNewEventDisability('');
	setNewEventTransMethod('');
	// Reset activity fields
	setNewActivityCategory('');
	// Reset attendance note fields
	setNewAttendanceCustomer(null);
	setNewAttendanceReason('');
	// Reset meal plan fields
	setNewMealType('');
	setNewMealIngredients('');
	// Reset important dates fields
	setNewReminderTitleCategory('');
	setNewReminderAssociatedEntity(null);
}
const handleSave = () => {
	if ((currentTab === 'medicalCalendar' && !AuthService.canEditMedicalEvents()) || (currentTab !== 'medicalCalendar' && !AuthService.canEditCalendarTab(currentTab))) return;
	const userName = localStorage.getItem('user') && JSON.parse(localStorage.getItem('user'))?.name;
	
	let data = {
		type: newEventType,
		status: 'active',
		create_by: userName,
		edit_by: userName,
		edit_date: new Date(),
		create_date: new Date(),
		edit_history: [{ employee: userName, date: new Date() }]
	};
	
	// Handle Medical Appointments
	if (currentTab === 'medicalCalendar') {
		const selectedCustomer = customers.find(c => c.id === newEventCustomer);
		const selectedResource = resources.find(r => r.id === newEventResource);
		data = {
			...data,
			title: selectedCustomer ? `${selectedCustomer.name} - Medical Appointment` : 'Medical Appointment',
			start_time: newEventStartDateTime,
			stop_time: newEventStartDateTime,
			color: newEventColor,
			confirmed: true,
			data: {
				customer: newEventCustomer,
				client_name: selectedCustomer?.name || '',
				resource: newEventResource,
				resource_name: selectedResource?.name || '',
				resource_phone: selectedResource?.phone || '',
				resource_address: selectedResource?.address || '',
				interpreter: newEventInterpreter,
				fasting: newEventFasting,
				need_id: newEventNeedId,
				new_patient: newEventNewPatient,
				disability: newEventDisability,
				trans_method: newEventTransMethod,
			}
		};
	}
	
	// Handle Activities
	if (currentTab === 'activitiesCalendar') {
		data = {
			...data,
			title: newEventTitle,
			start_time: newEventStartDateTime,
			stop_time: newEventStartDateTime,
			activity_category: newActivityCategory,
			color: newActivityCategory, // category maps to color for display
			event_location: newEventLocation,
		};
	}
	
	// Handle Attendance Notes (Incidents)
	if (currentTab === 'incidentsCalendar') {
		data = {
			...data,
			title: newAttendanceCustomer?.label ? `Attendance Note - ${newAttendanceCustomer.label}` : 'Attendance Note',
			start_time: newEventStartDateTime,
			stop_time: newEventStartDateTime,
			target_type: 'customer',
			target_uuid: newAttendanceCustomer?.value,
			target_name: newAttendanceCustomer?.label,
			description: newAttendanceReason,
			color: 'blue', // Default color for attendance notes
		};
	}
	
	// Handle Meal Plan
	if (currentTab === 'mealPlanCalendar') {
		data = {
			...data,
			title: newEventTitle,
			start_time: newEventStartDateTime,
			stop_time: newEventStartDateTime,
			meal_type: newMealType,
			color: newMealType === 'breakfast' ? 'brown' : (newMealType === 'lunch' ? 'green' : 'red'),
			ingredients: newMealIngredients,
		};
	}
	
	// Handle Important Dates (Reminders)
	if (currentTab === 'reminderDatesCalendar') {
		const isMemberCategory = ['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(newReminderTitleCategory);
		data = {
			...data,
			title: getReminderTitleLabel(newReminderTitleCategory),
			start_time: newEventStartDateTime,
			stop_time: newEventStartDateTime,
			event_reminder_type: newReminderTitleCategory,
			target_type: isMemberCategory ? 'customer' : 'vehicle',
			target_uuid: newReminderAssociatedEntity?.value,
			target_name: newReminderAssociatedEntity?.label,
			color: isMemberCategory ? 'member_related' : 'vehicle_maintenance',
		};
	}
	
	// If a repeat option is selected, save to calendar_event_recur collection
	if (newEventRecurring && currentTab !== 'medicalCalendar') {
		const recurData = {
			...data,
			rrule: newEventRecurring,
			start_repeat_date: newRepeatStartDate || newEventStartDateTime,
			end_repeat_date: newIndefiniteRepeat ? new Date('2099-12-31') : newRepeatEndDate,
			indefinite_repeat: newIndefiniteRepeat,
		};
		// Remove rrule from main event data — recurring logic goes in calendar_event_recur only
		delete recurData.start_time;
		delete recurData.stop_time;
		EventsService.createEventRecurrence(recurData).then(() => {
			Promise.all([
				EventsService.getAllEvents({ from: EventsService.formatDate(fromDate), to: EventsService.formatDate(toDate) }),
				EventsService.getAllEventRecurrences()
			]).then(([eventsRes, recurRes]) => {
				setAllEvents(eventsRes.data);
				setAllEventRecurrences(recurRes.data || []);
				handleClose();
			});
		});
	} else {
		// One-time event — save to calendar_event as before (strip rrule)
		delete data.rrule;
		EventsService.createNewEvent(data).then(() => {
			EventsService.getAllEvents({ from: EventsService.formatDate(fromDate), to: EventsService.formatDate(toDate) }).then((data) => {
				setAllEvents(data.data);
				handleClose();
			})
		});
	}
}

// Helper function to get reminder title label
const getReminderTitleLabel = (value) => {
	const memberOptions = {
		'birthday': 'Birthday',
		'adcaps_completion': 'ADCAPS Completion',
		'center_qualification_expiration': 'Center Qualification Expiration'
	};
	const vehicleOptions = {
		'oil_change': 'Oil Change',
		'monthly_vehicle_inspection': 'Monthly Vehicle Inspection',
		'emissions_inspection': 'Emissions Inspection',
		'insurance_expiration': 'Insurance Expiration',
		'license_plate_expiration': 'License Plate Expiration'
	};
	return memberOptions[value] || vehicleOptions[value] || value;
};
  
  
  return (
    <>
      {showSpinner && <div className="spinner-overlay">
        <Spinner animation="border" role="status">
          <span className="visually-hidden">Loading...</span>
        </Spinner>
      </div>}
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item href="/">General</Breadcrumb.Item>
          <Breadcrumb.Item active>
            Calendar
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>
            	Calendar
           </h4> 
        </div>
      </div>

			<div className="app-main-content-list-container" style={{"min-width": "1500px"}}>
				<div className="app-main-content-list-func-container">
					<Tabs activeKey={currentTab} id="medical-calendar-tab" onSelect={(k) => goToTab(k)}>
						{visibleCalendarTabs.includes('medicalCalendar') && <Tab eventKey="medicalCalendar" title="Medical Appointments">
							
						</Tab>}
						{visibleCalendarTabs.includes('activitiesCalendar') && <Tab eventKey="activitiesCalendar" title="Activities">

						</Tab>}
						{visibleCalendarTabs.includes('incidentsCalendar') && <Tab eventKey="incidentsCalendar" title="Attendance">
						
						</Tab>}
						{visibleCalendarTabs.includes('mealPlanCalendar') && <Tab eventKey="mealPlanCalendar" title="Meal Plan">
							
						</Tab>}
						{visibleCalendarTabs.includes('reminderDatesCalendar') && <Tab eventKey="reminderDatesCalendar" title="Important Dates">
							
						</Tab>}
					</Tabs>
					{ calendarView}
					<div className="list-func-panel">
						{currentTab !== 'medicalCalendar' && canEditCurrentTab() && (
							<button className="btn btn-primary me-2" onClick={() => {
								setNewEventStartDateTime(new Date());
								setNewEventEndDateTime(new Date());
								setShowCreationModal(true);
							}}>
								<Plus size={18} className="me-1" />
								{currentTab === 'activitiesCalendar' && 'Add New Activity'}
								{currentTab === 'incidentsCalendar' && 'Add New Attendance Note'}
								{currentTab === 'mealPlanCalendar' && 'Add New Meal Plan'}
								{currentTab === 'reminderDatesCalendar' && 'Add New Important Date'}
							</button>
						)}
						<Dropdown
							key={'event-calendar-filter'}
							id="event-calendar-filter"
							show={showFilterDropdown}
							onToggle={() => setShowFilterDropdown(!showFilterDropdown)}
							autoClose={false}
						> 
							<Dropdown.Toggle variant="primary">
								<Filter size={16} className="me-2"></Filter>Filter
							</Dropdown.Toggle>
							<Dropdown.Menu as={customMenu}/> 
						</Dropdown>
					</div>
					<Modal show={showCreationModal} onHide={handleClose} size="sm" centered dialogClassName="calendar-event-modal">
						<Modal.Header closeButton>
							<Modal.Title>
								{currentTab === 'medicalCalendar' && 'New Medical Appointment'}
								{currentTab === 'activitiesCalendar' && 'New Activity'}
								{currentTab === 'incidentsCalendar' && 'New Attendance Note'}
								{currentTab === 'mealPlanCalendar' && 'New Meal Item'}
								{currentTab === 'reminderDatesCalendar' && 'New Important Date'}
							</Modal.Title>
						</Modal.Header>
						<Modal.Body>
							{/* Medical Appointment Fields */}
							{currentTab === 'medicalCalendar' && (
								<>
									<div className="mb-3">
										<div className="field-label">Customer<span className="required">*</span></div>
										<select className="form-control" value={newEventCustomer} onChange={(e) => setNewEventCustomer(e.target.value)}>
											<option value="">Select Customer</option>
											{customers.filter(item => item?.status === 'active' && item?.type !== 'discharged').map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
										</select>
									</div>
									<div className="mb-3">
										<div className="field-label">Provider<span className="required">*</span></div>
										<select className="form-control" value={newEventResource} onChange={(e) => setNewEventResource(e.target.value)}>
											<option value="">Select Provider</option>
											{resources.filter(item => item?.status === 'active').map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
										</select>
									</div>
									<div className="mb-3">
										<div className="field-label">Appointment Time<span className="required">*</span></div>
										<DatePicker
											className="form-control"
											selected={newEventStartDateTime}
											onChange={setNewEventStartDateTime}
											showTimeSelect
											timeFormat="HH:mm"
											timeIntervals={15}
											dateFormat="MM/dd/yyyy, HH:mm"
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">Language Support</div>
										<select className="form-control" value={newEventInterpreter} onChange={(e) => setNewEventInterpreter(e.target.value)}>
											<option value="">Select</option>
											<option value="Checkin">Checkin</option>
											<option value="Center">Center</option>
											<option value="Family">Family</option>
											<option value="Office in person">Office in person</option>
											<option value="Office by phone">Office by phone</option>
											<option value="Nurse">Nurse</option>
										</select>
									</div>
									<div className="mb-3">
										<div className="field-label">Transportation Support</div>
										<select className="form-control" value={newEventTransMethod} onChange={(e) => setNewEventTransMethod(e.target.value)}>
											<option value="">Select</option>
											<option value="ByOwn">Self-Transport</option>
											<option value="By Center Transportation">By Center Transportation</option>
											<option value="DropOff Only">Drop-Off Only</option>
											<option value="Pickup Only">Pick-Up Only</option>
											<option value="Client Does Not need to Go">Medication Pickup Only</option>
										</select>
									</div>
									<div className="mb-3">
										<div className="field-label">Label</div>
										<select className="form-control" value={newEventColor} onChange={(e) => setNewEventColor(e.target.value)}>
											<option value="">Select</option>
											{EventsService.labelOptions?.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}
										</select>
									</div>
								</>
							)}
							
							{/* Activity Fields */}
							{currentTab === 'activitiesCalendar' && (
								<>
									<div className="mb-3">
										<div className="field-label">Activity Name<span className="required">*</span></div>
										<input type="text" className="form-control" placeholder="Enter activity name" value={newEventTitle || ''} onChange={e => setNewEventTitle(e.target.value)}/>
									</div>
									<div className="mb-3">
										<div className="field-label">Date & Time</div>
										<DatePicker
											className="form-control"
											selected={newEventStartDateTime}
											onChange={setNewEventStartDateTime}
											showTimeSelect
											timeFormat="HH:mm"
											timeIntervals={15}
											dateFormat="MM/dd/yyyy, HH:mm"
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">Category<span className="required">*</span></div>
										<select className="form-control" value={newActivityCategory} onChange={(e) => setNewActivityCategory(e.target.value)}>
											<option value="">Select Category</option>
											<option value="red">Classes</option>
											<option value="pink">Games</option>
											<option value="green">Events</option>
											<option value="blue">Outings</option>
											<option value="purple">Personal Care</option>
											<option value="brown">Care Activities</option>
										</select>
									</div>
									<div className="mb-3">
										<div className="field-label">Location</div>
										<input type="text" className="form-control" placeholder="Enter location" value={newEventLocation || ''} onChange={e => setNewEventLocation(e.target.value)}/>
									</div>
									<div className="mb-3">
										<div className="field-label">Repeat</div>
										<select className="form-control" value={newEventRecurring} onChange={(e) => setNewEventRecurring(e.target.value)}>
											<option value="">No (One-time)</option>
											<option value="FREQ=DAILY">Daily</option>
											<option value="FREQ=WEEKLY">Weekly</option>
											<option value="FREQ=MONTHLY">Monthly</option>
											<option value="FREQ=YEARLY">Yearly</option>
										</select>
									</div>
									{newEventRecurring && (
										<>
											<div className="mb-3">
												<div className="field-label">Start Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={newRepeatStartDate}
													onChange={setNewRepeatStartDate}
													dateFormat="MM/dd/yyyy"
													disabled
												/>
											</div>
											<div className="mb-3">
												<div className="field-label">End Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={newRepeatEndDate}
													onChange={setNewRepeatEndDate}
													dateFormat="MM/dd/yyyy"
													disabled={newIndefiniteRepeat}
												/>
											</div>
											<div className="mb-3">
												<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
													<input type="checkbox" checked={newIndefiniteRepeat} onChange={(e) => {
														setNewIndefiniteRepeat(e.target.checked);
														if (e.target.checked) setNewRepeatEndDate(new Date('2099-12-31'));
													}} />
													Indefinite Repeat
												</label>
											</div>
										</>
									)}
								</>
							)}
							
							{/* Attendance Note Fields */}
							{currentTab === 'incidentsCalendar' && (
								<>
									<div className="mb-3">
										<div className="field-label">Customer Name<span className="required">*</span></div>
										<Select
											value={newAttendanceCustomer}
											onChange={setNewAttendanceCustomer}
											options={customers.filter(item => item?.status === 'active' && item?.type !== 'discharged').map(c => ({ value: c.id, label: c.name }))}
											placeholder="Select Customer"
											isClearable
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">Date<span className="required">*</span></div>
										<DatePicker
											className="form-control"
											selected={newEventStartDateTime}
											onChange={setNewEventStartDateTime}
											dateFormat="MM/dd/yyyy"
										/>
									</div>
								<div className="mb-3">
									<div className="field-label">Reason</div>
									<input type="text" className="form-control" placeholder="Enter reason" value={newAttendanceReason || ''} onChange={e => setNewAttendanceReason(e.target.value)}/>
								</div>
							<div className="mb-3">
								<div className="field-label">Repeat</div>
								<select className="form-control" value={newEventRecurring} onChange={(e) => setNewEventRecurring(e.target.value)}>
									<option value="">No (One-time)</option>
									<option value="FREQ=DAILY">Daily</option>
									<option value="FREQ=WEEKLY">Weekly</option>
									<option value="FREQ=MONTHLY">Monthly</option>
								</select>
							</div>
							{newEventRecurring && (
								<>
									<div className="mb-3">
										<div className="field-label">Start Repeat Date</div>
										<DatePicker
											className="form-control"
											selected={newRepeatStartDate}
											onChange={setNewRepeatStartDate}
											dateFormat="MM/dd/yyyy"
											disabled
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">End Repeat Date</div>
										<DatePicker
											className="form-control"
											selected={newRepeatEndDate}
											onChange={setNewRepeatEndDate}
											dateFormat="MM/dd/yyyy"
											disabled={newIndefiniteRepeat}
										/>
									</div>
									<div className="mb-3">
										<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
											<input type="checkbox" checked={newIndefiniteRepeat} onChange={(e) => {
												setNewIndefiniteRepeat(e.target.checked);
												if (e.target.checked) setNewRepeatEndDate(new Date('2099-12-31'));
											}} />
											Indefinite Repeat
										</label>
									</div>
								</>
							)}
						</>
					)}
					
					{/* Meal Item Fields */}
							{currentTab === 'mealPlanCalendar' && (
								<>
									<div className="mb-3">
										<div className="field-label">Dish Name<span className="required">*</span></div>
										<input type="text" className="form-control" placeholder="Enter dish name" value={newEventTitle || ''} onChange={e => setNewEventTitle(e.target.value)}/>
									</div>
									<div className="mb-3">
										<div className="field-label">Meal Type<span className="required">*</span></div>
										<select className="form-control" value={newMealType} onChange={(e) => setNewMealType(e.target.value)}>
											<option value="">Select Meal Type</option>
											<option value="breakfast">Breakfast</option>
											<option value="lunch">Lunch</option>
											<option value="snack">Snack</option>
										</select>
									</div>
									<div className="mb-3">
										<div className="field-label">Date</div>
										<DatePicker
											className="form-control"
											selected={newEventStartDateTime}
											onChange={setNewEventStartDateTime}
											dateFormat="MM/dd/yyyy"
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">Repeat</div>
										<select className="form-control" value={newEventRecurring} onChange={(e) => setNewEventRecurring(e.target.value)}>
											<option value="">No (One-time)</option>
											<option value="FREQ=DAILY">Daily</option>
											<option value="FREQ=WEEKLY">Weekly</option>
											<option value="FREQ=MONTHLY">Monthly</option>
										</select>
									</div>
									{newEventRecurring && (
										<>
											<div className="mb-3">
												<div className="field-label">Start Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={newRepeatStartDate}
													onChange={setNewRepeatStartDate}
													dateFormat="MM/dd/yyyy"
													disabled
												/>
											</div>
											<div className="mb-3">
												<div className="field-label">End Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={newRepeatEndDate}
													onChange={setNewRepeatEndDate}
													dateFormat="MM/dd/yyyy"
													disabled={newIndefiniteRepeat}
												/>
											</div>
											<div className="mb-3">
												<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
													<input type="checkbox" checked={newIndefiniteRepeat} onChange={(e) => {
														setNewIndefiniteRepeat(e.target.checked);
														if (e.target.checked) setNewRepeatEndDate(new Date('2099-12-31'));
													}} />
													Indefinite Repeat
												</label>
											</div>
										</>
									)}
									<div className="mb-3">
										<div className="field-label">Ingredients</div>
										<input type="text" className="form-control" placeholder="Enter ingredients" value={newMealIngredients || ''} onChange={e => setNewMealIngredients(e.target.value)}/>
									</div>
								</>
							)}
							
							{/* Important Dates Fields */}
							{currentTab === 'reminderDatesCalendar' && (
								<>
									<div className="mb-3">
										<div className="field-label">Title<span className="required">*</span></div>
										<select className="form-control" value={newReminderTitleCategory} onChange={(e) => {
											setNewReminderTitleCategory(e.target.value);
											setNewReminderAssociatedEntity(null); // Reset when category changes
										}}>
											<option value="">Select Title</option>
											<optgroup label="Member">
												<option value="adcaps_completion">ADCAPS Completion</option>
												<option value="center_qualification_expiration">Center Qualification Expiration</option>
											</optgroup>
											<optgroup label="Vehicle">
												<option value="oil_change">Oil Change</option>
												<option value="monthly_vehicle_inspection">Monthly Vehicle Inspection</option>
												<option value="emissions_inspection">Emissions Inspection</option>
												<option value="insurance_expiration">Insurance Expiration</option>
												<option value="license_plate_expiration">License Plate Expiration</option>
											</optgroup>
										</select>
									</div>
									{newReminderTitleCategory && (
										<div className="mb-3">
											<div className="field-label">
												{['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(newReminderTitleCategory) 
													? 'Associated Person' 
													: 'Associated Vehicle'}<span className="required">*</span>
											</div>
											<Select
												value={newReminderAssociatedEntity}
												onChange={setNewReminderAssociatedEntity}
												options={
													['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(newReminderTitleCategory)
														? customers.filter(item => item?.status === 'active' && item?.type !== 'discharged').map(c => ({ value: c.id, label: c.name }))
														: vehicles.map(v => ({ value: v.id, label: v.vehicle_number }))
												}
												placeholder={['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(newReminderTitleCategory) ? 'Select Person' : 'Select Vehicle'}
												isClearable
											/>
										</div>
									)}
									<div className="mb-3">
										<div className="field-label">Date</div>
										<DatePicker
											className="form-control"
											selected={newEventStartDateTime}
											onChange={setNewEventStartDateTime}
											dateFormat="MM/dd/yyyy"
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">Category</div>
										<div className="field-value" style={{ padding: '8px 0', color: '#666' }}>
											{newReminderTitleCategory 
												? (['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(newReminderTitleCategory) ? 'Member Related' : 'Vehicle Related')
												: '-'}
										</div>
									</div>
									<div className="mb-3">
										<div className="field-label">Repeat Cycle</div>
										<select className="form-control" value={newEventRecurring} onChange={(e) => setNewEventRecurring(e.target.value)}>
											<option value="">No (One-time)</option>
											<option value="FREQ=DAILY">Daily</option>
											<option value="FREQ=WEEKLY">Weekly</option>
											<option value="FREQ=MONTHLY">Monthly</option>
											<option value="FREQ=YEARLY">Yearly</option>
										</select>
									</div>
									{newEventRecurring && (
										<>
											<div className="mb-3">
												<div className="field-label">Start Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={newRepeatStartDate}
													onChange={setNewRepeatStartDate}
													dateFormat="MM/dd/yyyy"
													disabled
												/>
											</div>
											<div className="mb-3">
												<div className="field-label">End Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={newRepeatEndDate}
													onChange={setNewRepeatEndDate}
													dateFormat="MM/dd/yyyy"
													disabled={newIndefiniteRepeat}
												/>
											</div>
											<div className="mb-3">
												<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
													<input type="checkbox" checked={newIndefiniteRepeat} onChange={(e) => {
														setNewIndefiniteRepeat(e.target.checked);
														if (e.target.checked) setNewRepeatEndDate(new Date('2099-12-31'));
													}} />
													Indefinite Repeat
												</label>
											</div>
										</>
									)}
								</>
							)}
						</Modal.Body>
						<Modal.Footer>
							<Button variant="secondary" size="sm" onClick={handleClose}>
								Cancel
							</Button>
							<Button variant="primary" size="sm" onClick={handleSave} disabled={
								(currentTab === 'medicalCalendar' && !AuthService.canEditMedicalEvents()) ||
								(currentTab !== 'medicalCalendar' && !AuthService.canEditCalendarTab(currentTab)) ||
								(currentTab === 'medicalCalendar' && (!newEventCustomer || !newEventResource || !newEventStartDateTime)) ||
								(currentTab === 'activitiesCalendar' && (!newEventTitle || !newActivityCategory)) ||
								(currentTab === 'incidentsCalendar' && (!newAttendanceCustomer || !newEventStartDateTime)) ||
								(currentTab === 'mealPlanCalendar' && (!newEventTitle || !newMealType)) ||
								(currentTab === 'reminderDatesCalendar' && (!newReminderTitleCategory || !newReminderAssociatedEntity))
							}>
								Save
							</Button>
						</Modal.Footer>
					</Modal>

					{/* Edit Event Modal (non-medical tabs) */}
					<Modal show={showEditModal} onHide={closeEditModal} size="sm" centered dialogClassName="calendar-event-modal">
						<Modal.Header closeButton>
							<Modal.Title>
								{currentTab === 'activitiesCalendar' && 'Edit Activity'}
								{currentTab === 'incidentsCalendar' && 'Edit Attendance Note'}
								{currentTab === 'mealPlanCalendar' && 'Edit Meal Item'}
								{currentTab === 'reminderDatesCalendar' && 'Edit Important Date'}
							</Modal.Title>
						</Modal.Header>
						<Modal.Body>
							{/* Activity Edit Fields */}
							{currentTab === 'activitiesCalendar' && (
								<>
									<div className="mb-3">
										<div className="field-label">Activity Name<span className="required">*</span></div>
										<input type="text" className="form-control" placeholder="Enter activity name" value={editEventTitle || ''} onChange={e => setEditEventTitle(e.target.value)}/>
									</div>
									<div className="mb-3">
										<div className="field-label">Date & Time</div>
										<DatePicker
											className="form-control"
											selected={editEventStartDateTime}
											onChange={setEditEventStartDateTime}
											showTimeSelect
											timeFormat="HH:mm"
											timeIntervals={15}
											dateFormat="MM/dd/yyyy, HH:mm"
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">Category<span className="required">*</span></div>
										<select className="form-control" value={editActivityCategory} onChange={(e) => setEditActivityCategory(e.target.value)}>
											<option value="">Select Category</option>
											<option value="red">Classes</option>
											<option value="pink">Games</option>
											<option value="green">Events</option>
											<option value="blue">Outings</option>
											<option value="purple">Personal Care</option>
											<option value="brown">Care Activities</option>
										</select>
									</div>
									<div className="mb-3">
										<div className="field-label">Location</div>
										<input type="text" className="form-control" placeholder="Enter location" value={editEventLocation || ''} onChange={e => setEditEventLocation(e.target.value)}/>
									</div>
									<div className="mb-3">
										<div className="field-label">Repeat</div>
										<select className="form-control" value={editEventRecurring} onChange={(e) => setEditEventRecurring(e.target.value)}>
											<option value="">No (One-time)</option>
											<option value="FREQ=DAILY">Daily</option>
											<option value="FREQ=WEEKLY">Weekly</option>
											<option value="FREQ=MONTHLY">Monthly</option>
											<option value="FREQ=YEARLY">Yearly</option>
										</select>
									</div>
									{editEventRecurring && (
										<>
											<div className="mb-3">
												<div className="field-label">Start Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={editRepeatStartDate}
													onChange={setEditRepeatStartDate}
													dateFormat="MM/dd/yyyy"
												/>
											</div>
											<div className="mb-3">
												<div className="field-label">End Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={editRepeatEndDate}
													onChange={setEditRepeatEndDate}
													dateFormat="MM/dd/yyyy"
													disabled={editIndefiniteRepeat}
												/>
											</div>
											<div className="mb-3">
												<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
													<input type="checkbox" checked={editIndefiniteRepeat} onChange={(e) => {
														setEditIndefiniteRepeat(e.target.checked);
														if (e.target.checked) setEditRepeatEndDate(new Date('2099-12-31'));
													}} />
													Indefinite Repeat
												</label>
											</div>
										</>
									)}
								</>
							)}

							{/* Attendance Note Edit Fields */}
							{currentTab === 'incidentsCalendar' && (
								<>
									<div className="mb-3">
										<div className="field-label">Customer Name<span className="required">*</span></div>
										<Select
											value={editAttendanceCustomer}
											onChange={setEditAttendanceCustomer}
											options={customers.filter(item => item?.status === 'active' && item?.type !== 'discharged').map(c => ({ value: c.id, label: c.name }))}
											placeholder="Select Customer"
											isClearable
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">Date<span className="required">*</span></div>
										<DatePicker
											className="form-control"
											selected={editEventStartDateTime}
											onChange={setEditEventStartDateTime}
											dateFormat="MM/dd/yyyy"
										/>
									</div>
								<div className="mb-3">
									<div className="field-label">Reason</div>
									<input type="text" className="form-control" placeholder="Enter reason" value={editAttendanceReason || ''} onChange={e => setEditAttendanceReason(e.target.value)}/>
								</div>
							<div className="mb-3">
								<div className="field-label">Repeat</div>
								<select className="form-control" value={editEventRecurring} onChange={(e) => setEditEventRecurring(e.target.value)}>
									<option value="">No (One-time)</option>
									<option value="FREQ=DAILY">Daily</option>
									<option value="FREQ=WEEKLY">Weekly</option>
									<option value="FREQ=MONTHLY">Monthly</option>
								</select>
							</div>
							{editEventRecurring && (
								<>
									<div className="mb-3">
										<div className="field-label">Start Repeat Date</div>
										<DatePicker
											className="form-control"
											selected={editRepeatStartDate}
											onChange={setEditRepeatStartDate}
											dateFormat="MM/dd/yyyy"
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">End Repeat Date</div>
										<DatePicker
											className="form-control"
											selected={editRepeatEndDate}
											onChange={setEditRepeatEndDate}
											dateFormat="MM/dd/yyyy"
											disabled={editIndefiniteRepeat}
										/>
									</div>
									<div className="mb-3">
										<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
											<input type="checkbox" checked={editIndefiniteRepeat} onChange={(e) => {
												setEditIndefiniteRepeat(e.target.checked);
												if (e.target.checked) setEditRepeatEndDate(new Date('2099-12-31'));
											}} />
											Indefinite Repeat
										</label>
									</div>
								</>
							)}
						</>
					)}

					{/* Meal Item Edit Fields */}
							{currentTab === 'mealPlanCalendar' && (
								<>
									<div className="mb-3">
										<div className="field-label">Dish Name<span className="required">*</span></div>
										<input type="text" className="form-control" placeholder="Enter dish name" value={editEventTitle || ''} onChange={e => setEditEventTitle(e.target.value)}/>
									</div>
									<div className="mb-3">
										<div className="field-label">Meal Type<span className="required">*</span></div>
										<select className="form-control" value={editMealType} onChange={(e) => setEditMealType(e.target.value)}>
											<option value="">Select Meal Type</option>
											<option value="breakfast">Breakfast</option>
											<option value="lunch">Lunch</option>
											<option value="snack">Snack</option>
										</select>
									</div>
									<div className="mb-3">
										<div className="field-label">Date</div>
										<DatePicker
											className="form-control"
											selected={editEventStartDateTime}
											onChange={setEditEventStartDateTime}
											dateFormat="MM/dd/yyyy"
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">Repeat</div>
										<select className="form-control" value={editEventRecurring} onChange={(e) => setEditEventRecurring(e.target.value)}>
											<option value="">No (One-time)</option>
											<option value="FREQ=DAILY">Daily</option>
											<option value="FREQ=WEEKLY">Weekly</option>
											<option value="FREQ=MONTHLY">Monthly</option>
										</select>
									</div>
									{editEventRecurring && (
										<>
											<div className="mb-3">
												<div className="field-label">Start Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={editRepeatStartDate}
													onChange={setEditRepeatStartDate}
													dateFormat="MM/dd/yyyy"
												/>
											</div>
											<div className="mb-3">
												<div className="field-label">End Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={editRepeatEndDate}
													onChange={setEditRepeatEndDate}
													dateFormat="MM/dd/yyyy"
													disabled={editIndefiniteRepeat}
												/>
											</div>
											<div className="mb-3">
												<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
													<input type="checkbox" checked={editIndefiniteRepeat} onChange={(e) => {
														setEditIndefiniteRepeat(e.target.checked);
														if (e.target.checked) setEditRepeatEndDate(new Date('2099-12-31'));
													}} />
													Indefinite Repeat
												</label>
											</div>
										</>
									)}
									<div className="mb-3">
										<div className="field-label">Ingredients</div>
										<input type="text" className="form-control" placeholder="Enter ingredients" value={editMealIngredients || ''} onChange={e => setEditMealIngredients(e.target.value)}/>
									</div>
								</>
							)}

							{/* Important Dates Edit Fields */}
							{currentTab === 'reminderDatesCalendar' && (
								<>
									<div className="mb-3">
										<div className="field-label">Title<span className="required">*</span></div>
										<select className="form-control" value={editReminderTitleCategory} onChange={(e) => {
											setEditReminderTitleCategory(e.target.value);
											setEditReminderAssociatedEntity(null);
										}}>
											<option value="">Select Title</option>
											<optgroup label="Member">
												<option value="adcaps_completion">ADCAPS Completion</option>
												<option value="center_qualification_expiration">Center Qualification Expiration</option>
											</optgroup>
											<optgroup label="Vehicle">
												<option value="oil_change">Oil Change</option>
												<option value="monthly_vehicle_inspection">Monthly Vehicle Inspection</option>
												<option value="emissions_inspection">Emissions Inspection</option>
												<option value="insurance_expiration">Insurance Expiration</option>
												<option value="license_plate_expiration">License Plate Expiration</option>
											</optgroup>
										</select>
									</div>
									{editReminderTitleCategory && (
										<div className="mb-3">
											<div className="field-label">
												{['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(editReminderTitleCategory) 
													? 'Associated Person' 
													: 'Associated Vehicle'}<span className="required">*</span>
											</div>
											<Select
												value={editReminderAssociatedEntity}
												onChange={setEditReminderAssociatedEntity}
												options={
													['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(editReminderTitleCategory)
														? customers.filter(item => item?.status === 'active' && item?.type !== 'discharged').map(c => ({ value: c.id, label: c.name }))
														: vehicles.map(v => ({ value: v.id, label: v.vehicle_number }))
												}
												placeholder={['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(editReminderTitleCategory) ? 'Select Person' : 'Select Vehicle'}
												isClearable
											/>
										</div>
									)}
									<div className="mb-3">
										<div className="field-label">Date</div>
										<DatePicker
											className="form-control"
											selected={editEventStartDateTime}
											onChange={setEditEventStartDateTime}
											dateFormat="MM/dd/yyyy"
										/>
									</div>
									<div className="mb-3">
										<div className="field-label">Category</div>
										<div className="field-value" style={{ padding: '8px 0', color: '#666' }}>
											{editReminderTitleCategory 
												? (['birthday', 'adcaps_completion', 'center_qualification_expiration'].includes(editReminderTitleCategory) ? 'Member Related' : 'Vehicle Related')
												: '-'}
										</div>
									</div>
									<div className="mb-3">
										<div className="field-label">Repeat Cycle</div>
										<select className="form-control" value={editEventRecurring} onChange={(e) => setEditEventRecurring(e.target.value)}>
											<option value="">No (One-time)</option>
											<option value="FREQ=DAILY">Daily</option>
											<option value="FREQ=WEEKLY">Weekly</option>
											<option value="FREQ=MONTHLY">Monthly</option>
											<option value="FREQ=YEARLY">Yearly</option>
										</select>
									</div>
									{editEventRecurring && (
										<>
											<div className="mb-3">
												<div className="field-label">Start Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={editRepeatStartDate}
													onChange={setEditRepeatStartDate}
													dateFormat="MM/dd/yyyy"
												/>
											</div>
											<div className="mb-3">
												<div className="field-label">End Repeat Date</div>
												<DatePicker
													className="form-control"
													selected={editRepeatEndDate}
													onChange={setEditRepeatEndDate}
													dateFormat="MM/dd/yyyy"
													disabled={editIndefiniteRepeat}
												/>
											</div>
											<div className="mb-3">
												<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
													<input type="checkbox" checked={editIndefiniteRepeat} onChange={(e) => {
														setEditIndefiniteRepeat(e.target.checked);
														if (e.target.checked) setEditRepeatEndDate(new Date('2099-12-31'));
													}} />
													Indefinite Repeat
												</label>
											</div>
										</>
									)}
								</>
							)}
						</Modal.Body>
						<Modal.Footer>
							<Button variant="secondary" size="sm" onClick={closeEditModal}>
								Cancel
							</Button>
							<Button variant="primary" size="sm" onClick={handleEditSave} disabled={
								!AuthService.canEditCalendarTab(currentTab) ||
								(currentTab === 'activitiesCalendar' && (!editEventTitle || !editActivityCategory)) ||
								(currentTab === 'incidentsCalendar' && (!editAttendanceCustomer || !editEventStartDateTime)) ||
								(currentTab === 'mealPlanCalendar' && (!editEventTitle || !editMealType)) ||
								(currentTab === 'reminderDatesCalendar' && (!editReminderTitleCategory || !editReminderAssociatedEntity))
							}>
								Save
							</Button>
						</Modal.Footer>
					</Modal>

					{/* Delete Confirmation Modal */}
					<Modal show={showDeleteConfirm} onHide={() => { setShowDeleteConfirm(false); setDeleteTargetId(null); }} size="sm" centered>
						<Modal.Header closeButton>
							<Modal.Title>Confirm Delete</Modal.Title>
						</Modal.Header>
						<Modal.Body>
							Are you sure you want to delete this event?
						</Modal.Body>
						<Modal.Footer>
							<Button variant="secondary" size="sm" onClick={() => { setShowDeleteConfirm(false); setDeleteTargetId(null); }}>
								Cancel
							</Button>
							<Button variant="danger" size="sm" onClick={() => { disableEvent(deleteTargetId); setShowDeleteConfirm(false); setDeleteTargetId(null); }}>
								Delete
							</Button>
						</Modal.Footer>
					</Modal>
				</div>
			</div>
    </>
  )
};

export default EventsCalendar;