// @vitest-environment jsdom

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

import {
  applyRowOrder,
  applyRowVisibility,
  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="singleVideoAfterSearchRate"]')
    ).not.toBeNull();
    expect(
      document.querySelector(
        '[data-market-header-cell="personalVideoAfterSearchRate"]'
      )
    ).not.toBeNull();
    expect(document.querySelectorAll("[data-market-row-cell]").length).toBe(4);
  });

  test("renders loading, success, 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",
      status: "success",
      rates: {
        singleVideoAfterSearchRate: "0.5%-1%",
        personalVideoAfterSearchRate: "0.02 - 0.1%"
      }
    });

    expect(alphaRow.singleCell.textContent).toBe("加载中...");
    expect(betaRow.singleCell.textContent).toBe("0.5% - 1%");
    expect(betaRow.personalCell.textContent).toBe("0.02% - 0.1%");

    renderMarketRowState(betaRow, {
      authorId: "b",
      authorName: "Beta",
      status: "failed"
    });
    expect(betaRow.singleCell.textContent).toBe("加载失败");
    expect(betaRow.personalCell.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"]);
  });
});