// @vitest-environment jsdom

import { beforeEach, describe, expect, test } from "vitest";

import {
  applyRowOrder,
  applyRowVisibility,
  findNextPageControl,
  isPageControlDisabled,
  readMarketPageSignature,
  renderMarketRowState,
  syncMarketTable
} from "../src/content/market/dom-sync";
import type { MarketRecord } from "../src/content/market/types";

describe("market-dom-sync", () => {
  beforeEach(() => {
    document.body.innerHTML = `
      <div data-market-table>
        <div data-market-header>
          <div data-market-header-cell="authorName">达人</div>
          <div data-market-header-cell="price21To60s">21-60s报价</div>
        </div>
        <div data-market-body>
          <div data-market-row data-author-id="a">
            <span data-market-field="authorName">Alpha</span>
            <span data-market-field="price21To60s">450000</span>
          </div>
          <div data-market-row data-author-id="b">
            <span data-market-field="authorName">Beta</span>
            <span data-market-field="price21To60s">70000</span>
          </div>
        </div>
      </div>
    `;
  });

  test("injects the two header cells and per-row cells", () => {
    const table = syncMarketTable(document);

    expect(table).not.toBeNull();
    expect(
      document.querySelector('[data-market-header-cell="selection"]')
    ).not.toBeNull();
    expect(
      document.querySelector('[data-market-header-cell="singleVideoAfterSearchRate"]')
    ).not.toBeNull();
    expect(
      document.querySelector(
        '[data-market-header-cell="personalVideoAfterSearchRate"]'
      )
    ).not.toBeNull();
    expect(
      document.querySelector('[data-market-header-cell="afterViewSearchRate"]')
    ).not.toBeNull();
    expect(
      document.querySelector('[data-market-header-cell="afterViewSearchCount"]')
    ).not.toBeNull();
    expect(
      document.querySelector('[data-market-header-cell="a3IncreaseCount"]')
    ).not.toBeNull();
    expect(
      document.querySelector('[data-market-header-cell="newA3Rate"]')
    ).not.toBeNull();
    expect(document.querySelector('[data-market-header-cell="cpa3"]')).not.toBeNull();
    expect(
      document.querySelector('[data-market-header-cell="cpSearch"]')
    ).not.toBeNull();
    expect(document.querySelectorAll("[data-market-row-cell]").length).toBe(18);
    expect(table?.headerSelectionCheckbox).not.toBeNull();
    expect(table?.rows[0]?.selectionCheckbox).not.toBeNull();
  });

  test("renders loading, success, missing, and failed states", () => {
    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    const alphaRow = table.rows[0];
    const betaRow = table.rows[1];

    renderMarketRowState(alphaRow, {
      authorId: "a",
      authorName: "Alpha",
      status: "loading"
    });
    renderMarketRowState(betaRow, {
      authorId: "b",
      authorName: "Beta",
      backendMetrics: {
        a3IncreaseCount: "78,366.22",
        afterViewSearchCount: "9,689.96",
        afterViewSearchRate: "0.36%",
        cpSearch: "14.46",
        cpa3: "1.79",
        newA3Rate: "3.44%"
      },
      backendMetricsStatus: "success",
      status: "success",
      rates: {
        singleVideoAfterSearchRate: "0.5%-1%",
        personalVideoAfterSearchRate: "0.02 - 0.1%"
      }
    });

    expect(alphaRow.singleCell.textContent).toBe("加载中...");
    expect(alphaRow.backendMetricsCells.afterViewSearchRate.textContent).toBe("加载中...");
    expect(betaRow.singleCell.textContent).toBe("0.5% - 1%");
    expect(betaRow.personalCell.textContent).toBe("0.02% - 0.1%");
    expect(betaRow.backendMetricsCells.afterViewSearchRate.textContent).toBe("0.36%");
    expect(betaRow.backendMetricsCells.afterViewSearchCount.textContent).toBe("9,689.96");
    expect(betaRow.backendMetricsCells.a3IncreaseCount.textContent).toBe("78,366.22");
    expect(betaRow.backendMetricsCells.newA3Rate.textContent).toBe("3.44%");
    expect(betaRow.backendMetricsCells.cpa3.textContent).toBe("1.79");
    expect(betaRow.backendMetricsCells.cpSearch.textContent).toBe("14.46");

    renderMarketRowState(betaRow, {
      authorId: "b",
      authorName: "Beta",
      backendMetricsStatus: "missing",
      status: "success",
      rates: {
        singleVideoAfterSearchRate: "0.5%-1%",
        personalVideoAfterSearchRate: "0.02 - 0.1%"
      }
    });
    expect(betaRow.backendMetricsCells.afterViewSearchRate.textContent).toBe("暂无数据");
    expect(betaRow.backendMetricsCells.cpSearch.textContent).toBe("暂无数据");

    renderMarketRowState(betaRow, {
      authorId: "b",
      authorName: "Beta",
      backendMetricsStatus: "failed",
      status: "failed"
    });
    expect(betaRow.singleCell.textContent).toBe("加载失败");
    expect(betaRow.personalCell.textContent).toBe("加载失败");
    expect(betaRow.backendMetricsCells.afterViewSearchRate.textContent).toBe("加载失败");
    expect(betaRow.backendMetricsCells.cpSearch.textContent).toBe("加载失败");
  });

  test("hides rows outside the visible author ids", () => {
    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    applyRowVisibility(table, new Set(["b"]));

    expect(table.rows[0].row.hidden).toBe(true);
    expect(table.rows[1].row.hidden).toBe(false);
  });

  test("reorders rows based on ordered author ids", () => {
    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    applyRowOrder(table, ["b", "a"]);

    expect(
      Array.from(
        document.querySelectorAll("[data-market-row]")
      ).map((row) => row.getAttribute("data-author-id"))
    ).toEqual(["b", "a"]);
  });

  test("supports the real div-grid market layout and keeps rows aligned", () => {
    document.body.innerHTML = buildRealMarketGridFixture();

    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    expect(table.headerSelectionCheckbox).not.toBeNull();
    expect(table.rows[0]?.selectionCheckbox).not.toBeNull();
    expect(readRightHeaderTexts()).toEqual(["21-60s报价", "操作"]);
    expect(readSelectionHeaderText()).toBe("全选");
    expect(readSelectionRowCheckboxCount()).toBe(2);
    expect(readPluginHeaderTexts()).toEqual([
      "单视频看后搜率",
      "个人视频看后搜率",
      "看后搜率",
      "看后搜数",
      "新增A3数",
      "新增A3率",
      "CPA3",
      "cp_search"
    ]);
    expect(
      document
        .querySelector(".section-wrapper.sticky-header")
        ?.classList.contains("hide-scrollbar")
    ).toBe(false);
    expect(
      document.querySelector(".section-wrapper:not(.sticky-header)")?.classList.contains(
        "hide-scrollbar"
      )
    ).toBe(false);
    expect(readScrollHintText()).toBe("横向滚动可查看看后搜率、秒探指标");
    expect(document.querySelectorAll('[data-testid="market-scroll-hint"]')).toHaveLength(1);
    expect(
      (
        document.querySelector('[data-testid="plugin-header"]') as HTMLElement
      ).style.position
    ).not.toBe("sticky");
    const pluginHeaderCells = Array.from(
      document.querySelectorAll('[data-testid="plugin-header"] > .header-cell')
    ) as HTMLElement[];
    expect(pluginHeaderCells[0]?.style.width).toBe("160px");
    expect(pluginHeaderCells[1]?.style.width).toBe("160px");
    expect(pluginHeaderCells[0]?.style.whiteSpace).toBe("nowrap");
    expect(pluginHeaderCells[1]?.style.whiteSpace).toBe("nowrap");
    expect(
      Number.parseFloat(
        (
          document.querySelector('[data-testid="right-header"]') as HTMLElement
        ).style.width
      )
    ).toBe(350);
    expect(
      Number.parseFloat(
        (
          document.querySelector('[data-testid="right-section"]') as HTMLElement
        ).style.width
      )
    ).toBe(350);
    expect(table.rows.map((row) => row.authorId)).toEqual(["111", "222"]);

    renderMarketRowState(table.rows[0], {
      authorId: "111",
      authorName: "达人 A",
      backendMetrics: {
        a3IncreaseCount: "78,366.22",
        afterViewSearchCount: "9,689.96",
        afterViewSearchRate: "0.36%",
        cpSearch: "14.46",
        cpa3: "1.79",
        newA3Rate: "3.44%"
      },
      backendMetricsStatus: "success",
      status: "success",
      rates: {
        singleVideoAfterSearchRate: "0.5%-1%",
        personalVideoAfterSearchRate: "0.02 - 0.1%"
      }
    });

    expect(readRightRowTexts(0)).toEqual(["¥450,000", "下单"]);
    expect(readPluginRowTexts(0)).toEqual([
      "0.5% - 1%",
      "0.02% - 0.1%",
      "0.36%",
      "9,689.96",
      "78,366.22",
      "3.44%",
      "1.79",
      "14.46"
    ]);
    expect(table.rows[0].singleCell.style.width).toBe("160px");
    expect(table.rows[0].personalCell.style.width).toBe("160px");
    expect(table.rows[0].singleCell.style.whiteSpace).toBe("nowrap");
    expect(table.rows[0].personalCell.style.whiteSpace).toBe("nowrap");

    applyRowVisibility(table, new Set(["222"]));

    expect(readAuthorRowHiddenStates()).toEqual([true, false]);
    expect(readRightActionHiddenStates()).toEqual([true, false]);

    applyRowVisibility(table, new Set(["111", "222"]));
    applyRowOrder(table, ["222", "111"]);

    expect(readAuthorNames()).toEqual(["达人 B", "达人 A"]);
    expect(readRightRowTexts(0)).toEqual(["¥20,000", "下单"]);
    expect(readPluginRowTexts(0)).toEqual(["", "", "", "", "", "", "", ""]);
    expect(table.rows[0].exportFields).toMatchObject({
      "21-60s报价": "¥450,000",
      "代表视频": "代表视频A",
      "达人信息": "达人 A"
    });
  });

  test("keeps a single scroll hint across repeated syncs", () => {
    document.body.innerHTML = buildRealMarketGridFixture();

    expect(syncMarketTable(document)).not.toBeNull();
    expect(syncMarketTable(document)).not.toBeNull();

    expect(document.querySelectorAll('[data-testid="market-scroll-hint"]')).toHaveLength(1);
    expect(readScrollHintText()).toBe("横向滚动可查看看后搜率、秒探指标");
  });

  test("uses native-like alignment styles for plugin cells", () => {
    document.body.innerHTML = buildRealMarketGridFixtureWithScopedAttributes();

    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    const pluginHeaderCell = document.querySelector(
      '[data-testid="plugin-header"] [data-market-header-cell="singleVideoAfterSearchRate"]'
    ) as HTMLElement | null;
    const pluginBodyCell = table.rows[0].singleCell;

    expect(pluginHeaderCell?.style.display).toBe("flex");
    expect(pluginHeaderCell?.style.alignItems).toBe("center");
    expect(pluginBodyCell.style.display).toBe("flex");
    expect(pluginBodyCell.style.alignItems).toBe("center");
    expect(pluginBodyCell.style.paddingTop).toBe("12px");
    expect(pluginBodyCell.style.paddingBottom).toBe("12px");
  });

  test("keeps native-like alignment styles after repeated syncs", () => {
    document.body.innerHTML = buildRealMarketGridFixtureWithScopedAttributes();

    expect(syncMarketTable(document)).not.toBeNull();
    const secondTable = syncMarketTable(document);
    if (!secondTable) {
      throw new Error("Expected market table");
    }

    const pluginBodyCell = secondTable.rows[0].singleCell;
    expect(pluginBodyCell.style.display).toBe("flex");
    expect(pluginBodyCell.style.alignItems).toBe("center");
    expect(pluginBodyCell.style.paddingTop).toBe("12px");
    expect(pluginBodyCell.style.paddingBottom).toBe("12px");
    expect(pluginBodyCell.hasAttribute("data-v-cell-scope")).toBe(true);
  });

  test("keeps export field alignment when a row is missing the price cell", () => {
    document.body.innerHTML = buildRealMarketGridFixtureWithMissingPriceCell();

    const initialTable = syncMarketTable(document);
    if (!initialTable) {
      throw new Error("Expected market table");
    }

    renderMarketRowState(initialTable.rows[1], {
      authorId: "222",
      authorName: "达人 B",
      backendMetrics: {
        a3IncreaseCount: "78,366.22",
        afterViewSearchCount: "9,689.96",
        afterViewSearchRate: "0.36%",
        cpSearch: "14.46",
        cpa3: "1.79",
        newA3Rate: "3.44%"
      },
      backendMetricsStatus: "success",
      status: "success",
      rates: {
        singleVideoAfterSearchRate: "0.5%-1%",
        personalVideoAfterSearchRate: "0.02 - 0.1%"
      }
    });

    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table after rerender");
    }

    expect(table.rows[1].exportFields).toMatchObject({
      "21-60s报价": "",
      "代表视频": "代表视频B",
      "达人信息": "达人 B"
    });
    expect(table.rows[1].exportFields?.["21-60s报价"]).not.toContain("看后搜率");
  });

  test("falls back to the market vue state when the DOM has no author id", () => {
    document.body.innerHTML = buildRealMarketGridFixtureWithoutAuthorIds();
    attachMarketVueState([
      {
        attribute_datas: {
          nickname: "达人 A"
        },
        star_id: "111"
      },
      {
        attribute_datas: {
          nickname: "达人 B"
        },
        star_id: "222"
      }
    ]);

    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    expect(table.rows.map((row) => row.authorId)).toEqual(["111", "222"]);
  });

  test("fills blank export cells from the market vue state", () => {
    document.body.innerHTML = buildRichMarketGridFixtureWithBlankSecondRow();
    attachMarketVueState([
      {
        attribute_datas: {
          avg_search_after_view_rate_30d: "0.003",
          burst_text_rate: "1",
          city: "温州",
          content_theme_labels_180d: ["有趣剧情创作", "亲情剧集", "情感短剧"],
          follower: "4550556",
          gender: "2",
          interact_rate_within_30d: "0.0572",
          link_link_cnt_by_industry: "27029613",
          nickname: "达人 A",
          play_over_rate_within_30d: "0.263",
          price_20_60: "155000",
          prospective_20_60_cpm: "21.2362",
          tags_relation: {
            剧情搞笑: ["剧情"]
          }
        },
        expected_play_num: "7298854",
        star_id: "111"
      },
      {
        attribute_datas: {
          avg_search_after_view_rate_30d: "0.003",
          burst_text_rate: "0",
          city: "杭州",
          content_theme_labels_180d: ["搞笑剧情", "大学宿舍趣事", "校园生活"],
          follower: "901234",
          gender: "2",
          interact_rate_within_30d: "0.072",
          link_link_cnt_by_industry: "20773000",
          nickname: "达人 B",
          play_over_rate_within_30d: "0.35",
          price_20_60: "38000",
          prospective_20_60_cpm: "182.5",
          tags_relation: {
            剧情搞笑: ["剧情"]
          }
        },
        expected_play_num: "208000",
        star_id: "222"
      }
    ]);

    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    expect(table.rows[1].authorId).toBe("222");
    expect(table.rows[1].price21To60s).toBe("¥38,000");
    expect(table.rows[1].exportFields).toMatchObject({
      "21-60s报价": "¥38,000",
      互动率: "7.2%",
      内容主题: "搞笑剧情 大学宿舍趣事 1+",
      完播率: "35%",
      爆文率: "-",
      粉丝数: "90.1w",
      达人信息: "达人 B 女 杭州",
      达人类型: "剧情搞笑",
      连接用户数: "2,077.3w",
      预期CPM: "182.5",
      预期播放量: "20.8w"
    });
    expect(table.rows[1].rates).toEqual({
      singleVideoAfterSearchRate: "0.3%"
    });
  });

  test("finds market rows in nested vue children", () => {
    document.body.innerHTML = buildRichMarketGridFixtureWithBlankSecondRow();
    attachNestedMarketVueState([
      {
        attribute_datas: {
          city: "杭州",
          follower: "901234",
          gender: "2",
          interact_rate_within_30d: "0.072",
          link_link_cnt_by_industry: "20773000",
          nickname: "达人 B",
          play_over_rate_within_30d: "0.35",
          price_20_60: "38000",
          prospective_20_60_cpm: "182.5",
          tags_relation: {
            剧情搞笑: ["剧情"]
          }
        },
        expected_play_num: "208000",
        star_id: "222"
      }
    ]);

    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    expect(table.rows[1].price21To60s).toBe("¥38,000");
    expect(table.rows[1].exportFields).toMatchObject({
      粉丝数: "90.1w",
      预期播放量: "20.8w",
      互动率: "7.2%"
    });
  });

  test("prefers vue fallback when the price cell is polluted", () => {
    document.body.innerHTML = buildRichMarketGridFixtureWithPollutedSecondPrice();
    attachMarketVueState([
      {
        attribute_datas: {
          city: "杭州",
          follower: "901234",
          gender: "2",
          interact_rate_within_30d: "0.072",
          link_link_cnt_by_industry: "20773000",
          nickname: "达人 B",
          play_over_rate_within_30d: "0.35",
          price_20_60: "38000",
          prospective_20_60_cpm: "182.5",
          tags_relation: {
            剧情搞笑: ["剧情"]
          }
        },
        expected_play_num: "208000",
        star_id: "222"
      }
    ]);

    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    expect(table.rows[1].price21To60s).toBe("¥38,000");
    expect(table.rows[1].exportFields?.["21-60s报价"]).toBe("¥38,000");
  });

  test("falls back to serialized market rows when vue state is unavailable", () => {
    document.body.innerHTML = buildRealMarketGridFixtureWithoutAuthorIds();
    document.documentElement.setAttribute(
      "data-sces-market-rows",
      JSON.stringify([
        {
          authorId: "111",
          authorName: "达人 A",
          singleVideoAfterSearchRate: "0.02%"
        },
        {
          authorId: "222",
          authorName: "达人 B"
        }
      ])
    );

    const table = syncMarketTable(document);
    if (!table) {
      throw new Error("Expected market table");
    }

    expect(table.rows.map((row) => row.authorId)).toEqual(["111", "222"]);
    expect(table.rows[0].rates).toEqual({
      singleVideoAfterSearchRate: "0.02%"
    });
    expect(readMarketPageSignature(document)).toContain("::111|222");
  });

  test("finds the real next-page button in Xingtu pagination", () => {
    document.body.innerHTML = `
      ${buildRealMarketGridFixture()}
      <div class="pagination xt-space xt-space--medium">
        <div class="el-pagination is-background xt-pagination xt-pagination--normal">
          <button type="button" disabled="disabled" class="btn-prev">
            <i class="el-icon el-icon-arrow-left"></i>
          </button>
          <ul class="el-pager">
            <li class="number active">1</li>
            <li class="number">2</li>
          </ul>
          <button type="button" class="btn-next">
            <i class="el-icon el-icon-arrow-right"></i>
          </button>
        </div>
      </div>
    `;

    const nextControl = findNextPageControl(document);

    expect(nextControl).not.toBeNull();
    expect(nextControl?.className).toContain("btn-next");
    expect(isPageControlDisabled(nextControl)).toBe(false);
    expect(readMarketPageSignature(document)).toContain("1::111|222");
  });

  test("reads market page signature without mutating the page", () => {
    document.body.innerHTML = buildRealMarketGridFixture();

    const signature = readMarketPageSignature(document);

    expect(signature).toContain("::111|222");
    expect(document.querySelector('[data-testid="plugin-header"]')).toBeNull();
    expect(document.querySelector('[data-testid="plugin-section"]')).toBeNull();
  });
});

function buildRealMarketGridFixture() {
  return `
    <div class="base-author-list">
      <div class="section-wrapper sticky-header hide-scrollbar">
        <div style="width: 310px; display: flex; position: sticky; left: 0; z-index: 11;">
          <div class="header-cell" style="min-width: 310px;">达人信息</div>
        </div>
        <div class="middle-columns" style="width: 190px; display: flex;">
          <div class="header-cell" style="min-width: 190px;">代表视频</div>
        </div>
        <div data-testid="right-header" style="width: 350px; display: flex; position: sticky; right: 0; z-index: 11;">
          <div class="header-cell" style="min-width: 150px;">21-60s报价</div>
          <div class="header-cell" style="min-width: 200px;">操作</div>
        </div>
      </div>
      <div class="section-wrapper hide-scrollbar">
        <div class="content-section" data-testid="author-section" style="width: 310px; display: flex; position: sticky; left: 0; z-index: 11;">
          <div class="content-column" style="min-width: 310px;">
            <div class="content-cell" data-testid="author-cell-111" style="height: 120px;">
              <a href="https://xingtu.cn/ad/creator/author-homepage/douyin-video/111">达人 A</a>
            </div>
            <div class="content-cell" data-testid="author-cell-222" style="height: 120px;">
              <a href="https://xingtu.cn/ad/creator/author-homepage/douyin-video/222">达人 B</a>
            </div>
          </div>
        </div>
        <div class="middle-columns" style="width: 190px; display: flex;">
          <div class="content-column" style="min-width: 190px;">
            <div class="content-cell" style="height: 120px;">代表视频A</div>
            <div class="content-cell" style="height: 120px;">代表视频B</div>
          </div>
        </div>
        <div data-testid="right-section" class="content-section" style="width: 350px; display: flex; position: sticky; right: 0; z-index: 11;">
          <div class="content-column" style="min-width: 150px;">
            <div class="content-cell" style="height: 120px;">¥450,000</div>
            <div class="content-cell" style="height: 120px;">¥20,000</div>
          </div>
          <div class="content-column" style="min-width: 200px;">
            <div class="content-cell" data-testid="action-cell-111" style="height: 120px;">下单</div>
            <div class="content-cell" data-testid="action-cell-222" style="height: 120px;">下单</div>
          </div>
        </div>
      </div>
    </div>
  `;
}

function buildRealMarketGridFixtureWithoutAuthorIds() {
  return `
    <div class="base-author-list">
      <div class="section-wrapper sticky-header hide-scrollbar">
        <div style="width: 310px; display: flex; position: sticky; left: 0; z-index: 11;">
          <div class="header-cell" style="min-width: 310px;">达人信息</div>
        </div>
        <div data-testid="right-header" style="width: 350px; display: flex; position: sticky; right: 0; z-index: 11;">
          <div class="header-cell" style="min-width: 150px;">21-60s报价</div>
          <div class="header-cell" style="min-width: 200px;">操作</div>
        </div>
      </div>
      <div class="section-wrapper hide-scrollbar">
        <div class="content-section" data-testid="author-section" style="width: 310px; display: flex; position: sticky; left: 0; z-index: 11;">
          <div class="content-column" style="min-width: 310px;">
            <div class="content-cell" data-testid="author-cell-1" style="height: 120px;">
              <span class="author-nickname">达人 A</span>
            </div>
            <div class="content-cell" data-testid="author-cell-2" style="height: 120px;">
              <span class="author-nickname">达人 B</span>
            </div>
          </div>
        </div>
        <div data-testid="right-section" class="content-section" style="width: 350px; display: flex; position: sticky; right: 0; z-index: 11;">
          <div class="content-column" style="min-width: 150px;">
            <div class="content-cell" style="height: 120px;">¥450,000</div>
            <div class="content-cell" style="height: 120px;">¥20,000</div>
          </div>
          <div class="content-column" style="min-width: 200px;">
            <div class="content-cell" data-testid="action-cell-1" style="height: 120px;">下单</div>
            <div class="content-cell" data-testid="action-cell-2" style="height: 120px;">下单</div>
          </div>
        </div>
      </div>
    </div>
  `;
}

function buildRealMarketGridFixtureWithMissingPriceCell() {
  return `
    <div class="base-author-list">
      <div class="section-wrapper sticky-header hide-scrollbar">
        <div style="width: 310px; display: flex; position: sticky; left: 0; z-index: 11;">
          <div class="header-cell" style="min-width: 310px;">达人信息</div>
        </div>
        <div class="middle-columns" style="width: 190px; display: flex;">
          <div class="header-cell" style="min-width: 190px;">代表视频</div>
        </div>
        <div data-testid="right-header" style="width: 350px; display: flex; position: sticky; right: 0; z-index: 11;">
          <div class="header-cell" style="min-width: 150px;">21-60s报价</div>
          <div class="header-cell" style="min-width: 200px;">操作</div>
        </div>
      </div>
      <div class="section-wrapper hide-scrollbar">
        <div class="content-section" data-testid="author-section" style="width: 310px; display: flex; position: sticky; left: 0; z-index: 11;">
          <div class="content-column" style="min-width: 310px;">
            <div class="content-cell" data-testid="author-cell-111" style="height: 120px;">
              <a href="https://xingtu.cn/ad/creator/author-homepage/douyin-video/111">达人 A</a>
            </div>
            <div class="content-cell" data-testid="author-cell-222" style="height: 120px;">
              <a href="https://xingtu.cn/ad/creator/author-homepage/douyin-video/222">达人 B</a>
            </div>
          </div>
        </div>
        <div class="middle-columns" style="width: 190px; display: flex;">
          <div class="content-column" style="min-width: 190px;">
            <div class="content-cell" style="height: 120px;">代表视频A</div>
            <div class="content-cell" style="height: 120px;">代表视频B</div>
          </div>
        </div>
        <div data-testid="right-section" class="content-section" style="width: 350px; display: flex; position: sticky; right: 0; z-index: 11;">
          <div class="content-column" style="min-width: 150px;">
            <div class="content-cell" style="height: 120px;">¥450,000</div>
          </div>
          <div class="content-column" style="min-width: 200px;">
            <div class="content-cell" data-testid="action-cell-111" style="height: 120px;">下单</div>
            <div class="content-cell" data-testid="action-cell-222" style="height: 120px;">下单</div>
          </div>
        </div>
      </div>
    </div>
  `;
}

function buildRealMarketGridFixtureWithScopedAttributes() {
  return buildRealMarketGridFixture()
    .replace(
      '<div class="header-cell" style="min-width: 190px;">代表视频</div>',
      '<div data-v-header-scope class="header-cell" style="min-width: 190px;">代表视频</div>'
    )
    .replace(
      '<div class="content-cell" style="height: 120px;">代表视频A</div>',
      '<div data-v-cell-scope class="content-cell" style="height: 120px;">代表视频A</div>'
    )
    .replace(
      '<div class="content-cell" style="height: 120px;">代表视频B</div>',
      '<div data-v-cell-scope class="content-cell" style="height: 120px;">代表视频B</div>'
    );
}

function buildRichMarketGridFixtureWithBlankSecondRow() {
  return `
    <div class="base-author-list">
      <div class="section-wrapper sticky-header hide-scrollbar">
        <div style="width: 310px; display: flex; position: sticky; left: 0; z-index: 11;">
          <div class="header-cell" style="min-width: 310px;">达人信息</div>
        </div>
        <div class="middle-columns" style="width: 1210px; display: flex;">
          <div class="header-cell" style="min-width: 190px;">代表视频</div>
          <div class="header-cell" style="min-width: 120px;">达人类型</div>
          <div class="header-cell" style="min-width: 180px;">内容主题</div>
          <div class="header-cell" style="min-width: 120px;">连接用户数</div>
          <div class="header-cell" style="min-width: 120px;">粉丝数</div>
          <div class="header-cell" style="min-width: 120px;">预期CPM</div>
          <div class="header-cell" style="min-width: 120px;">预期播放量</div>
          <div class="header-cell" style="min-width: 120px;">互动率</div>
          <div class="header-cell" style="min-width: 120px;">完播率</div>
          <div class="header-cell" style="min-width: 120px;">爆文率</div>
        </div>
        <div data-testid="right-header" style="width: 350px; display: flex; position: sticky; right: 0; z-index: 11;">
          <div class="header-cell" style="min-width: 150px;">21-60s报价</div>
          <div class="header-cell" style="min-width: 200px;">操作</div>
        </div>
      </div>
      <div class="section-wrapper hide-scrollbar">
        <div class="content-section" style="width: 310px; display: flex; position: sticky; left: 0; z-index: 11;">
          <div class="content-column" style="min-width: 310px;">
            <div class="content-cell" style="height: 120px;">
              <a href="https://xingtu.cn/ad/creator/author-homepage/douyin-video/111">达人 A</a>
            </div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
        </div>
        <div class="middle-columns" style="width: 1210px; display: flex;">
          <div class="content-column" style="min-width: 190px;">
            <div class="content-cell" style="height: 120px;">代表视频A</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 120px;">
            <div class="content-cell" style="height: 120px;">剧情搞笑</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 180px;">
            <div class="content-cell" style="height: 120px;">有趣剧情创作 亲情剧集 1+</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 120px;">
            <div class="content-cell" style="height: 120px;">2,703w</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 120px;">
            <div class="content-cell" style="height: 120px;">455.1w</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 120px;">
            <div class="content-cell" style="height: 120px;">21.2</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 120px;">
            <div class="content-cell" style="height: 120px;">729.9w</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 120px;">
            <div class="content-cell" style="height: 120px;">5.7%</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 120px;">
            <div class="content-cell" style="height: 120px;">26.3%</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 120px;">
            <div class="content-cell" style="height: 120px;">100%</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
        </div>
        <div class="content-section" style="width: 350px; display: flex; position: sticky; right: 0; z-index: 11;">
          <div class="content-column" style="min-width: 150px;">
            <div class="content-cell" style="height: 120px;">¥155,000</div>
            <div class="content-cell" style="height: 120px;"></div>
          </div>
          <div class="content-column" style="min-width: 200px;">
            <div class="content-cell" style="height: 120px;">下单</div>
            <div class="content-cell" style="height: 120px;">下单</div>
          </div>
        </div>
      </div>
    </div>
  `;
}

function buildRichMarketGridFixtureWithPollutedSecondPrice() {
  return buildRichMarketGridFixtureWithBlankSecondRow().replace(
    '<div class="content-cell" style="height: 120px;"></div>\n          </div>\n          <div class="content-column" style="min-width: 200px;">',
    '<div class="content-cell" style="height: 120px;">看后搜率0.39%看后搜数2,248.33新增A3数0.00新增A3率0%CPA30.00cp_search20.01</div>\n          </div>\n          <div class="content-column" style="min-width: 200px;">'
  );
}

function attachMarketVueState(
  marketList: Array<Record<string, unknown>>
) {
  const marketRoot = document.querySelector(".base-author-list");
  if (!(marketRoot instanceof HTMLElement)) {
    throw new Error("Expected market root");
  }

  Object.defineProperty(marketRoot, "__vue__", {
    configurable: true,
    value: {
      _setupState: {
        __$temp_1: {
          marketList
        }
      }
    }
  });
}

function attachNestedMarketVueState(marketList: Array<Record<string, unknown>>) {
  const marketRoot = document.querySelector(".base-author-list");
  if (!(marketRoot instanceof HTMLElement)) {
    throw new Error("Expected market root");
  }

  Object.defineProperty(marketRoot, "__vue__", {
    configurable: true,
    value: {
      $children: [
        {
          $children: [
            {
              _setupState: {},
              $children: [
                {
                  _setupState: {
                    __$temp_1: {
                      marketList
                    }
                  },
                  $children: []
                }
              ]
            }
          ],
          _setupState: {}
        }
      ],
      _setupState: {}
    }
  });
}

function readRightHeaderTexts() {
  return Array.from(
    document.querySelectorAll('[data-testid="right-header"] > *'),
    (cell) => cell.textContent?.trim() ?? ""
  );
}

function readPluginHeaderTexts() {
  return Array.from(
    document.querySelectorAll('[data-testid="plugin-header"] > *'),
    (cell) => cell.textContent?.trim() ?? ""
  );
}

function readRightRowTexts(rowIndex: number) {
  return Array.from(
    document.querySelectorAll('[data-testid="right-section"] > .content-column'),
    (column) => readVisualCells(column as Element)[rowIndex]?.textContent?.trim() ?? ""
  );
}

function readPluginRowTexts(rowIndex: number) {
  return Array.from(
    document.querySelectorAll('[data-testid="plugin-section"] > .content-column'),
    (column) => readVisualCells(column as Element)[rowIndex]?.textContent?.trim() ?? ""
  );
}

function readScrollHintText() {
  return (
    document.querySelector('[data-testid="market-scroll-hint"]')?.textContent?.trim() ?? ""
  );
}

function readSelectionHeaderText() {
  return (
    document
      .querySelector('[data-market-header-cell="selection"]')
      ?.textContent?.trim() ?? ""
  );
}

function readSelectionRowCheckboxCount() {
  return document.querySelectorAll('[data-market-selection-checkbox="row"]').length;
}

function readAuthorNames() {
  const authorColumn = document.querySelector(
    '[data-testid="author-section"] .content-column'
  );
  return readVisualCells(authorColumn).map(
    (cell) => cell.querySelector("a")?.textContent?.trim() ?? ""
  );
}

function readAuthorRowHiddenStates() {
  return Array.from(
    document.querySelectorAll('[data-testid^="author-cell-"]'),
    (cell) => (cell as HTMLElement).hidden
  );
}

function readRightActionHiddenStates() {
  return Array.from(
    document.querySelectorAll('[data-testid^="action-cell-"]'),
    (cell) => (cell as HTMLElement).hidden
  );
}

function readVisualCells(root: Element | null): HTMLElement[] {
  if (!root) {
    return [];
  }

  return Array.from(root.querySelectorAll(":scope > .content-cell"))
    .filter((cell): cell is HTMLElement => cell instanceof HTMLElement)
    .sort((left, right) => {
      const leftOrder = Number(left.style.order || "0");
      const rightOrder = Number(right.style.order || "0");
      if (leftOrder !== rightOrder) {
        return leftOrder - rightOrder;
      }

      const cells = Array.from(root.querySelectorAll(":scope > .content-cell"));
      return cells.indexOf(left) - cells.indexOf(right);
    });
}