import { expect, test } from "@playwright/test";
import { mockApi, seedAuthenticatedState } from "./support/network.js";

const adminPermissions = [
  "admin",
  "department_access_1",
  "list_bookings",
];

const bookingsFixture = [
  {
    id: 1234,
    customer_number: 998877,
    customer_name: "Demo Vognmandsforretning",
    department: 1,
    reg_1: "EC21233",
    reg_2: "",
    po: "PO-42",
    reference: "REF-77",
    pickup: false,
    order_id: null,
    datetime: "2026-03-26T00:00:00.000Z",
    items: [
      {
        id: 1,
        name: "Forvogn",
        quantity: 1,
        is_wash: true,
      },
      {
        id: 2,
        name: "Trailer",
        quantity: 1,
        is_wash: true,
      },
    ],
  },
];

test.describe("Admin bookings mobile", () => {
  test("booking cards render with a visible border on mobile", async ({ page }, testInfo) => {
    test.skip(!testInfo.project.name.toLowerCase().includes("mobile"), "Mobile-only assertion");

    await seedAuthenticatedState(page, "admin-bookings-mobile-token");
    await mockApi(page, {
      authenticated: true,
      permissions: adminPermissions,
      edgeGateways: false,
      pos: {
        orderBookings: bookingsFixture,
      },
      sessionData: {
        id: 10,
        display_name: "Demo Operator",
      },
    });

    await page.goto("/admin/1/modules/bookings");

    await expect(page.locator(".title")).toContainText("Oversigt over bookinger");

    const bookingCard = page.locator(".box.has-custom-border").filter({
      hasText: bookingsFixture[0].customer_name,
    }).first();

    await expect(bookingCard).toBeVisible();

    const border = await bookingCard.evaluate((element) => {
      const style = window.getComputedStyle(element);
      return {
        width: Number.parseFloat(style.borderTopWidth || "0"),
        style: style.borderTopStyle,
      };
    });

    expect(border.width).toBeGreaterThanOrEqual(1);
    expect(border.style).toBe("solid");
  });
});