import React, { useMemo } from 'react';
import { useDroppable } from '@dnd-kit/core';
import { clsx } from 'clsx';
import { differenceInHours } from 'date-fns';
import { calculateLayout, Event } from '../../lib/layoutAlgorithm';
import { DraggableEvent } from './DraggableEvent';
import { getPosition } from '../../lib/timelineUtils';

interface TimelineRowProps {
    resourceId: number;
    events: Event[];
    startTime: Date;
    endTime: Date;
    hourWidth: number;
    eventHeight: number;
    height: number; // Passed from parent to match sidebar
    onResizeStart: (e: React.MouseEvent, direction: 'left' | 'right', id: number) => void;
}

const TimelineRow: React.FC<TimelineRowProps> = ({
    resourceId,
    events,
    startTime,
    endTime,
    hourWidth,
    eventHeight,
    height,
    onResizeStart,
}) => {
    const { setNodeRef, isOver } = useDroppable({
        id: `resource-${resourceId}`,
        data: { resourceId },
    });

    const eventsWithLanes = useMemo(() => calculateLayout(events), [events]);
    const totalWidth = getPosition(endTime, startTime, hourWidth);
    const totalHours = Math.ceil(differenceInHours(endTime, startTime));

    return (
        <div
            ref={setNodeRef}
            className={clsx(
                "relative border-b border-gray-200 dark:border-gray-700 transition-colors group",
                isOver ? "bg-blue-50 dark:bg-blue-900/20" : ""
            )}
            style={{ height, width: totalWidth }}
        >
            {/* Grid Lines */}
            <div className="absolute inset-0 pointer-events-none flex">
                {Array.from({ length: totalHours }).map((_, i) => (
                    <div
                        key={i}
                        className="border-r border-gray-100 dark:border-gray-700/50 h-full"
                        style={{ width: hourWidth }}
                    />
                ))}
            </div>

            {/* Events */}
            {eventsWithLanes.map((event) => {
                const left = getPosition(event.start, startTime, hourWidth);
                const width = getPosition(event.end, startTime, hourWidth) - left;
                const top = (event.laneIndex || 0) * eventHeight + 10;

                return (
                    <DraggableEvent
                        key={event.id}
                        id={event.id}
                        title={event.title}
                        serviceName={event.serviceName}
                        status={event.status}
                        isPaid={event.isPaid}
                        start={event.start}
                        end={event.end}
                        laneIndex={event.laneIndex || 0}
                        height={eventHeight - 4}
                        left={left}
                        width={width}
                        top={top}
                        onResizeStart={onResizeStart}
                    />
                );
            })}
        </div>
    );
};

export default TimelineRow;
