"use client";

import React from "react";
import {
  Box,
  Chip,
  CircularProgress,
  Collapse,
  IconButton,
  Stack,
  Typography,
  alpha,
  useTheme,
} from "@mui/material";
import AssignmentTurnedInRounded from "@mui/icons-material/AssignmentTurnedInRounded";
import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
import BlockRounded from "@mui/icons-material/BlockRounded";
import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
import RadioButtonUncheckedRounded from "@mui/icons-material/RadioButtonUncheckedRounded";

import type { Message } from "./GlobalChatbox.types";

export const TodoPlanCard = ({
  todoUpdate,
}: {
  todoUpdate: NonNullable<Message["todos"]>;
}) => {
  const theme = useTheme();
  const total = todoUpdate.todos.length;
  const completed = todoUpdate.todos.filter((todo) => todo.status === "completed").length;
  const running = todoUpdate.todos.find((todo) => todo.status === "in_progress");
  const cancelled = todoUpdate.todos.filter((todo) => todo.status === "cancelled").length;
  const pending = todoUpdate.todos.filter((todo) => todo.status === "pending").length;
  const progress = total > 0 ? Math.round((completed / total) * 100) : 0;
  const isAborted = cancelled > 0 && completed + cancelled === total;
  const canCollapse = total > 4;
  const [expanded, setExpanded] = React.useState(!canCollapse && !isAborted);
  const pinnedTodos = canCollapse ? todoUpdate.todos.slice(0, 4) : todoUpdate.todos;
  const collapsibleTodos = canCollapse ? todoUpdate.todos.slice(4) : [];
  const hiddenCount = expanded ? 0 : collapsibleTodos.length;
  const latestUpdatedAt = Math.max(
    todoUpdate.createdAt,
    ...todoUpdate.todos
      .map((todo) => todo.updatedAt ?? todo.createdAt ?? 0)
      .filter((value) => value > 0),
  );
  const updatedAtLabel =
    latestUpdatedAt > 0
      ? new Intl.DateTimeFormat("zh-CN", {
          hour: "2-digit",
          minute: "2-digit",
        }).format(new Date(latestUpdatedAt))
      : undefined;

  const getTodoVisual = (status: NonNullable<Message["todos"]>["todos"][number]["status"]) => {
    if (status === "completed") {
      return { icon: <CheckCircleRounded sx={{ fontSize: 17 }} />, color: theme.palette.success.main, label: "完成" };
    }
    if (status === "in_progress") {
      return { icon: <CircularProgress size={15} thickness={5} />, color: "#0288d1", label: "进行中" };
    }
    if (status === "cancelled") {
      return { icon: <BlockRounded sx={{ fontSize: 17 }} />, color: theme.palette.text.disabled, label: "中止" };
    }
    return { icon: <RadioButtonUncheckedRounded sx={{ fontSize: 17 }} />, color: theme.palette.text.secondary, label: "待办" };
  };

  const getPriorityLabel = (priority: NonNullable<Message["todos"]>["todos"][number]["priority"]) => {
    if (priority === "high") return { label: "高优先级", color: "#8a5a00" };
    if (priority === "medium") return { label: "中优先级", color: "#9a6a16" };
    if (priority === "low") return { label: "低优先级", color: "#8d7960" };
    return undefined;
  };

  const statusSummary = isAborted
    ? `${completed} 完成 / ${cancelled} 中止`
    : [
        completed ? `${completed} 完成` : null,
        running ? "1 进行中" : null,
        pending ? `${pending} 待办` : null,
        cancelled ? `${cancelled} 中止` : null,
      ].filter(Boolean).join(" / ") || "等待任务";
  const renderTodoRow = (
    todo: NonNullable<Message["todos"]>["todos"][number],
    index: number,
  ) => {
    const visual = getTodoVisual(todo.status);
    const priority = getPriorityLabel(todo.priority);
    return (
      <Stack
        key={`${todo.id}-${index}`}
        direction="row"
        alignItems="flex-start"
        spacing={1}
        sx={{
          py: 0.8,
          borderTop: `1px solid ${alpha("#00838f", 0.08)}`,
          color: todo.status === "cancelled" ? "text.disabled" : "text.primary",
        }}
      >
        <Box
          sx={{
            width: 24,
            height: 24,
            borderRadius: 1.25,
            display: "grid",
            placeItems: "center",
            flex: "0 0 auto",
            color: visual.color,
            bgcolor: alpha(visual.color, 0.08),
            mt: 0.1,
          }}
        >
          {visual.icon}
        </Box>
        <Box sx={{ minWidth: 0, flex: 1 }}>
          <Typography
            variant="body2"
            sx={{
              minWidth: 0,
              wordBreak: "break-word",
              lineHeight: 1.45,
              textDecoration: todo.status === "cancelled" ? "line-through" : undefined,
            }}
          >
            {todo.content}
          </Typography>
        </Box>
        <Stack direction="row" spacing={0.5} sx={{ flex: "0 0 auto" }}>
          {priority ? (
            <Chip
              size="small"
              label={priority.label}
              sx={{
                height: 22,
                borderRadius: "11px",
                fontSize: "0.66rem",
                fontWeight: 800,
                color: priority.color,
                bgcolor: alpha(priority.color, 0.045),
                border: `1px solid ${alpha(priority.color, 0.16)}`,
                "& .MuiChip-label": { px: 0.75 },
              }}
            />
          ) : null}
          <Chip
            size="small"
            label={visual.label}
            sx={{
              height: 22,
              borderRadius: "11px",
              fontSize: "0.66rem",
              fontWeight: 800,
              color: visual.color,
              bgcolor: alpha(visual.color, 0.08),
              "& .MuiChip-label": { px: 0.75 },
            }}
          />
        </Stack>
      </Stack>
    );
  };

  if (total === 0) {
    return null;
  }

  return (
    <Box
      sx={{
        borderRadius: 2,
        overflow: "hidden",
        border: `1px solid ${alpha("#00838f", 0.16)}`,
        bgcolor: alpha("#f8fbfc", 0.82),
      }}
    >
      <Stack
        spacing={1}
        role="button"
        tabIndex={0}
        onClick={() => {
          if (canCollapse) {
            setExpanded((value) => !value);
          }
        }}
        onKeyDown={(event) => {
          if (canCollapse && (event.key === "Enter" || event.key === " ")) {
            event.preventDefault();
            setExpanded((value) => !value);
          }
        }}
        sx={{
          px: 1.4,
          py: 1.15,
          cursor: canCollapse ? "pointer" : "default",
          transition: "background-color 0.2s ease",
          "&:hover": canCollapse ? { bgcolor: alpha("#00838f", 0.035) } : undefined,
        }}
      >
        <Stack direction="row" alignItems="center" spacing={1}>
          <Box
            sx={{
              width: 28,
              height: 28,
              borderRadius: 1.5,
              display: "grid",
              placeItems: "center",
              flex: "0 0 auto",
              color: "#00838f",
              bgcolor: alpha("#00838f", 0.1),
              border: `1px solid ${alpha("#00838f", 0.14)}`,
            }}
          >
            <AssignmentTurnedInRounded sx={{ fontSize: 18 }} />
          </Box>
          <Box sx={{ minWidth: 0, flex: 1 }}>
            <Stack direction="row" alignItems="center" spacing={0.75}>
              <Typography variant="subtitle2" fontWeight={800} noWrap sx={{ lineHeight: 1.25 }}>
                会话任务
              </Typography>
              <Chip
                size="small"
                label={running ? "执行中" : isAborted ? "已中止" : completed === total ? "已完成" : "已同步"}
                sx={{
                  height: 20,
                  borderRadius: "10px",
                  fontSize: "0.66rem",
                  fontWeight: 800,
                  color: running ? "#0277bd" : isAborted ? "text.secondary" : "#00838f",
                  bgcolor: alpha(running ? "#0288d1" : isAborted ? "#64748b" : "#00838f", 0.08),
                  "& .MuiChip-label": { px: 0.75 },
                }}
              />
            </Stack>
            <Typography variant="caption" color="text.secondary">
              {statusSummary}{updatedAtLabel ? ` · ${updatedAtLabel} 更新` : ""}
            </Typography>
          </Box>
          {canCollapse ? (
            <IconButton
              size="small"
              aria-label={expanded ? "收起会话任务" : "展开会话任务"}
              sx={{
                width: 28,
                height: 28,
                color: "text.secondary",
                bgcolor: alpha("#000", 0.035),
                "&:hover": { bgcolor: alpha("#000", 0.07) },
              }}
            >
              {expanded ? (
                <KeyboardArrowUpRounded sx={{ fontSize: 18 }} />
              ) : (
                <KeyboardArrowDownRounded sx={{ fontSize: 18 }} />
              )}
            </IconButton>
          ) : null}
        </Stack>
        <Box
          sx={{
            height: 6,
            borderRadius: 999,
            overflow: "hidden",
            bgcolor: alpha("#00838f", 0.1),
          }}
        >
          <Box
            sx={{
              width: `${progress}%`,
              height: "100%",
              borderRadius: 999,
              bgcolor: isAborted ? theme.palette.text.disabled : "#00838f",
              transition: "width 0.25s ease",
            }}
          />
        </Box>
      </Stack>

      <Stack spacing={0} sx={{ px: 1.4, pb: 1.1 }}>
        {pinnedTodos.map((todo, index) => renderTodoRow(todo, index))}
        {canCollapse ? (
          <Collapse in={expanded} timeout={220} unmountOnExit={false}>
            <Stack spacing={0}>
              {collapsibleTodos.map((todo, index) =>
                renderTodoRow(todo, index + pinnedTodos.length),
              )}
            </Stack>
          </Collapse>
        ) : null}
        {hiddenCount > 0 ? (
          <Typography
            variant="caption"
            color="text.secondary"
            sx={{
              pt: 0.8,
              borderTop: `1px solid ${alpha("#00838f", 0.08)}`,
            }}
          >
            还有 {hiddenCount} 项，展开查看全部
          </Typography>
        ) : null}
      </Stack>
    </Box>
  );
};