import { JSDOM } from "jsdom";
import { describe, expect, test, vi } from "vitest";

import { syncMarketTable } from "../src/content/market/dom-sync";
import { renderMarketRowState } from "../src/content/market/row-render";

describe("market row render", () => {
  test("renders the loading state for both injected cells", () => {
    const rows = getRows();

    renderMarketRowState(rows[0], {
      authorId: "111",
      listSeq: 1,
      state: "loading"
    });

    expect(rows[0].singleCell.textContent).toBe("加载中...");
    expect(rows[0].personalCell.textContent).toBe("加载中...");
    expect(rows[0].singleCell.dataset.scesAuthorId).toBe("111");
    expect(rows[0].singleCell.dataset.scesListSeq).toBe("1");
  });

  test("renders success values for both injected cells", () => {
    const rows = getRows();

    renderMarketRowState(rows[0], {
      authorId: "111",
      listSeq: 1,
      personalVideoAfterSearchRate: "0.02% - 0.1%",
      singleVideoAfterSearchRate: "<0.02%",
      source: "network",
      state: "success"
    });

    expect(rows[0].singleCell.textContent).toBe("<0.02%");
    expect(rows[0].personalCell.textContent).toBe("0.02% - 0.1%");
  });

  test("renders a retryable error state without per-cell divergence", () => {
    const onRetry = vi.fn();
    const rows = getRows();

    renderMarketRowState(
      rows[0],
      {
        authorId: "111",
        listSeq: 2,
        reason: "request-failed",
        retryable: true,
        state: "error"
      },
      { onRetry }
    );

    rows[0].personalCell.dispatchEvent(
      new rows[0].row.ownerDocument.defaultView!.MouseEvent("click", {
        bubbles: true
      })
    );

    expect(rows[0].singleCell.textContent).toBe("加载失败");
    expect(rows[0].personalCell.textContent).toBe("加载失败");
    expect(onRetry).toHaveBeenCalledTimes(1);
  });
});

function getRows() {
  const document = new JSDOM(`
    <table>
      <thead>
        <tr>
          <th>达人信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>达人 A</td>
          <td>查看</td>
        </tr>
      </tbody>
    </table>
  `).window.document;

  return syncMarketTable(document)!.rows;
}