import { test, expect } from "@playwright/test";

const USERNAME = process.env.LOCAL_USERNAME ?? "admin";
const PASSWORD = process.env.LOCAL_PASSWORD ?? "";

async function login(page: import("@playwright/test").Page) {
  await page.goto("/");
  await page.getByPlaceholder("Username").fill(USERNAME);
  await page.getByPlaceholder("Password").fill(PASSWORD);
  await page.getByRole("button", { name: "Sign in" }).click();
  await expect(page.locator(".device-table tbody tr").first()).toBeVisible({ timeout: 15_000 });
}

test("network device table sorts by each column", async ({ page }) => {
  test.skip(!PASSWORD, "LOCAL_PASSWORD not set");
  await login(page);

  const ipCells = () => page.locator(".device-table tbody tr td:nth-child(2)").allTextContents();

  // Default: known-first (status ascending).
  const firstBadge = page.locator(".device-table tbody tr td:first-child .device-badge").first();
  await expect(firstBadge).toHaveText("known");

  // Click IP header -> ascending numeric IP order.
  await page.getByRole("button", { name: "IP" }).click();
  const ascIps = await ipCells();
  const numeric = (ip: string) => ip.split(".").map(Number);
  const sortedAsc = [...ascIps].sort((a, b) => {
    const [an, bn] = [numeric(a), numeric(b)];
    for (let i = 0; i < 4; i++) if (an[i] !== bn[i]) return an[i] - bn[i];
    return 0;
  });
  expect(ascIps).toEqual(sortedAsc);

  // Click IP header again -> descending.
  await page.getByRole("button", { name: "IP" }).click();
  const descIps = await ipCells();
  expect(descIps).toEqual([...sortedAsc].reverse());

  // Click a different column (Name) resets to ascending on that column.
  await page.getByRole("button", { name: "Name" }).click();
  const names = await page.locator(".device-table tbody tr td:nth-child(4)").allTextContents();
  const sortedNames = [...names].sort((a, b) => a.localeCompare(b));
  expect(names).toEqual(sortedNames);
});