import { expect, test, uploadTestImage, waitForProcessing } from "./helpers";

// ---------------------------------------------------------------------------
// State-bleed audit: verify that processed state from one tool does NOT
// leak into another tool after navigation.
//
// Bug: navigating from a tool with processed results to a different tool
// shows stale processed state (download buttons, blob: URLs, before/after
// comparisons) in the right pane instead of a clean dropzone.
//
// Root cause hypothesis: the global Zustand file-store is not reset when
// the user navigates between tool routes — the previous tool's entries,
// processedUrl, and blob URLs persist into the next tool's view.
// ---------------------------------------------------------------------------

test.describe("State bleed between tools", () => {
  // ── Core scenario: resize -> rotate ──────────────────────────────────
  test("processed state from resize does NOT appear in rotate", async ({ loggedInPage: page }) => {
    // Step 1: Navigate to resize and process an image
    await page.goto("/image/resize");
    await uploadTestImage(page);

    await page.locator("input[placeholder='Auto']").first().fill("50");
    await page.getByRole("button", { name: "Resize" }).click();
    await waitForProcessing(page);

    // Confirm processed state is present (download link visible)
    await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({
      timeout: 15_000,
    });

    // Step 2: Navigate to the rotate tool via direct URL
    await page.goto("/image/rotate");
    await page.waitForLoadState("networkidle");

    // Step 3: The right pane should be in a clean state — dropzone visible
    await expect(page.getByText("Upload from computer")).toBeVisible({ timeout: 5_000 });

    // Step 4: No stale download link from resize should be present
    await expect(page.getByRole("link", { name: /download/i })).not.toBeVisible();

    // Step 5: No blob: URLs in image elements (would indicate stale processed images)
    const blobImages = page.locator("img[src^='blob:']");
    await expect(blobImages).toHaveCount(0);

    // Step 6: No before/after comparison slider should be visible
    await expect(page.locator("[class*='before-after'], [class*='BeforeAfter']")).not.toBeVisible();
  });

  // ── Reverse direction: rotate -> resize ──────────────────────────────
  test("processed state from rotate does NOT appear in resize", async ({ loggedInPage: page }) => {
    // Process an image in rotate
    await page.goto("/image/rotate");
    await uploadTestImage(page);

    await page.getByTestId("rotate-right").click();
    await expect(page.locator("input[inputmode='numeric']")).toHaveValue("90", { timeout: 2000 });
    await page.getByTestId("rotate-submit").click();
    await waitForProcessing(page);

    await expect(page.locator("[data-download-button]").first()).toBeVisible({
      timeout: 15_000,
    });

    // Navigate to resize
    await page.goto("/image/resize");
    await page.waitForLoadState("networkidle");

    // Should show clean dropzone
    await expect(page.getByText("Upload from computer")).toBeVisible({ timeout: 5_000 });
    await expect(page.getByRole("link", { name: /download/i })).not.toBeVisible();
  });

  // ── Navigate from dropzone tool to no-dropzone tool (QR Generate) ────
  test("processed state from compress does NOT appear in QR Generate", async ({
    loggedInPage: page,
  }) => {
    // Process an image in compress
    await page.goto("/image/compress");
    await uploadTestImage(page);
    // Compress defaults to Target Size mode (needs a value); switch to Quality.
    await page.getByRole("button", { name: "Quality" }).click();
    await page.getByRole("button", { name: "Compress" }).click();
    await waitForProcessing(page);

    await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({
      timeout: 15_000,
    });

    // Navigate to QR Generate (no-dropzone tool)
    await page.goto("/image/qr-generate");
    await page.waitForLoadState("networkidle");

    // QR Generate should NOT show any file upload state or stale results
    await expect(page.getByText("Upload from computer")).not.toBeVisible();
    await expect(page.getByRole("link", { name: /download/i })).not.toBeVisible();

    // The QR input should be clean and functional
    await expect(page.getByTestId("qr-input-url")).toBeVisible();

    // No stale processed images from compress should be visible
    const blobImages = page.locator("img[src^='blob:']");
    await expect(blobImages).toHaveCount(0);
  });

  // ── Navigate from no-dropzone tool back to dropzone tool ─────────────
  test("QR Generate state does NOT bleed into resize", async ({ loggedInPage: page }) => {
    // Use QR Generate first
    await page.goto("/image/qr-generate");
    await page.getByTestId("qr-input-url").fill("https://example.com");
    await expect(page.locator("canvas, svg").first()).toBeVisible({ timeout: 5000 });

    // Navigate to resize
    await page.goto("/image/resize");
    await page.waitForLoadState("networkidle");

    // Resize should show a clean dropzone
    await expect(page.getByText("Upload from computer")).toBeVisible({ timeout: 5_000 });
    await expect(page.getByText("QR")).not.toBeVisible();
  });

  // ── Multiple images: upload several files, process, navigate ─────────
  test("multi-file processed state does NOT bleed across tools", async ({ loggedInPage: page }) => {
    // Upload and process in resize
    await page.goto("/image/resize");
    await uploadTestImage(page);

    // Add a second file by uploading again via the "+ Add more" button
    const addMoreBtn = page.getByText("+ Add more");
    if (await addMoreBtn.isVisible({ timeout: 2000 }).catch(() => false)) {
      const fileChooserPromise = page.waitForEvent("filechooser");
      await addMoreBtn.click();
      const fileChooser = await fileChooserPromise;
      await fileChooser.setFiles(
        require("node:path").join(
          process.cwd(),
          "tests",
          "fixtures",
          "image",
          "valid",
          "test-50x50.webp",
        ),
      );
      await page.waitForTimeout(500);
    }

    // Process all files
    await page.locator("input[placeholder='Auto']").first().fill("25");
    await page.getByRole("button", { name: "Resize" }).click();
    await waitForProcessing(page);

    await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({
      timeout: 15_000,
    });

    // Navigate to convert
    await page.goto("/image/convert");
    await page.waitForLoadState("networkidle");

    // Should show clean state — no leftover files or processed results
    await expect(page.getByText("Upload from computer")).toBeVisible({ timeout: 5_000 });
    await expect(page.getByRole("link", { name: /download/i })).not.toBeVisible();

    // No thumbnail strip from previous multi-file upload
    const thumbnails = page.locator("[aria-label='Previous image'], [aria-label='Next image']");
    await expect(thumbnails).toHaveCount(0);
  });

  // ── Top-nav navigation (not just goto) ───────────────────────────────
  test("top-nav navigation clears processed state", async ({ loggedInPage: page }) => {
    // Process an image in resize
    await page.goto("/image/resize");
    await uploadTestImage(page);

    await page.locator("input[placeholder='Auto']").first().fill("50");
    await page.getByRole("button", { name: "Resize" }).click();
    await waitForProcessing(page);

    await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({
      timeout: 15_000,
    });

    // 2.0 removed the sidebar. Navigate home via the top-nav "Tools" breadcrumb link.
    await page.locator("header").getByRole("link", { name: "Tools", exact: true }).click();
    await expect(page).toHaveURL("/");

    // Home is now a tool catalog (search + modality tabs), not a dropzone. The
    // catalog should render and no stale resize results should bleed through.
    await expect(page.locator("[data-search-input]")).toBeVisible({ timeout: 5_000 });
    await expect(page.getByRole("link", { name: /download/i })).not.toBeVisible();

    const blobImages = page.locator("img[src^='blob:']");
    await expect(blobImages).toHaveCount(0);
  });

  // ── Rapid navigation: process -> navigate -> navigate again ──────────
  test("rapid sequential navigation does not accumulate stale state", async ({
    loggedInPage: page,
  }) => {
    // Process in resize
    await page.goto("/image/resize");
    await uploadTestImage(page);
    await page.locator("input[placeholder='Auto']").first().fill("50");
    await page.getByRole("button", { name: "Resize" }).click();
    await waitForProcessing(page);

    await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({
      timeout: 15_000,
    });

    // Navigate to rotate, then immediately to compress, then to convert
    await page.goto("/image/rotate");
    await page.goto("/image/compress");
    await page.goto("/image/convert");
    await page.waitForLoadState("networkidle");

    // The final destination (convert) should have a completely clean state
    await expect(page.getByText("Upload from computer")).toBeVisible({ timeout: 5_000 });
    await expect(page.getByRole("link", { name: /download/i })).not.toBeVisible();

    const blobImages = page.locator("img[src^='blob:']");
    await expect(blobImages).toHaveCount(0);
  });

  // ── Verify processed status text is not carried over ─────────────────
  test("completion indicators from one tool do not appear in another", async ({
    loggedInPage: page,
  }) => {
    // Process in compress (shows size comparison after processing)
    await page.goto("/image/compress");
    await uploadTestImage(page);
    // Compress defaults to Target Size mode (needs a value); switch to Quality.
    await page.getByRole("button", { name: "Quality" }).click();
    await page.getByRole("button", { name: "Compress" }).click();
    await waitForProcessing(page);

    await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({
      timeout: 15_000,
    });

    // Navigate to crop
    await page.goto("/image/crop");
    await page.waitForLoadState("networkidle");

    // Crop should show clean dropzone, no processed-state UI
    await expect(page.getByText("Upload from computer")).toBeVisible({ timeout: 5_000 });

    // No "Conversion complete" or review-panel artifacts
    await expect(page.getByText("Conversion complete")).not.toBeVisible();

    // No download/undo buttons from compress should remain
    await expect(page.getByRole("link", { name: /download/i })).not.toBeVisible();
    await expect(page.getByRole("button", { name: /undo/i })).not.toBeVisible();
  });
});