import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Text } from "ink";
function getStatusIndicator(status) {
  switch (status) {
    case "completed":
      return { icon: "\u2713", color: "green" };
    case "in_progress":
      return { icon: "\u25CF", color: "yellow" };
    case "pending":
    default:
      return { icon: "\u25CB", color: "gray" };
  }
}
function TodoPanel({ todos, isExpanded, isProcessing = false }) {
  if (todos.length === 0) {
    return null;
  }
  const sortedTodos = [...todos].sort((a, b) => a.position - b.position);
  const currentTask = sortedTodos.find((t) => t.status === "in_progress");
  const nextPendingTask = sortedTodos.find((t) => t.status === "pending");
  const nextTask = currentTask || nextPendingTask;
  if (!isProcessing) {
    if (!isExpanded) {
      return null;
    }
    const completedCount = todos.filter((t) => t.status === "completed").length;
    const totalCount = todos.length;
    return /* @__PURE__ */ jsxs(
      Box,
      {
        flexDirection: "column",
        borderStyle: "round",
        borderColor: "gray",
        paddingX: 1,
        marginX: 1,
        marginBottom: 1,
        children: [
          /* @__PURE__ */ jsxs(Box, { children: [
            /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
              "\u{1F4CB} Todo",
              " "
            ] }),
            /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
              "(",
              completedCount,
              "/",
              totalCount,
              ")"
            ] }),
            /* @__PURE__ */ jsxs(Text, { color: "gray", dimColor: true, children: [
              " ",
              "\xB7 ctrl+t to hide todo list"
            ] })
          ] }),
          /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: sortedTodos.map((todo) => {
            const { icon, color } = getStatusIndicator(todo.status);
            const isCompleted = todo.status === "completed";
            const isInProgress = todo.status === "in_progress";
            return /* @__PURE__ */ jsxs(Box, { children: [
              /* @__PURE__ */ jsxs(Text, { color, children: [
                icon,
                " "
              ] }),
              /* @__PURE__ */ jsx(
                Text,
                {
                  color: isCompleted ? "gray" : isInProgress ? "white" : "gray",
                  strikethrough: isCompleted,
                  dimColor: !isInProgress && !isCompleted,
                  children: isInProgress ? todo.activeForm : todo.content
                }
              )
            ] }, todo.id);
          }) })
        ]
      }
    );
  }
  if (!isExpanded) {
    if (!currentTask) {
      return null;
    }
    return /* @__PURE__ */ jsx(Box, { paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsxs(Box, { marginLeft: 2, children: [
      /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u23BF " }),
      /* @__PURE__ */ jsx(Text, { color: "gray", children: currentTask.activeForm })
    ] }) });
  }
  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, children: sortedTodos.map((todo, index) => {
    const isFirst = index === 0;
    const isCompleted = todo.status === "completed";
    const isInProgress = todo.status === "in_progress";
    const checkbox = isCompleted ? "\u2611" : "\u2610";
    return /* @__PURE__ */ jsxs(Box, { marginLeft: 2, children: [
      /* @__PURE__ */ jsx(Text, { color: "gray", children: isFirst ? "\u23BF  " : "   " }),
      /* @__PURE__ */ jsxs(Text, { color: isCompleted ? "green" : isInProgress ? "yellow" : "white", children: [
        checkbox,
        " "
      ] }),
      /* @__PURE__ */ jsx(Text, { color: isCompleted ? "gray" : "white", dimColor: isCompleted, children: todo.content })
    ] }, todo.id);
  }) });
}
export {
  TodoPanel
};
