'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useCallback, useRef } from 'react';
import { KanbanSquare, Wifi, WifiOff, Loader2 } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { SdlcBoard } from './sdlc-board.js';
import { useSdlcEvents } from '../../../hooks/use-sdlc-events.js';
import { listSdlcBoard } from '../../../app/actions/list-sdlc-board.js';
import { updateSdlcTaskStatus } from '../../../app/actions/update-sdlc-task-status.js';
export function SdlcBoardClient({ initialEpics }) {
    const [epics, setEpics] = useState(initialEpics);
    // Debounce ref for SSE-triggered refetch
    const refreshTimeoutRef = useRef(null);
    const handleSdlcEvent = useCallback(() => {
        // Debounce: batch rapid events into a single refetch (~300ms)
        if (refreshTimeoutRef.current)
            clearTimeout(refreshTimeoutRef.current);
        refreshTimeoutRef.current = setTimeout(async () => {
            const result = await listSdlcBoard();
            if (result.boardData) {
                setEpics(result.boardData.epics);
            }
        }, 300);
    }, []);
    const { connectionStatus } = useSdlcEvents({ onEvent: handleSdlcEvent });
    const handleTaskStatusChange = useCallback(async (taskId, status) => {
        // Optimistic update: move the task to the new status in local state
        setEpics((prev) => prev.map((epic) => ({
            ...epic,
            tasks: epic.tasks.map(({ task, subTasks }) => ({
                task: task.id === taskId ? { ...task, status } : task,
                subTasks,
            })),
        })));
        // Persist via server action; reconcile on error
        const result = await updateSdlcTaskStatus(taskId, status);
        if (result.error) {
            // Reconcile: refetch to get back the true server state
            const fresh = await listSdlcBoard();
            if (fresh.boardData) {
                setEpics(fresh.boardData.epics);
            }
        }
    }, []);
    const handleCardClick = useCallback((_task) => {
        // Future: open task detail drawer
    }, []);
    if (epics.length === 0) {
        return (_jsxs("div", { "data-testid": "sdlc-board-empty", className: "flex flex-col items-center justify-center py-20 text-center", children: [_jsx(KanbanSquare, { className: "text-muted-foreground/30 mb-3 h-10 w-10" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: "No active agent work yet" }), _jsx("p", { className: "text-muted-foreground/70 mt-1 text-xs", children: "Start a feature to see tasks appear here." })] }));
    }
    return (_jsxs("div", { "data-testid": "sdlc-board-client", className: "flex h-full flex-col gap-2", children: [_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: connectionStatus === 'connected' ? (_jsxs(_Fragment, { children: [_jsx(Wifi, { className: "h-3 w-3 text-emerald-500" }), _jsx("span", { className: "text-muted-foreground text-[10px]", children: "Live" })] })) : connectionStatus === 'connecting' ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin text-amber-500" }), _jsx("span", { className: "text-muted-foreground text-[10px]", children: "Connecting\u2026" })] })) : (_jsxs(_Fragment, { children: [_jsx(WifiOff, { className: "h-3 w-3 text-rose-500" }), _jsx("span", { className: "text-muted-foreground text-[10px]", children: "Disconnected" })] })) }), _jsx(SdlcBoard, { epics: epics, onTaskStatusChange: handleTaskStatusChange, onCardClick: handleCardClick, className: cn('flex-1') })] }));
}
