import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { AlertCircle, CheckCircle, Circle, Clock, X } from "lucide-react";
export default function InlineSlidingPlanPanel({ plan, workstreamStatus, isOpen, onClose, plans = [], activePlanIndex = 0, onChangePlan = () => { }, }) {
    // Don't render if panel is closed
    if (!isOpen) {
        return null;
    }
    // Render the normal panel
    return (_jsxs("div", { className: "fixed top-24 right-8 bottom-24 z-50 bg-white dark:bg-gray-900 shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden", style: { width: "350px" }, children: [_jsxs("div", { className: "flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800", children: [_jsx("h3", { className: "font-bold text-gray-800 dark:text-gray-200 text-base", children: "Plan" }), _jsxs("button", { className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full text-gray-500 dark:text-gray-400", onClick: onClose, children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }), _jsxs("div", { className: "p-3 overflow-y-auto", style: {
                    height: "calc(100% - 44px)",
                    maxHeight: "calc(100vh - 150px)",
                }, children: [_jsxs("div", { className: "mb-3 p-2 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-100 dark:border-blue-800", children: [_jsx("div", { className: "text-xs font-medium text-blue-700 dark:text-blue-300 mb-1", children: "Task Progress" }), _jsx("div", { className: "flex items-center gap-2", children: (() => {
                                    // Get all tasks from the plan itself
                                    const planTasks = plan.plan || [];
                                    const totalTasks = planTasks.length;
                                    // Count completed tasks by checking their status in workstreamStatus
                                    let completedTasks = 0;
                                    if (totalTasks > 0) {
                                        // Count each completed task from the plan
                                        planTasks.forEach((task) => {
                                            if (task && task.id) {
                                                const taskId = task.id.toString();
                                                const taskStatus = workstreamStatus.get(taskId);
                                                if (taskStatus === "completed") {
                                                    completedTasks++;
                                                }
                                            }
                                        });
                                    }
                                    // Calculate percentage
                                    const progressPercentage = totalTasks > 0
                                        ? Math.round((completedTasks / totalTasks) * 100)
                                        : 0;
                                    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2", children: _jsx("div", { className: "bg-blue-600 h-2 rounded-full", style: { width: `${progressPercentage}%` } }) }), _jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: totalTasks > 0 ? `${completedTasks}/${totalTasks}` : "0/0" })] }));
                                })() })] }), plans.length > 1 && (_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsx("button", { className: "text-xs px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 disabled:opacity-50", onClick: () => onChangePlan(Math.min(plans.length - 1, activePlanIndex + 1)), disabled: activePlanIndex >= plans.length - 1, children: "Older Plan" }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: plans[activePlanIndex]?.timestamp
                                    ? new Date(plans[activePlanIndex].timestamp).toLocaleTimeString()
                                    : "Unknown time" }), _jsx("button", { className: "text-xs px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 disabled:opacity-50", onClick: () => onChangePlan(Math.max(0, activePlanIndex - 1)), disabled: activePlanIndex <= 0, children: "Newer Plan" })] })), _jsxs("div", { className: "rounded-md border border-gray-200 dark:border-gray-800", children: [_jsx("div", { className: "p-2 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50", children: _jsx("div", { className: "font-medium text-xs", children: "Step-by-Step Plan" }) }), _jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800 max-h-[calc(100vh-350px)] overflow-y-auto", children: plan.plan && plan.plan.length > 0 ? (plan.plan.map((task, index) => {
                                    // Extract task info with null checks
                                    const taskId = task.id ? task.id.toString() : `task-${index}`;
                                    const taskGoal = task.goal || `Task ${index + 1}`;
                                    // Determine task status - use task.status if available or lookup from workstream
                                    let status = task.status || "pending";
                                    if (workstreamStatus.has(taskId)) {
                                        status = workstreamStatus.get(taskId);
                                    }
                                    // Determine status icon and style
                                    let StatusIcon = Circle;
                                    let statusColor = "text-gray-400";
                                    let bgColor = "";
                                    if (status === "in_progress") {
                                        StatusIcon = Clock;
                                        statusColor = "text-blue-500";
                                        bgColor = "bg-blue-50/50 dark:bg-blue-900/10";
                                    }
                                    else if (status === "completed") {
                                        StatusIcon = CheckCircle;
                                        statusColor = "text-green-500";
                                    }
                                    return (_jsxs("div", { className: `flex p-3 my-1 ${bgColor}`, children: [_jsx("div", { className: `mr-2 mt-0.5 flex-shrink-0 ${statusColor}`, children: _jsx(StatusIcon, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "w-full", children: [_jsx("div", { className: "text-sm font-medium text-gray-800 dark:text-gray-200 mb-2", children: taskGoal }), _jsxs("div", { className: "mt-1 flex justify-between items-center", children: [_jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300", children: taskId }), _jsx("span", { className: `ml-2 text-xs px-2 py-0.5 rounded-full ${status === "completed"
                                                                    ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
                                                                    : status === "in_progress"
                                                                        ? "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
                                                                        : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"}`, children: status === "completed"
                                                                    ? "Completed"
                                                                    : status === "in_progress"
                                                                        ? "In Progress"
                                                                        : "Pending" })] })] })] }, index));
                                })) : (_jsxs("div", { className: "p-3 text-center text-gray-500 dark:text-gray-400 italic", children: [_jsx(AlertCircle, { className: "h-4 w-4 mx-auto mb-2 text-amber-500" }), _jsx("p", { className: "text-xs", children: "No plan has been detected yet" }), _jsx("p", { className: "text-xs mt-1", children: "Plans will appear here when the agent creates one" })] })) })] }), (() => {
                        // Get all task IDs from the plan for filtering
                        const planTaskIds = new Set((plan.plan || [])
                            .filter((task) => task && task.id)
                            .map((task) => task.id.toString()));
                        // Filter out 'main' workstream and any IDs that are tasks in the plan
                        const workstreamEntries = Array.from(workstreamStatus.entries()).filter(([id]) => id !== "main" && !planTaskIds.has(id));
                        // Only show the section if there are actual workstreams (not tasks or main)
                        return workstreamEntries.length > 0 ? (_jsxs("div", { className: "mt-3 rounded-md border border-gray-200 dark:border-gray-800", children: [_jsx("div", { className: "p-2 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50", children: _jsx("div", { className: "font-medium text-xs", children: "Workstreams" }) }), _jsx("div", { className: "p-3", children: _jsx("div", { className: "grid grid-cols-1 gap-2", children: workstreamEntries.map(([id, status]) => {
                                            let StatusIcon = Circle;
                                            let statusColor = "text-gray-400";
                                            let statusBg = "bg-gray-100 dark:bg-gray-800";
                                            let statusText = "Pending";
                                            if (status === "in_progress") {
                                                StatusIcon = Clock;
                                                statusColor = "text-blue-500";
                                                statusBg = "bg-blue-100 dark:bg-blue-800/30";
                                                statusText = "In Progress";
                                            }
                                            else if (status === "completed") {
                                                StatusIcon = CheckCircle;
                                                statusColor = "text-green-500";
                                                statusBg = "bg-green-100 dark:bg-green-800/30";
                                                statusText = "Completed";
                                            }
                                            return (_jsxs("div", { className: `flex items-center p-1.5 rounded ${statusBg}`, children: [_jsx("div", { className: `mr-1.5 ${statusColor}`, children: _jsx(StatusIcon, { className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "flex-1", children: _jsx("span", { className: "text-xs font-medium text-gray-800 dark:text-gray-300", children: id }) }), _jsx("span", { className: "text-xs font-medium", children: statusText })] }, id));
                                        }) }) })] })) : null;
                    })()] })] }));
}
//# sourceMappingURL=InlineSlidingPlanPanel.js.map