import assert from "node:assert/strict";
import { describe, it } from "node:test";
import { readFileSync } from "node:fs";
import { fileURLToPath } from "node:url";
import { dirname, join } from "node:path";

const __dirname = dirname(fileURLToPath(import.meta.url));
const styles = readFileSync(join(__dirname, "main.css"), "utf8");
const viewSourceByName = new Map(
  [
    "InventoryLedgerView.vue",
    "PurchaseOrderView.vue",
    "SalesPlanningView.vue",
    "SupplierMaterialLiteView.vue",
    "SystemExtensionView.vue"
  ].map((fileName) => [fileName, readFileSync(join(__dirname, "../views", fileName), "utf8")])
);

function cssRuleBlock(selectorStart) {
  const selectorIndex = styles.indexOf(selectorStart);
  assert.notEqual(selectorIndex, -1, `Missing CSS rule for ${selectorStart}`);
  const bodyStart = styles.indexOf("{", selectorIndex);
  assert.notEqual(bodyStart, -1, `Missing CSS body for ${selectorStart}`);
  const bodyEnd = styles.indexOf("}", bodyStart);
  assert.notEqual(bodyEnd, -1, `Missing CSS close brace for ${selectorStart}`);
  return styles.slice(bodyStart + 1, bodyEnd);
}

describe("table action button layout and tones", () => {
  it("keeps wide-table action cells as real table cells with enough width", () => {
    const wideActionHeaderRule = cssRuleBlock("body .table-view-wide .data-table:has(td.action-row) thead th:last-child");

    assert.match(styles, /--table-action-column-width:\s*300px;/);
    assert.match(styles, /body \.table-view-wide \.data-table td\.action-row,[\s\S]*?display:\s*table-cell !important;/);
    assert.match(wideActionHeaderRule, /width:\s*var\(--table-action-column-width\) !important;/);
    assert.match(wideActionHeaderRule, /text-align:\s*center !important;/);
  });

  it("centers compact overview action headers over icon-only action buttons", () => {
    const overviewActionHeaderRule = cssRuleBlock("body .table-view-overview .data-table:has(td.action-row) thead th:last-child");

    assert.match(overviewActionHeaderRule, /text-align:\s*center !important;/);
  });

  it("adds stronger table-specific color treatments for edit and delete actions", () => {
    assert.match(styles, /body \.data-table button\.semantic-action-button\.semantic-action-button\[data-button-tone="info"\]/);
    assert.match(styles, /body \.data-table button\.semantic-action-button\.semantic-action-button\[data-button-tone="danger"\]/);
    assert.match(styles, /--button-bg:\s*linear-gradient\(180deg,\s*#eff8ff/);
    assert.match(styles, /--button-bg:\s*linear-gradient\(180deg,\s*#fff1f2/);
  });

  it("marks every table operation column with the standard action-row cell class", () => {
    viewSourceByName.forEach((source, fileName) => {
      const operationTables = source
        .split(/<table\b/)
        .slice(1)
        .filter((chunk) => /<th[^>]*>\s*操作\s*<\/th>/.test(chunk));

      assert.ok(operationTables.length > 0, `${fileName} should include operation tables for this coverage`);
      operationTables.forEach((chunk, index) => {
        assert.match(chunk, /<td\s+class="action-row"/, `${fileName} operation table ${index + 1} should use action-row`);
      });
    });
  });

  it("gives custom import and export toolbar buttons distinct semantic classes", () => {
    const transferToolbarSources = [
      readFileSync(join(__dirname, "../views/SupplierManagementView.vue"), "utf8"),
      readFileSync(join(__dirname, "../views/SupplierMaterialLiteView.vue"), "utf8"),
      readFileSync(join(__dirname, "../views/SalesPlanningView.vue"), "utf8")
    ];

    transferToolbarSources.forEach((source, index) => {
      assert.match(source, /supplier-action-import/, `toolbar source ${index + 1} should mark import buttons`);
      assert.match(source, /supplier-action-export/, `toolbar source ${index + 1} should mark export buttons`);
    });

    assert.match(styles, /\.supplier-action-import/);
    assert.match(styles, /\.supplier-action-export/);
  });
});
