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

test.describe("Invoice Processing filter drawer (AP-46)", () => {
  test("Filter drawer clears applied filters", async ({ page }) => {
    await page.goto("/");
    await page.getByTestId("vendor-filter").fill("Acme");
    await page.getByTestId("filter-toggle").click();
    const drawer = page.getByTestId("filter-drawer");
    await expect(drawer).toBeVisible();
    await expect(page.getByTestId("filter-drawer-vendor")).toContainText("Acme");

    await page.getByTestId("filter-drawer-clear").click();
    await expect(page.getByTestId("vendor-filter")).toHaveValue("");
    await expect(page.getByTestId("filter-toggle").locator(".MuiBadge-badge")).toBeHidden();
  });

  test("closing the filter drawer leaves applied filters in place", async ({ page }) => {
    await page.goto("/");
    await page.getByTestId("vendor-filter").fill("Acme");
    await page.getByTestId("filter-toggle").click();
    await expect(page.getByTestId("filter-drawer")).toBeVisible();
    await expect(page.getByTestId("filter-toggle").locator(".MuiBadge-badge")).toHaveText("1");

    await page.getByRole("button", { name: "Close filters" }).evaluate((el: HTMLElement) => {
      el.click();
    });
    await expect(page.getByTestId("filter-drawer")).toBeHidden();
    await expect(page.getByTestId("vendor-filter")).toHaveValue("Acme");
    await expect(page.getByTestId("filter-toggle").locator(".MuiBadge-badge")).toHaveText("1");
  });
});