"use client";

import React, { useEffect, useMemo, useState } from "react";
import {
  Box,
  Collapse,
  LinearProgress,
  Stack,
  Typography,
  alpha,
  useTheme,
} from "@mui/material";
import AutoAwesome from "@mui/icons-material/AutoAwesome";
import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
import ErrorOutlineRounded from "@mui/icons-material/ErrorOutlineRounded";
import ManageSearchRounded from "@mui/icons-material/ManageSearchRounded";
import BuildCircleRounded from "@mui/icons-material/BuildCircleRounded";
import TaskAltRounded from "@mui/icons-material/TaskAltRounded";
import PsychologyRounded from "@mui/icons-material/PsychologyRounded";
import SyncRounded from "@mui/icons-material/SyncRounded";
import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";

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

const formatDuration = (durationMs: number) => {
  if (!Number.isFinite(durationMs) || durationMs < 0) {
    return "0s";
  }
  if (durationMs < 10_000) {
    return `${(durationMs / 1000).toFixed(1)}s`;
  }
  const totalSeconds = Math.round(durationMs / 1000);
  if (totalSeconds < 60) {
    return `${totalSeconds}s`;
  }
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  if (minutes < 60) {
    return `${minutes}m ${seconds.toString().padStart(2, "0")}s`;
  }
  const hours = Math.floor(minutes / 60);
  const remainMinutes = minutes % 60;
  return `${hours}h ${remainMinutes.toString().padStart(2, "0")}m`;
};

const getProgressElapsedMs = (item: ChatProgress, nowMs: number) => {
  if (item.durationMs !== undefined) {
    return item.durationMs;
  }
  if (item.status === "running") {
    if (item.elapsedMs !== undefined && item.elapsedSnapshotAt !== undefined) {
      return Math.max(0, item.elapsedMs + (nowMs - item.elapsedSnapshotAt));
    }
    if (item.startedAt !== undefined) {
      return Math.max(0, nowMs - item.startedAt);
    }
    return item.elapsedMs;
  }
  if (item.startedAt !== undefined && item.endedAt !== undefined) {
    return Math.max(0, item.endedAt - item.startedAt);
  }
  return item.elapsedMs;
};

const phaseIcon = (phase: string, status: ChatProgress["status"]) => {
  const sx = { fontSize: 16 };
  if (status === "completed") return <CheckCircleRounded sx={{ ...sx, color: "success.main" }} />;
  if (status === "error") return <ErrorOutlineRounded sx={{ ...sx, color: "error.main" }} />;
  if (phase === "planning") return <PsychologyRounded sx={{ ...sx, color: "#00acc1" }} />;
  if (phase === "tool") return <BuildCircleRounded sx={{ ...sx, color: "warning.main" }} />;
  if (phase === "complete") return <TaskAltRounded sx={{ ...sx, color: "success.main" }} />;
  if (phase === "session") return <SyncRounded sx={{ ...sx, color: "info.main" }} />;
  if (phase === "start") return <ManageSearchRounded sx={{ ...sx, color: "#00acc1" }} />;
  return <AutoAwesome sx={{ ...sx, color: "#00acc1" }} />;
};

const formatToolTitle = (item: ChatProgress) => {
  const text = `${item.title} ${item.detail ?? ""}`;
  if (text.includes("tjwater_cli")) return "查询后端数据";
  if (text.includes("show_chart")) return "生成图表";
  if (text.includes("locate_features")) return "地图定位";
  if (text.includes("view_history")) return "打开历史曲线";
  if (text.includes("view_scada")) return "打开 SCADA 面板";
  if (text.includes("render_junctions")) return "渲染节点";
  return item.title;
};

type AgentProgressTimelineProps = {
  progress: ChatProgress[];
  isAborted?: boolean;
};

const AgentProgressTimelineInner = ({ progress, isAborted }: AgentProgressTimelineProps) => {
  const theme = useTheme();
  const [nowMs, setNowMs] = useState(() => Date.now());
  
  // 判断是否最终完成（哪怕中间有报错，只要有完整的标记就算成功）
  const isOverallComplete = progress.some(
    (item) => item.phase === "complete" && item.status === "completed",
  );
  
  // 修正状态判断：如果外部标记为中断，或者没有完成标记
  const hasRunning = !isAborted && !isOverallComplete && progress.some((item) => item.status === "running");
  const hasError = isAborted || progress.some((item) => item.status === "error");

  useEffect(() => {
    if (!hasRunning) {
      return;
    }
    const timer = window.setInterval(() => {
      setNowMs(Date.now());
    }, 500);
    return () => window.clearInterval(timer);
  }, [hasRunning]);
  
  // 展开状态逻辑：默认折叠，保持界面整洁
  const [expanded, setExpanded] = useState(false);

  const summary = useMemo(() => {
    if (isAborted) return `已中断 (进行到第 ${progress.length} 步)`;
    if (isOverallComplete) {
      return hasError ? `已完成 (含 ${progress.length} 步探索)` : `已完成 (${progress.length} 步)`;
    }
    const runningItem = [...progress].reverse().find((item) => item.status === "running");
    if (runningItem) return `${runningItem.title}...`;
    if (hasError) return "过程异常，尝试恢复中...";
    return `已执行 ${progress.length} 步`;
  }, [isOverallComplete, hasError, progress, isAborted]);

  const totalDurationLabel = useMemo(() => {
    const requestProgress = progress.find((item) => item.id === "request-received");
    const requestElapsed =
      requestProgress ? getProgressElapsedMs(requestProgress, nowMs) : undefined;
    if (requestElapsed !== undefined) {
      return formatDuration(requestElapsed);
    }
    const startedAtValues = progress
      .map((item) => item.startedAt)
      .filter((value): value is number => value !== undefined);
    if (startedAtValues.length === 0) {
      return undefined;
    }
    const minStartedAt = Math.min(...startedAtValues);
    const endedAtValues = progress
      .map((item) => item.endedAt)
      .filter((value): value is number => value !== undefined);
    const endAnchor = isOverallComplete
      ? endedAtValues.length > 0
        ? Math.max(...endedAtValues)
        : nowMs
      : nowMs;
    return formatDuration(Math.max(0, endAnchor - minStartedAt));
  }, [isOverallComplete, nowMs, progress]);

  // 根据整体状态决定顶部卡片的颜色主题
  const statusColor = isOverallComplete 
    ? "#4caf50" // Success Green
    : isAborted || (hasError && !hasRunning)
      ? theme.palette.error.main // Error Red
      : "#00acc1"; // Primary Cyan

  // 默认折叠：只显示最新的三条
  const visibleCount = 3;
  const isCollapsible = progress.length > visibleCount;

  return (
    <Box
      sx={{
        borderRadius: 4,
        bgcolor: alpha(statusColor, 0.04),
        border: `1px solid ${alpha(statusColor, 0.15)}`,
        backdropFilter: "blur(12px)",
        overflow: "hidden",
        transition: "all 0.3s ease",
        "&:hover": {
          bgcolor: alpha(statusColor, 0.06),
          borderColor: alpha(statusColor, 0.25),
        }
      }}
    >
      <Stack
        direction="row"
        spacing={1.5}
        alignItems="center"
        onClick={() => setExpanded(!expanded)}
        sx={{ 
          px: 2, 
          py: 1.25, 
          cursor: "pointer",
          userSelect: "none"
        }}
      >
        {isOverallComplete ? (
          <TaskAltRounded sx={{ fontSize: 18, color: statusColor }} />
        ) : hasRunning ? (
          <AutoAwesome sx={{ fontSize: 18, color: statusColor, animation: "spin 2s linear infinite", "@keyframes spin": { "0%": { transform: "rotate(0deg)" }, "100%": { transform: "rotate(360deg)" } } }} />
        ) : hasError ? (
          <ErrorOutlineRounded sx={{ fontSize: 18, color: statusColor }} />
        ) : (
          <AutoAwesome sx={{ fontSize: 18, color: statusColor }} />
        )}
        
        <Typography variant="caption" fontWeight={700} color="text.primary" sx={{ flex: 1, letterSpacing: 0.3 }}>
          Agent 过程: {summary}
          {totalDurationLabel ? ` · 耗时 ${totalDurationLabel}` : ""}
        </Typography>

        <KeyboardArrowDownRounded 
          sx={{ 
            fontSize: 20, 
            color: "text.secondary",
            transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
            transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
          }} 
        />
      </Stack>

      {hasRunning && !expanded ? (
        <LinearProgress 
          sx={{ 
            height: 2, 
            bgcolor: "transparent", 
            "& .MuiLinearProgress-bar": { bgcolor: statusColor } 
          }} 
        />
      ) : null}

      <Collapse in={expanded || hasRunning} timeout="auto" unmountOnExit={false}>
        <Box>
          {hasRunning ? (
            <LinearProgress 
              sx={{ 
                height: 1, 
                bgcolor: alpha(statusColor, 0.1), 
                "& .MuiLinearProgress-bar": { bgcolor: statusColor } 
              }} 
            />
          ) : (
            <Box sx={{ height: 1, bgcolor: alpha(statusColor, 0.1) }} />
          )}
          <Stack spacing={0} sx={{ px: 2, py: 1.5 }}>
          {progress.map((item, index) => {
            const isLast = index === progress.length - 1;
            const isHiddenWhenCollapsed = isCollapsible && index < progress.length - visibleCount;
            const stepElapsedMs = getProgressElapsedMs(item, nowMs);
            
            const itemColor = isAborted && isLast 
              ? theme.palette.error.main
              : item.status === "error" 
                ? theme.palette.error.main 
                : item.status === "completed" 
                  ? "#4caf50" 
                  : "#00acc1";

            const content = (
              <Stack key={item.id} direction="row" spacing={1.5} alignItems="stretch">
                <Box
                  sx={{
                    position: "relative",
                    width: 20,
                    display: "flex",
                    justifyContent: "center",
                    flexShrink: 0,
                    pt: 0.3,
                  }}
                >
                  {!isLast ? (
                    <Box
                      aria-hidden
                      sx={{
                        position: "absolute",
                        top: 22,
                        bottom: -6,
                        left: "50%",
                        width: 2,
                        transform: "translateX(-50%)",
                        borderRadius: 2,
                        bgcolor: alpha(itemColor, item.status === "completed" ? 0.2 : 0.4),
                      }}
                    />
                  ) : null}
                  <Box
                    sx={{
                      position: "relative",
                      zIndex: 1,
                      width: 20,
                      height: 20,
                      borderRadius: "50%",
                      bgcolor: alpha(theme.palette.background.paper, 0.9),
                      boxShadow: `0 0 0 2px ${alpha(itemColor, 0.1)}`,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                    }}
                  >
                    {phaseIcon(
                      item.phase,
                      isAborted && isLast ? "error" :
                      isOverallComplete && item.status === "running"
                        ? "completed"
                        : item.status,
                    )}
                  </Box>
                </Box>
                <Box sx={{ minWidth: 0, flex: 1, pb: isLast ? 0 : 2 }}>
                  <Stack direction="row" spacing={1} alignItems="center" justifyContent="space-between">
                    <Typography variant="caption" color="text.primary" fontWeight={600} sx={{ fontSize: "0.75rem" }}>
                      {item.phase === "tool" ? formatToolTitle(item) : item.title}
                    </Typography>
                    {stepElapsedMs !== undefined ? (
                      <Typography
                        variant="caption"
                        color="text.secondary"
                        sx={{ fontSize: "0.68rem", fontFamily: "var(--font-mono, monospace)" }}
                      >
                        {formatDuration(stepElapsedMs)}
                      </Typography>
                    ) : null}
                  </Stack>
                  
                  {item.detail && (
                    <Collapse in={expanded || isLast} timeout="auto">
                      <Typography
                        variant="caption"
                        component="div"
                        sx={{
                          mt: 0.5,
                          px: 1.25,
                          py: 0.75,
                          borderRadius: 2,
                          bgcolor: alpha(itemColor, 0.05),
                          border: `1px solid ${alpha(itemColor, 0.1)}`,
                          color: "text.secondary",
                          whiteSpace: "pre-wrap",
                          fontFamily: "var(--font-mono, monospace)",
                          fontSize: "0.7rem",
                          lineHeight: 1.5,
                          wordBreak: "break-all",
                        }}
                      >
                        {item.detail}
                      </Typography>
                    </Collapse>
                  )}
                </Box>
              </Stack>
            );

            if (isHiddenWhenCollapsed) {
              return (
                <Collapse key={item.id} in={expanded} timeout="auto" unmountOnExit={false}>
                  {content}
                </Collapse>
              );
            }
            return content;
          })}
          </Stack>
        </Box>
      </Collapse>
    </Box>
  );
};

export const AgentProgressTimeline = React.memo(
  AgentProgressTimelineInner,
  (prevProps, nextProps) =>
    prevProps.progress === nextProps.progress &&
    prevProps.isAborted === nextProps.isAborted,
);

AgentProgressTimeline.displayName = "AgentProgressTimeline";