import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Box, Text } from "ink";
import { ProgressBar } from "./design/ProgressBar.js";
import { StatusBadge } from "./design/StatusBadge.js";
import { truncateCells } from "./design/textLayout.js";
import { toneColor } from "./design/terminalTheme.js";
export function TodoPanel(props) {
    const model = todoPanelModel(props.todos, { limit: props.limit });
    const width = props.width ?? 32;
    if (model.empty) {
        return _jsx(Text, { color: "gray", children: "No todos" });
    }
    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { flexDirection: "row", children: model.badges.map((badge) => (_jsxs(React.Fragment, { children: [_jsx(StatusBadge, { label: badge.label, tone: badge.tone }), _jsx(Text, { children: " " })] }, badge.label))) }), _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Text, { color: "gray", children: truncateCells(model.summary.padEnd(12), 12) }), _jsx(ProgressBar, { ratio: model.ratio, width: Math.max(8, Math.min(16, width - 18)), filledTone: model.tone, showPercent: true })] }), model.rows.map((row) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: toneColor(row.tone), children: [row.marker, " "] }), _jsx(Text, { color: toneColor(row.tone), bold: row.active, strikethrough: row.completed, children: truncateCells(row.text, Math.max(12, width - 4)) })] }), row.detail ? (_jsx(Text, { color: "gray", children: truncateCells(`  ${row.detail}`, Math.max(12, width - 2)) })) : null] }, row.key))), model.hiddenSummary ? _jsx(Text, { color: "gray", children: truncateCells(model.hiddenSummary, Math.max(12, width)) }) : null] }));
}
export function todoPanelModel(todos, options = {}) {
    const limit = Math.max(1, Math.trunc(options.limit ?? 5));
    if (todos.length === 0) {
        return {
            empty: true,
            summary: "0 todos",
            ratio: 0,
            tone: "muted",
            badges: [],
            rows: [],
            hiddenSummary: "",
        };
    }
    const completed = todos.filter((todo) => todo.status === "completed").length;
    const active = todos.filter((todo) => todo.status === "in_progress").length;
    const pending = todos.filter((todo) => todo.status === "pending").length;
    const sorted = [...todos].sort(compareTodoForDisplay);
    const visible = sorted.slice(0, limit);
    const hidden = sorted.slice(limit);
    const badges = [];
    if (active > 0)
        badges.push({ label: `active ${active}`, tone: "warning" });
    if (pending > 0)
        badges.push({ label: `pending ${pending}`, tone: "brand" });
    if (completed > 0)
        badges.push({ label: `done ${completed}`, tone: "success" });
    return {
        empty: false,
        summary: `${completed}/${todos.length} done`,
        ratio: completed / todos.length,
        tone: active > 0 ? "warning" : completed === todos.length ? "success" : "brand",
        badges,
        rows: visible.map(todoRow),
        hiddenSummary: hidden.length > 0 ? hiddenTodoSummary(hidden) : "",
    };
}
function todoRow(todo) {
    return {
        key: todo.id,
        marker: markerForStatus(todo.status),
        tone: toneForStatus(todo.status),
        text: todo.status === "in_progress" ? todo.activeForm : todo.content,
        detail: todo.status === "in_progress" && todo.activeForm !== todo.content ? todo.content : "",
        active: todo.status === "in_progress",
        completed: todo.status === "completed",
    };
}
function compareTodoForDisplay(left, right) {
    const rankDiff = statusRank(left.status) - statusRank(right.status);
    if (rankDiff !== 0)
        return rankDiff;
    return left.id.localeCompare(right.id);
}
function statusRank(status) {
    if (status === "in_progress")
        return 0;
    if (status === "pending")
        return 1;
    return 2;
}
function markerForStatus(status) {
    if (status === "completed")
        return "x";
    if (status === "in_progress")
        return ">";
    return ".";
}
function toneForStatus(status) {
    if (status === "completed")
        return "success";
    if (status === "in_progress")
        return "warning";
    return "brand";
}
function hiddenTodoSummary(hidden) {
    const pending = hidden.filter((todo) => todo.status === "pending").length;
    const active = hidden.filter((todo) => todo.status === "in_progress").length;
    const completed = hidden.filter((todo) => todo.status === "completed").length;
    return [
        `+${hidden.length} hidden`,
        active > 0 ? `${active} active` : "",
        pending > 0 ? `${pending} pending` : "",
        completed > 0 ? `${completed} done` : "",
    ].filter(Boolean).join(" | ");
}
