"use client" import * as React from "react" import { useState, useRef, useEffect, createContext, useContext, useMemo } from "react" import { Slot } from "@radix-ui/react-slot" import { DndContext, DragOverlay, useSensor, useSensors, PointerSensor, closestCenter, useDraggable, useDroppable, } from "@dnd-kit/core" import tunnel from "tunnel-rat" import { cn } from "@/lib/utils" /* ============================================================================ * TYPES & INTERFACES * ========================================================================== */ export interface TimelineSlotData { id: string rowId: string startTime: string // "14:30" duration: number // minutes [key: string]: any // Additional custom data } export interface TimelineRowData { id: string label: string [key: string]: any // Additional custom data } export interface TimelineConfig { startHour: number endHour: number snapIntervalMinutes?: number columnWidth?: number } /* ============================================================================ * CONTEXT * ========================================================================== */ type TimelineContextValue = { // Configuration config: TimelineConfig pixelsPerMinute: number timelineWidth: number // Refs timelineRef: React.RefObject columnRef: React.RefObject // Tunnel for drag preview dragPreviewTunnel: ReturnType // Callbacks onSlotPositionChange?: (slotId: string, newTime: string, newRowId: string) => Promise onValidateDrop?: (slotId: string, newTime: string, newRowId: string) => boolean onSlotClick?: (slotId: string) => void } const TimelineContext = createContext(null) function useTimeline() { const context = useContext(TimelineContext) if (!context) { throw new Error("Timeline components must be used within TimelineProvider") } return context } /* ============================================================================ * UTILITIES * ========================================================================== */ export const timeToMinutes = (time: string): number => { const [hours, minutes] = time.split(":").map(Number) return hours * 60 + minutes } export const minutesToTime = (minutes: number): string => { const hours = Math.floor(minutes / 60) const mins = minutes % 60 return `${hours.toString().padStart(2, "0")}:${mins.toString().padStart(2, "0")}` } /* ============================================================================ * TIMELINE PROVIDER * ========================================================================== */ interface TimelineProviderProps { children: React.ReactNode config: TimelineConfig percentageInView?: number onSlotPositionChange?: (slotId: string, newTime: string, newRowId: string) => Promise onValidateDrop?: (slotId: string, newTime: string, newRowId: string) => boolean onSlotClick?: (slotId: string) => void style?: React.CSSProperties className?: string } export function TimelineProvider({ children, config, percentageInView = 100, onSlotPositionChange, onValidateDrop, onSlotClick, style, className, }: TimelineProviderProps) { const [viewportWidth, setViewportWidth] = useState(0) const timelineRef = useRef(null) const columnRef = useRef(null) // Create tunnel for drag preview (stable across renders) const dragPreviewTunnel = useMemo(() => tunnel(), []) const columnWidth = config.columnWidth || 112 // Measure viewport useEffect(() => { const measure = () => { if (timelineRef.current) { setViewportWidth(timelineRef.current.clientWidth - columnWidth) } } measure() window.addEventListener("resize", measure) const timeout = setTimeout(measure, 100) return () => { window.removeEventListener("resize", measure) clearTimeout(timeout) } }, [columnWidth]) // Calculate timeline dimensions const totalMinutes = (config.endHour - config.startHour) * 60 const basePixelsPerMinute = viewportWidth > 0 ? viewportWidth / totalMinutes : 10 const pixelsPerMinute = basePixelsPerMinute * (100 / percentageInView) const timelineWidth = totalMinutes * pixelsPerMinute const contextValue: TimelineContextValue = { config, pixelsPerMinute, timelineWidth, timelineRef, columnRef, dragPreviewTunnel, onSlotPositionChange, onValidateDrop, onSlotClick, } return (

{children}

) } /* ============================================================================ * TIMELINE (Main Container with DnD) * ========================================================================== */ interface TimelineProps { slots: TimelineSlotData[] rows: TimelineRowData[] children: React.ReactNode className?: string } export function Timeline({ slots, rows, children, className }: TimelineProps) { const { config, pixelsPerMinute, timelineRef, dragPreviewTunnel, onSlotPositionChange, onValidateDrop } = useTimeline() const [mousePosition, setMousePosition] = useState<{ x: number; y: number } | null>(null) const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 }, }), ) const snapInterval = config.snapIntervalMinutes || 15 const columnWidth = config.columnWidth || 112 // Snapping utilities const snapToInterval = (minutes: number): number => { return Math.round(minutes / snapInterval) * snapInterval } const getSnappedDelta = (deltaX: number): number => { const deltaMinutes = deltaX / pixelsPerMinute const snappedDeltaMinutes = Math.round(deltaMinutes / snapInterval) * snapInterval return snappedDeltaMinutes * pixelsPerMinute } const calculateNewTime = (originalTime: string, deltaX: number): string => { const originalMinutes = timeToMinutes(originalTime) const deltaMinutes = Math.round(deltaX / pixelsPerMinute) const newMinutes = originalMinutes + deltaMinutes const snappedMinutes = snapToInterval(newMinutes) const clampedMinutes = Math.max(config.startHour * 60, Math.min((config.endHour - 1) * 60, snappedMinutes)) return minutesToTime(clampedMinutes) } // Mouse handlers const handleMouseMove = (e: React.MouseEvent) => { if (timelineRef.current) { const rect = timelineRef.current.getBoundingClientRect() setMousePosition({ x: e.clientX - rect.left + timelineRef.current.scrollLeft, y: e.clientY - rect.top, }) } } const handleMouseLeave = () => { setMousePosition(null) } // Calculate mouse time const mouseTime = mousePosition ? minutesToTime(Math.floor((mousePosition.x - columnWidth) / pixelsPerMinute) + config.startHour * 60) : null // Drag handlers const [localActiveSlot, setLocalActiveSlot] = useState(null) const [localOverRow, setLocalOverRow] = useState(null) const [localDraggedTime, setLocalDraggedTime] = useState(null) const [isValid, setIsValid] = useState(true) const handleDragStart = (event: any) => { setLocalActiveSlot(event.active.id) } const handleDragOver = (event: any) => { if (event.over) { setLocalOverRow(event.over.id) } else { setLocalOverRow(null) setLocalDraggedTime(null) } } const handleDragMove = (event: any) => { const { over, active, delta } = event if (over) { const slot = slots.find((s: TimelineSlotData) => s.id === active.id) if (slot) { const newTime = calculateNewTime(slot.startTime, delta.x) setLocalDraggedTime(newTime) // Validate with host const valid = onValidateDrop ? onValidateDrop(active.id, newTime, over.id) : true setIsValid(valid) } } } const handleDragCancel = () => { // Clean up all drag state when drag is cancelled (e.g., ESC key) setLocalActiveSlot(null) setLocalOverRow(null) setLocalDraggedTime(null) setIsValid(true) } const handleDragEnd = async (event: any) => { const { active, over, delta } = event setLocalActiveSlot(null) setLocalOverRow(null) setLocalDraggedTime(null) setIsValid(true) if (over) { const slot = slots.find((s: TimelineSlotData) => s.id === active.id) if (!slot) return const newTime = calculateNewTime(slot.startTime, delta.x) const newRowId = over.id // Validate if (onValidateDrop && !onValidateDrop(active.id, newTime, newRowId)) { return } // Check if anything changed if (slot.rowId === newRowId && slot.startTime === newTime) { return } // Call position change handler if (onSlotPositionChange) { await onSlotPositionChange(active.id, newTime, newRowId) } } } return (

{/* Mouse time indicator */} {mousePosition && mouseTime && !localActiveSlot && ( )}

{React.Children.map(children, child => { if (React.isValidElement(child)) { return React.cloneElement(child as React.ReactElement, { slots, rows, activeSlotId: localActiveSlot, overRowId: localOverRow, draggedNewTime: localDraggedTime, isValidDrop: isValid, getSnappedDelta, _showDropRegion: !!(localActiveSlot && localDraggedTime), _dropRegionTime: localDraggedTime, }) } return child })}

{/* Drag overlay - receives content from tunnel */} {localActiveSlot && (() => { const activeSlot = slots.find((s: TimelineSlotData) => s.id === localActiveSlot) if (!activeSlot) return null console.log("📺 DragOverlay rendering for slot:", activeSlot.id) return (

{/* Receive tunneled content from the active slot */}

) })()}

) } /* ============================================================================ * TIMELINE HEADER * ========================================================================== */ interface TimelineHeaderProps { className?: string columnLabel?: React.ReactNode } export function TimelineHeader({ className, columnLabel = "Row" }: TimelineHeaderProps) { const { config, pixelsPerMinute, columnRef } = useTimeline() // Generate hour markers const hourMarkers = [] for (let hour = config.startHour; hour < config.endHour; hour++) { hourMarkers.push({ hour, label: `${hour}:00`, position: (hour - config.startHour) * 60 * pixelsPerMinute, }) } return (

{columnLabel}

{hourMarkers.map(marker => (

{marker.label}

))}

) } /* ============================================================================ * TIMELINE ROW * ========================================================================== */ interface TimelineRowProps { row: TimelineRowData slots: TimelineSlotData[] children: (slot: TimelineSlotData) => React.ReactNode renderRowHeader?: (row: TimelineRowData) => React.ReactNode renderDropGhost?: (slot: TimelineSlotData, newTime: string, isValid: boolean) => React.ReactNode className?: string asChild?: boolean } export function TimelineRow({ row, slots, children, renderRowHeader, className, asChild, ...props }: TimelineRowProps & any) { const { config, pixelsPerMinute, timelineWidth } = useTimeline() const Comp = asChild ? Slot : "div" const { setNodeRef, isOver } = useDroppable({ id: row.id, }) const rowSlots = slots.filter((s: TimelineSlotData) => s.rowId === row.id) // Check if this row has invalid drop (from props passed by Timeline) const isValidDrop = props.isValidDrop !== false const isHovered = isOver || props.overRowId === row.id // Try BOTH // Generate grid markers const hourMarkers = [] for (let hour = config.startHour; hour <= config.endHour; hour++) { hourMarkers.push({ hour, position: (hour - config.startHour) * 60 * pixelsPerMinute, }) } const quarterHourMarkers = [] const totalMinutes = (config.endHour - config.startHour) * 60 for (let minutes = 15; minutes < totalMinutes; minutes += 15) { if (minutes % 60 !== 0) { quarterHourMarkers.push({ position: minutes * pixelsPerMinute, }) } } return ( {/* Row label column */}

{renderRowHeader ? renderRowHeader(row) : row.label}

{/* Timeline grid */}

{/* Grid lines */} {quarterHourMarkers.map((marker, idx) => (

))} {hourMarkers.map(marker => (

))} {/* Slots */} {rowSlots.map((slot: TimelineSlotData) => { const slotElement = children(slot) // Clone the element to inject activeSlotId prop return ( {React.isValidElement(slotElement) ? React.cloneElement(slotElement, { activeSlotId: props.activeSlotId } as any) : slotElement} ) })} {/* Drop ghost - shows where slot will land if dropped in this row */} {isHovered && props.draggedNewTime && props.activeSlotId && ( )}

) } /* ============================================================================ * TIMELINE SLOT (Draggable) * ========================================================================== */ interface TimelineSlotProps { slot: TimelineSlotData children: React.ReactNode className?: string asChild?: boolean } export function TimelineSlot({ slot, children, className, asChild, ...props }: TimelineSlotProps & any) { const timeline = useTimeline() const { config, pixelsPerMinute, onSlotClick, dragPreviewTunnel } = timeline const Comp = asChild ? Slot : "div" const { attributes, listeners, setNodeRef, isDragging, transform } = useDraggable({ id: slot.id, }) const startMinutes = timeToMinutes(slot.startTime) const left = (startMinutes - config.startHour * 60) * pixelsPerMinute const width = slot.duration * pixelsPerMinute // Get activeSlotId from Timeline component via props (passed through TimelineRow) const activeSlotIdFromTimeline = props.activeSlotId const isActiveSlot = activeSlotIdFromTimeline === slot.id // When dragging, show slot at its snapped target position (not at cursor) // The DragOverlay will show what you're dragging at cursor position const style = transform && props.getSnappedDelta ? { left: `${left}px`, width: `${Math.max(width, 60)}px`, top: 0, bottom: 0, transform: `translate3d(${props.getSnappedDelta(transform.x)}px, ${transform.y}px, 0)`, } : { left: `${left}px`, width: `${Math.max(width, 60)}px`, top: 0, bottom: 0, } const slotContent = ( { if (onSlotClick && !isDragging) { e.stopPropagation() onSlotClick(slot.id) } }} style={ { "--slot-start-time": slot.startTime, "--slot-duration": `${slot.duration}min`, } as React.CSSProperties } > {children} ) return (

{/* Always render slot content normally */} {slotContent} {/* When active and dragging, ALSO send content through tunnel for DragOverlay */} {isActiveSlot && isDragging && ( <> {console.log("🚇 Sending content through tunnel for slot:", slot.id)} {children} )}

) } /* ============================================================================ * TIMELINE SLOT PRIMITIVES (for content composition) * ========================================================================== */ interface TimelineSlotLabelProps extends React.ComponentProps<"div"> { asChild?: boolean } export function TimelineSlotLabel({ asChild, className, ...props }: TimelineSlotLabelProps) { const Comp = asChild ? Slot : "div" return } interface TimelineSlotContentProps extends React.ComponentProps<"div"> { asChild?: boolean } export function TimelineSlotContent({ asChild, className, ...props }: TimelineSlotContentProps) { const Comp = asChild ? Slot : "div" return } /* ============================================================================ * TIMELINE INDICATORS * ========================================================================== */ function TimelineMouseIndicator({ mouseX, time }: { mouseX: number; time: string }) { return (

{time}

) } interface TimelineDropRegionProps { startTime: string duration: number } export function TimelineDropRegion({ startTime, duration }: TimelineDropRegionProps) { const { config, pixelsPerMinute } = useTimeline() const columnWidth = config.columnWidth || 112 const startMinutes = timeToMinutes(startTime) const endMinutes = startMinutes + duration const endTime = minutesToTime(endMinutes) const startPosition = (startMinutes - config.startHour * 60) * pixelsPerMinute + columnWidth const endPosition = (endMinutes - config.startHour * 60) * pixelsPerMinute + columnWidth const width = endPosition - startPosition return (

{startTime} - {endTime}

) } interface TimelineCurrentTimeProps { className?: string nowLabel?: string } export function TimelineCurrentTime({ className, nowLabel = "Now" }: TimelineCurrentTimeProps) { const { config, pixelsPerMinute } = useTimeline() const columnWidth = config.columnWidth || 112 const [now, setNow] = useState(new Date()) useEffect(() => { const interval = setInterval(() => setNow(new Date()), 60000) // Update every minute return () => clearInterval(interval) }, []) const currentMinutes = now.getHours() * 60 + now.getMinutes() const position = (currentMinutes - config.startHour * 60) * pixelsPerMinute + columnWidth // Only show if within timeline range if (currentMinutes < config.startHour * 60 || currentMinutes > config.endHour * 60) { return null } return (

{nowLabel}: {minutesToTime(currentMinutes)}

) } /* ============================================================================ * TIMELINE GRID (for custom layouts) * ========================================================================== */ interface TimelineGridProps { children: React.ReactNode className?: string } export function TimelineGrid({ children, className, ...props }: TimelineGridProps & any) { const { timelineWidth } = useTimeline() // Get active slot data for drop region and ghost preview const activeSlot = props._showDropRegion && props.slots ? props.slots.find((s: TimelineSlotData) => s.id === props.activeSlotId) : null return (

{React.Children.map(children, child => { if (React.isValidElement(child)) { return React.cloneElement(child as React.ReactElement, props) } return child })} {/* Drop region highlight */} {props._showDropRegion && props._dropRegionTime && activeSlot && ( )}

) } /* ============================================================================ * DROP GHOST (Shows where slot will land) * ========================================================================== */ function TimelineDropGhost({ activeSlotId, allSlots, newTime, isValid, config, pixelsPerMinute, }: { activeSlotId: string allSlots: TimelineSlotData[] newTime: string isValid: boolean config: TimelineConfig pixelsPerMinute: number }) { const slot = allSlots.find(s => s.id === activeSlotId) if (!slot) return null const startMinutes = timeToMinutes(newTime) const left = (startMinutes - config.startHour * 60) * pixelsPerMinute const width = slot.duration * pixelsPerMinute if (!isValid) return null return (

) } /* ============================================================================ * EXPORTS * ========================================================================== */ export { useTimeline, TimelineMouseIndicator }