import { type Page } from "@playwright/test";
import { test, expect } from "../fixtures/site-management";
import { SiteCreateFormPage } from "../pages/site-create-form";
import { SiteDetailPage } from "../pages/site-detail";
import { SiteEditFormPage } from "../pages/site-edit-form";
import { SiteListPage } from "../pages/site-list";

/**
 * E2E coverage for the `site-management` business flow, driven end to end
 * through the live frontend by the Admin (the sole actor in the flow).
 *
 * The test walks the flow diagram's main path as one Admin journey: create a
 * Site under a company, browse the Site list, open its detail, edit a display
 * attribute, and confirm the update is reflected — asserting the visible
 * outcome at every hand-off. Covers the admin--create-site,
 * admin--view-site-list, admin--view-site-detail, and admin--edit-site stories.
 */

/**
 * Create an ACTIVE Site with a unique name and full address, picking the first
 * available company/type/country/timezone options. On the happy path the
 * create form returns to the Site list, so this leaves the page on the list.
 */
async function createSite(page: Page, name: string): Promise<void> {
  const createForm = new SiteCreateFormPage(page);
  await createForm.goto();
  await expect(createForm.nameInput).toBeVisible();
  await createForm.selectFirstCompany();
  await createForm.selectFirstType();
  await createForm.fill({
    name,
    street: "1 E2E Distribution Way",
    city: "Springfield",
    state: "IL",
    postalCode: "62701",
  });
  await createForm.selectFirstCountry();
  await createForm.selectFirstTimezone();
  await createForm.submit();
}

test.describe("site-management", () => {
  // Flow main path: Create (ACTIVE) -> View list -> View detail -> Edit.
  test("admin creates a site, finds it in the list, views its detail, and edits it", async ({
    page,
  }) => {
    const siteName = `E2E Site ${Date.now()}`;
    await createSite(page, siteName);

    // View Site List — success returns to the list; the newly created Site is
    // discoverable immediately with an ACTIVE status badge.
    const listPage = new SiteListPage(page);
    await expect(listPage.heading).toBeVisible();
    const row = listPage.getRow(siteName).first();
    await expect(row).toBeVisible();
    await expect(row).toContainText(/active/i);

    // View Site Detail — the row View action opens the single-record page,
    // which renders the information card with the values just entered.
    await listPage.getViewButton(siteName).first().click();
    await page.waitForURL(/\/master-data\/site\/[^/]+$/);
    const siteId = new URL(page.url()).pathname.split("/").pop();
    if (!siteId) {
      throw new Error("Could not resolve site id from the detail URL");
    }

    const detailPage = new SiteDetailPage(page);
    await expect(detailPage.heading).toBeVisible();
    await expect(detailPage.informationCardTitle).toBeVisible();
    await expect(detailPage.nameValue).toContainText(siteName);
    await expect(detailPage.cityValue).toContainText("Springfield");
    await expect(detailPage.statusBadge).toBeVisible();
    // The action panel exposes Back to Sites and Edit Site.
    await expect(detailPage.backButton).toBeVisible();
    await expect(detailPage.editButton).toBeVisible();

    // Edit Site — the detail screen offers Edit; change the name (unique within
    // the company) and the city, leaving the other columns untouched.
    await detailPage.editButton.click();
    await page.waitForURL(new RegExp(`/master-data/site/${siteId}/edit$`));

    const editForm = new SiteEditFormPage(page);
    await expect(editForm.nameInput).toBeVisible();
    const updatedName = `${siteName} (Edited)`;
    await editForm.fill({ name: updatedName, city: "Riverside" });
    await editForm.submit();

    // The UI navigates back to detail; the updated attributes are reflected.
    await page.waitForURL(new RegExp(`/master-data/site/${siteId}$`));
    await expect(detailPage.heading).toBeVisible();
    await expect(detailPage.nameValue).toContainText(updatedName);
    await expect(detailPage.cityValue).toContainText("Riverside");
  });
});