'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Loader2, Circle, Check, Eye, ChevronRight, CheckCircle2, CircleDashed, } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
const taskStateConfig = {
    Todo: {
        icon: Circle,
        colorClass: 'text-muted-foreground',
        borderClass: 'border-border',
        label: 'Todo',
    },
    'Work in Progress': {
        icon: Loader2,
        colorClass: 'text-blue-600',
        borderClass: 'border-blue-200',
        spinning: true,
        label: 'In Progress',
    },
    Done: {
        icon: Check,
        colorClass: 'text-emerald-600',
        borderClass: 'border-emerald-200',
        label: 'Done',
    },
    Review: {
        icon: Eye,
        colorClass: 'text-amber-600',
        borderClass: 'border-amber-200',
        label: 'Review',
    },
};
const defaultTaskConfig = {
    icon: Circle,
    colorClass: 'text-muted-foreground',
    borderClass: 'border-border',
    label: 'Unknown',
};
export function TaskProgressView({ tasks }) {
    const { t } = useTranslation('web');
    if (tasks.length === 0) {
        return (_jsx("div", { className: "flex flex-col items-center justify-center gap-2 py-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: t('taskProgress.noTasksDefined') }) }));
    }
    return (_jsxs("div", { "data-testid": "task-progress-view", className: "flex flex-col gap-3", children: [_jsx(ProgressSummary, { tasks: tasks }), _jsx("div", { "data-testid": "task-progress-list", className: "flex flex-col gap-2", children: tasks.map((task, index) => (_jsx(TaskCard, { task: task, index: index }, task.title || `task-${index}`))) })] }));
}
// ── Progress Summary ─────────────────────────────────────────────────
function ProgressSummary({ tasks }) {
    const { t } = useTranslation('web');
    const counts = useMemo(() => {
        const done = tasks.filter((t) => t.state === 'Done').length;
        const wip = tasks.filter((t) => t.state === 'Work in Progress').length;
        const review = tasks.filter((t) => t.state === 'Review').length;
        const todo = tasks.filter((t) => t.state !== 'Done' && t.state !== 'Work in Progress' && t.state !== 'Review').length;
        const total = tasks.length;
        const percent = total > 0 ? Math.round((done / total) * 100) : 0;
        return { done, wip, review, todo, total, percent };
    }, [tasks]);
    return (_jsxs("div", { "data-testid": "task-progress-summary", className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Task Progress" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [counts.done, " of ", counts.total, " done"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { "data-testid": "task-progress-bar", className: "h-full rounded-full bg-emerald-500 transition-all", style: { width: `${counts.percent}%` } }) }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [counts.done > 0 ? (_jsx(StatChip, { icon: Check, label: t('taskProgress.done'), count: counts.done, className: "text-emerald-600" })) : null, counts.wip > 0 ? (_jsx(StatChip, { icon: Loader2, label: t('taskProgress.inProgress'), count: counts.wip, className: "text-blue-600" })) : null, counts.review > 0 ? (_jsx(StatChip, { icon: Eye, label: t('taskProgress.review'), count: counts.review, className: "text-amber-600" })) : null, counts.todo > 0 ? (_jsx(StatChip, { icon: Circle, label: t('taskProgress.todo'), count: counts.todo, className: "text-muted-foreground" })) : null] })] }));
}
function StatChip({ icon: Icon, label, count, className, }) {
    return (_jsxs("span", { className: cn('flex items-center gap-1 text-xs', className), children: [_jsx(Icon, { className: "h-3 w-3" }), count, " ", label] }));
}
// ── Task Card ────────────────────────────────────────────────────────
function TaskCard({ task, index }) {
    const [expanded, setExpanded] = useState(false);
    const config = taskStateConfig[task.state] ?? defaultTaskConfig;
    const Icon = config.icon;
    const hasDetails = task.actionItems.length > 0;
    const handleToggle = useCallback(() => {
        if (hasDetails) {
            setExpanded((prev) => !prev);
        }
    }, [hasDetails]);
    return (_jsxs("div", { "data-testid": `task-card-${index}`, className: cn('rounded-lg border', config.borderClass), children: [_jsxs("button", { type: "button", onClick: handleToggle, disabled: !hasDetails, className: cn('flex w-full items-start gap-2 px-3 py-2.5 text-start', hasDetails && 'hover:bg-muted/50 cursor-pointer transition-colors'), children: [_jsx(Icon, { className: cn('mt-0.5 h-4 w-4 shrink-0', config.colorClass, config.spinning && 'animate-spin') }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: cn('text-sm font-medium', config.colorClass), children: task.title }), task.description ? (_jsx("span", { className: "text-muted-foreground text-xs", children: task.description })) : null] }), hasDetails ? (_jsx(ChevronRight, { className: cn('text-muted-foreground mt-0.5 h-4 w-4 shrink-0 transition-transform', expanded && 'rotate-90') })) : null] }), expanded && hasDetails ? (_jsx("div", { className: "border-t px-3 py-2.5", children: _jsx("div", { className: "flex flex-col gap-2", children: task.actionItems.map((item, aiIndex) => (_jsx(ActionItemRow, { item: item }, item.name || `ai-${aiIndex}`))) }) })) : null] }));
}
// ── Action Item Row ──────────────────────────────────────────────────
function ActionItemRow({ item }) {
    const totalCriteria = item.acceptanceCriteria.length;
    const verifiedCriteria = item.acceptanceCriteria.filter((ac) => ac.verified).length;
    const allVerified = totalCriteria > 0 && verifiedCriteria === totalCriteria;
    return (_jsxs("div", { "data-testid": "action-item", className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-start gap-2", children: [allVerified ? (_jsx(CheckCircle2, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-600" })) : (_jsx(CircleDashed, { className: "text-muted-foreground mt-0.5 h-3.5 w-3.5 shrink-0" })), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "text-xs font-medium", children: item.name }), item.description ? (_jsx("span", { className: "text-muted-foreground text-[11px]", children: item.description })) : null] }), totalCriteria > 0 ? (_jsxs("span", { className: "text-muted-foreground ml-auto shrink-0 text-[11px]", children: [verifiedCriteria, "/", totalCriteria] })) : null] }), totalCriteria > 0 ? (_jsx("div", { className: "ms-5.5 flex flex-col gap-1", children: item.acceptanceCriteria.map((ac, acIndex) => (_jsx(AcceptanceCriterionRow, { criterion: ac }, ac.description || `ac-${acIndex}`))) })) : null] }));
}
// ── Acceptance Criterion Row ─────────────────────────────────────────
function AcceptanceCriterionRow({ criterion, }) {
    return (_jsxs("div", { "data-testid": "acceptance-criterion", className: "flex items-start gap-1.5", children: [criterion.verified ? (_jsx(Check, { className: "mt-0.5 h-3 w-3 shrink-0 text-emerald-600" })) : (_jsx(Circle, { className: "text-muted-foreground mt-0.5 h-3 w-3 shrink-0" })), _jsx("span", { className: cn('text-[11px]', criterion.verified ? 'text-muted-foreground line-through' : 'text-foreground'), children: criterion.description })] }));
}
