import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlertCircle, CheckCircle, Circle, Clock } from "lucide-react";
import SlideInPanel from "./SlideInPanel";
export default function SlidingPlanPanel({ plan, workstreamStatus, isOpen, onClose }) {
    return (plan && (_jsxs(SlideInPanel, { isOpen: isOpen, onClose: onClose, title: "Agent Plan", children: [_jsxs("div", { className: "mb-4 p-3 bg-info rounded-md border border-info", children: [_jsx("div", { className: "text-sm font-medium text-info mb-1", children: "Plan Progress" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-full bg-muted rounded-full h-2.5", children: _jsx("div", { className: "bg-info h-2.5 rounded-full", style: {
                                        width: `${plan.plan && plan.plan.length
                                            ? Math.round((Array.from(workstreamStatus.values()).filter((status) => status === "completed").length /
                                                Math.max(1, workstreamStatus.size)) *
                                                100)
                                            : 0}%`,
                                    } }) }), _jsx("span", { className: "text-xs text-muted", children: plan.plan && plan.plan.length
                                    ? `${Array.from(workstreamStatus.values()).filter((status) => status === "completed").length}/${workstreamStatus.size}`
                                    : "0/0" })] })] }), _jsxs("div", { className: "rounded-md border border-muted", children: [_jsx("div", { className: "p-3 border-b border-muted bg-muted/50", children: _jsx("div", { className: "font-medium text-sm", children: "Step-by-Step Plan" }) }), _jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", 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 ${bgColor}`, children: [_jsx("div", { className: `mr-3 mt-0.5 flex-shrink-0 ${statusColor}`, children: _jsx(StatusIcon, { className: "h-4 w-4" }) }), _jsxs("div", { children: [_jsx("div", { className: "text-sm text-gray-800 dark:text-gray-200", children: taskGoal }), _jsxs("div", { className: "mt-1", children: [_jsx("span", { className: "inline-flex items-center px-2 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 ${status === "completed"
                                                            ? "text-green-600 dark:text-green-400"
                                                            : status === "in_progress"
                                                                ? "text-blue-600 dark:text-blue-400"
                                                                : "text-gray-500 dark:text-gray-400"}`, children: status === "completed"
                                                            ? "Completed"
                                                            : status === "in_progress"
                                                                ? "In Progress"
                                                                : "Pending" })] })] })] }, index));
                        })) : (_jsxs("div", { className: "p-4 text-center text-gray-500 dark:text-gray-400 italic", children: [_jsx(AlertCircle, { className: "h-5 w-5 mx-auto mb-2 text-amber-500" }), _jsx("p", { children: "No plan has been detected yet" }), _jsx("p", { className: "text-xs mt-1", children: "Plans will appear here when the agent creates one" })] })) })] }), workstreamStatus.size > 1 && (_jsxs("div", { className: "mt-4 rounded-md border border-gray-200 dark:border-gray-800", children: [_jsx("div", { className: "p-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50", children: _jsx("div", { className: "font-medium text-sm", children: "Workstreams" }) }), _jsx("div", { className: "p-3", children: _jsx("div", { className: "grid grid-cols-1 gap-2", children: Array.from(workstreamStatus.entries())
                                // Filter to only show real workstreams (main or those with valid names - not numeric IDs)
                                .filter(([id, _]) => {
                                // Always show 'main' workstream
                                if (id === "main")
                                    return true;
                                // Don't show if it's a pure numeric ID (likely a task)
                                if (/^\d+$/.test(id))
                                    return false;
                                // Don't show workstreams that are actually tasks (have matching IDs in plan)
                                if (plan?.plan) {
                                    const matchingTask = plan.plan.find((task) => task.id?.toString() === id);
                                    return !matchingTask; // Keep if no matching task found
                                }
                                return true;
                            })
                                .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";
                                }
                                // Format workstream IDs for better display
                                const displayId = id === "main" ? "Main Workstream" : id;
                                return (_jsxs("div", { className: `flex items-center p-2 rounded ${statusBg}`, children: [_jsx("div", { className: `mr-2 ${statusColor}`, children: _jsx(StatusIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex-1", children: _jsx("span", { className: "text-sm font-medium text-gray-800 dark:text-gray-300", children: displayId }) }), _jsx("span", { className: "text-xs font-medium", children: statusText })] }, id));
                            }) }) })] }))] })));
}
//# sourceMappingURL=SlidingPlanPanel.js.map