'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Plus, Layers, AlertTriangle } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { Button } from '../../ui/button.js';
import { Badge } from '../../ui/badge.js';
import { CreateWorkItemDialog } from '../../features/projects/create-work-item-dialog.js';
const MAX_DEPTH = 3;
const PRIORITY_COLORS = {
    Urgent: 'bg-red-500/10 text-red-500',
    High: 'bg-orange-500/10 text-orange-500',
    Medium: 'bg-yellow-500/10 text-yellow-500',
    Low: 'bg-blue-500/10 text-blue-500',
    None: 'bg-muted text-muted-foreground',
};
export function SubItemsSection({ workItem, allWorkItems, states, projectPrefix, projectId, currentDepth = 0, onSubItemClick, className, }) {
    const [showCreateDialog, setShowCreateDialog] = useState(false);
    const [localItems, setLocalItems] = useState([]);
    const stateMap = new Map(states.map((s) => [s.id, s]));
    const childItems = [
        ...allWorkItems.filter((wi) => wi.parentId === workItem.id),
        ...localItems.filter((li) => !allWorkItems.some((wi) => wi.id === li.id)),
    ];
    const atMaxDepth = currentDepth >= MAX_DEPTH - 1;
    const handleCreated = (newItem) => {
        setLocalItems((prev) => [...prev, newItem]);
        setShowCreateDialog(false);
    };
    return (_jsxs("div", { "data-testid": "sub-items-section", className: cn('space-y-3', className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Layers, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("span", { className: "text-xs font-medium", children: "Sub-items" }), childItems.length > 0 && (_jsx("span", { className: "text-muted-foreground text-[10px]", children: childItems.length }))] }), !atMaxDepth && (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-6 px-1.5 text-[10px]", onClick: () => setShowCreateDialog(true), "data-testid": "add-sub-item-btn", children: [_jsx(Plus, { className: "mr-0.5 h-3 w-3" }), "Add"] }))] }), atMaxDepth ? (_jsxs("div", { className: "flex items-center gap-1.5 rounded bg-yellow-500/10 px-2 py-1.5", "data-testid": "max-depth-warning", children: [_jsx(AlertTriangle, { className: "h-3 w-3 shrink-0 text-yellow-500" }), _jsxs("span", { className: "text-[10px] text-yellow-600 dark:text-yellow-400", children: ["Maximum nesting depth reached (", MAX_DEPTH, " levels). Cannot add sub-items here."] })] })) : null, childItems.length === 0 && !atMaxDepth && (_jsx("p", { className: "text-muted-foreground py-2 text-center text-[10px]", "data-testid": "sub-items-empty", children: "No sub-items yet." })), childItems.length > 0 && (_jsx("div", { className: "divide-y rounded-lg border", "data-testid": "sub-items-list", children: childItems.map((child) => {
                    const state = stateMap.get(child.stateId);
                    const identifier = `${projectPrefix}-${child.sequenceId}`;
                    return (_jsxs("div", { "data-testid": `sub-item-${identifier}`, className: "hover:bg-accent/50 flex cursor-pointer items-center gap-3 px-3 py-2 transition-colors", onClick: () => onSubItemClick?.(child), role: "button", tabIndex: 0, onKeyDown: (e) => {
                            if (e.key === 'Enter' || e.key === ' ') {
                                onSubItemClick?.(child);
                            }
                        }, children: [_jsx("span", { className: "text-muted-foreground shrink-0 font-mono text-[10px]", children: identifier }), state ? (_jsx("span", { className: "h-2 w-2 shrink-0 rounded-full", style: { backgroundColor: state.color }, title: state.name })) : null, _jsx("span", { className: "min-w-0 flex-1 truncate text-xs", children: child.title }), child.priority && child.priority !== 'None' ? (_jsx(Badge, { variant: "secondary", className: `shrink-0 text-[10px] ${PRIORITY_COLORS[child.priority] ?? ''}`, children: child.priority })) : null] }, child.id));
                }) })), !atMaxDepth && (_jsx(CreateWorkItemDialog, { open: showCreateDialog, onOpenChange: setShowCreateDialog, projectId: projectId, states: states, onCreated: handleCreated, parentId: workItem.id }))] }));
}
