// This file is kept for backward compatibility
// The main Scheduling component has been moved to ./scheduling/Scheduling.tsx
// This file re-exports it and also contains the original ScheduleExperiment implementation

import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
// @ts-ignore - react-big-calendar types not available
import { Calendar, momentLocalizer, Views } from 'react-big-calendar'
// @ts-ignore - react-big-calendar dragAndDrop types not available
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import moment from 'moment'
import type { User, ExperimentPhase, Experiment, ExperimentRepetition, Soaking, Airdrying } from '../services/supabase'
import { availabilityManagement, userManagement, experimentPhaseManagement, experimentManagement, repetitionManagement, phaseManagement, supabase } from '../services/supabase'
import 'react-big-calendar/lib/css/react-big-calendar.css'
import './CalendarStyles.css'
import { HorizontalTimelineCalendar } from './HorizontalTimelineCalendar'

// Re-export the new modular Scheduling component
export { Scheduling } from './scheduling/Scheduling'

// Type definitions for calendar events
interface CalendarEvent {
    id: number | string
    title: string
    start: Date
    end: Date
    resource?: string
}

// Keep the original ScheduleExperiment implementation here for now
// TODO: Move this to scheduling/views/ScheduleExperimentImpl.tsx and further refactor
export function ScheduleExperiment({ user, onBack }: { user: User; onBack: () => void }) {
        const [loading, setLoading] = useState(true)
        const [error, setError] = useState<string | null>(null)

        const [conductors, setConductors] = useState<User[]>([])
        const [conductorIdsWithFutureAvailability, setConductorIdsWithFutureAvailability] = useState<Set<string>>(new Set())
        const [selectedConductorIds, setSelectedConductorIds] = useState<Set<string>>(new Set())

        const [phases, setPhases] = useState<ExperimentPhase[]>([])
        const [expandedPhaseIds, setExpandedPhaseIds] = useState<Set<string>>(new Set())
        const [conductorsExpanded, setConductorsExpanded] = useState<boolean>(true)
        const [experimentsByPhase, setExperimentsByPhase] = useState<Record<string, Experiment[]>>({})
        const [repetitionsByExperiment, setRepetitionsByExperiment] = useState<Record<string, ExperimentRepetition[]>>({})
        const [selectedRepetitionIds, setSelectedRepetitionIds] = useState<Set<string>>(new Set())
        const [creatingRepetitionsFor, setCreatingRepetitionsFor] = useState<Set<string>>(new Set())
        const [soakingByExperiment, setSoakingByExperiment] = useState<Record<string, Soaking | null>>({})
        const [airdryingByExperiment, setAirdryingByExperiment] = useState<Record<string, Airdrying | null>>({})

        // Calendar state for selected conductors' availability
        const localizer = momentLocalizer(moment)
        const DnDCalendar = withDragAndDrop(Calendar)
        const [calendarView, setCalendarView] = useState(Views.WEEK)
        const [currentDate, setCurrentDate] = useState(new Date())
        const [availabilityEvents, setAvailabilityEvents] = useState<CalendarEvent[]>([])

        // Color map per conductor for calendar events
        const [conductorColorMap, setConductorColorMap] = useState<Record<string, string>>({})
        const colorPalette = ['#2563eb', '#059669', '#d97706', '#7c3aed', '#dc2626', '#0ea5e9', '#16a34a', '#f59e0b', '#9333ea', '#ef4444']

        // Repetition scheduling state
        const [scheduledRepetitions, setScheduledRepetitions] = useState<Record<string, {
            repetitionId: string
            experimentId: string
            soakingStart: Date | null
            airdryingStart: Date | null
            crackingStart: Date | null
        }>>({})

        // Track repetitions that have been dropped/moved and should show time points
        const [repetitionsWithTimes, setRepetitionsWithTimes] = useState<Set<string>>(new Set())
<<<<<<< HEAD
        // Track which repetitions are locked (prevent dragging)
        const [lockedSchedules, setLockedSchedules] = useState<Set<string>>(new Set())
=======
>>>>>>> old-github/main
        // Track which repetitions are currently being scheduled
        const [schedulingRepetitions, setSchedulingRepetitions] = useState<Set<string>>(new Set())
        // Track conductor assignments for each phase marker (markerId -> conductorIds[])
        const [conductorAssignments, setConductorAssignments] = useState<Record<string, string[]>>({})
        // Horizontal calendar state: zoom level (number of days to show) and current view date
        const [calendarZoom, setCalendarZoom] = useState(3) // Number of days to display
        const [calendarStartDate, setCalendarStartDate] = useState(() => {
            const today = new Date()
            today.setHours(0, 0, 0, 0)
            return today
        })

        // Ref for calendar container to preserve scroll position
        const calendarRef = useRef<HTMLDivElement>(null)
        const scrollPositionRef = useRef<{ scrollTop: number; scrollLeft: number } | null>(null)

        useEffect(() => {
            const load = async () => {
                try {
                    setLoading(true)
                    setError(null)

                    const [allUsers, allPhases] = await Promise.all([
                        userManagement.getAllUsers(),
                        experimentPhaseManagement.getAllExperimentPhases()
                    ])

                    // Filter conductors
                    const conductorsOnly = allUsers.filter(u => u.roles.includes('conductor'))
                    setConductors(conductorsOnly)

                    // For each conductor, check if they have any availability in the future
                    const conductorIds = conductorsOnly.map(c => c.id)
                    setConductorIdsWithFutureAvailability(new Set(conductorIds))

                    setPhases(allPhases)
                } catch (e: any) {
                    setError(e?.message || 'Failed to load scheduling data')
                } finally {
                    setLoading(false)
                }
            }
            load()
        }, [])

        const toggleConductor = (id: string) => {
            setSelectedConductorIds(prev => {
                const next = new Set(prev)
                if (next.has(id)) next.delete(id)
                else next.add(id)
                return next
            })
        }

        const toggleAllConductors = () => {
            const availableConductorIds = conductors
                .filter(c => conductorIdsWithFutureAvailability.has(c.id))
                .map(c => c.id)

            setSelectedConductorIds(prev => {
                // If all available conductors are selected, deselect all
                const allSelected = availableConductorIds.every(id => prev.has(id))
                if (allSelected) {
                    return new Set()
                } else {
                    // Select all available conductors
                    return new Set(availableConductorIds)
                }
            })
        }

        // Fetch availability for selected conductors and build calendar events
        useEffect(() => {
            const loadSelectedAvailability = async () => {
                try {
                    const selectedIds = Array.from(selectedConductorIds)
                    if (selectedIds.length === 0) {
                        setAvailabilityEvents([])
                        return
                    }

                    // Assign consistent colors per conductor based on their position in the full conductors array
                    // This ensures the same conductor always gets the same color, matching the checkbox list
                    const newColorMap: Record<string, string> = {}
                    conductors.forEach((conductor, index) => {
                        if (selectedIds.includes(conductor.id)) {
                            newColorMap[conductor.id] = colorPalette[index % colorPalette.length]
                        }
                    })
                    setConductorColorMap(newColorMap)

                    // Fetch availability for selected conductors in a single query
                    const { data, error } = await supabase
                        .from('conductor_availability')
                        .select('*')
                        .in('user_id', selectedIds)
                        .eq('status', 'active')
                        .gt('available_to', new Date().toISOString())
                        .order('available_from', { ascending: true })

                    if (error) throw error

                    // Map user_id -> display name
                    const idToName: Record<string, string> = {}
                    conductors.forEach(c => {
                        const name = [c.first_name, c.last_name].filter(Boolean).join(' ') || c.email
                        idToName[c.id] = name
                    })

                    const events: CalendarEvent[] = (data || []).map((r: any) => {
                        const conductorId = r.user_id
                        return {
                            id: r.id,
                            title: `${idToName[conductorId] || 'Conductor'}`,
                            start: new Date(r.available_from),
                            end: new Date(r.available_to),
                            resource: conductorId // Store conductor ID for color mapping
                        }
                    })

                    setAvailabilityEvents(events)
                } catch (e) {
                    // Fail silently for calendar, do not break main UI
                    setAvailabilityEvents([])
                }
            }

            loadSelectedAvailability()
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, [selectedConductorIds, conductors])

        const togglePhaseExpand = async (phaseId: string) => {
            setExpandedPhaseIds(prev => {
                const next = new Set(prev)
                if (next.has(phaseId)) next.delete(phaseId)
                else next.add(phaseId)
                return next
            })

            // Lazy-load experiments for this phase if not loaded
            if (!experimentsByPhase[phaseId]) {
                try {
                    const exps = await experimentManagement.getExperimentsByPhaseId(phaseId)
                    setExperimentsByPhase(prev => ({ ...prev, [phaseId]: exps }))

                    // For each experiment, load repetitions and phase data
                    const repsEntries = await Promise.all(
                        exps.map(async (exp) => {
                            const [reps, soaking, airdrying] = await Promise.all([
                                repetitionManagement.getExperimentRepetitions(exp.id),
                                phaseManagement.getSoakingByExperimentId(exp.id),
                                phaseManagement.getAirdryingByExperimentId(exp.id)
                            ])
                            return [exp.id, reps, soaking, airdrying] as const
                        })
                    )

                    // Update repetitions
                    setRepetitionsByExperiment(prev => ({
                        ...prev,
                        ...Object.fromEntries(repsEntries.map(([id, reps]) => [id, reps]))
                    }))

                    // Update soaking data
                    setSoakingByExperiment(prev => ({
                        ...prev,
                        ...Object.fromEntries(repsEntries.map(([id, , soaking]) => [id, soaking]))
                    }))

                    // Update airdrying data
                    setAirdryingByExperiment(prev => ({
                        ...prev,
                        ...Object.fromEntries(repsEntries.map(([id, , , airdrying]) => [id, airdrying]))
                    }))
                } catch (e: any) {
                    setError(e?.message || 'Failed to load experiments or repetitions')
                }
            }
        }

        const toggleRepetition = (repId: string) => {
<<<<<<< HEAD
            setSelectedRepetitionIds(prev => {
                const next = new Set(prev)
                if (next.has(repId)) {
                    next.delete(repId)
                    // Remove from scheduled repetitions when unchecked
                    setScheduledRepetitions(prevScheduled => {
                        const newScheduled = { ...prevScheduled }
                        delete newScheduled[repId]
                        return newScheduled
                    })
                    // Clear all related state when unchecked
                    setRepetitionsWithTimes(prev => {
                        const next = new Set(prev)
                        next.delete(repId)
                        return next
                    })
                    setLockedSchedules(prev => {
                        const next = new Set(prev)
                        next.delete(repId)
                        return next
                    })
                    setSchedulingRepetitions(prev => {
                        const next = new Set(prev)
                        next.delete(repId)
                        return next
                    })
                    // Re-stagger remaining repetitions
                    const remainingIds = Array.from(next).filter(id => id !== repId)
                    if (remainingIds.length > 0) {
                        reStaggerRepetitions(remainingIds)
                    }
                } else {
                    next.add(repId)
                    // Auto-spawn when checked - pass the updated set to ensure correct stagger calculation
                    spawnSingleRepetition(repId, next)
                    // Re-stagger all existing repetitions to prevent overlap
                    // Note: reStaggerRepetitions will automatically skip locked repetitions
                    reStaggerRepetitions([...next, repId])
=======
            // Checking/unchecking should only control visibility on the timeline.
            // It must NOT clear scheduling info or conductor assignments.
            setSelectedRepetitionIds(prev => {
                const next = new Set(prev)
                if (next.has(repId)) {
                    // Hide this repetition from the timeline
                    next.delete(repId)
                    // Keep scheduledRepetitions and repetitionsWithTimes intact so that
                    // re-checking the box restores the repetition in the correct spot.
                } else {
                    // Show this repetition on the timeline
                    next.add(repId)
                    // Auto-spawn when checked - pass the updated set to ensure correct stagger calculation
                    // spawnSingleRepetition will position the new repetition relative to existing ones
                    // without resetting existing positions
                    spawnSingleRepetition(repId, next)
>>>>>>> old-github/main
                }
                return next
            })
        }

        const toggleAllRepetitionsInPhase = (phaseId: string) => {
            const experiments = experimentsByPhase[phaseId] || []
            const allRepetitions = experiments.flatMap(exp => repetitionsByExperiment[exp.id] || [])

            setSelectedRepetitionIds(prev => {
                // Check if all repetitions in this phase are selected
                const allSelected = allRepetitions.every(rep => prev.has(rep.id))

                if (allSelected) {
<<<<<<< HEAD
                    // Deselect all repetitions in this phase
                    const next = new Set(prev)
                    allRepetitions.forEach(rep => {
                        next.delete(rep.id)
                        // Remove from scheduled repetitions
                        setScheduledRepetitions(prevScheduled => {
                            const newScheduled = { ...prevScheduled }
                            delete newScheduled[rep.id]
                            return newScheduled
                        })
                    })
                    return next
                } else {
                    // Select all repetitions in this phase
=======
                    // Deselect all repetitions in this phase (hide from timeline only)
                    const next = new Set(prev)
                    allRepetitions.forEach(rep => {
                        next.delete(rep.id)
                    })
                    return next
                } else {
                    // Select all repetitions in this phase (show on timeline)
>>>>>>> old-github/main
                    const next = new Set(prev)
                    allRepetitions.forEach(rep => {
                        next.add(rep.id)
                        // Auto-spawn when checked - pass the updated set to ensure correct stagger calculation
                        spawnSingleRepetition(rep.id, next)
                    })
                    return next
                }
            })
        }

        const createRepetitionsForExperiment = async (experimentId: string) => {
            try {
                setCreatingRepetitionsFor(prev => new Set(prev).add(experimentId))
                setError(null)

                // Create all repetitions for this experiment
                const newRepetitions = await repetitionManagement.createAllRepetitions(experimentId)

                // Update the repetitions state
                setRepetitionsByExperiment(prev => ({
                    ...prev,
                    [experimentId]: newRepetitions
                }))
            } catch (e: any) {
                setError(e?.message || 'Failed to create repetitions')
            } finally {
                setCreatingRepetitionsFor(prev => {
                    const next = new Set(prev)
                    next.delete(experimentId)
                    return next
                })
            }
        }

        // Re-stagger all repetitions to prevent overlap
        // IMPORTANT: Skip locked repetitions to prevent them from moving
<<<<<<< HEAD
        const reStaggerRepetitions = useCallback((repIds: string[]) => {
=======
        const reStaggerRepetitions = useCallback((repIds: string[], onlyResetWithoutCustomTimes: boolean = false) => {
>>>>>>> old-github/main
            const tomorrow = new Date()
            tomorrow.setDate(tomorrow.getDate() + 1)
            tomorrow.setHours(9, 0, 0, 0)

            setScheduledRepetitions(prev => {
                const newScheduled = { ...prev }

<<<<<<< HEAD
                // Filter out locked repetitions - they should not be moved
                const unlockedRepIds = repIds.filter(repId => !lockedSchedules.has(repId))
=======
                // If onlyResetWithoutCustomTimes is true, filter out repetitions that have custom times set
                let unlockedRepIds = repIds
                if (onlyResetWithoutCustomTimes) {
                    unlockedRepIds = unlockedRepIds.filter(repId => !repetitionsWithTimes.has(repId))
                }
>>>>>>> old-github/main

                // Calculate stagger index only for unlocked repetitions
                let staggerIndex = 0
                unlockedRepIds.forEach((repId) => {
                    if (newScheduled[repId]) {
                        const staggerMinutes = staggerIndex * 15 // 15 minutes between each repetition
                        const baseTime = new Date(tomorrow.getTime() + (staggerMinutes * 60000))

                        // Find the experiment for this repetition
                        let experimentId = ''
                        for (const [expId, reps] of Object.entries(repetitionsByExperiment)) {
                            if (reps.find(r => r.id === repId)) {
                                experimentId = expId
                                break
                            }
                        }

                        if (experimentId) {
                            const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === experimentId)
                            const soaking = soakingByExperiment[experimentId]
                            const airdrying = airdryingByExperiment[experimentId]

                            if (experiment && soaking && airdrying) {
                                const soakingStart = new Date(baseTime)
                                const airdryingStart = new Date(soakingStart.getTime() + (soaking.soaking_duration_minutes * 60000))
                                const crackingStart = new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000))

                                newScheduled[repId] = {
                                    ...newScheduled[repId],
                                    soakingStart,
                                    airdryingStart,
                                    crackingStart
                                }
                                staggerIndex++
                            }
                        }
                    }
                })

                return newScheduled
            })
<<<<<<< HEAD
        }, [lockedSchedules, repetitionsByExperiment, experimentsByPhase, soakingByExperiment, airdryingByExperiment])
=======
        }, [repetitionsByExperiment, experimentsByPhase, soakingByExperiment, airdryingByExperiment, repetitionsWithTimes])
>>>>>>> old-github/main

        // Spawn a single repetition in calendar
        const spawnSingleRepetition = (repId: string, updatedSelectedIds?: Set<string>) => {
            const tomorrow = new Date()
            tomorrow.setDate(tomorrow.getDate() + 1)
            tomorrow.setHours(9, 0, 0, 0) // Default to 9 AM tomorrow

            // Find the experiment for this repetition
            let experimentId = ''
            for (const [expId, reps] of Object.entries(repetitionsByExperiment)) {
                if (reps.find(r => r.id === repId)) {
                    experimentId = expId
                    break
                }
            }

            if (experimentId) {
                const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === experimentId)
                const soaking = soakingByExperiment[experimentId]
                const airdrying = airdryingByExperiment[experimentId]

                if (experiment && soaking && airdrying) {
                    // Stagger the positioning to avoid overlap when multiple repetitions are selected
                    // Use the updated set if provided, otherwise use current state (may be stale)
                    const selectedReps = updatedSelectedIds ? Array.from(updatedSelectedIds) : Array.from(selectedRepetitionIds)
                    const repIndex = selectedReps.indexOf(repId)
                    // If repId not found in selectedReps, use the count of scheduled repetitions as fallback
                    const staggerMinutes = repIndex >= 0 ? repIndex * 15 : Object.keys(scheduledRepetitions).length * 15

                    const soakingStart = new Date(tomorrow.getTime() + (staggerMinutes * 60000))
                    const airdryingStart = new Date(soakingStart.getTime() + (soaking.soaking_duration_minutes * 60000))
                    const crackingStart = new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000))

                    setScheduledRepetitions(prev => ({
                        ...prev,
                        [repId]: {
                            repetitionId: repId,
                            experimentId,
                            soakingStart,
                            airdryingStart,
                            crackingStart
                        }
                    }))
                }
            }
        }

        // Update phase timing when a marker is moved
        const updatePhaseTiming = useCallback((repId: string, phase: 'soaking' | 'airdrying' | 'cracking', newTime: Date) => {
            console.log('updatePhaseTiming called:', repId, phase, newTime)
            setScheduledRepetitions(prev => {
                const current = prev[repId]
                if (!current) {
                    console.log('No current repetition found for:', repId)
                    return prev
                }

                const experimentId = current.experimentId
                const soaking = soakingByExperiment[experimentId]
                const airdrying = airdryingByExperiment[experimentId]

                if (!soaking || !airdrying) {
                    console.log('Missing soaking or airdrying data for experiment:', experimentId)
                    return prev
                }

                let newScheduled = { ...prev }

                const clampToReasonableHours = (d: Date) => {
<<<<<<< HEAD
                    const min = new Date(d)
                    min.setHours(5, 0, 0, 0)
                    const max = new Date(d)
                    max.setHours(23, 0, 0, 0)
=======
                    // Allow full 24 hours (midnight to midnight)
                    const min = new Date(d)
                    min.setHours(0, 0, 0, 0)
                    const max = new Date(d)
                    max.setHours(23, 59, 59, 999)
>>>>>>> old-github/main
                    const t = d.getTime()
                    return new Date(Math.min(Math.max(t, min.getTime()), max.getTime()))
                }

                if (phase === 'soaking') {
                    const soakingStart = clampToReasonableHours(newTime)
                    const airdryingStart = clampToReasonableHours(new Date(soakingStart.getTime() + (soaking.soaking_duration_minutes * 60000)))
                    const crackingStart = clampToReasonableHours(new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000)))

                    newScheduled[repId] = {
                        ...current,
                        soakingStart,
                        airdryingStart,
                        crackingStart
                    }
                    console.log('Updated repetition times:', newScheduled[repId])
                } else if (phase === 'airdrying') {
                    const airdryingStart = clampToReasonableHours(newTime)
                    const soakingStart = clampToReasonableHours(new Date(airdryingStart.getTime() - (soaking.soaking_duration_minutes * 60000)))
                    const crackingStart = clampToReasonableHours(new Date(airdryingStart.getTime() + (airdrying.duration_minutes * 60000)))

                    newScheduled[repId] = {
                        ...current,
                        soakingStart,
                        airdryingStart,
                        crackingStart
                    }
                    console.log('Updated repetition times:', newScheduled[repId])
                } else if (phase === 'cracking') {
                    const crackingStart = clampToReasonableHours(newTime)
                    const airdryingStart = clampToReasonableHours(new Date(crackingStart.getTime() - (airdrying.duration_minutes * 60000)))
                    const soakingStart = clampToReasonableHours(new Date(airdryingStart.getTime() - (soaking.soaking_duration_minutes * 60000)))

                    newScheduled[repId] = {
                        ...current,
                        soakingStart,
                        airdryingStart,
                        crackingStart
                    }
                    console.log('Updated repetition times:', newScheduled[repId])
                }

                return newScheduled
            })
        }, [soakingByExperiment, airdryingByExperiment])

        // Generate calendar events for scheduled repetitions (memoized)
        const generateRepetitionEvents = useCallback((): CalendarEvent[] => {
            const events: CalendarEvent[] = []

            Object.values(scheduledRepetitions).forEach(scheduled => {
                const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === scheduled.experimentId)
                const repetition = repetitionsByExperiment[scheduled.experimentId]?.find(r => r.id === scheduled.repetitionId)

                if (experiment && repetition && scheduled.soakingStart) {
<<<<<<< HEAD
                    const isLocked = lockedSchedules.has(scheduled.repetitionId)
                    const lockIcon = isLocked ? '🔒' : '🔓'

                    // Soaking marker
                    events.push({
                        id: `${scheduled.repetitionId}-soaking`,
                        title: `${lockIcon} 💧 Soaking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
=======
                    // Soaking marker
                    events.push({
                        id: `${scheduled.repetitionId}-soaking`,
                        title: `💧 Soaking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
>>>>>>> old-github/main
                        start: scheduled.soakingStart,
                        end: new Date(scheduled.soakingStart.getTime() + 15 * 60000), // 15 minute duration for better visibility
                        resource: 'soaking'
                    })

                    // Airdrying marker
                    if (scheduled.airdryingStart) {
                        events.push({
                            id: `${scheduled.repetitionId}-airdrying`,
<<<<<<< HEAD
                            title: `${lockIcon} 🌬️ Airdrying - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
=======
                            title: `🌬️ Airdrying - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
>>>>>>> old-github/main
                            start: scheduled.airdryingStart,
                            end: new Date(scheduled.airdryingStart.getTime() + 15 * 60000), // 15 minute duration for better visibility
                            resource: 'airdrying'
                        })
                    }

                    // Cracking marker
                    if (scheduled.crackingStart) {
                        events.push({
                            id: `${scheduled.repetitionId}-cracking`,
<<<<<<< HEAD
                            title: `${lockIcon} ⚡ Cracking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
=======
                            title: `⚡ Cracking - Exp ${experiment.experiment_number} Rep ${repetition.repetition_number}`,
>>>>>>> old-github/main
                            start: scheduled.crackingStart,
                            end: new Date(scheduled.crackingStart.getTime() + 15 * 60000), // 15 minute duration for better visibility
                            resource: 'cracking'
                        })
                    }
                }
            })

            return events
<<<<<<< HEAD
        }, [scheduledRepetitions, experimentsByPhase, repetitionsByExperiment, lockedSchedules])
=======
        }, [scheduledRepetitions, experimentsByPhase, repetitionsByExperiment])
>>>>>>> old-github/main

        // Memoize the calendar events
        const calendarEvents = useMemo(() => {
            return generateRepetitionEvents()
        }, [generateRepetitionEvents])

        // Functions to preserve and restore scroll position
        const preserveScrollPosition = useCallback(() => {
            if (calendarRef.current) {
                const scrollContainer = calendarRef.current.querySelector('.rbc-time-content') as HTMLElement
                if (scrollContainer) {
                    scrollPositionRef.current = {
                        scrollTop: scrollContainer.scrollTop,
                        scrollLeft: scrollContainer.scrollLeft
                    }
                }
            }
        }, [])

        const restoreScrollPosition = useCallback(() => {
            if (calendarRef.current && scrollPositionRef.current) {
                const scrollContainer = calendarRef.current.querySelector('.rbc-time-content') as HTMLElement
                if (scrollContainer) {
                    scrollContainer.scrollTop = scrollPositionRef.current.scrollTop
                    scrollContainer.scrollLeft = scrollPositionRef.current.scrollLeft
                }
            }
        }, [])

        // Helper functions for scheduling
        const formatTime = (date: Date | null) => {
            if (!date) return 'Not set'
            return moment(date).format('MMM D, h:mm A')
        }

<<<<<<< HEAD
        const toggleScheduleLock = (repId: string) => {
            setLockedSchedules(prev => {
                const next = new Set(prev)
                if (next.has(repId)) {
                    next.delete(repId)
                } else {
                    next.add(repId)
                }
                return next
=======
        // Remove all conductor assignments from a repetition
        const removeRepetitionAssignments = (repId: string) => {
            const markerIdPrefix = repId
            setConductorAssignments(prev => {
                const newAssignments = { ...prev }
                // Remove assignments for all three phases
                delete newAssignments[`${markerIdPrefix}-soaking`]
                delete newAssignments[`${markerIdPrefix}-airdrying`]
                delete newAssignments[`${markerIdPrefix}-cracking`]
                return newAssignments
>>>>>>> old-github/main
            })
        }

        const draggableAccessor = useCallback((event: any) => {
            // Only make repetition markers draggable, not availability events
            const resource = event.resource as string
            if (resource === 'soaking' || resource === 'airdrying' || resource === 'cracking') {
<<<<<<< HEAD
                // Check if the repetition is locked
                const eventId = event.id as string
                const repId = eventId.split('-')[0]
                const isLocked = lockedSchedules.has(repId)
                return !isLocked
            }
            return false
        }, [lockedSchedules])
=======
                return true
            }
            return false
        }, [])
>>>>>>> old-github/main

        const eventPropGetter = useCallback((event: any) => {
            const resource = event.resource as string

            // Styling for repetition markers (foreground events)
            if (resource === 'soaking' || resource === 'airdrying' || resource === 'cracking') {
<<<<<<< HEAD
                const eventId = event.id as string
                const repId = eventId.split('-')[0]
                const isLocked = lockedSchedules.has(repId)

=======
>>>>>>> old-github/main
                const colors = {
                    soaking: '#3b82f6', // blue
                    airdrying: '#10b981', // green  
                    cracking: '#f59e0b'  // orange
                }
                const color = colors[resource as keyof typeof colors] || '#6b7280'

                return {
                    style: {
<<<<<<< HEAD
                        backgroundColor: isLocked ? '#9ca3af' : color, // gray if locked
                        borderColor: isLocked ? color : color, // border takes original color when locked
=======
                        backgroundColor: color,
                        borderColor: color,
>>>>>>> old-github/main
                        color: 'white',
                        borderRadius: '8px',
                        border: '2px solid',
                        height: '40px',
                        minHeight: '40px',
                        fontSize: '12px',
                        padding: '8px 12px',
                        display: 'flex',
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                        fontWeight: 'bold',
                        zIndex: 10,
                        position: 'relative',
                        lineHeight: '1.4',
                        textShadow: '1px 1px 2px rgba(0,0,0,0.7)',
                        gap: '8px',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
<<<<<<< HEAD
                        cursor: isLocked ? 'not-allowed' : 'grab',
                        boxShadow: isLocked ? '0 1px 2px rgba(0,0,0,0.1)' : '0 2px 4px rgba(0,0,0,0.2)',
                        transition: 'all 0.2s ease',
                        opacity: isLocked ? 0.7 : 1
=======
                        cursor: 'grab',
                        boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
                        transition: 'all 0.2s ease',
                        opacity: 1
>>>>>>> old-github/main
                    }
                }
            }

            // Default styling for other events
            return {}
<<<<<<< HEAD
        }, [lockedSchedules])
=======
        }, [])
>>>>>>> old-github/main

        const scheduleRepetition = async (repId: string, experimentId: string) => {
            setSchedulingRepetitions(prev => new Set(prev).add(repId))

            try {
                const scheduled = scheduledRepetitions[repId]
                if (!scheduled) throw new Error('No scheduled times found')

                const { soakingStart, airdryingStart, crackingStart } = scheduled
                if (!soakingStart || !airdryingStart || !crackingStart) {
                    throw new Error('All time points must be set')
                }

                const soaking = soakingByExperiment[experimentId]
                const airdrying = airdryingByExperiment[experimentId]

                if (!soaking || !airdrying) throw new Error('Phase data not found')

                // Update repetition scheduled_date (earliest time point)
                await repetitionManagement.updateRepetition(repId, {
                    scheduled_date: soakingStart.toISOString()
                })

                // Create/update soaking record with repetition_id
                await phaseManagement.createSoaking({
                    repetition_id: repId,
                    scheduled_start_time: soakingStart.toISOString(),
                    soaking_duration_minutes: soaking.soaking_duration_minutes
                })

                // Create/update airdrying record with repetition_id
                await phaseManagement.createAirdrying({
                    repetition_id: repId,
                    scheduled_start_time: airdryingStart.toISOString(),
                    duration_minutes: airdrying.duration_minutes
                })

                // Create/update cracking record with repetition_id
                // Note: cracking requires machine_type_id - need to get from experiment phase
                const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === experimentId)
                const phase = phases.find(p => p.id === experiment?.phase_id)

                if (phase?.cracking_machine_type_id) {
                    await phaseManagement.createCracking({
                        repetition_id: repId,
                        machine_type_id: phase.cracking_machine_type_id,
                        scheduled_start_time: crackingStart.toISOString()
                    })
                }

                // Update local state to reflect scheduling
                setRepetitionsByExperiment(prev => ({
                    ...prev,
                    [experimentId]: prev[experimentId]?.map(r =>
                        r.id === repId
                            ? { ...r, scheduled_date: soakingStart.toISOString() }
                            : r
                    ) || []
                }))

            } catch (error: any) {
                setError(error?.message || 'Failed to schedule repetition')
            } finally {
                setSchedulingRepetitions(prev => {
                    const next = new Set(prev)
                    next.delete(repId)
                    return next
                })
            }
        }

<<<<<<< HEAD
=======
        // Unschedule a repetition: clear its scheduling info and unassign all conductors.
        const unscheduleRepetition = async (repId: string, experimentId: string) => {
            setSchedulingRepetitions(prev => new Set(prev).add(repId))

            try {
                // Remove all conductor assignments for this repetition
                removeRepetitionAssignments(repId)

                // Clear scheduled_date on the repetition in local state
                setRepetitionsByExperiment(prev => ({
                    ...prev,
                    [experimentId]: prev[experimentId]?.map(r =>
                        r.id === repId ? { ...r, scheduled_date: null } : r
                    ) || []
                }))

                // Clear scheduled times for this repetition so it disappears from the timeline
                setScheduledRepetitions(prev => {
                    const next = { ...prev }
                    delete next[repId]
                    return next
                })

                // This repetition no longer has active times
                setRepetitionsWithTimes(prev => {
                    const next = new Set(prev)
                    next.delete(repId)
                    return next
                })

                // Also clear scheduled_date in the database for this repetition
                await repetitionManagement.updateRepetition(repId, {
                    scheduled_date: null
                })
            } catch (error: any) {
                setError(error?.message || 'Failed to unschedule repetition')
            } finally {
                setSchedulingRepetitions(prev => {
                    const next = new Set(prev)
                    next.delete(repId)
                    return next
                })
            }
        }

>>>>>>> old-github/main
        // Restore scroll position after scheduledRepetitions changes
        useEffect(() => {
            if (scrollPositionRef.current) {
                // Use a longer delay to ensure the calendar has fully re-rendered
                const timeoutId = setTimeout(() => {
                    restoreScrollPosition()
                }, 50)

                return () => clearTimeout(timeoutId)
            }
        }, [scheduledRepetitions, restoreScrollPosition])

        // Transform data for horizontal timeline calendar
        const horizontalCalendarData = useMemo(() => {
            // Calculate date range based on zoom level and current start date
            const startDate = new Date(calendarStartDate)
            startDate.setHours(0, 0, 0, 0)
            const endDate = new Date(startDate)
            endDate.setDate(endDate.getDate() + (calendarZoom - 1))

            // Transform conductor availabilities
            const conductorAvailabilities = conductors
                .filter(c => selectedConductorIds.has(c.id))
                .map((conductor, index) => {
                    const conductorName = [conductor.first_name, conductor.last_name].filter(Boolean).join(' ') || conductor.email
                    const color = conductorColorMap[conductor.id] || colorPalette[index % colorPalette.length]

                    const availability = availabilityEvents
                        .filter(event => event.resource === conductor.id)
                        .map(event => ({
                            start: new Date(event.start),
                            end: new Date(event.end)
                        }))

                    return {
                        conductorId: conductor.id,
                        conductorName,
                        color,
                        availability
                    }
                })

            // Transform phase markers
            const phaseMarkers: Array<{
                id: string
                repetitionId: string
                experimentId: string
                phase: 'soaking' | 'airdrying' | 'cracking'
                startTime: Date
                assignedConductors: string[]
<<<<<<< HEAD
                locked: boolean
=======
>>>>>>> old-github/main
            }> = []

            Object.values(scheduledRepetitions).forEach(scheduled => {
                const repId = scheduled.repetitionId
<<<<<<< HEAD
=======
                // Only include markers for repetitions that are checked (selected)
                if (!selectedRepetitionIds.has(repId)) {
                    return
                }
                
>>>>>>> old-github/main
                const markerIdPrefix = repId

                if (scheduled.soakingStart) {
                    phaseMarkers.push({
                        id: `${markerIdPrefix}-soaking`,
                        repetitionId: repId,
                        experimentId: scheduled.experimentId,
                        phase: 'soaking',
                        startTime: scheduled.soakingStart,
<<<<<<< HEAD
                        assignedConductors: conductorAssignments[`${markerIdPrefix}-soaking`] || [],
                        locked: lockedSchedules.has(repId)
=======
                        assignedConductors: conductorAssignments[`${markerIdPrefix}-soaking`] || []
>>>>>>> old-github/main
                    })
                }

                if (scheduled.airdryingStart) {
                    phaseMarkers.push({
                        id: `${markerIdPrefix}-airdrying`,
                        repetitionId: repId,
                        experimentId: scheduled.experimentId,
                        phase: 'airdrying',
                        startTime: scheduled.airdryingStart,
<<<<<<< HEAD
                        assignedConductors: conductorAssignments[`${markerIdPrefix}-airdrying`] || [],
                        locked: lockedSchedules.has(repId)
=======
                        assignedConductors: conductorAssignments[`${markerIdPrefix}-airdrying`] || []
>>>>>>> old-github/main
                    })
                }

                if (scheduled.crackingStart) {
                    phaseMarkers.push({
                        id: `${markerIdPrefix}-cracking`,
                        repetitionId: repId,
                        experimentId: scheduled.experimentId,
                        phase: 'cracking',
                        startTime: scheduled.crackingStart,
<<<<<<< HEAD
                        assignedConductors: conductorAssignments[`${markerIdPrefix}-cracking`] || [],
                        locked: lockedSchedules.has(repId)
=======
                        assignedConductors: conductorAssignments[`${markerIdPrefix}-cracking`] || []
>>>>>>> old-github/main
                    })
                }
            })

            return {
                startDate,
                endDate,
                conductorAvailabilities,
                phaseMarkers
            }
<<<<<<< HEAD
        }, [selectedConductorIds, conductors, conductorColorMap, colorPalette, availabilityEvents, scheduledRepetitions, conductorAssignments, lockedSchedules, calendarStartDate, calendarZoom])
=======
        }, [selectedConductorIds, conductors, conductorColorMap, colorPalette, availabilityEvents, scheduledRepetitions, conductorAssignments, calendarStartDate, calendarZoom, selectedRepetitionIds])

        // Build repetition metadata mapping for timeline display
        const repetitionMetadata = useMemo(() => {
            const metadata: Record<string, { phaseName: string; experimentNumber: number; repetitionNumber: number; experimentId: string; isScheduledInDb: boolean }> = {}
            
            Object.values(scheduledRepetitions).forEach(scheduled => {
                const repId = scheduled.repetitionId
                // Only include metadata for repetitions that are checked (selected)
                if (!selectedRepetitionIds.has(repId)) {
                    return
                }
                
                const experiment = Object.values(experimentsByPhase).flat().find(e => e.id === scheduled.experimentId)
                const repetition = Object.values(repetitionsByExperiment).flat().find(r => r.id === repId)
                const phase = phases.find(p => 
                    Object.values(experimentsByPhase[p.id] || []).some(e => e.id === scheduled.experimentId)
                )
                
                if (experiment && repetition && phase) {
                    metadata[repId] = {
                        phaseName: phase.name,
                        experimentNumber: experiment.experiment_number,
                        repetitionNumber: repetition.repetition_number,
                        experimentId: scheduled.experimentId,
                        // Consider a repetition \"scheduled\" in DB if it has a non-null scheduled_date
                        isScheduledInDb: Boolean(repetition.scheduled_date)
                    }
                }
            })
            
            return metadata
        }, [scheduledRepetitions, experimentsByPhase, repetitionsByExperiment, phases, selectedRepetitionIds])

        // Scroll to repetition in accordion
        const handleScrollToRepetition = useCallback(async (repetitionId: string) => {
            // First, expand the phase if it's collapsed
            const repetition = Object.values(repetitionsByExperiment).flat().find(r => r.id === repetitionId)
            if (repetition) {
                const experiment = Object.values(experimentsByPhase).flat().find(e => 
                    (repetitionsByExperiment[e.id] || []).some(r => r.id === repetitionId)
                )
                if (experiment) {
                    const phase = phases.find(p => 
                        (experimentsByPhase[p.id] || []).some(e => e.id === experiment.id)
                    )
                    if (phase && !expandedPhaseIds.has(phase.id)) {
                        await togglePhaseExpand(phase.id)
                        // Wait a bit for the accordion to expand
                        await new Promise(resolve => setTimeout(resolve, 300))
                    }
                }
            }
            
            // Then scroll to the element
            const element = document.getElementById(`repetition-${repetitionId}`)
            if (element) {
                element.scrollIntoView({ behavior: 'smooth', block: 'center' })
            }
        }, [repetitionsByExperiment, experimentsByPhase, phases, expandedPhaseIds, togglePhaseExpand])
>>>>>>> old-github/main

        // Handlers for horizontal calendar
        const handleHorizontalMarkerDrag = useCallback((markerId: string, newTime: Date) => {
            console.log('handleHorizontalMarkerDrag called:', markerId, newTime)
            // Marker ID format: ${repId}-${phase} where repId is a UUID with hyphens
            // Split by '-' and take the last segment as phase, rest as repId
            const parts = markerId.split('-')
            const phase = parts[parts.length - 1] as 'soaking' | 'airdrying' | 'cracking'
            const repId = parts.slice(0, -1).join('-')
            console.log('Updating phase timing:', repId, phase, newTime)
            updatePhaseTiming(repId, phase, newTime)
            setRepetitionsWithTimes(prev => new Set(prev).add(repId))
        }, [updatePhaseTiming])

        const handleHorizontalMarkerAssignConductors = useCallback((markerId: string, conductorIds: string[]) => {
            setConductorAssignments(prev => ({
                ...prev,
                [markerId]: conductorIds
            }))
        }, [])

<<<<<<< HEAD
        const handleHorizontalMarkerLockToggle = useCallback((markerId: string) => {
            // Marker ID format: ${repId}-${phase} where repId is a UUID with hyphens
            // Split by '-' and take all but the last segment as repId
            const parts = markerId.split('-')
            const repId = parts.slice(0, -1).join('-')
            setLockedSchedules(prev => {
                const next = new Set(prev)
                if (next.has(repId)) {
                    next.delete(repId)
                } else {
                    next.add(repId)
                }
                return next
            })
        }, [])
=======
>>>>>>> old-github/main


        return (
            <div className="h-full flex flex-col overflow-hidden -m-4 md:-m-6">
                <div className="p-6 flex-shrink-0">
                    <button
                        onClick={onBack}
                        className="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 mb-4"
                    >
                        <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                        </svg>
                        Back to Scheduling
                    </button>
                    <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                        Schedule Experiment
                    </h1>
                    <p className="text-gray-600 dark:text-gray-400">
                        Schedule specific experiment runs and assign team members to upcoming sessions.
                    </p>
                </div>

                <div className="px-6 pb-6 flex-1 min-h-0 overflow-hidden">
                    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 h-full flex flex-col min-h-0 overflow-hidden">
                        {error && (
                            <div className="mb-4 text-sm text-red-600 dark:text-red-400">{error}</div>
                        )}
                        {loading ? (
                            <div className="text-center py-12">
                                <div className="mx-auto w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-full flex items-center justify-center mb-4">
                                    <svg className="w-8 h-8 text-purple-600 dark:text-purple-400 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 12a8 8 0 018-8" />
                                    </svg>
                                </div>
                                <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">Loading…</h3>
                                <p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">Fetching conductors, phases, and experiments.</p>
                            </div>
                        ) : (
                            <>
                                {/* Horizontal Timeline Calendar - First */}
                                <div className="mb-6 flex flex-col flex-1 min-h-0 overflow-hidden">
                                    <div className="mb-3 flex-shrink-0 flex items-center justify-between flex-wrap gap-3">
                                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Selected Conductors' Availability & Experiment Scheduling</h3>

                                        {/* Navigation and Zoom Controls */}
                                        <div className="flex items-center gap-2">
                                            {/* Previous Day Button */}
                                            <button
                                                onClick={() => {
                                                    const newDate = new Date(calendarStartDate)
                                                    newDate.setDate(newDate.getDate() - 1)
                                                    setCalendarStartDate(newDate)
                                                }}
                                                className="px-3 py-1.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded transition-colors flex items-center gap-1"
                                                title="Previous day"
                                            >
                                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                                                </svg>
                                                <span className="text-sm">Prev</span>
                                            </button>

                                            {/* Date Display */}
                                            <div className="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded text-sm min-w-[140px] text-center">
                                                {moment(horizontalCalendarData.startDate).format('MMM D')} - {moment(horizontalCalendarData.endDate).format('MMM D, YYYY')}
                                            </div>

                                            {/* Next Day Button */}
                                            <button
                                                onClick={() => {
                                                    const newDate = new Date(calendarStartDate)
                                                    newDate.setDate(newDate.getDate() + 1)
                                                    setCalendarStartDate(newDate)
                                                }}
                                                className="px-3 py-1.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded transition-colors flex items-center gap-1"
                                                title="Next day"
                                            >
                                                <span className="text-sm">Next</span>
                                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                                                </svg>
                                            </button>

                                            {/* Zoom Out Button (show more days) */}
                                            <button
                                                onClick={() => setCalendarZoom(prev => Math.min(30, prev + 1))}
                                                disabled={calendarZoom >= 30}
                                                className="px-3 py-1.5 bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-200 dark:hover:bg-blue-900/50 disabled:bg-gray-100 disabled:dark:bg-gray-700 disabled:cursor-not-allowed text-blue-700 dark:text-blue-300 rounded transition-colors"
                                                title="Zoom out (show more days)"
                                            >
                                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" />
                                                </svg>
                                            </button>

                                            {/* Zoom Level Display */}
                                            <div className="px-2 py-1.5 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded text-xs min-w-[60px] text-center">
                                                {calendarZoom} {calendarZoom === 1 ? 'day' : 'days'}
                                            </div>

                                            {/* Zoom In Button (show fewer days) */}
                                            <button
                                                onClick={() => setCalendarZoom(prev => Math.max(1, prev - 1))}
                                                disabled={calendarZoom <= 1}
                                                className="px-3 py-1.5 bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-200 dark:hover:bg-blue-900/50 disabled:bg-gray-100 disabled:dark:bg-gray-700 disabled:cursor-not-allowed text-blue-700 dark:text-blue-300 rounded transition-colors"
                                                title="Zoom in (show fewer days)"
                                            >
                                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7" />
                                                </svg>
                                            </button>

                                            {/* Today Button */}
                                            <button
                                                onClick={() => {
                                                    const today = new Date()
                                                    today.setHours(0, 0, 0, 0)
                                                    setCalendarStartDate(today)
                                                }}
                                                className="px-3 py-1.5 bg-green-100 dark:bg-green-900/30 hover:bg-green-200 dark:hover:bg-green-900/50 text-green-700 dark:text-green-300 rounded transition-colors text-sm"
                                                title="Jump to today"
                                            >
                                                Today
                                            </button>
                                        </div>
                                    </div>
                                    <div className="flex-1 min-h-0 overflow-hidden">
                                        <HorizontalTimelineCalendar
                                            startDate={horizontalCalendarData.startDate}
                                            endDate={horizontalCalendarData.endDate}
                                            conductorAvailabilities={horizontalCalendarData.conductorAvailabilities}
                                            phaseMarkers={horizontalCalendarData.phaseMarkers}
                                            onMarkerDrag={handleHorizontalMarkerDrag}
                                            onMarkerAssignConductors={handleHorizontalMarkerAssignConductors}
<<<<<<< HEAD
                                            onMarkerLockToggle={handleHorizontalMarkerLockToggle}
=======
                                            repetitionMetadata={repetitionMetadata}
                                            onScrollToRepetition={handleScrollToRepetition}
                                            onScheduleRepetition={scheduleRepetition}
>>>>>>> old-github/main
                                            timeStep={15}
                                            minHour={6}
                                            maxHour={22}
                                        />
                                    </div>
                                </div>

                            {/* Conductors and Experiment Phases Dropdowns - Second */}
                            <div className="grid grid-cols-2 gap-6 flex-shrink-0">
                                    {/* Left: Conductors with future availability */}
                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center justify-between mb-3">
                                            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Conductors</h2>
                                            <span className="text-xs text-gray-500 dark:text-gray-400">Select to consider for scheduling</span>
                                        </div>
                                        <div className="border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-200 dark:divide-gray-700">
                                            {conductors.length === 0 ? (
                                                <div className="p-4 text-sm text-gray-500 dark:text-gray-400">No conductors found.</div>
                                            ) : (
                                                <div>
                                                    <button
                                                        className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50"
                                                        onClick={() => setConductorsExpanded(!conductorsExpanded)}
                                                    >
                                                        <span className="text-sm font-medium text-gray-900 dark:text-white">All Conductors</span>
                                                        <svg className={`w-4 h-4 text-gray-500 transition-transform ${conductorsExpanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                                        </svg>
                                                    </button>
                                                    {conductorsExpanded && (
                                                        <div className="bg-gray-50 dark:bg-gray-800/50 max-h-[420px] overflow-y-auto">
                                                            {/* Select All checkbox */}
                                                            <div className="p-3 border-b border-gray-200 dark:border-gray-600">
                                                                <label className="flex items-center gap-2">
                                                                    <input
                                                                        type="checkbox"
                                                                        className="h-4 w-4 text-blue-600 border-gray-300 rounded"
                                                                        checked={conductors.filter(c => conductorIdsWithFutureAvailability.has(c.id)).every(c => selectedConductorIds.has(c.id)) && conductors.filter(c => conductorIdsWithFutureAvailability.has(c.id)).length > 0}
                                                                        onChange={toggleAllConductors}
                                                                    />
                                                                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Select All Available Conductors</span>
                                                                </label>
                                                            </div>
                                                            {/* Conductors list */}
                                                            <div className="divide-y divide-gray-200 dark:divide-gray-700">
                                                                {conductors.map((c, index) => {
                                                                    const name = [c.first_name, c.last_name].filter(Boolean).join(' ') || c.email
                                                                    const hasFuture = conductorIdsWithFutureAvailability.has(c.id)
                                                                    const checked = selectedConductorIds.has(c.id)
                                                                    // Use the same color mapping as the calendar (from conductorColorMap)
                                                                    const conductorColor = checked ? (conductorColorMap[c.id] || colorPalette[index % colorPalette.length]) : null

                                                                    return (
                                                                        <label
                                                                            key={c.id}
                                                                            className={`flex items-center justify-between p-3 ${!hasFuture ? 'opacity-50' : ''} ${checked ? 'border-l-4' : ''} hover:bg-gray-100 dark:hover:bg-gray-700/30`}
                                                                            style={checked && conductorColor ? { borderLeftColor: conductorColor + '60' } : {}}
                                                                        >
                                                                            <div className="flex items-center gap-3">
                                                                                <input
                                                                                    type="checkbox"
                                                                                    className="h-4 w-4 text-blue-600 border-gray-300 rounded"
                                                                                    checked={checked}
                                                                                    onChange={() => toggleConductor(c.id)}
                                                                                    disabled={!hasFuture}
                                                                                />
                                                                                <div>
                                                                                    <div className="text-sm font-medium text-gray-900 dark:text-white">{name}</div>
                                                                                    <div className="text-xs text-gray-500 dark:text-gray-400">{c.email}</div>
                                                                                </div>
                                                                            </div>
                                                                            <span className={`text-xs ${hasFuture ? 'text-green-600 dark:text-green-400' : 'text-gray-400'}`}>{hasFuture ? 'Available' : 'No availability'}</span>
                                                                        </label>
                                                                    )
                                                                })}
                                                            </div>
                                                        </div>
                                                    )}
                                                </div>
                                            )}
                                        </div>
                                    </div>

                                    {/* Right: Phases -> Experiments -> Repetitions */}
                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center justify-between mb-3">
                                            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Experiment Phases</h2>
                                            <span className="text-xs text-gray-500 dark:text-gray-400">Expand and select repetitions</span>
                                        </div>
                                        <div className="border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-200 dark:divide-gray-700">
                                            {phases.length === 0 && (
                                                <div className="p-4 text-sm text-gray-500 dark:text-gray-400">No phases defined.</div>
                                            )}
                                            {phases.map(phase => {
                                                const expanded = expandedPhaseIds.has(phase.id)
                                                const experiments = experimentsByPhase[phase.id] || []
                                                return (
                                                    <div key={phase.id}>
                                                        <button
                                                            className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50"
                                                            onClick={() => togglePhaseExpand(phase.id)}
                                                        >
                                                            <span className="text-sm font-medium text-gray-900 dark:text-white">{phase.name}</span>
                                                            <svg className={`w-4 h-4 text-gray-500 transition-transform ${expanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                                            </svg>
                                                        </button>
                                                        {expanded && (
                                                            <div className="bg-gray-50 dark:bg-gray-800/50 max-h-96 overflow-y-auto">
                                                                {/* Select All checkbox for this phase */}
                                                                {experiments.length > 0 && (
                                                                    <div className="p-3 border-b border-gray-200 dark:border-gray-600">
                                                                        <label className="flex items-center gap-2">
                                                                            <input
                                                                                type="checkbox"
                                                                                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
                                                                                checked={experiments.flatMap(exp => repetitionsByExperiment[exp.id] || []).every(rep => selectedRepetitionIds.has(rep.id)) && experiments.flatMap(exp => repetitionsByExperiment[exp.id] || []).length > 0}
                                                                                onChange={() => toggleAllRepetitionsInPhase(phase.id)}
                                                                            />
                                                                            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Select All Repetitions in {phase.name}</span>
                                                                        </label>
                                                                    </div>
                                                                )}
                                                                {experiments.length === 0 && (
                                                                    <div className="p-3 text-xs text-gray-500 dark:text-gray-400">No experiments in this phase.</div>
                                                                )}
                                                                {experiments.map(exp => {
                                                                    const reps = repetitionsByExperiment[exp.id] || []
                                                                    const isCreating = creatingRepetitionsFor.has(exp.id)
                                                                    const allRepsCreated = reps.length >= exp.reps_required
                                                                    const soaking = soakingByExperiment[exp.id]
                                                                    const airdrying = airdryingByExperiment[exp.id]

                                                                    const getSoakDisplay = () => {
                                                                        if (soaking) return `${soaking.soaking_duration_minutes}min`
                                                                        return '—'
                                                                    }

                                                                    const getAirdryDisplay = () => {
                                                                        if (airdrying) return `${airdrying.duration_minutes}min`
                                                                        return '—'
                                                                    }

                                                                    return (
                                                                        <div key={exp.id} className="border-t border-gray-200 dark:border-gray-700">
                                                                            <div className="px-3 py-2 flex items-center justify-between">
                                                                                <div className="text-sm text-gray-900 dark:text-white">
                                                                                    <span className="font-medium">Exp #{exp.experiment_number}</span>
                                                                                    <span className="mx-2 text-gray-400">•</span>
                                                                                    <span className="text-xs text-gray-600 dark:text-gray-300">Soak: {getSoakDisplay()}</span>
                                                                                    <span className="mx-2 text-gray-400">/</span>
                                                                                    <span className="text-xs text-gray-600 dark:text-gray-300">Air-dry: {getAirdryDisplay()}</span>
                                                                                </div>
                                                                                {!allRepsCreated && (
                                                                                    <button
                                                                                        onClick={() => createRepetitionsForExperiment(exp.id)}
                                                                                        disabled={isCreating}
                                                                                        className="text-xs bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white px-2 py-1 rounded transition-colors"
                                                                                    >
                                                                                        {isCreating ? 'Creating...' : 'Add Repetition'}
                                                                                    </button>
                                                                                )}
                                                                            </div>
                                                                            <div className="px-3 pb-2 space-y-2">
                                                                                {reps.map(rep => {
                                                                                    const checked = selectedRepetitionIds.has(rep.id)
                                                                                    const hasTimes = repetitionsWithTimes.has(rep.id)
                                                                                    const scheduled = scheduledRepetitions[rep.id]
<<<<<<< HEAD
                                                                                    const isLocked = lockedSchedules.has(rep.id)
                                                                                    const isScheduling = schedulingRepetitions.has(rep.id)

                                                                                    return (
                                                                                        <div key={rep.id} className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-3">
=======
                                                                                    const isScheduling = schedulingRepetitions.has(rep.id)
                                                                                    
                                                                                    // Check if there are any conductor assignments
                                                                                    const markerIdPrefix = rep.id
                                                                                    const soakingConductors = conductorAssignments[`${markerIdPrefix}-soaking`] || []
                                                                                    const airdryingConductors = conductorAssignments[`${markerIdPrefix}-airdrying`] || []
                                                                                    const crackingConductors = conductorAssignments[`${markerIdPrefix}-cracking`] || []
                                                                                    const hasAssignments = soakingConductors.length > 0 || airdryingConductors.length > 0 || crackingConductors.length > 0

                                                                                    return (
                                                                                        <div 
                                                                                            key={rep.id} 
                                                                                            id={`repetition-${rep.id}`}
                                                                                            className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-3"
                                                                                        >
>>>>>>> old-github/main
                                                                                            {/* Checkbox row */}
                                                                                            <label className="flex items-center gap-2">
                                                                                                <input
                                                                                                    type="checkbox"
                                                                                                    className="h-4 w-4 text-blue-600 border-gray-300 rounded"
                                                                                                    checked={checked}
                                                                                                    onChange={() => toggleRepetition(rep.id)}
                                                                                                />
                                                                                                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Rep {rep.repetition_number}</span>
                                                                                            </label>

<<<<<<< HEAD
                                                                                            {/* Time points (shown only if has been dropped/moved) */}
                                                                                            {hasTimes && scheduled && (
                                                                                                <div className="mt-2 ml-6 text-xs space-y-1">
                                                                                                    <div className="flex items-center gap-2">
                                                                                                        <span>💧</span>
                                                                                                        <span>Soaking: {formatTime(scheduled.soakingStart)}</span>
                                                                                                    </div>
                                                                                                    <div className="flex items-center gap-2">
                                                                                                        <span>🌬️</span>
                                                                                                        <span>Airdrying: {formatTime(scheduled.airdryingStart)}</span>
                                                                                                    </div>
                                                                                                    <div className="flex items-center gap-2">
                                                                                                        <span>⚡</span>
                                                                                                        <span>Cracking: {formatTime(scheduled.crackingStart)}</span>
                                                                                                    </div>

                                                                                                    {/* Lock checkbox and Schedule button */}
                                                                                                    <div className="flex items-center gap-3 mt-3 pt-2 border-t border-gray-200 dark:border-gray-600">
                                                                                                        <label className="flex items-center gap-2">
                                                                                                            <input
                                                                                                                type="checkbox"
                                                                                                                className="h-3 w-3 text-blue-600 border-gray-300 rounded"
                                                                                                                checked={isLocked}
                                                                                                                onChange={() => {
                                                                                                                    toggleScheduleLock(rep.id)
                                                                                                                }}
                                                                                                            />
                                                                                                            <span className="text-xs text-gray-600 dark:text-gray-400">
                                                                                                                {isLocked ? '🔒 Locked' : '🔓 Unlocked'}
                                                                                                            </span>
                                                                                                        </label>
                                                                                                        <button
                                                                                                            onClick={() => scheduleRepetition(rep.id, exp.id)}
                                                                                                            disabled={isScheduling || !isLocked}
                                                                                                            className="px-3 py-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors"
                                                                                                        >
                                                                                                            {isScheduling ? 'Scheduling...' : 'Schedule'}
                                                                                                        </button>
=======
                                                                                            {/* Time points (shown whenever the repetition has scheduled times) */}
                                                                                            {scheduled && (
                                                                                                <div className="mt-2 ml-6 text-xs space-y-1">
                                                                                                    {(() => {
                                                                                                        const repId = rep.id
                                                                                                        const markerIdPrefix = repId
                                                                                                        
                                                                                                        // Get assigned conductors for each phase
                                                                                                        const soakingConductors = conductorAssignments[`${markerIdPrefix}-soaking`] || []
                                                                                                        const airdryingConductors = conductorAssignments[`${markerIdPrefix}-airdrying`] || []
                                                                                                        const crackingConductors = conductorAssignments[`${markerIdPrefix}-cracking`] || []
                                                                                                        
                                                                                                        // Helper to get conductor names
                                                                                                        const getConductorNames = (conductorIds: string[]) => {
                                                                                                            return conductorIds.map(id => {
                                                                                                                const conductor = conductors.find(c => c.id === id)
                                                                                                                if (!conductor) return null
                                                                                                                return [conductor.first_name, conductor.last_name].filter(Boolean).join(' ') || conductor.email
                                                                                                            }).filter(Boolean).join(', ')
                                                                                                        }
                                                                                                        
                                                                                                        return (
                                                                                                            <>
                                                                                                                <div className="flex items-center gap-2 flex-wrap">
                                                                                                                    <span>💧</span>
                                                                                                                    <span>Soaking: {formatTime(scheduled.soakingStart)}</span>
                                                                                                                    {soakingConductors.length > 0 && (
                                                                                                                        <span className="text-blue-600 dark:text-blue-400">
                                                                                                                            ({getConductorNames(soakingConductors)})
                                                                                                                        </span>
                                                                                                                    )}
                                                                                                                </div>
                                                                                                                <div className="flex items-center gap-2 flex-wrap">
                                                                                                                    <span>🌬️</span>
                                                                                                                    <span>Airdrying: {formatTime(scheduled.airdryingStart)}</span>
                                                                                                                    {airdryingConductors.length > 0 && (
                                                                                                                        <span className="text-green-600 dark:text-green-400">
                                                                                                                            ({getConductorNames(airdryingConductors)})
                                                                                                                        </span>
                                                                                                                    )}
                                                                                                                </div>
                                                                                                                <div className="flex items-center gap-2 flex-wrap">
                                                                                                                    <span>⚡</span>
                                                                                                                    <span>Cracking: {formatTime(scheduled.crackingStart)}</span>
                                                                                                                    {crackingConductors.length > 0 && (
                                                                                                                        <span className="text-orange-600 dark:text-orange-400">
                                                                                                                            ({getConductorNames(crackingConductors)})
                                                                                                                        </span>
                                                                                                                    )}
                                                                                                                </div>
                                                                                                            </>
                                                                                                        )
                                                                                                    })()}

                                                                                                    {/* Remove Assignments button and Schedule/Unschedule button */}
                                                                                                    <div className="flex items-center gap-3 mt-3 pt-2 border-t border-gray-200 dark:border-gray-600">
                                                                                                        {hasAssignments && (
                                                                                                            <button
                                                                                                                onClick={() => removeRepetitionAssignments(rep.id)}
                                                                                                                disabled={Boolean(rep.scheduled_date)}
                                                                                                                className="px-3 py-1 bg-red-600 hover:bg-red-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors"
                                                                                                                title={rep.scheduled_date ? "Unschedule the repetition first before removing assignments" : "Remove all conductor assignments from this repetition"}
                                                                                                            >
                                                                                                                Remove Assignments
                                                                                                            </button>
                                                                                                        )}
                                                                                                        {rep.scheduled_date ? (
                                                                                                            <button
                                                                                                                onClick={() => unscheduleRepetition(rep.id, exp.id)}
                                                                                                                disabled={isScheduling}
                                                                                                                className="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors"
                                                                                                            >
                                                                                                                {isScheduling ? 'Unscheduling...' : 'Unschedule'}
                                                                                                            </button>
                                                                                                        ) : (
                                                                                                            <button
                                                                                                                onClick={() => scheduleRepetition(rep.id, exp.id)}
                                                                                                                disabled={isScheduling}
                                                                                                                className="px-3 py-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded text-xs transition-colors"
                                                                                                            >
                                                                                                                {isScheduling ? 'Scheduling...' : 'Schedule'}
                                                                                                            </button>
                                                                                                        )}
>>>>>>> old-github/main
                                                                                                    </div>
                                                                                                </div>
                                                                                            )}
                                                                                        </div>
                                                                                    )
                                                                                })}
                                                                                {reps.length === 0 && !isCreating && (
                                                                                    <div className="text-xs text-gray-500 dark:text-gray-400 col-span-full">No repetitions created. Click "Create Reps" to generate them.</div>
                                                                                )}
                                                                                {isCreating && (
                                                                                    <div className="text-xs text-blue-600 dark:text-blue-400 col-span-full flex items-center gap-2">
                                                                                        <svg className="w-3 h-3 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 12a8 8 0 018-8" />
                                                                                        </svg>
                                                                                        Creating {exp.reps_required} repetitions...
                                                                                    </div>
                                                                                )}
                                                                            </div>
                                                                        </div>
                                                                    )
                                                                })}
                                                            </div>
                                                        )}
                                                    </div>
                                                )
                                            })}
                                        </div>
                                    </div>
                                </div>
                            </>
                        )}
                    </div>
                </div>
            </div>
        )
    }

// Availability Calendar Component
function AvailabilityCalendar({ user }: { user: User }) {
    // User context available for future features like saving preferences
    const localizer = momentLocalizer(moment)
    const [events, setEvents] = useState<CalendarEvent[]>([])

    const [selectedDate, setSelectedDate] = useState<Date | null>(null)
    const [showTimeSlotForm, setShowTimeSlotForm] = useState(false)
    const [newTimeSlot, setNewTimeSlot] = useState({
        startTime: '09:00',
        endTime: '17:00'
    })
    const [currentView, setCurrentView] = useState(Views.MONTH)
    const [currentDate, setCurrentDate] = useState(new Date())

    // Load availability from DB on mount
    useEffect(() => {
        const loadAvailability = async () => {
            try {
                const records = await availabilityManagement.getMyAvailability()
                const mapped: CalendarEvent[] = records.map(r => ({
                    id: r.id,
                    title: 'Available',
                    start: new Date(r.available_from),
                    end: new Date(r.available_to),
                    resource: 'available'
                }))
                setEvents(mapped)
            } catch (e) {
                console.error('Failed to load availability', e)
            }
        }
        loadAvailability()
    }, [])

    const eventStyleGetter = (event: CalendarEvent) => {
        return {
            style: {
                backgroundColor: '#10b981', // green-500 for available
                borderColor: '#10b981',
                color: 'white',
                borderRadius: '4px',
                border: 'none',
                display: 'block'
            }
        }
    }

    const handleSelectSlot = ({ start, end }: { start: Date; end: Date }) => {
        // Set the selected date and show the time slot form
        setSelectedDate(start)
        setShowTimeSlotForm(true)

        // Pre-fill the form with the selected time range
        const startTime = moment(start).format('HH:mm')
        const endTime = moment(end).format('HH:mm')
        setNewTimeSlot({
            startTime,
            endTime
        })
    }

    const handleSelectEvent = async (event: CalendarEvent) => {
        if (!window.confirm('Do you want to remove this availability?')) {
            return
        }
        try {
            if (typeof event.id === 'string') {
                await availabilityManagement.deleteAvailability(event.id)
            }
            setEvents(events.filter(e => e.id !== event.id))
        } catch (e: any) {
            alert(e?.message || 'Failed to delete availability.')
            console.error('Failed to delete availability', e)
        }
    }

    const handleAddTimeSlot = async () => {
        if (!selectedDate) return

        const [startHour, startMinute] = newTimeSlot.startTime.split(':').map(Number)
        const [endHour, endMinute] = newTimeSlot.endTime.split(':').map(Number)

        const startDateTime = new Date(selectedDate)
        startDateTime.setHours(startHour, startMinute, 0, 0)

        const endDateTime = new Date(selectedDate)
        endDateTime.setHours(endHour, endMinute, 0, 0)

        // Check for overlapping events
        const hasOverlap = events.some(event => {
            const eventStart = new Date(event.start)
            const eventEnd = new Date(event.end)
            return (
                eventStart.toDateString() === selectedDate.toDateString() &&
                ((startDateTime >= eventStart && startDateTime < eventEnd) ||
                    (endDateTime > eventStart && endDateTime <= eventEnd) ||
                    (startDateTime <= eventStart && endDateTime >= eventEnd))
            )
        })

        if (hasOverlap) {
            alert('This time slot overlaps with an existing availability. Please choose a different time.')
            return
        }

        try {
            // Persist to DB first to get real ID and server validation
            const created = await availabilityManagement.createAvailability({
                available_from: startDateTime.toISOString(),
                available_to: endDateTime.toISOString()
            })

            const newEvent: CalendarEvent = {
                id: created.id,
                title: 'Available',
                start: new Date(created.available_from),
                end: new Date(created.available_to),
                resource: 'available'
            }

            setEvents([...events, newEvent])
            setShowTimeSlotForm(false)
            setSelectedDate(null)
        } catch (e: any) {
            alert(e?.message || 'Failed to save availability. Please try again.')
            console.error('Failed to create availability', e)
        }
    }

    const handleCancelTimeSlot = () => {
        setShowTimeSlotForm(false)
        setSelectedDate(null)
    }

    const getEventsForDate = (date: Date) => {
        return events.filter(event => {
            const eventDate = new Date(event.start)
            return eventDate.toDateString() === date.toDateString()
        })
    }

    return (
        <div className="space-y-6">
            {/* Calendar Header */}
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
                        Availability Calendar
                    </h2>
                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                        Click and drag to add availability slots, or click on existing events to remove them. You can add multiple time slots per day.
                    </p>
                </div>

                {/* Legend */}
                <div className="flex items-center space-x-4 mt-4 sm:mt-0">
                    <div className="flex items-center">
                        <div className="w-3 h-3 bg-green-500 rounded mr-2"></div>
                        <span className="text-sm text-gray-600 dark:text-gray-400">Available</span>
                    </div>
                </div>
            </div>

            {/* Time Slot Form Modal */}
            {showTimeSlotForm && selectedDate && (
                <div className="fixed inset-0 flex items-center justify-center overflow-y-auto modal z-999999">
                    <div
                        className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[2px]"
                        onClick={handleCancelTimeSlot}
                    />
                    <div className="relative w-full rounded-2xl bg-white shadow-theme-xl dark:bg-gray-900 max-w-md mx-auto p-4" onClick={(e) => e.stopPropagation()}>
                        {/* Close Button */}
                        <button
                            onClick={handleCancelTimeSlot}
                            className="absolute right-3 top-3 z-999 flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
                        >
                            <svg
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    fillRule="evenodd"
                                    clipRule="evenodd"
                                    d="M6.04289 16.5413C5.65237 16.9318 5.65237 17.565 6.04289 17.9555C6.43342 18.346 7.06658 18.346 7.45711 17.9555L11.9987 13.4139L16.5408 17.956C16.9313 18.3466 17.5645 18.3466 17.955 17.956C18.3455 17.5655 18.3455 16.9323 17.955 16.5418L13.4129 11.9997L17.955 7.4576C18.3455 7.06707 18.3455 6.43391 17.955 6.04338C17.5645 5.65286 16.9313 5.65286 16.5408 6.04338L11.9987 10.5855L7.45711 6.0439C7.06658 5.65338 6.43342 5.65338 6.04289 6.0439C5.65237 6.43442 5.65237 7.06759 6.04289 7.45811L10.5845 11.9997L6.04289 16.5413Z"
                                    fill="currentColor"
                                />
                            </svg>
                        </button>

                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                            Add Availability for {moment(selectedDate).format('MMMM D, YYYY')}
                        </h3>

                        <div className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Start Time
                                </label>
                                <input
                                    type="time"
                                    value={newTimeSlot.startTime}
                                    onChange={(e) => setNewTimeSlot({ ...newTimeSlot, startTime: e.target.value })}
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
                                />
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    End Time
                                </label>
                                <input
                                    type="time"
                                    value={newTimeSlot.endTime}
                                    onChange={(e) => setNewTimeSlot({ ...newTimeSlot, endTime: e.target.value })}
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
                                />
                            </div>

                        </div>

                        {/* Show existing time slots for this date */}
                        {getEventsForDate(selectedDate).length > 0 && (
                            <div className="mt-4">
                                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Existing time slots:
                                </h4>
                                <div className="space-y-1">
                                    {getEventsForDate(selectedDate).map(event => (
                                        <div key={event.id} className="text-sm text-gray-600 dark:text-gray-400">
                                            {moment(event.start).format('HH:mm')} - {moment(event.end).format('HH:mm')} ({event.title})
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}

                        <div className="flex justify-end space-x-3 mt-6">
                            <button
                                onClick={handleCancelTimeSlot}
                                className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
                            >
                                Cancel
                            </button>
                            <button
                                onClick={handleAddTimeSlot}
                                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                            >
                                Add Time Slot
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* Calendar */}
            <div className="h-[600px] flex flex-col">
                <Calendar
                    localizer={localizer}
                    events={events}
                    startAccessor="start"
                    endAccessor="end"
                    style={{ height: '100%', minHeight: '600px' }}
                    view={currentView}
                    onView={setCurrentView}
                    date={currentDate}
                    onNavigate={setCurrentDate}
                    views={[Views.MONTH, Views.WEEK, Views.DAY]}
                    selectable
                    onSelectSlot={handleSelectSlot}
                    onSelectEvent={handleSelectEvent}
                    eventPropGetter={eventStyleGetter}
                    popup
                    showMultiDayTimes
                    step={30}
                    timeslots={2}
                    min={new Date(2024, 0, 1, 6, 0)} // 6:00 AM
                    max={new Date(2024, 0, 1, 22, 0)} // 10:00 PM
                />
            </div>

        </div>
    )
}

