import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef, useEffect, useCallback } from 'react';
import { CalendarDaysIcon } from '@heroicons/react/24/outline';
import { cn } from '../../../utils/cn.js';
import { useGanttContext, useGanttInteraction } from './GanttChart.js';
import { GanttTimelineHeader } from './GanttTimelineHeader.js';
import { GanttTimelineGrid } from './GanttTimelineGrid.js';
import { GanttDependencyArrows } from './GanttDependencyArrows.js';
import { GanttTaskBar } from './GanttTaskBar.js';
import { GanttGroupBar } from './GanttGroupBar.js';
import { GanttMilestone } from './GanttMilestone.js';

const GanttChartPanel = forwardRef(({ onScroll, days, monthSpans }, ref) => {
    const { theme, rows, tasks, dayWidth, rowHeight, todayOffset, scrollToToday, onTaskClick, } = useGanttContext();
    const { focusedTaskId, setFocusedTaskId } = useGanttInteraction();
    const totalWidth = days.length * dayWidth;
    const bodyHeight = rows.length * rowHeight;
    // Auto-scroll to today on mount
    useEffect(() => {
        if (!scrollToToday || todayOffset === null)
            return;
        if (!ref || !("current" in ref) || !ref.current)
            return;
        const container = ref.current;
        requestAnimationFrame(() => {
            const targetScroll = todayOffset * dayWidth - container.clientWidth / 3;
            container.scrollLeft = Math.max(0, targetScroll);
        });
        // Only run on mount
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    // Keyboard navigation
    const handleKeyDown = useCallback((e) => {
        const taskRows = rows.filter((r) => r.type === "task");
        if (taskRows.length === 0)
            return;
        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
            e.preventDefault();
            const currentIndex = focusedTaskId
                ? taskRows.findIndex((r) => r.type === "task" && r.task.id === focusedTaskId)
                : -1;
            let nextIndex;
            if (e.key === "ArrowDown") {
                nextIndex = currentIndex < taskRows.length - 1 ? currentIndex + 1 : 0;
            }
            else {
                nextIndex = currentIndex > 0 ? currentIndex - 1 : taskRows.length - 1;
            }
            const nextRow = taskRows[nextIndex];
            if (nextRow.type === "task") {
                setFocusedTaskId(nextRow.task.id);
            }
        }
        else if ((e.key === "Enter" || e.key === " ") &&
            focusedTaskId) {
            e.preventDefault();
            const taskRow = taskRows.find((r) => r.type === "task" && r.task.id === focusedTaskId);
            if ((taskRow === null || taskRow === void 0 ? void 0 : taskRow.type) === "task" && onTaskClick) {
                onTaskClick(taskRow.task, e);
            }
        }
        else if (e.key === "Escape") {
            setFocusedTaskId(null);
        }
    }, [rows, focusedTaskId, setFocusedTaskId, onTaskClick]);
    if (tasks.length === 0) {
        return (jsx("div", { className: cn(theme.chartPanelStyle, "items-center justify-center"), children: jsxs("div", { className: "flex flex-col items-center gap-2 text-[var(--color-text-muted)]", children: [jsx(CalendarDaysIcon, { className: "size-10 opacity-40" }), jsx("div", { className: "text-base font-medium", children: "No tasks to display" }), jsx("div", { className: "text-sm opacity-70", children: "Add tasks to see them on the timeline" })] }) }));
    }
    return (jsx("div", { className: cn(theme.chartPanelStyle), children: jsx("div", { ref: ref, className: "overflow-auto flex-1 min-h-0 focus:outline-none", onScroll: onScroll, onKeyDown: handleKeyDown, tabIndex: 0, role: "grid", "aria-label": "Gantt chart timeline", "data-gantt-chart-scroll": true, children: jsxs("div", { style: { width: totalWidth }, children: [jsx("div", { className: "sticky top-0 z-10", children: jsx(GanttTimelineHeader, { days: days, monthSpans: monthSpans }) }), jsxs("div", { className: "relative", style: { height: bodyHeight }, children: [jsx(GanttTimelineGrid, { days: days, height: bodyHeight }), jsx(GanttDependencyArrows, {}), rows.map((row, i) => {
                                const top = i * rowHeight;
                                if (row.type === "group") {
                                    return (jsx(GanttGroupBar, { row: row, top: top }, `group-${row.group.id}`));
                                }
                                if (row.task.milestone) {
                                    return (jsx(GanttMilestone, { task: row.task, group: row.group, top: top }, `milestone-${row.task.id}`));
                                }
                                return (jsx(GanttTaskBar, { task: row.task, group: row.group, top: top }, `task-${row.task.id}`));
                            })] })] }) }) }));
});
GanttChartPanel.displayName = "GanttChartPanel";

export { GanttChartPanel };
