content-find-agent-new/web2/features/QueryWalkPage.tsx

"use client";

import Link from "next/link";
import { ArrowRight, ExternalLink, Hash, ListVideo, Search, UserSearch } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { AppShell } from "@/components/AppShell";
import { EmptyState, ErrorState, LoadingState } from "@/components/StateBlocks";
import { getFlowLedgerWalk } from "@/lib/api/client";
import type { FlowLedgerWalkResponse, RawRecord } from "@/lib/api/types";
import { methodLabel } from "@/lib/flow-ledger/business";
import { asRecord, text } from "@/lib/flow-ledger/format";

type WalkGroup = {
  id: string;
  kind: "video" | "query";
  video?: RawRecord;
  title: string;
  author: string;
  decisionLabel: string;
  terminalLabel: string;
  actions: RawRecord[];
};

type WalkTree = {
  roots: WalkGroup[];
  childrenByActionId: Map<string, WalkGroup[]>;
  totalGroups: number;
};

export function QueryWalkPage({ runId, queryId }: { runId: string; queryId: string }) {
  const [data, setData] = useState<FlowLedgerWalkResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const debug = new URLSearchParams(window.location.search).get("debug") === "1";
      setData(await getFlowLedgerWalk(runId, queryId, debug));
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setLoading(false);
    }
  }, [queryId, runId]);

  useEffect(() => {
    void load();
  }, [load]);

  const query = asRecord(data?.query);
  const actions = useMemo(() => [...(data?.actions || [])].sort((a, b) => actionDepth(a) - actionDepth(b)), [data?.actions]);
  const tree = useMemo(() => buildWalkTree(actions), [actions]);

  return (
    <AppShell title="继续扩展过程" subtitle={query.text ? `搜索词：${text(query.text)}` : "查看系统有没有继续向外找内容"} runId={runId} showBack onRefresh={load}>
      {loading ? <LoadingState /> : null}
      {error ? <ErrorState message={error} /> : null}
      {!loading && !error && !actions.length ? <EmptyState label="这个搜索词本轮没有继续扩展" /> : null}
      {data ? (
        <>
          <details className="declarations" open>
            <summary>
              <span className="kw">游走</span> <b>{text(query.text, "搜索词待确认")}</b>
              <span className="decl-purpose">{methodLabel(text(query.method, ""))}</span>
              <span className="tag-mini">{tree.totalGroups ? `${tree.totalGroups} 个起点` : "没有继续扩展"}</span>
            </summary>
            <div className="decl-body">
              <Summary label="怎么看" value="每个色块是一条起点视频；视频下面缩进的路线，就是它向外游走的标签、作者或翻页；如果带回的视频又继续游走，会继续向内缩进。" />
              <Summary label="本轮概况" value={`已执行 ${Number(data.summary.success_count || 0)} 条路线 · 未执行 ${Number(data.summary.skipped_count || 0)} 条路线 · 新增搜索词 ${Number(data.summary.extension_query_count || 0)} 个`} />
            </div>
          </details>

          <section className="walk-ledger-board">
            <div className="walk-ledger-root">
              <span className="chip dark">当前搜索词</span>
              <strong>{text(query.text, "搜索词待确认")}</strong>
              <small>{methodLabel(text(query.method, ""))}</small>
            </div>
            <div className="walk-ledger-groups">
              {tree.roots.map((group, index) => (
                <WalkGroupCard group={group} index={index} runId={runId} tree={tree} level={0} key={group.id} />
              ))}
            </div>
          </section>
        </>
      ) : null}
    </AppShell>
  );
}

function Summary({ label, value }: { label: string; value: string }) {
  return (
    <div className="decl-section">
      <div className="decl-label">{label}</div>
      <div className="decl-row">{value}</div>
    </div>
  );
}

function WalkGroupCard({
  group,
  index,
  runId,
  tree,
  level,
  seen = new Set<string>()
}: {
  group: WalkGroup;
  index: number;
  runId: string;
  tree: WalkTree;
  level: number;
  seen?: Set<string>;
}) {
  const routeActions = group.actions.filter((action) => !isTerminalEdge(text(action.edge_id, "")));
  const titleParts = splitTitleAndTags(group.title);
  const score = group.video ? scoreSummary(asRecord(group.video.decision).score_items) : "";
  const nextSeen = new Set(seen).add(group.id);

  return (
    <article className={`walk-story-block level-${Math.min(level, 3)}`} id={`source-${encodeURIComponent(group.id)}`}>
      <header className="walk-story-head">
        <span className="walk-source-kicker">{sourceKicker(group, index, level)}</span>
        <div className="walk-story-title">
          <h2>{titleParts.title}</h2>
          {titleParts.tags.length ? (
            <div className="walk-source-tags">
              {titleParts.tags.map((tag) => <span key={tag}>{tag}</span>)}
            </div>
          ) : null}
        </div>
        <VideoLinks video={group.video} runId={runId} />
      </header>

      <div className="walk-source-facts">
        {group.kind === "video" ? <Fact label="作者" value={group.author} /> : <Fact label="类型" value="搜索词级扩展" tone="info" />}
        {group.kind === "video" ? <Fact label="判断" value={group.decisionLabel} tone={decisionTone(group.decisionLabel)} /> : <Fact label="来源" value="从当前搜索词继续找" />}
        {score ? <Fact label="评分" value={score} /> : null}
        {group.terminalLabel ? <Fact label="处理" value={group.terminalLabel} /> : null}
      </div>

      <section className="walk-story-routes" aria-label={`${group.title} 的游走路线`}>
        <div className="walk-story-routes-label">{group.kind === "video" ? "从这条视频继续往外找" : "从这个搜索词继续往外找"}</div>
        {routeActions.length ? routeActions.map((action, actionIndex) => (
          <WalkRouteCard
            action={action}
            runId={runId}
            sourceId={group.id}
            tree={tree}
            level={level}
            seen={nextSeen}
            key={`${text(action.id, "walk")}-${actionIndex}`}
          />
        )) : <div className="walk-no-route">{group.kind === "video" ? "这条视频没有继续产生标签、作者或翻页路线。" : "这个搜索词没有继续翻页或产生新路线。"}</div>}
      </section>
    </article>
  );
}

function Fact({ label, value, tone = "plain" }: { label: string; value: string; tone?: string }) {
  return (
    <div className={`walk-fact ${tone}`}>
      <span>{label}</span>
      <strong>{value || "待确认"}</strong>
    </div>
  );
}

function WalkRouteCard({
  action,
  runId,
  sourceId,
  tree,
  level,
  seen
}: {
  action: RawRecord;
  runId: string;
  sourceId: string;
  tree: WalkTree;
  level: number;
  seen: Set<string>;
}) {
  const edgeId = text(action.edge_id, "");
  const targetQuery = asRecord(action.target_query);
  const targetVideos = Array.isArray(action.target_videos) ? action.target_videos.filter(isRecord) : [];
  const status = text(action.status, "");
  const isSuccess = status === "success";
  const routeName = routeLabel(edgeId);
  const gate = gateText(action, isSuccess);
  const firstNode = routeTriggerNode(action);
  const secondNode = routeResultNode(action, targetQuery, targetVideos, isSuccess);
  const childGroups = (tree.childrenByActionId.get(actionKey(action)) || []).filter((group) => !seen.has(group.id));

  return (
    <article className={`walk-tree-route ${edgeTone(edgeId)} ${isSuccess ? "success" : "stopped"}`} id={`route-${encodeURIComponent(text(action.id, routeName))}`}>
      <div className="walk-tree-route-dot" />
      <div className="walk-tree-route-body">
        <div className="walk-route-head">
          <span className="walk-edge-icon">{edgeIcon(edgeId)}</span>
          <div>
            <strong>{routeName}</strong>
            <p>{isSuccess ? successSentence(action, targetQuery, targetVideos) : stoppedSentence(action)}</p>
          </div>
          <span className={`chip ${isSuccess ? "green" : "yellow"}`}>{isSuccess ? "已执行" : "未执行"}</span>
        </div>

        <div className="walk-flow" aria-label={`${routeName} 的链路`}>
          <FlowNode label="从" value={text(action.from_label, "").includes("搜索词") ? "这个搜索词" : "这条视频"} href={`#source-${encodeURIComponent(sourceId)}`} />
          <FlowArrow />
          <FlowNode label={firstNode.label} value={firstNode.value} />
          <FlowArrow />
          <FlowNode label={secondNode.label} value={secondNode.value} href={secondNode.href} tone={isSuccess ? "strong" : "muted"} />
        </div>

        <div className="walk-route-bottom">
          <span className={`walk-gate ${isSuccess ? "pass" : "stop"}`}>{gate}</span>
          {targetQuery.id ? (
            <Link className="walk-jump-button" href={`/runs/${encodeURIComponent(runId)}/queries/${encodeURIComponent(text(targetQuery.id, ""))}/videos`}>
              查看带回视频
            </Link>
          ) : null}
          <a className="walk-jump-button" href={`#source-${encodeURIComponent(sourceId)}`}>回到起点</a>
        </div>

        {targetVideos.length ? (
          <div className="walk-result-videos">
            <div className="walk-result-title">
              <ListVideo size={15} />
              <span>带回视频 {targetVideos.length} 条</span>
            </div>
            {targetVideos.slice(0, 4).map((video) => (
              <div className="walk-result-video" key={text(video.id, text(video.title, "video"))}>
                <Link className="walk-result-video-main" href={`/runs/${encodeURIComponent(runId)}/videos/${encodeURIComponent(text(video.id, ""))}`}>
                  <b>{text(video.title, "无标题视频")}</b>
                  <small>{text(video.author, "未知作者")} · {text(asRecord(video.decision).label, "未判断")}</small>
                </Link>
                <VideoLinks video={video} runId={runId} compact />
              </div>
            ))}
          </div>
        ) : null}

        {childGroups.length ? (
          <div className="walk-nested-children">
            <div className="walk-nested-label">带回的视频继续触发下一层游走</div>
            {childGroups.map((group, childIndex) => (
              <WalkGroupCard
                group={group}
                index={childIndex}
                runId={runId}
                tree={tree}
                level={level + 1}
                seen={seen}
                key={`${text(action.id, "walk")}-${group.id}`}
              />
            ))}
          </div>
        ) : null}
      </div>
    </article>
  );
}

function FlowNode({ label, value, href, tone = "plain" }: { label: string; value: string; href?: string; tone?: string }) {
  const content = (
    <>
      <span>{label}</span>
      <strong>{value}</strong>
    </>
  );
  if (href) {
    return <Link className={`walk-flow-node ${tone}`} href={href}>{content}</Link>;
  }
  return <div className={`walk-flow-node ${tone}`}>{content}</div>;
}

function FlowArrow() {
  return (
    <span className="walk-flow-arrow" aria-hidden="true">
      <ArrowRight size={15} />
    </span>
  );
}

function buildWalkTree(actions: RawRecord[]): WalkTree {
  const groups = buildWalkGroups(actions);
  const byId = new Map(groups.map((group) => [group.id, group]));
  const childrenByActionId = new Map<string, WalkGroup[]>();
  const childIds = new Set<string>();

  groups.forEach((group) => {
    group.actions.filter((action) => !isTerminalEdge(text(action.edge_id, ""))).forEach((action) => {
      const targetVideos = Array.isArray(action.target_videos) ? action.target_videos.filter(isRecord) : [];
      const children = targetVideos
        .map((video) => byId.get(text(video.id, "")))
        .filter((child): child is WalkGroup => child !== undefined && child.id !== group.id);
      if (!children.length) return;
      const uniqueChildren = [...new Map(children.map((child) => [child.id, child])).values()];
      childrenByActionId.set(actionKey(action), uniqueChildren);
      uniqueChildren.forEach((child) => childIds.add(child.id));
    });
  });

  const roots = groups.filter((group) => !childIds.has(group.id));
  return {
    roots: roots.length ? roots : groups,
    childrenByActionId,
    totalGroups: groups.length
  };
}

function buildWalkGroups(actions: RawRecord[]): WalkGroup[] {
  const groups = new Map<string, WalkGroup>();
  actions.forEach((action, index) => {
    const video = asRecord(action.source_video);
    const terminal = isTerminalEdge(text(action.edge_id, ""));
    const id = text(video.id) || `search-${text(action.from_label, "root")}-${index}`;
    if (!groups.has(id)) {
      const decision = asRecord(video.decision);
      groups.set(id, {
        id,
        kind: video.id ? "video" : "query",
        video: video.id ? video : undefined,
        title: video.id ? text(video.title, "无标题视频") : queryGroupTitle(action),
        author: video.id ? text(video.author, "未知作者") : "搜索词级扩展",
        decisionLabel: text(decision.label, "未判断"),
        terminalLabel: terminal ? terminalResultText(action) : "",
        actions: []
      });
    }
    const group = groups.get(id)!;
    if (terminal && !group.terminalLabel) group.terminalLabel = terminalResultText(action);
    group.actions.push(action);
  });
  return [...groups.values()];
}

function actionKey(action: RawRecord): string {
  return text(action.id || action.walk_action_id || `${text(action.edge_id, "walk")}-${text(action.from_label, "")}-${text(action.result, "")}`);
}

function queryGroupTitle(action: RawRecord): string {
  const from = cleanBusinessText(text(action.from_label, ""));
  if (from) return from.replace(/^从搜索词/, "搜索词").replace(/继续$/, "");
  return "当前搜索词";
}

function sourceKicker(group: WalkGroup, index: number, level: number): string {
  if (level) return `第 ${level + 1} 层起点`;
  return group.kind === "video" ? `起点视频 ${index + 1}` : "起点搜索词";
}

function VideoLinks({ video, runId, compact = false }: { video?: RawRecord; runId: string; compact?: boolean }) {
  if (!video || !video.id) return null;
  const platformUrl = text(video.platform_url, "");
  return (
    <div className={compact ? "walk-video-links compact" : "walk-video-links"}>
      <Link href={`/runs/${encodeURIComponent(runId)}/videos/${encodeURIComponent(text(video.id, ""))}`}>
        看详情
      </Link>
      {platformUrl ? (
        <a href={platformUrl} target="_blank" rel="noreferrer">
          <ExternalLink size={12} />
          抖音
        </a>
      ) : null}
    </div>
  );
}

function actionDepth(action: RawRecord): number {
  const value = Number(action.depth || 0);
  return Number.isFinite(value) ? value : 0;
}

function splitTitleAndTags(value: string): { title: string; tags: string[] } {
  const matches = value.match(/#[^\s#]+/g) || [];
  const title = value.replace(/#[^\s#]+/g, " ").replace(/\s+/g, " ").trim();
  return {
    title: title || value,
    tags: matches.slice(0, 6)
  };
}

function scoreSummary(value: unknown): string {
  const items = Array.isArray(value) ? value.filter(isRecord) : [];
  const visible = items.filter((item) => text(item.score_label));
  if (!visible.length) return "";
  return visible.slice(0, 3).map((item) => `${shortScoreLabel(text(item.label, "评分"))} ${text(item.score_label)}`).join(" / ");
}

function gateText(action: RawRecord, isSuccess: boolean): string {
  const score = scoreSummary(action.score_items);
  if (isSuccess) return score ? `通过：${firstScore(score)}` : "通过";
  const reason = cleanBusinessText(text(action.reason_label, ""));
  if (reason.includes("游走次数上限")) return "未执行：达到游走次数上限";
  if (reason.includes("复看")) return "未执行：待复看，需人工确认";
  if (reason.includes("不适合继续向外扩展")) return `未执行：${reason.replace(/^不适合继续向外扩展：?/, "") || "不适合继续向外扩展"}`;
  return `未执行：${reason || "没有继续扩展"}`;
}

function firstScore(value: string): string {
  return value.split("/")[0]?.trim() || value;
}

function terminalResultText(action: RawRecord): string {
  const edgeId = text(action.edge_id, "");
  if (edgeId === "decision_to_asset") return "入池";
  if (edgeId === "budget_downgrade") return "待复看";
  if (edgeId === "path_stop") return "淘汰并停止";
  return cleanBusinessText(text(action.result, "已记录"));
}

function isTerminalEdge(edgeId: string): boolean {
  return edgeId === "decision_to_asset" || edgeId === "budget_downgrade" || edgeId === "path_stop";
}

function routeLabel(edgeId: string): string {
  if (edgeId === "hashtag_to_query" || edgeId === "tag_query") return "从视频标签继续游走";
  if (edgeId === "author_to_works" || edgeId === "author_works" || edgeId === "video_to_author") return "从作者继续游走";
  if (edgeId === "query_next_page") return "翻页继续游走";
  return "继续游走";
}

function routeTriggerNode(action: RawRecord): { label: string; value: string } {
  const edgeId = text(action.edge_id, "");
  const raw = cleanBusinessText(text(action.trigger_label, ""));
  if (edgeId === "hashtag_to_query" || edgeId === "tag_query") {
    const value = raw.replace(/^候选标签：/, "").replace(/^标签搜索词：/, "#").replace(/^标签：/, "");
    return { label: raw.startsWith("候选标签") ? "候选标签" : "视频标签", value: value || "标签待确认" };
  }
  if (edgeId === "author_to_works" || edgeId === "author_works" || edgeId === "video_to_author") {
    return { label: "作者", value: raw.replace(/^作者：/, "") || "作者待确认" };
  }
  if (edgeId === "query_next_page") {
    return { label: "原搜索", value: raw.replace(/^翻下一页：/, "") || "下一页" };
  }
  return { label: "触发", value: raw || "当前内容" };
}

function routeResultNode(
  action: RawRecord,
  targetQuery: RawRecord,
  targetVideos: RawRecord[],
  isSuccess: boolean
): { label: string; value: string; href?: string } {
  const edgeId = text(action.edge_id, "");
  if (!isSuccess) return { label: "停止", value: "没有继续带回新内容" };
  if (targetQuery.id) {
    const textValue = text(targetQuery.text, "搜索词待确认");
    const label = edgeId === "query_next_page" ? "下一页" : "新搜索词";
    return { label, value: textValue };
  }
  if (targetVideos.length) return { label: "带回", value: `${targetVideos.length} 条视频` };
  return { label: "完成", value: cleanBusinessText(text(action.result, "已执行")) };
}

function successSentence(action: RawRecord, targetQuery: RawRecord, targetVideos: RawRecord[]): string {
  const edgeId = text(action.edge_id, "");
  if (edgeId === "query_next_page") {
    const from = cleanBusinessText(text(action.from_label, "当前搜索词")).replace(/继续$/, "");
    return `${from}翻到下一页，带回 ${targetVideos.length} 条视频。`;
  }
  if (edgeId === "hashtag_to_query" || edgeId === "tag_query") {
    const queryText = text(targetQuery.text, "");
    return queryText ? `用标签生成搜索词《${queryText}》，带回 ${targetVideos.length} 条视频。` : `从标签继续搜，带回 ${targetVideos.length} 条视频。`;
  }
  if (edgeId === "author_to_works" || edgeId === "author_works" || edgeId === "video_to_author") {
    return `查看作者更多作品，带回 ${targetVideos.length} 条视频。`;
  }
  return cleanBusinessText(text(action.result, "已执行"));
}

function stoppedSentence(action: RawRecord): string {
  return gateText(action, false);
}

function shortScoreLabel(label: string): string {
  if (label === "是否契合需求") return "需求";
  if (label === "平台表现") return "平台";
  return label;
}

function cleanBusinessText(value: string): string {
  if (!value || value === "系统原因待补充" || value === "这一步没有记录额外原因") return "";
  return value.replaceAll("“", "《").replaceAll("”", "》");
}

function decisionTone(value: string): string {
  if (value === "入池") return "good";
  if (value === "待复看") return "warn";
  if (value === "淘汰") return "bad";
  return "plain";
}

function edgeTone(edgeId: string): string {
  if (edgeId === "hashtag_to_query" || edgeId === "tag_query") return "tag";
  if (edgeId === "author_to_works" || edgeId === "author_works" || edgeId === "video_to_author") return "author";
  if (edgeId === "query_next_page") return "page";
  return "stop";
}

function edgeIcon(edgeId: string) {
  if (edgeId === "hashtag_to_query" || edgeId === "tag_query") return <Hash size={15} />;
  if (edgeId === "author_to_works" || edgeId === "author_works" || edgeId === "video_to_author") return <UserSearch size={15} />;
  return <Search size={15} />;
}

function isRecord(value: unknown): value is RawRecord {
  return typeof value === "object" && value !== null;
}