import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import userEvent from "@testing-library/user-event";
import { AnswerUiView } from "./answer-ui-view";
import { parseAnswerUiBlock } from "./contract";
vi.mock("echarts-for-react", () => ({ default: () => <div aria-label="测试图形" /> }));

function block(type: string, props: Record<string, unknown>) {
  const parsed = parseAnswerUiBlock({
    version: "answer-ui@1",
    block_id: "test",
    fallback_text: "演练",
    spec: { root: "node", elements: { node: { type, props, children: [] } } }
  });
  if (!parsed) throw new Error("invalid test fixture");
  return parsed;
}

function taskBlock(includeData = true) {
  const children = ["metric", ...(includeData ? ["table"] : []), "evidence", "form"];
  const fixture = {
    version: "answer-ui@1", block_id: "task", fallback_text: "演练分析",
    spec: { root: "root", elements: {
      root: { type: "Stack", props: { columns: "one", gap: "normal" }, children },
      metric: { type: "Metric", props: { label: "当前压力", value: "0.2130", unit: "MPa", source: "监测快照" }, children: [] },
      ...(includeData ? { table: { type: "Table", props: { title: "入口记录", columns: ["对象", "压力（MPa）"], rows: [["北区入口", "0.2130"], ["南区入口", "0.2870"]] }, children: [] } } : {}),
      evidence: { type: "Evidence", props: { title: "读数依据", summary: "仅用于演练", source: "测试查询", kind: "demo", evidence_id: "DEMO-26", observed_at: null }, children: [] },
      form: { type: "FollowUpForm", props: { title: "核验资料", description: "主动补充", fields: [{ name: "record", label: "现场记录", kind: "text", required: true }] }, children: [] }
    } }
  };
  const parsed = parseAnswerUiBlock(fixture);
  if (!parsed) throw new Error("invalid task fixture");
  return parsed;
}
describe("local interactive answer renderer", () => {
  it("shows navigation for long answers while keeping short metric and evidence replies quiet", () => {
    const fixture = taskBlock(false);
    fixture.spec.elements.root.children = ["metric", "evidence"];
    delete fixture.spec.elements.form;
    const { rerender } = render(<AnswerUiView block={fixture} />);
    expect(screen.getByRole("group", { name: "当前压力" })).toBeVisible();
    expect(screen.queryByRole("navigation", { name: "回答内容导航" })).not.toBeInTheDocument();
    const longer = structuredClone(fixture);
    longer.spec.elements.evidence.props.summary = "待核对的监测资料。".repeat(150);
    rerender(<AnswerUiView block={longer} />);
    expect(screen.getByRole("navigation", { name: "回答内容导航" })).toBeVisible();
  });

  it("uses a single form and evidence card's own headings without fixed wrapper instructions", () => {
    render(<AnswerUiView block={taskBlock()} onSubmit={vi.fn()} />);
    expect(screen.getByLabelText("现场记录（必填）")).toBeVisible();
    expect(screen.getByRole("button", { name: /读数依据/ })).toBeVisible();
    expect(screen.queryByRole("button", { name: "收起补充资料" })).not.toBeInTheDocument();
    expect(screen.queryByRole("button", { name: "收起核查依据" })).not.toBeInTheDocument();
    expect(screen.queryByText("直接探索已加载数据")).not.toBeInTheDocument();
    expect(screen.queryByText("区分记录、推断与用户资料")).not.toBeInTheDocument();
  });

  it("adapts response and report composition without replacing a reader's form draft", async () => {
    const user = userEvent.setup();
    const fixture = taskBlock();
    fixture.spec.elements.root.props = { columns: "one", gap: "normal", intent: "response", density: "compact" };
    const { rerender, container } = render(<AnswerUiView block={fixture} onSubmit={vi.fn()} />);
    const editor = screen.getByLabelText("现场记录（必填）");
    await user.type(editor, "保留的现场草稿");
    expect(container.querySelector("[data-answer-task-layout]")).toBeNull();
    const report = { ...fixture, spec: { ...fixture.spec, elements: { ...fixture.spec.elements,
      root: { ...fixture.spec.elements.root, props: { columns: "one", gap: "normal", intent: "report", density: "comfortable" } }
    } } };
    rerender(<AnswerUiView block={report} onSubmit={vi.fn()} />);
    expect(container.querySelector("[data-answer-task-layout]")).not.toBeNull();
    expect(screen.getByLabelText("现场记录（必填）")).toBe(editor);
    expect(editor).toHaveValue("保留的现场草稿");
  });
  it("renders evidence-bound result states without treating historical results as live alerts", () => {
    const fixture = (status: string) => block("Result", { title: "管道定位结果", summary: "已定位 3 根管道；高亮尚未确认。", status, source: "地图定位回执" });
    const { rerender } = render(<AnswerUiView block={fixture("partial")} />);
    const result = screen.getByRole("group", { name: "管道定位结果" });
    expect(result).toHaveTextContent("部分完成");
    expect(result).toHaveTextContent("依据：地图定位回执");
    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
    expect(screen.queryByRole("button")).not.toBeInTheDocument();
    for (const [status, label] of [["success", "成功"], ["unconfirmed", "未确认"], ["error", "失败"]]) {
      rerender(<AnswerUiView block={fixture(status)} />);
      expect(result).toHaveTextContent(label);
      expect(result).toHaveAttribute("data-result-status", status);
    }
  });
  it("uses the supplied note title without changing the warning meaning", () => {
    render(<AnswerUiView block={block("Text", { text: "当前工具未提供高亮操作。", tone: "warning", title: "能力限制" })} />);
    expect(screen.getByRole("note")).toHaveTextContent("能力限制");
    expect(screen.getByRole("note")).not.toHaveTextContent("注意事项");
  });
  it("shows data and evidence without row selection, quoting or analysis controls", async () => {
    const user = userEvent.setup();
    const submit = vi.fn();
    render(<AnswerUiView block={taskBlock()} onSubmit={submit} />);
    expect(screen.getByRole("group", { name: "当前压力" })).toHaveTextContent("0.2130MPa");
    expect(screen.getByRole("table")).toHaveTextContent("北区入口");
    expect(screen.getAllByRole("columnheader")).toHaveLength(2);
    await user.click(screen.getByRole("button", { name: /读数依据.*测试查询/ }));
    await waitFor(() => expect(screen.getByText("仅用于演练")).toBeVisible());
    expect(screen.getByText("DEMO-26")).toBeVisible();
    expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
    expect(screen.queryByRole("button", { name: /加入分析|针对.*提问|取消选行/ })).not.toBeInTheDocument();
    expect(screen.queryByRole("region", { name: "分析内容篮" })).not.toBeInTheDocument();
    expect(submit).not.toHaveBeenCalled();
  });

  it("keeps the same form when more data arrives and support sections collapse", async () => {
    const user = userEvent.setup();
    const { rerender } = render(<AnswerUiView block={taskBlock(false)} onSubmit={vi.fn()} />);
    const editor = screen.getByLabelText("现场记录（必填）");
    await user.type(editor, "未发送的现场草稿");
    const grouped = taskBlock();
    grouped.spec.elements.root.children = [...(grouped.spec.elements.root.children ?? []), "extra-form"];
    grouped.spec.elements["extra-form"] = { ...grouped.spec.elements.form, props: {
      title: "其他资料", description: "可选补充", fields: [{ name: "extra", label: "其他记录", kind: "text", required: false }]
    } };
    rerender(<AnswerUiView block={grouped} onSubmit={vi.fn()} />);
    expect(screen.getByLabelText("现场记录（必填）")).toBe(editor);
    expect(editor).toHaveValue("未发送的现场草稿");
    await user.click(screen.getByRole("button", { name: "收起补充资料" }));
    expect(editor.closest("[data-answer-reveal]")).toHaveAttribute("inert");
    await waitFor(() => expect(editor).not.toBeVisible());
    await user.click(screen.getByRole("button", { name: "展开补充资料" }));
    await waitFor(() => expect(editor).toBeVisible());
    expect(editor).toHaveValue("未发送的现场草稿");
    await user.click(screen.getByRole("button", { name: "收起补充资料" }));
    const updated = taskBlock();
    updated.spec.elements.table.props.rows = [["新增入口", "0.24"]];
    rerender(<AnswerUiView block={updated} onSubmit={vi.fn()} />);
    expect(screen.getByLabelText("现场记录（必填）")).toBe(editor);
    await waitFor(() => expect(editor).toBeVisible());
    expect(editor).toHaveValue("未发送的现场草稿");
  });

  it("preserves long original cell values without requiring a selection or quote action", () => {
    const fixture = taskBlock();
    fixture.spec.elements.table.props.rows = Array.from({ length: 12 }, (_, index) => [String(index), "长".repeat(800)]);
    render(<AnswerUiView block={fixture} />);
    expect(screen.getAllByText("长".repeat(800))).toHaveLength(12);
    expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
    expect(screen.queryByRole("button", { name: /加入分析|针对.*提问/ })).not.toBeInTheDocument();
  });

  it("expresses supplied context and cautions as readable notes without announcing historical alerts", () => {
    const { rerender } = render(<AnswerUiView block={block("Text", {
      text: "压力记录尚未经过现场核验。", tone: "warning",
    })} />);
    expect(screen.getByRole("note")).toHaveTextContent("注意事项");
    expect(screen.getByRole("note")).toHaveTextContent("压力记录尚未经过现场核验。");
    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
    expect(screen.queryByRole("navigation")).not.toBeInTheDocument();
    rerender(<AnswerUiView block={block("Text", { text: "仅展示已加载的记录。", tone: "info" })} />);
    expect(screen.getByRole("note")).toHaveTextContent("补充说明");
    rerender(<AnswerUiView block={block("Text", { text: "普通回答", tone: "neutral" })} />);
    expect(screen.queryByRole("note")).not.toBeInTheDocument();
    expect(screen.getByText("普通回答")).toBeInTheDocument();
  });
  it("retains a metric's exact value, unit and source without action buttons", () => {
    render(<AnswerUiView block={block("Metric", {
      label: "当前压力", value: "0.3000", unit: "MPa", source: "已加载记录",
    })} />);
    const metric = screen.getByRole("group", { name: "当前压力" });
    expect(metric).toHaveTextContent("0.3000MPa");
    expect(metric).toHaveTextContent("来源：已加载记录");
    expect(screen.queryByRole("button")).not.toBeInTheDocument();
  });
  it("renders through json-render and lets readers inspect exact chart data with keyboard tabs", async () => {
    const user = userEvent.setup();
    render(
      <AnswerUiView
        block={block("Chart", {
          title: "演练压力",
          chart_type: "line",
          source: "演练数据",
          x_data: ["08:00", "09:00"],
          series: [{ name: "压力", data: [0.3, 0.2] }]
        })}
      />
    );
    await user.click(screen.getByRole("tab", { name: /^数据$/ }));
    expect(screen.getByRole("table")).toHaveTextContent("0.3");
    expect(screen.getByRole("table")).toHaveTextContent("09:00");
    expect(screen.getByRole("tab", { name: /^数据$/ })).toHaveAttribute("aria-selected", "true");
    await user.keyboard("{ArrowLeft}");
    expect(screen.getByRole("tab", { name: /^柱状$/ })).toHaveFocus();
    expect(screen.getByRole("tab", { name: /^柱状$/ })).toHaveAttribute("aria-selected", "true");
    expect(screen.queryByRole("table")).not.toBeInTheDocument();
  });
  it("runs map location only after a user click and reports missing IDs", async () => {
    const locate = vi
      .fn()
      .mockResolvedValue({ located_ids: ["DEMO-P001"], missing_ids: ["DEMO-P002"] });
    render(
      <AnswerUiView
        block={block("MapLocation", {
          label: "定位演练监测点",
          layer: "scada",
          feature_ids: ["DEMO-P001", "DEMO-P002"],
          source: "演练数据"
        })}
        onLocate={locate}
      />
    );
    expect(locate).not.toHaveBeenCalled();
    fireEvent.click(screen.getByRole("button", { name: "定位演练监测点" }));
    await waitFor(() => expect(screen.getByRole("status")).toHaveTextContent("另有 1 个未找到"));
    expect(locate).toHaveBeenCalledWith({
      layer: "scada",
      feature_ids: ["DEMO-P001", "DEMO-P002"]
    });
  });
  it("filters and sorts loaded rows without selecting or sending content", async () => {
    const user = userEvent.setup();
    const submit = vi.fn();
    render(<AnswerUiView block={block("Table", {
      title: "监测记录", columns: ["监测点", "压力"],
      rows: [["南站", "0.32"], ["北站", "0.21"], ["南站二号", "0.26"]]
    })} onSubmit={submit} />);
    await user.type(screen.getByRole("textbox", { name: "搜索监测记录" }), "南站");
    expect(screen.getByText("2 / 3 行")).toBeInTheDocument();
    await user.click(screen.getByRole("button", { name: "按压力排序" }));
    const rows = screen.getAllByRole("row");
    expect(rows[1]).toHaveTextContent("南站二号");
    expect(rows[1]).toHaveTextContent("0.26");
    expect(screen.queryByRole("checkbox")).not.toBeInTheDocument();
    expect(screen.queryByRole("button", { name: /加入分析|针对.*提问/ })).not.toBeInTheDocument();
    expect(submit).not.toHaveBeenCalled();
  });
  it("keeps form values after a failed submission", async () => {
    const user = userEvent.setup();
    render(<AnswerUiView block={block("FollowUpForm", {
      title: "现场事实", description: "用户填写",
      fields: [{ name: "detail", label: "记录", kind: "text", required: true }]
    })} onSubmit={async () => { throw new Error("暂未发送"); }} />);
    await user.type(screen.getByLabelText("记录（必填）"), "北站现场记录");
    await user.click(screen.getByRole("button", { name: "发送补充资料" }));
    expect(await screen.findByRole("status")).toHaveTextContent("暂未发送");
    expect(screen.getByLabelText("记录（必填）")).toHaveValue("北站现场记录");
  });
  it("starts blank, requires input and sends one user message without claiming evidence is saved", async () => {
    let complete!: () => void;
    const submit = vi.fn(
      () =>
        new Promise<void>((resolve) => {
          complete = resolve;
        })
    );
    render(
      <AnswerUiView
        block={block("FollowUpForm", {
          title: "补充现场资料",
          description: "由用户提供",
          fields: [{ name: "location", label: "现场位置", kind: "text", required: true }]
        })}
        onSubmit={submit}
      />
    );
    expect(screen.getByLabelText("现场位置（必填）")).toHaveValue("");
    fireEvent.submit(screen.getByRole("form", { name: "补充现场资料" }));
    expect(submit).not.toHaveBeenCalled();
    expect(screen.getByRole("status")).toHaveTextContent("请填写必填资料");
    fireEvent.change(screen.getByLabelText("现场位置（必填）"), {
      target: { value: "用户指定位置" }
    });
    fireEvent.submit(screen.getByRole("form", { name: "补充现场资料" }));
    expect(submit).toHaveBeenCalledTimes(1);
    expect(submit.mock.calls[0]).toEqual([expect.stringContaining("现场位置：用户指定位置")]);
    expect(screen.getByRole("button", { name: "正在发送…" })).toBeDisabled();
    complete();
    await waitFor(() =>
      expect(screen.getByRole("status")).toHaveTextContent("资料已发送，请查看 Agent 回复")
    );
  });
});