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

// ---------------------------------------------------------------------------
// Helper: navigate to /automate with retry logic for blank-page flakes
// ---------------------------------------------------------------------------
async function gotoAutomate(page: import("@playwright/test").Page) {
  const heading = page.getByRole("heading", {
    name: /pipeline builder|automate/i,
  });

  for (let attempt = 0; attempt < 3; attempt++) {
    await page.goto("/automate", { waitUntil: "load" });

    try {
      await expect(heading).toBeVisible({ timeout: 8_000 });
      return;
    } catch {
      await page.waitForTimeout(500);
    }
  }

  // Final attempt - let it throw if it fails
  await page.goto("/automate", { waitUntil: "load" });
  await expect(heading).toBeVisible({ timeout: 10_000 });
}

/** Wait for pipeline steps to render by counting Remove buttons. */
async function waitForSteps(page: import("@playwright/test").Page, count: number) {
  await expect(page.getByTitle("Remove")).toHaveCount(count, {
    timeout: 5_000,
  });
}

/** Search for a tool by name in the palette and click it. */
async function addToolStep(
  page: import("@playwright/test").Page,
  name: string,
  expectedCount: number,
) {
  await page.getByPlaceholder("Search tools...").fill(name);
  await page
    .getByRole("button", { name: new RegExp(name, "i") })
    .first()
    .click();
  await waitForSteps(page, expectedCount);
}

/** Upload the test image via the Dropzone file chooser. */
async function uploadTestFile(page: import("@playwright/test").Page) {
  const testImagePath = getTestImagePath();
  const fileChooserPromise = page.waitForEvent("filechooser");
  await page.getByRole("button", { name: /upload from computer/i }).click();
  const fileChooser = await fileChooserPromise;
  await fileChooser.setFiles(testImagePath);
  await page.waitForTimeout(500);
}

// ---------------------------------------------------------------------------
// Empty state tests
// ---------------------------------------------------------------------------
test.describe("Pipeline Builder - Empty state", () => {
  test("navigate to /automate shows empty state message", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await expect(page.getByText("No steps yet")).toBeVisible();
    await expect(
      page.getByText("Click tools from the palette to build your pipeline"),
    ).toBeVisible();
  });

  test("tool palette with search is visible", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await expect(page.getByText("Tool Palette")).toBeVisible();
    await expect(page.getByPlaceholder("Search tools...")).toBeVisible();
  });

  test("process button is disabled when no steps or file", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    const processBtn = page.getByRole("button", { name: "Process", exact: true });
    await expect(processBtn).toBeVisible();
    await expect(processBtn).toBeDisabled();
  });

  test("dropzone is visible when no file uploaded", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await expect(page.locator("section[aria-label='File drop zone']")).toBeVisible();
    await expect(page.getByRole("button", { name: /upload from computer/i })).toBeVisible();
  });
});

// ---------------------------------------------------------------------------
// Adding steps tests
// ---------------------------------------------------------------------------
test.describe("Pipeline Builder - Adding steps", () => {
  test("search 'resize' in palette, click, and step 1 appears", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await addToolStep(page, "Resize", 1);

    // Empty state should be gone
    await expect(page.getByText("No steps yet")).not.toBeVisible();

    // Step should display the tool name
    await expect(page.getByText("Resize").first()).toBeVisible();
  });

  test("step shows name, expand/collapse toggle, and remove button", async ({
    loggedInPage: page,
  }) => {
    await gotoAutomate(page);

    await addToolStep(page, "Resize", 1);

    // Tool name visible in the step
    await expect(page.getByText("Resize").first()).toBeVisible();

    // Remove button visible
    await expect(page.getByTitle("Remove")).toBeVisible();

    // Step number badge "1" visible
    await expect(page.locator("span").filter({ hasText: /^1$/ }).first()).toBeVisible();
  });

  test("expand step shows settings form", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await addToolStep(page, "Resize", 1);

    // Click on the step row to expand it
    const stepRow = page.locator("[role='button']").filter({ hasText: "Resize" }).first();
    await stepRow.click();

    // Settings form should appear (border-primary indicates expanded state)
    await expect(page.locator(".border-primary").first()).toBeVisible({ timeout: 3_000 });
  });

  test("add 3 steps: resize, compress, convert - all visible in order", async ({
    loggedInPage: page,
  }) => {
    await gotoAutomate(page);

    await addToolStep(page, "Resize", 1);
    await addToolStep(page, "Compress", 2);
    await addToolStep(page, "Convert", 3);

    // All 3 remove buttons present
    await expect(page.getByTitle("Remove")).toHaveCount(3);

    // Header should show "3 steps configured"
    await expect(page.getByText("3 steps configured")).toBeVisible();
  });
});

// ---------------------------------------------------------------------------
// Step management tests
// ---------------------------------------------------------------------------
test.describe("Pipeline Builder - Step management", () => {
  test("remove step 2 leaves 2 steps remaining", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await addToolStep(page, "Resize", 1);
    await addToolStep(page, "Compress", 2);
    await addToolStep(page, "Convert", 3);

    // Remove the second step (index 1)
    await page.getByTitle("Remove").nth(1).click();

    // Should have 2 steps remaining
    await waitForSteps(page, 2);
  });

  test("each step settings are independent", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await addToolStep(page, "Resize", 1);
    await addToolStep(page, "Compress", 2);

    // Both steps should have their own remove buttons
    await expect(page.getByTitle("Remove")).toHaveCount(2);

    // Expand first step (Resize)
    const resizeRow = page.locator("[role='button']").filter({ hasText: "Resize" }).first();
    await resizeRow.click();
    await expect(page.locator(".border-primary").first()).toBeVisible({ timeout: 3_000 });

    // Collapse first, expand second
    await resizeRow.click();
    const compressRow = page.locator("[role='button']").filter({ hasText: "Compress" }).first();
    await compressRow.click();
    await expect(page.locator(".border-primary").first()).toBeVisible({ timeout: 3_000 });
  });
});

// ---------------------------------------------------------------------------
// File upload + processing tests
// ---------------------------------------------------------------------------
test.describe("Pipeline Builder - File upload and processing", () => {
  test("upload file via dropzone shows preview", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await uploadTestFile(page);

    // File name should appear
    await expect(page.getByText("test-image.png").first()).toBeVisible();
  });

  test("process button enabled when steps + file present", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await addToolStep(page, "Compress", 1);
    await uploadTestFile(page);

    const processBtn = page.getByRole("button", { name: "Process", exact: true });
    await expect(processBtn).toBeEnabled();
  });

  test("process pipeline shows progress then result with before/after", async ({
    loggedInPage: page,
  }) => {
    await gotoAutomate(page);

    await addToolStep(page, "Remove Metadata", 1);
    await addToolStep(page, "Compress", 2);
    await uploadTestFile(page);

    // Click Process
    await page.getByRole("button", { name: "Process", exact: true }).click();

    // Wait for the before/after slider to appear
    const slider = page.locator("[aria-label='Before/after comparison slider']");
    await expect(slider).toBeVisible({ timeout: 30_000 });

    // Should show Original and Processed labels
    await expect(page.getByText("Original").first()).toBeVisible();
    await expect(page.getByText("Processed").first()).toBeVisible();
  });

  test("download button visible after processing", async ({ loggedInPage: page }) => {
    await gotoAutomate(page);

    await addToolStep(page, "Compress", 1);
    await uploadTestFile(page);

    await page.getByRole("button", { name: "Process", exact: true }).click();

    // Wait for the before/after slider
    const slider = page.locator("[aria-label='Before/after comparison slider']");
    await expect(slider).toBeVisible({ timeout: 30_000 });

    // File info should be visible in the preview area
    await expect(page.getByText("test-image.png").first()).toBeVisible();
  });
});

// ---------------------------------------------------------------------------
// Save/Load pipeline tests
// ---------------------------------------------------------------------------
test.describe("Pipeline Builder - Save/Load", () => {
  // Clean up stale E2E pipelines before each test in this group
  async function cleanupPipelines() {
    const apiUrl = process.env.API_URL || "http://localhost:13490";
    try {
      const loginRes = await fetch(`${apiUrl}/api/auth/login`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username: "admin", password: "admin" }),
      });
      const { token } = await loginRes.json();
      const listRes = await fetch(`${apiUrl}/api/v1/pipeline/list`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      const { pipelines } = await listRes.json();
      for (const p of pipelines.filter(
        (p: { name: string }) => p.name.startsWith("GUI E2E Pipeline") || p.name.startsWith("E2E "),
      )) {
        await fetch(`${apiUrl}/api/v1/pipeline/${p.id}`, {
          method: "DELETE",
          headers: { Authorization: `Bearer ${token}` },
        });
      }
    } catch {
      // Cleanup is best-effort
    }
  }

  test("save pipeline with name and chip appears", async ({ loggedInPage: page }) => {
    await cleanupPipelines();
    await gotoAutomate(page);

    await addToolStep(page, "Resize", 1);
    await addToolStep(page, "Compress", 2);

    const uniqueName = `GUI E2E Pipeline ${Date.now()}`;

    // Click Save button
    await page.getByRole("button", { name: "Save" }).click();

    // Name input should appear
    await expect(page.getByPlaceholder("Pipeline name")).toBeVisible();

    // Fill in the name and save
    await page.getByPlaceholder("Pipeline name").fill(uniqueName);
    await page.getByRole("button", { name: "Save", exact: true }).click();

    // The name input should disappear after save
    await expect(page.getByPlaceholder("Pipeline name")).not.toBeVisible({
      timeout: 5_000,
    });

    // The saved pipeline should appear as a chip
    await expect(page.getByText(uniqueName).first()).toBeVisible({
      timeout: 5_000,
    });
  });

  test("click saved chip loads pipeline steps", async ({ loggedInPage: page }) => {
    await cleanupPipelines();
    await gotoAutomate(page);

    // Create and save a pipeline
    await addToolStep(page, "Resize", 1);
    await addToolStep(page, "Compress", 2);

    const uniqueName = `GUI E2E Pipeline ${Date.now()}`;
    await page.getByRole("button", { name: "Save" }).click();
    await page.getByPlaceholder("Pipeline name").fill(uniqueName);
    await page.getByRole("button", { name: "Save", exact: true }).click();

    await expect(page.getByPlaceholder("Pipeline name")).not.toBeVisible({
      timeout: 5_000,
    });
    await expect(page.getByText(uniqueName).first()).toBeVisible({
      timeout: 5_000,
    });

    // Remove all current steps to clear the canvas
    while ((await page.getByTitle("Remove").count()) > 0) {
      await page.getByTitle("Remove").first().click();
      await page.waitForTimeout(200);
    }

    // Verify empty state
    await expect(page.getByText("No steps yet")).toBeVisible();

    // Click the saved pipeline chip to load it
    await page.getByText(uniqueName).first().click();

    // Steps should be restored (2 steps)
    await waitForSteps(page, 2);
  });

  test("multiple saved pipelines supported", async ({ loggedInPage: page }) => {
    await cleanupPipelines();
    await gotoAutomate(page);

    // Save first pipeline
    await addToolStep(page, "Resize", 1);
    const name1 = `GUI E2E Pipeline A ${Date.now()}`;
    await page.getByRole("button", { name: "Save" }).click();
    await page.getByPlaceholder("Pipeline name").fill(name1);
    await page.getByRole("button", { name: "Save", exact: true }).click();
    await expect(page.getByPlaceholder("Pipeline name")).not.toBeVisible({
      timeout: 5_000,
    });

    // Add another step and save as second pipeline
    await addToolStep(page, "Convert", 2);
    const name2 = `GUI E2E Pipeline B ${Date.now()}`;
    await page.getByRole("button", { name: "Save" }).click();
    await page.getByPlaceholder("Pipeline name").fill(name2);
    await page.getByRole("button", { name: "Save", exact: true }).click();
    await expect(page.getByPlaceholder("Pipeline name")).not.toBeVisible({
      timeout: 5_000,
    });

    // Both pipelines should be visible (either as chips or in expanded list)
    await expect(page.getByText(name1).first()).toBeVisible({ timeout: 5_000 });
    // If there are too many pipelines, the second might be behind a "+N more" button
    const name2Visible = await page
      .getByText(name2)
      .first()
      .isVisible()
      .catch(() => false);
    if (!name2Visible) {
      // Click the "+N more" button to expand
      const moreBtn = page.getByText(/more$/);
      if (await moreBtn.isVisible().catch(() => false)) {
        await moreBtn.click();
        await expect(page.getByText(name2).first()).toBeVisible({ timeout: 3_000 });
      }
    }
  });
});