'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Badge } from '../../ui/badge.js';
import { cn } from '../../../lib/utils.js';
import { TaskState } from '../../../../../../packages/core/src/domain/generated/output.js';
/**
 * Tailwind color classes for each TaskState — keyed off the enum, no magic strings.
 */
const STATUS_COLORS = {
    [TaskState.Todo]: 'bg-slate-500/10 text-slate-500',
    [TaskState.WIP]: 'bg-amber-500/10 text-amber-600',
    [TaskState.Review]: 'bg-violet-500/10 text-violet-600',
    [TaskState.Done]: 'bg-emerald-500/10 text-emerald-600',
};
/**
 * Dot color for the status indicator in the card header.
 */
const STATUS_DOT_COLORS = {
    [TaskState.Todo]: 'bg-slate-400',
    [TaskState.WIP]: 'bg-amber-500',
    [TaskState.Review]: 'bg-violet-500',
    [TaskState.Done]: 'bg-emerald-500',
};
export function SdlcCard({ task, subTasks, epicName, onClick }) {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
        id: task.id,
    });
    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
    };
    const doneCount = subTasks.filter((st) => st.status === TaskState.Done).length;
    const totalCount = subTasks.length;
    const progressPercent = totalCount > 0 ? Math.round((doneCount / totalCount) * 100) : 0;
    return (_jsxs("div", { ref: setNodeRef, style: style, ...attributes, ...listeners, "data-testid": `sdlc-card-${task.id}`, className: cn('bg-card cursor-grab rounded-md border p-3 shadow-sm transition-shadow hover:shadow-md', isDragging && 'z-50 opacity-50 shadow-lg'), onClick: () => onClick?.(task), role: "button", tabIndex: 0, onKeyDown: (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                onClick?.(task);
            }
        }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "secondary", className: "max-w-[120px] truncate px-1.5 py-0 text-[10px] font-medium", title: epicName, children: epicName }), _jsx("span", { className: cn('h-2 w-2 shrink-0 rounded-full', STATUS_DOT_COLORS[task.status]), title: task.status })] }), _jsx("p", { className: "mt-1.5 line-clamp-2 text-xs leading-snug font-medium", children: task.title }), totalCount > 0 ? (_jsxs("div", { className: "mt-2 space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-muted-foreground text-[10px]", children: [doneCount, "/", totalCount, " done"] }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: [progressPercent, "%"] })] }), _jsx("div", { className: "bg-muted h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', progressPercent === 100 ? 'bg-emerald-500' : 'bg-primary'), style: { width: `${progressPercent}%` } }) })] })) : null, _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: "secondary", className: cn('shrink-0 px-1.5 py-0 text-[10px]', STATUS_COLORS[task.status]), children: task.status }), task.dependsOnKeys && task.dependsOnKeys.length > 0 ? (_jsxs(Badge, { variant: "secondary", className: "shrink-0 px-1.5 py-0 text-[10px] font-medium", title: `Depends on: ${task.dependsOnKeys.join(', ')}`, children: ["\u26D3 ", task.dependsOnKeys.length, " dep", task.dependsOnKeys.length > 1 ? 's' : ''] })) : null] })] }));
}
