<template>
  <div class="minimal-blocks-container">
    <!-- 按真实顺序显示分组 -->
    <template v-for="group in blockGroups" :key="group.id">
      <!-- 摘要组（thinking/tool） -->
      <div v-if="group.type === 'summary' && group.actions" class="summary-group">
        <!-- 摘要行（只有文字，可点击展开） -->
        <div
          class="summary-line-text"
          :class="{ running: isSummaryRunning(group.actions, group.id) }"
          :data-group-id="group.id"
          @click="toggleExpand(group.id)"
        >
          <div class="summary-content-wrapper">
            <span class="summary-preview">
              <template v-if="shouldAnimateSummary(group.actions, group.id)">
                <span
                  v-if="shouldShowToolReel(group.actions, group.id)"
                  class="summary-tool-reel-window"
                >
                  <span
                    class="summary-tool-reel-track"
                    :class="getToolReelPhase(group.id)"
                    :style="getToolReelTrackStyle(group.id)"
                  >
                    <span
                      v-for="(item, idx) in getToolReelDisplayItems(group.actions, group.id)"
                      :key="`${group.id}-tool-reel-${idx}-${item}`"
                      class="summary-tool-reel-item"
                    >
                      {{ item }}
                    </span>
                  </span>
                </span>
                <template v-else>
                  <span
                    v-for="(char, idx) in getAnimatedSummaryChars(
                      getSummaryLineText(group.actions, group.id)
                    )"
                    :key="`${group.id}-${idx}`"
                    class="summary-char"
                    :style="{ animationDelay: `${(idx + 1) * 0.12}s` }"
                  >
                    {{ char === ' ' ? '\u00A0' : char }}
                  </span>
                </template>
              </template>
              <template v-else>
                {{ getSummaryLineText(group.actions, group.id) }}
              </template>
            </span>
          </div>
          <!-- 加载动画或完成图标 -->
          <div class="summary-status-icon">
            <component
              v-if="isSummaryRunning(group.actions, group.id)"
              :is="getSummaryLoader(group.id)"
            />
            <svg
              v-else
              class="check-icon"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <circle cx="12" cy="12" r="10" />
              <polyline points="7.5 12 10.5 15 16.5 9" />
            </svg>
          </div>
        </div>

        <!-- 步骤容器（展开时显示所有步骤） -->
        <div class="steps-container" :class="{ show: expandedGroups.has(group.id) }">
          <div class="steps-wrapper">
            <div v-for="step in getSummarySteps(group.actions)" :key="step.id" class="step-item">
              <div class="step-timeline">
                <span
                  class="step-icon icon icon-sm"
                  :style="getStepIconStyle(step)"
                  aria-hidden="true"
                ></span>
                <div class="step-line"></div>
              </div>
              <div class="step-content">
                <div v-if="step.type === 'thinking'" class="step-body">
                  <div
                    class="thinking-content"
                    :ref="(el) => registerThinking(step.id, el)"
                    @scroll="handleScroll(step.id, $event)"
                    v-html="renderContent(step.content)"
                  ></div>
                </div>
                <div v-else-if="step.type === 'tool'" class="step-body">
                  <div class="step-header">{{ getToolName(step.action) }}</div>
                  <div class="tool-intent" v-if="getToolIntent(step.action)">
                    {{ getToolIntent(step.action) }}
                  </div>
                  <div class="tool-result" v-if="step.action.tool?.result">
                    <div v-html="renderToolResult(step.action)"></div>
                  </div>
                  <div v-else class="tool-result">
                    <div class="result-item">执行中...</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 文本组 -->
      <div
        v-else-if="group.type === 'text'"
        class="text-output"
        :class="{ 'streaming-text': group.streaming }"
      >
        <div class="text-content" :class="{ 'streaming-text': group.streaming }">
          <MarkdownRenderer :content="group.content || ''" :is-streaming="group.streaming" />
        </div>
      </div>
      <div v-else-if="group.type === 'system'" class="summary-group sub-agent-system-group">
        <div class="summary-line-text sub-agent-system-summary-line">
          <div class="summary-content-wrapper">
            <span class="summary-preview">{{ group.content || '' }}</span>
          </div>
          <div class="summary-status-icon">
            <svg
              class="check-icon"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <circle cx="12" cy="12" r="10" />
              <polyline points="7.5 12 10.5 15 16.5 9" />
            </svg>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, nextTick, onBeforeUnmount, Component } from 'vue';
import { usePersonalizationStore } from '@/stores/personalization';
import { renderEnhancedToolResult } from './actions/toolRenderers';
import { getRandomLoader } from './loaders/index';
import MarkdownRenderer from './MarkdownRenderer.vue';

interface Action {
  id?: string;
  type: 'thinking' | 'tool' | 'text' | 'system';
  content: string;
  streaming?: boolean;
  blockId?: string;
  tool?: {
    name?: string;
    intent?: string;
    intent_rendered?: string;
    intent_full?: string;
    status?: string;
    display_name?: string;
    arguments?: any;
    result?: any;
  };
}

interface Step {
  id: string;
  type: 'thinking' | 'tool';
  content: string;
  streaming: boolean;
  action: Action;
}

interface BlockGroup {
  type: 'summary' | 'text' | 'system';
  id: string;
  actions?: Action[];
  content?: string;
  streaming?: boolean;
}

const props = defineProps<{
  actions: Action[];
  conversationRunning?: boolean;
  isLatestMessage?: boolean;
  iconStyle?: (name: string) => any;
  getToolIcon?: (tool: any) => string;
  getToolStatusText?: (tool: any) => string;
  getToolDescription?: (tool: any) => string;
  formatSearchTopic?: (filters: Record<string, any>) => string;
  formatSearchTime?: (filters: Record<string, any>) => string;
  formatSearchDomains?: (filters: Record<string, any>) => string;
  registerThinkingRef?: (key: string, el: Element | null) => void;
  handleThinkingScroll?: (blockId: string, event: Event) => void;
}>();

const emit = defineEmits<{
  (event: 'group-toggle', payload: { groupId: string; expanded: boolean }): void;
}>();

const personalizationStore = usePersonalizationStore();
const expandedGroups = ref(new Set<string>());
const thinkingRefs = new Map<string, HTMLElement>();
const summaryLoaders = new Map<string, Component>();
const TOOL_REEL_ITEM_HEIGHT = 26;
const TOOL_REEL_INTERVAL_MS = 1450;
const TOOL_REEL_ROLL_MS = 520;
const TOOL_REEL_SETTLE_MS = 170;
const TOOL_REEL_OVERSHOOT_PX = 2;

type ToolReelPhase = 'idle' | 'rolling' | 'settle';

interface ToolReelState {
  index: number;
  offsetPx: number;
  phase: ToolReelPhase;
  signature: string;
  items: string[];
  completing?: boolean;
}

const toolReelStates = reactive<Record<string, ToolReelState>>({});
const toolReelIntervals = new Map<string, number>();
const toolReelTimeouts = new Map<string, number[]>();

const getAnimatedSummaryChars = (text: string) => Array.from(text || '');

const getFirstLine = (raw: string) => {
  const text = typeof raw === 'string' ? raw : '';
  const firstLineEnd = text.indexOf('\n');
  return firstLineEnd > 0 ? text.substring(0, firstLineEnd) : text;
};

const getToolSummaryText = (action: Action) => {
  const tool = action.tool;
  if (!tool) return '';

  const intentEnabled = personalizationStore.form.tool_intent_enabled;
  const intentText = tool.intent_rendered || tool.intent_full || '';

  if (intentEnabled && intentText) {
    return getFirstLine(intentText);
  }

  if (tool.status === 'preparing') {
    return `准备调用 ${tool.name || '工具'}...`;
  }
  if (tool.status === 'running') {
    return `正在调用 ${tool.name || '工具'}...`;
  }
  if (tool.status === 'completed') {
    return tool.display_name || tool.name || '工具执行完成';
  }
  return action.streaming ? '正在执行工具...' : tool.display_name || tool.name || '执行工具';
};

const isActiveToolAction = (action: Action) => {
  if (action.type !== 'tool') return false;
  if (action.streaming) return true;

  const status = String(action.tool?.status || '').toLowerCase();
  return [
    'hinted',
    'preparing',
    'running',
    'pending',
    'pending_approval',
    'awaiting_approval',
    'awaiting_user_answer'
  ].includes(status);
};

const getLatestToolSegment = (actions: Action[]) => {
  let lastToolIndex = -1;
  for (let i = actions.length - 1; i >= 0; i--) {
    if (actions[i].type === 'tool') {
      lastToolIndex = i;
      break;
    }
    if (actions[i].type === 'thinking') {
      break;
    }
  }
  if (lastToolIndex < 0) return [];

  let startIndex = lastToolIndex;
  while (startIndex > 0 && actions[startIndex - 1].type === 'tool') {
    startIndex--;
  }

  return actions.slice(startIndex, lastToolIndex + 1);
};

const getLatestActiveToolSegment = (actions: Action[]) => {
  const segment = getLatestToolSegment(actions);
  return segment.some(isActiveToolAction) ? segment : [];
};

const getToolReelItems = (actions: Action[]) =>
  getLatestActiveToolSegment(actions)
    .map(getToolSummaryText)
    .filter((item) => item.trim().length > 0);

const getToolReelDisplayItems = (actions: Action[], groupId: string) => {
  const completingItems = toolReelStates[groupId]?.completing
    ? toolReelStates[groupId].items
    : null;
  if (completingItems?.length) {
    return completingItems;
  }

  const items = getToolReelItems(actions);
  return items.length > 0 ? [...items, items[0]] : [];
};

const shouldShowToolReel = (actions: Action[], groupId: string) =>
  !!toolReelStates[groupId]?.completing ||
  (isSummaryRunning(actions, groupId) && getToolReelItems(actions).length > 1);

const shouldAnimateSummary = (actions: Action[], groupId: string) =>
  isSummaryRunning(actions, groupId) || !!toolReelStates[groupId]?.completing;

const getToolReelPhase = (groupId: string) => toolReelStates[groupId]?.phase || 'idle';

const getToolReelTrackStyle = (groupId: string) => ({
  transform: `translateY(${toolReelStates[groupId]?.offsetPx || 0}px)`
});

const clearToolReelTimers = (groupId: string) => {
  const interval = toolReelIntervals.get(groupId);
  if (interval) {
    window.clearInterval(interval);
    toolReelIntervals.delete(groupId);
  }

  const timeouts = toolReelTimeouts.get(groupId) || [];
  timeouts.forEach((timeout) => window.clearTimeout(timeout));
  toolReelTimeouts.delete(groupId);
};

const pushToolReelTimeout = (groupId: string, timeout: number) => {
  const timeouts = toolReelTimeouts.get(groupId) || [];
  timeouts.push(timeout);
  toolReelTimeouts.set(groupId, timeouts);
};

const spinToolReel = (groupId: string, itemCount: number) => {
  const state = toolReelStates[groupId];
  if (!state || state.completing || itemCount < 2) return;

  const nextIndex = (state.index + 1) % itemCount;
  const visualIndex = nextIndex === 0 ? itemCount : nextIndex;
  const targetOffset = -visualIndex * TOOL_REEL_ITEM_HEIGHT;

  state.phase = 'rolling';
  state.offsetPx = targetOffset - TOOL_REEL_OVERSHOOT_PX;

  const settleTimeout = window.setTimeout(() => {
    state.phase = 'settle';
    state.offsetPx = targetOffset;
    state.index = nextIndex;

    if (nextIndex === 0) {
      const resetTimeout = window.setTimeout(() => {
        state.phase = 'idle';
        state.offsetPx = 0;
      }, TOOL_REEL_SETTLE_MS);
      pushToolReelTimeout(groupId, resetTimeout);
    }
  }, TOOL_REEL_ROLL_MS);
  pushToolReelTimeout(groupId, settleTimeout);
};

const finishToolReel = (groupId: string, actions: Action[]) => {
  const state = toolReelStates[groupId];
  if (!state || state.completing) return;

  const items =
    state.items.length > 1
      ? state.items
      : getLatestToolSegment(actions)
          .map(getToolSummaryText)
          .filter((item) => item.trim().length > 0);

  if (items.length < 2) {
    clearToolReelTimers(groupId);
    delete toolReelStates[groupId];
    return;
  }

  clearToolReelTimers(groupId);
  state.items = items;
  state.signature = items.join('\u0001');
  state.completing = true;

  const finalIndex = items.length - 1;
  const normalizedOffset = -state.index * TOOL_REEL_ITEM_HEIGHT;
  const targetOffset = -finalIndex * TOOL_REEL_ITEM_HEIGHT;

  state.phase = 'idle';
  state.offsetPx = normalizedOffset;

  window.requestAnimationFrame(() => {
    state.phase = 'rolling';
    state.offsetPx = targetOffset - TOOL_REEL_OVERSHOOT_PX;

    const settleTimeout = window.setTimeout(() => {
      state.phase = 'settle';
      state.offsetPx = targetOffset;
      state.index = finalIndex;
    }, TOOL_REEL_ROLL_MS);
    pushToolReelTimeout(groupId, settleTimeout);

    const cleanupTimeout = window.setTimeout(
      () => {
        clearToolReelTimers(groupId);
        delete toolReelStates[groupId];
      },
      TOOL_REEL_ROLL_MS + TOOL_REEL_SETTLE_MS + 260
    );
    pushToolReelTimeout(groupId, cleanupTimeout);
  });
};

const syncToolReels = () => {
  const activeGroups = new Set<string>();

  blockGroups.value.forEach((group) => {
    if (
      group.type !== 'summary' ||
      !group.actions ||
      !shouldShowToolReel(group.actions, group.id)
    ) {
      return;
    }

    const items = getToolReelItems(group.actions);
    const signature = items.join('\u0001');
    activeGroups.add(group.id);

    if (!toolReelStates[group.id] || toolReelStates[group.id].signature !== signature) {
      clearToolReelTimers(group.id);
      toolReelStates[group.id] = {
        index: 0,
        offsetPx: 0,
        phase: 'idle',
        signature,
        items
      };
    } else {
      toolReelStates[group.id].items = items;
    }

    if (!toolReelIntervals.has(group.id)) {
      const interval = window.setInterval(
        () => spinToolReel(group.id, items.length),
        TOOL_REEL_INTERVAL_MS
      );
      toolReelIntervals.set(group.id, interval);
    }
  });

  Object.keys(toolReelStates).forEach((groupId) => {
    if (!activeGroups.has(groupId)) {
      const group = blockGroups.value.find((item) => item.id === groupId);
      if (group?.type === 'summary' && group.actions && !toolReelStates[groupId].completing) {
        activeGroups.add(groupId);
        finishToolReel(groupId, group.actions);
        return;
      }

      if (!toolReelStates[groupId].completing) {
        clearToolReelTimers(groupId);
        delete toolReelStates[groupId];
      }
    }
  });
};

// 获取摘要组的加载动画组件（每次action类型切换时随机一次）
const getSummaryLoader = (groupId: string) => {
  const group = blockGroups.value.find((g) => g.id === groupId);
  if (!group || !group.actions) return getRandomLoader();

  // 找到当前正在streaming的action，或最后一个action
  const streamingAction = group.actions.find((a) => a.streaming);
  const currentAction = streamingAction || group.actions[group.actions.length - 1];

  if (!currentAction) return getRandomLoader();

  // 找到当前action之前最近的一个不同类型的action
  // 用于判断是否发生了类型切换（thinking <-> tool）
  const currentIndex = group.actions.indexOf(currentAction);
  let lastDifferentTypeIndex = -1;

  for (let i = currentIndex - 1; i >= 0; i--) {
    if (group.actions[i].type !== currentAction.type) {
      lastDifferentTypeIndex = i;
      break;
    }
  }

  // 使用"类型切换点"作为key
  // 如果是第一个action，或者类型发生了切换，就会生成新的key
  // 如果是相同类型的连续action（如多个工具并行），使用相同的key
  const typeSegmentKey =
    lastDifferentTypeIndex >= 0
      ? `${group.actions[lastDifferentTypeIndex].id}-${currentAction.type}`
      : `start-${currentAction.type}`;

  const cacheKey = `${groupId}-${typeSegmentKey}`;

  if (!summaryLoaders.has(cacheKey)) {
    summaryLoaders.set(cacheKey, getRandomLoader());
  }
  return summaryLoaders.get(cacheKey);
};

// 将 actions 分组：连续的 thinking/tool 为一组，text 单独为一组
const blockGroups = computed(() => {
  const groups: BlockGroup[] = [];
  let currentGroup: Action[] = [];
  let groupIndex = 0;

  props.actions.forEach((action, idx) => {
    if (action.type === 'thinking' || action.type === 'tool') {
      currentGroup.push(action);
    } else if (action.type === 'text' || action.type === 'system') {
      // 先保存当前的 thinking/tool 组
      if (currentGroup.length > 0) {
        // 使用第一个 action 的 id 作为 group id，保证稳定性
        const firstActionId =
          currentGroup[0].id || currentGroup[0].blockId || `summary-${groupIndex}`;
        groups.push({
          type: 'summary',
          id: `summary-${firstActionId}`,
          actions: currentGroup
        });
        groupIndex++;
        currentGroup = [];
      }
      if (action.type === 'text') {
        const text = typeof action.content === 'string' ? action.content : '';
        if (!text.trim()) {
          return;
        }
        // 添加 text 组
        groups.push({
          type: 'text',
          id: `text-${idx}`,
          content: text,
          streaming: action.streaming
        });
      } else {
        // 添加 system 组（用于子智能体完成通知，保持顺序）
        groups.push({
          type: 'system',
          id: `system-${idx}`,
          content: action.content
        });
      }
    }
  });

  // 处理最后剩余的 thinking/tool 组
  if (currentGroup.length > 0) {
    // 使用第一个 action 的 id 作为 group id，保证稳定性
    const firstActionId = currentGroup[0].id || currentGroup[0].blockId || `summary-${groupIndex}`;
    groups.push({
      type: 'summary',
      id: `summary-${firstActionId}`,
      actions: currentGroup
    });
  }

  return groups;
});

type ToolCategory =
  | 'read'
  | 'command'
  | 'edit'
  | 'search'
  | 'webpage'
  | 'memory_update'
  | 'memory_read'
  | 'conversation'
  | 'sub_agent'
  | 'other';

const TOOL_CATEGORY_MAP: Record<string, ToolCategory> = {
  // 读取文件 / 视觉内容
  read_file: 'read',
  read_skill: 'read',
  vlm_analyze: 'read',
  view_image: 'read',
  view_video: 'read',

  // 运行指令
  run_command: 'command',
  terminal_session: 'command',
  terminal_input: 'command',
  terminal_snapshot: 'command',

  // 编辑文件
  create_file: 'edit',
  write_file: 'edit',
  edit_file: 'edit',
  delete_file: 'edit',
  rename_file: 'edit',
  create_folder: 'edit',

  // 搜索
  web_search: 'search',

  // 查看网页
  extract_webpage: 'webpage',
  save_webpage: 'webpage',

  // 更新记忆
  update_memory: 'memory_update',
  update_project_memory: 'memory_update',

  // 查看记忆
  recall_project_memory: 'memory_read',

  // 回顾对话
  conversation_search: 'conversation',
  conversation_review: 'conversation',

  // 子智能体
  create_sub_agent: 'sub_agent'
};

const CATEGORY_LABELS: Record<ToolCategory, (count: number) => string> = {
  read: (n) => `读取了 ${n} 个文件`,
  command: (n) => `运行了 ${n} 个指令`,
  edit: (n) => `编辑了 ${n} 次文件`,
  search: (n) => `搜索了 ${n} 次`,
  webpage: (n) => `查看了 ${n} 次网页`,
  memory_update: (n) => `更新了 ${n} 次记忆`,
  memory_read: (n) => `查看了 ${n} 次记忆`,
  conversation: (n) => `回顾了 ${n} 次对话`,
  sub_agent: (n) => `创建了 ${n} 个子智能体`,
  other: (n) => `执行了 ${n} 次其他操作`
};

const CATEGORY_ORDER: ToolCategory[] = [
  'read',
  'command',
  'edit',
  'search',
  'webpage',
  'memory_update',
  'memory_read',
  'conversation',
  'sub_agent',
  'other'
];

const getToolCategory = (action: Action): ToolCategory => {
  const name = action.tool?.name;
  if (typeof name !== 'string') return 'other';
  return TOOL_CATEGORY_MAP[name] || 'other';
};

// 运行中：显示当前最新步骤的意图或状态（单行，由 CSS 截断）
const getRunningSummaryText = (actions: Action[]): string => {
  const streamingActions = actions.filter((a) => a.streaming);

  let currentStep;
  if (streamingActions.length > 0) {
    currentStep = streamingActions[streamingActions.length - 1];
  } else {
    const toolActions = actions.filter((a) => a.type === 'tool');
    if (toolActions.length > 0) {
      currentStep = toolActions[toolActions.length - 1];
    } else {
      currentStep = actions[actions.length - 1];
    }
  }

  if (!currentStep) return '';

  if (currentStep.type === 'thinking') {
    const content = currentStep.content || '';
    return getFirstLine(content);
  }

  if (currentStep.type === 'tool') {
    const tool = currentStep.tool;
    if (!tool) return '';

    const intentEnabled = personalizationStore.form.tool_intent_enabled;
    const intentText = tool.intent_rendered || tool.intent_full || '';

    if (intentEnabled && intentText) {
      return getFirstLine(intentText);
    }

    if (tool.status === 'preparing') {
      return `准备调用 ${tool.name || '工具'}...`;
    }
    if (tool.status === 'running') {
      return `正在调用 ${tool.name || '工具'}...`;
    }
    if (tool.status === 'completed') {
      return tool.display_name || tool.name || '工具执行完成';
    }
    return currentStep.streaming ? '正在执行工具...' : tool.display_name || tool.name || '执行工具';
  }

  return '';
};

// 完成后：汇总本组所有工具的执行次数
const getCompletedSummaryText = (actions: Action[]): string => {
  const toolActions = actions.filter((a) => a.type === 'tool');

  if (toolActions.length === 0) {
    // 没有工具时回退到最后一条思考的单行内容
    const lastThinking = actions.filter((a) => a.type === 'thinking').pop();
    if (lastThinking) {
      return getFirstLine(lastThinking.content || '');
    }
    return '';
  }

  // 只有一个工具时，直接显示该工具的 intent/名称
  if (toolActions.length === 1) {
    return getToolSummaryText(toolActions[0]);
  }

  const counts: Record<ToolCategory, number> = {
    read: 0,
    command: 0,
    edit: 0,
    search: 0,
    webpage: 0,
    other: 0
  };

  toolActions.forEach((action) => {
    counts[getToolCategory(action)]++;
  });

  const parts: string[] = [];
  CATEGORY_ORDER.forEach((category) => {
    const count = counts[category];
    if (count > 0) {
      parts.push(CATEGORY_LABELS[category](count));
    }
  });

  return parts.join('，');
};

// 摘要行统一入口：运行中显示实时进度，完成后显示统计总结
const getSummaryLineText = (actions: Action[], groupId: string): string => {
  if (isSummaryRunning(actions, groupId)) {
    return getRunningSummaryText(actions);
  }
  return getCompletedSummaryText(actions);
};

// 判断摘要组是否正在运行（显示加载动画还是对勾）
const isSummaryRunning = (actions: Action[], groupId: string) => {
  if (!props.conversationRunning || !props.isLatestMessage) {
    return false;
  }

  // 找到当前 group 在 blockGroups 中的索引
  const currentIndex = blockGroups.value.findIndex((g) => g.id === groupId);
  if (currentIndex === -1) return false;

  // 检查后面是否有文本输出
  const hasTextAfter = blockGroups.value.slice(currentIndex + 1).some((g) => g.type === 'text');

  // 只有当后面有文本输出时，才显示对勾（说明这个摘要组已经完成并开始输出了）
  // 否则一直显示加载动画（即使工具执行完了，也要等下一个步骤或文本输出）
  return !hasTextAfter;
};

// 获取摘要组的所有步骤（用于展开显示）
const getSummarySteps = (actions: Action[]) => {
  return actions.map((action, idx) => ({
    id: action.id || action.blockId || `step-${idx}`,
    type: action.type as 'thinking' | 'tool',
    content: action.content || '',
    streaming: action.streaming || false,
    action
  }));
};

const toggleExpand = (groupId: string) => {
  if (expandedGroups.value.has(groupId)) {
    expandedGroups.value.delete(groupId);
    emit('group-toggle', { groupId, expanded: false });

    // 折叠后，取消注册该组中的思考内容 ref
    nextTick(() => {
      const group = blockGroups.value.find((g) => g.id === groupId);
      if (group && group.actions) {
        group.actions.forEach((action) => {
          if (action.type === 'thinking') {
            const blockId = action.id || action.blockId;
            if (blockId && typeof props.registerThinkingRef === 'function') {
              props.registerThinkingRef(blockId, null);
            }
          }
        });
      }
    });
  } else {
    expandedGroups.value.add(groupId);
    emit('group-toggle', { groupId, expanded: true });

    // 展开后，注册该组中的思考内容 ref
    nextTick(() => {
      const group = blockGroups.value.find((g) => g.id === groupId);
      if (group && group.actions) {
        group.actions.forEach((action) => {
          if (action.type === 'thinking') {
            const blockId = action.id || action.blockId;
            if (blockId) {
              const el = thinkingRefs.get(blockId);
              if (el && typeof props.registerThinkingRef === 'function') {
                props.registerThinkingRef(blockId, el);
                // 如果正在 streaming，滚动到底部
                if (action.streaming) {
                  el.scrollTop = el.scrollHeight;
                }
              }
            }
          }
        });
      }
    });
  }
};

const getStepIconStyle = (step: Step) => {
  if (step.type === 'thinking') {
    return props.iconStyle ? props.iconStyle('brain') : {};
  } else if (step.type === 'tool' && step.action.tool) {
    const iconKey = props.getToolIcon ? props.getToolIcon(step.action.tool) : 'terminal';
    return props.iconStyle ? props.iconStyle(iconKey) : {};
  }
  return props.iconStyle ? props.iconStyle('terminal') : {};
};

const getToolName = (action: Action) => {
  const tool = action.tool;
  if (!tool) return '执行工具';

  const intentEnabled = personalizationStore.form.tool_intent_enabled;
  const intentText = tool.intent_rendered || tool.intent_full || '';

  if (intentEnabled && intentText) {
    // 开启intent模式且有intent时，只显示intent
    return intentText;
  }

  // 没有intent或未开启intent模式时显示状态
  if (tool.status === 'preparing') {
    return `准备调用 ${tool.name || '工具'}...`;
  }
  if (tool.status === 'running') {
    return `正在调用 ${tool.name || '工具'}...`;
  }
  if (tool.status === 'completed') {
    return '工具执行完成';
  }
  return tool.name || '执行工具';
};

const getToolIntent = (action: Action) => {
  return action.tool?.intent || '';
};

const renderToolResult = (action: Action) => {
  if (personalizationStore.form.enhanced_tool_display) {
    const rendered = renderEnhancedToolResult(
      action,
      props.formatSearchTopic || (() => ''),
      props.formatSearchTime || (() => ''),
      props.formatSearchDomains || (() => '')
    );
    if (rendered) return rendered;
  }

  const result = action.tool?.result;
  if (!result) return '<div class="result-item">执行中...</div>';

  if (typeof result === 'string') {
    return `<div class="result-item"><pre>${escapeHtml(result)}</pre></div>`;
  }

  return `<div class="result-item"><pre>${escapeHtml(JSON.stringify(result, null, 2))}</pre></div>`;
};

const renderContent = (content: string) => {
  if (!content) return '';
  return escapeHtml(content).replace(/\n/g, '<br>');
};

const escapeHtml = (text: string) => {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
};

const registerThinking = (key: string, el: Element | null) => {
  // 本地保存一份，用于展开/折叠时管理
  if (el instanceof HTMLElement) {
    thinkingRefs.set(key, el);
  } else {
    thinkingRefs.delete(key);
  }

  // 检查当前思考内容所在的摘要是否展开
  const group = blockGroups.value.find(
    (g) =>
      g.type === 'summary' && g.actions && g.actions.some((a) => a.id === key || a.blockId === key)
  );

  // 只有展开的摘要中的思考内容才注册到父组件
  if (group && expandedGroups.value.has(group.id)) {
    if (typeof props.registerThinkingRef === 'function') {
      props.registerThinkingRef(key, el);
    }
  }
};

const handleScroll = (blockId: string, event: Event) => {
  if (typeof props.handleThinkingScroll === 'function') {
    props.handleThinkingScroll(blockId, event);
  }
};

watch(
  () => props.actions,
  () => {
    syncToolReels();
  },
  { deep: true, immediate: true }
);

watch(
  () => [props.conversationRunning, props.isLatestMessage],
  () => {
    syncToolReels();
  }
);

onBeforeUnmount(() => {
  Object.keys(toolReelStates).forEach(clearToolReelTimers);
});
</script>

<style scoped>
.minimal-blocks-container {
  --chat-content-x: 0px;
  margin: 16px 0;
  width: 100%;
}

/* 摘要组 */
.summary-group {
  margin: 16px 0;
  width: 100%;
}

.sub-agent-system-group {
  margin: 0;
}

.sub-agent-system-group .sub-agent-system-summary-line {
  cursor: default;
}

.sub-agent-system-group .sub-agent-system-summary-line:hover {
  background-color: transparent;
}

/* 摘要行（只有文字） */
.summary-line-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 8px;
  width: 100%;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.summary-line-text:hover {
  background-color: var(--claude-panel);
}

.summary-content-wrapper {
  min-width: 0;
  font-size: 15px;
  color: var(--claude-text-secondary);
  line-height: 1.7;
  padding: 0;
}

.summary-preview {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  color: inherit;
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

.summary-tool-reel-window {
  position: relative;
  display: inline-block;
  width: min(100%, 36em);
  height: 26px;
  overflow: hidden;
  vertical-align: top;
}

.summary-tool-reel-window::before,
.summary-tool-reel-window::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 6px;
  pointer-events: none;
}

.summary-tool-reel-window::before {
  top: 0;
  background: linear-gradient(180deg, var(--surface-base), transparent);
}

.summary-tool-reel-window::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--surface-base), transparent);
}

.summary-tool-reel-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  will-change: transform;
}

.summary-tool-reel-track.rolling {
  transition: transform 520ms cubic-bezier(0.22, 0.9, 0.25, 1);
}

.summary-tool-reel-track.settle {
  transition: transform 170ms cubic-bezier(0.2, 0.72, 0.26, 1);
}

.summary-tool-reel-item {
  display: block;
  height: 26px;
  line-height: 26px;
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-status-icon {
  flex-shrink: 0;
  margin-left: 0;
  align-self: start;
  margin-top: calc((1.7em - 18px) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.check-icon {
  color: var(--claude-text-tertiary);
  width: 18px;
  height: 18px;
}

/* 运行中文本：按字符依次闪烁 */
.summary-line-text.running .summary-char {
  display: inline-block;
  color: var(--claude-text-secondary);
  animation: summaryPass 2s ease-in-out infinite;
}

@keyframes summaryPass {
  0%,
  100% {
    color: var(--claude-text-secondary);
  }
  50% {
    color: var(--claude-accent);
  }
}

/* 步骤容器 */
.steps-container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 8px;
  width: 100%;
  padding: 0;
}

/* 桌面端与正式文本输出左右内边距保持一致 */
@media (min-width: 769px) {
  .summary-line-text,
  .steps-container {
    padding: 0 var(--chat-content-x);
  }
}

.steps-wrapper {
  overflow: hidden;
  min-height: 0;
}

.steps-container.show {
  grid-template-rows: 1fr;
}

/* 步骤项 */
.step-item {
  display: flex;
  gap: 12px;
}

.step-item:not(:last-child) {
  margin-bottom: 16px;
}

.step-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
  align-self: stretch; /* 填充整个 step-item 的高度 */
}

.step-icon {
  flex-shrink: 0;
  color: var(--claude-text-tertiary); /* 和竖线、字体一样的灰色 */
}

.step-line {
  width: 2px;
  flex: 1; /* 自动填充剩余空间 */
  background: var(--claude-border);
  margin-top: 4px;
  margin-bottom: -14px; /* 延伸到下一个 step-item，保持上下距离 SVG 相等 */
  flex-shrink: 0;
}

/* 最后一个步骤隐藏竖线 */
.step-item:last-child .step-line {
  display: none;
}

.step-content {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.step-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--claude-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.step-body {
  font-size: 14px;
  color: var(--claude-text-secondary);
  line-height: 1.7;
}

/* 思考内容 */
.thinking-content {
  color: var(--claude-text-secondary);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: calc(1.7em * 6); /* 6行 */
  overflow-y: auto;
  margin: 0;
  padding: 0;
  display: block;
  /* 让第一行文字中心和 SVG 中心对齐：向上移动半个行高减去半个字高 */
  margin-top: calc((1em - 1.7em) / 2);
  /* 滚动条样式（参考 git 状态侧边栏文件列表，滚动槽透明贴合灰色底色） */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: color-mix(in srgb, var(--claude-text-secondary) 55%, transparent) transparent;
}

.thinking-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.thinking-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
  margin: 8px;
}

.thinking-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--claude-text-secondary) 55%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* 工具内容 */
.step-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--claude-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
  padding: 0;
  line-height: 1;
}
.tool-intent {
  font-weight: 500;
  color: var(--claude-text);
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.7;
  /* 让第一行文字紧贴顶部 */
  margin-top: calc((1.7em - 1em) / -2);
}

.tool-result {
  background: var(--claude-panel);
  border: 1px solid var(--claude-border);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  max-height: 200px; /* 约为原来卡片的三分之一 */
  overflow-y: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.tool-result::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tool-result * {
  /* 隐藏所有子元素的滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tool-result *::-webkit-scrollbar {
  display: none;
}

.tool-result pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  color: var(--claude-text-secondary);
}

.result-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--claude-border);
}

.result-item:last-child {
  border-bottom: none;
}

/* 文本输出 */
.text-output {
  margin: 16px 0;
  padding: 0;
}

@media (max-width: 768px) {
  .text-output {
    margin: 16px 0;
  }
}

.text-content {
  font-size: 15px;
  line-height: 1.7;
  color: var(--claude-text);
  word-wrap: break-word;
}
</style>
