'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';
import { cn } from '../../../../../lib/utils.js';
import { Button } from '../../../../../components/ui/button.js';
import { Badge } from '../../../../../components/ui/badge.js';
import { WorkItemRelationsPanel } from '../../../../../components/pm/relations/work-item-relations-panel.js';
import { SubItemsSection } from '../../../../../components/pm/sub-items/sub-items-section.js';
import { AttachmentList } from '../../../../../components/pm/attachments/attachment-list.js';
import { TimeEntryList } from '../../../../../components/pm/time-entries/time-entry-list.js';
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 WorkItemDetailClient({ project, workItem, allWorkItems, states, relations, attachments, timeEntries, totalMinutes, className, }) {
    const router = useRouter();
    const stateMap = new Map(states.map((s) => [s.id, s]));
    const workItemsMap = useMemo(() => new Map(allWorkItems.map((wi) => [wi.id, wi])), [allWorkItems]);
    const state = stateMap.get(workItem.stateId);
    const identifier = `${project.identifierPrefix}-${workItem.sequenceId}`;
    const handleSubItemClick = (child) => {
        router.push(`/projects/${project.slug}/items/${child.id}`);
    };
    return (_jsxs("div", { "data-testid": "work-item-detail", className: cn('space-y-6', className), children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => router.push(`/projects/${project.slug}`), "data-testid": "back-to-project", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-muted-foreground font-mono text-xs", children: identifier }), state ? (_jsxs(Badge, { variant: "outline", className: "text-[10px]", children: [_jsx("span", { className: "mr-1 inline-block h-2 w-2 rounded-full", style: { backgroundColor: state.color } }), state.name] })) : null, workItem.priority && workItem.priority !== 'None' ? (_jsx(Badge, { variant: "secondary", className: cn('text-[10px]', PRIORITY_COLORS[workItem.priority]), children: workItem.priority })) : null] }), _jsx("h1", { className: "text-lg font-bold tracking-tight", children: workItem.title }), workItem.description ? (_jsx("p", { className: "text-muted-foreground text-sm", children: workItem.description })) : null] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-muted-foreground text-[10px] font-medium uppercase", children: "Start Date" }), _jsx("p", { className: "text-xs", children: workItem.startDate ? new Date(workItem.startDate).toLocaleDateString() : '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-muted-foreground text-[10px] font-medium uppercase", children: "Due Date" }), _jsx("p", { className: "text-xs", children: workItem.dueDate ? new Date(workItem.dueDate).toLocaleDateString() : '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-muted-foreground text-[10px] font-medium uppercase", children: "Estimate" }), _jsx("p", { className: "text-xs", children: workItem.estimateValue ?? '—' })] })] }), _jsx("hr", { className: "border-border" }), _jsx(SubItemsSection, { workItem: workItem, allWorkItems: allWorkItems, states: states, projectPrefix: project.identifierPrefix, projectId: project.id, onSubItemClick: handleSubItemClick }), _jsx("hr", { className: "border-border" }), _jsx(WorkItemRelationsPanel, { workItemId: workItem.id, workItemsMap: workItemsMap, projectPrefix: project.identifierPrefix, initialRelations: relations }), _jsx("hr", { className: "border-border" }), _jsx(AttachmentList, { workItemId: workItem.id, attachments: attachments }), _jsx("hr", { className: "border-border" }), _jsx(TimeEntryList, { workItemId: workItem.id, timeEntries: timeEntries, totalMinutes: totalMinutes })] }));
}
