frontend/src/App.test.tsx

import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { server } from "./mocks/server";
import { errorHandlers, setMockJobDuration } from "./mocks/handlers";
import App from "./App";

// Mock NiiVue to avoid WebGL in tests
vi.mock("@niivue/niivue", () => ({
  Niivue: class MockNiivue {
    attachToCanvas = vi.fn();
    loadVolumes = vi.fn().mockResolvedValue(undefined);
    cleanup = vi.fn();
    gl = {
      getExtension: vi.fn(() => ({ loseContext: vi.fn() })),
    };
    opts = {};
  },
}));

describe("App Integration", () => {
  // Use real timers for integration tests - fake timers don't sync well
  // with MSW's async handlers and polling intervals
  beforeEach(() => {
    // Reset mock job duration to fast for tests
    setMockJobDuration(500); // Jobs complete in 500ms
  });

  afterEach(() => {
    setMockJobDuration(500); // Reset to default
  });

  describe("Initial Render", () => {
    it("renders main heading", () => {
      render(<App />);

      expect(
        screen.getByRole("heading", { name: /stroke lesion segmentation/i }),
      ).toBeInTheDocument();
    });

    it("renders case selector", async () => {
      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });
    });

    it("renders run button", () => {
      render(<App />);

      expect(
        screen.getByRole("button", { name: /run segmentation/i }),
      ).toBeInTheDocument();
    });

    it("shows placeholder viewer message", () => {
      render(<App />);

      expect(
        screen.getByText(/select a case and run segmentation/i),
      ).toBeInTheDocument();
    });
  });

  describe("Run Button State", () => {
    it("disables run button when no case selected", async () => {
      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      expect(
        screen.getByRole("button", { name: /run segmentation/i }),
      ).toBeDisabled();
    });

    it("enables run button when case selected", async () => {
      const user = userEvent.setup();
      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");

      expect(
        screen.getByRole("button", { name: /run segmentation/i }),
      ).toBeEnabled();
    });
  });

  describe("Segmentation Flow", () => {
    it("shows processing state when running", async () => {
      const user = userEvent.setup();
      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");
      await user.click(
        screen.getByRole("button", { name: /run segmentation/i }),
      );

      // Button should show "Processing..." while job is running
      expect(
        screen.getByRole("button", { name: /processing/i }),
      ).toBeInTheDocument();
    });

    it("shows progress indicator during job execution", async () => {
      const user = userEvent.setup();
      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");
      await user.click(
        screen.getByRole("button", { name: /run segmentation/i }),
      );

      // Progress indicator should appear during processing
      await waitFor(() => {
        expect(screen.getByRole("progressbar")).toBeInTheDocument();
      });
    });

    it("displays metrics after successful segmentation", async () => {
      const user = userEvent.setup();
      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");
      await user.click(
        screen.getByRole("button", { name: /run segmentation/i }),
      );

      // Wait for job to complete (mock duration is 500ms, polling is 2s)
      // Use 5s timeout to account for polling interval
      await waitFor(
        () => {
          expect(screen.getByText("0.847")).toBeInTheDocument();
        },
        { timeout: 5000 },
      );

      expect(screen.getByText("15.32 mL")).toBeInTheDocument();
    });

    it("displays viewer after successful segmentation", async () => {
      const user = userEvent.setup();
      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");
      await user.click(
        screen.getByRole("button", { name: /run segmentation/i }),
      );

      // Wait for job to complete and canvas to render
      await waitFor(
        () => {
          expect(document.querySelector("canvas")).toBeInTheDocument();
        },
        { timeout: 5000 },
      );
    });

    it("hides placeholder after successful segmentation", async () => {
      const user = userEvent.setup();
      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");
      await user.click(
        screen.getByRole("button", { name: /run segmentation/i }),
      );

      // Wait for job to complete
      await waitFor(
        () => {
          expect(screen.getByText("0.847")).toBeInTheDocument();
        },
        { timeout: 5000 },
      );

      expect(
        screen.queryByText(/select a case and run segmentation/i),
      ).not.toBeInTheDocument();
    });

    it("shows cancel button during processing", async () => {
      const user = userEvent.setup();
      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");
      await user.click(
        screen.getByRole("button", { name: /run segmentation/i }),
      );

      expect(
        screen.getByRole("button", { name: /cancel/i }),
      ).toBeInTheDocument();
    });
  });

  describe("Error Handling", () => {
    it("shows error when job creation fails", async () => {
      server.use(errorHandlers.segmentCreateError);
      const user = userEvent.setup();

      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");
      await user.click(
        screen.getByRole("button", { name: /run segmentation/i }),
      );

      await waitFor(() => {
        expect(screen.getByRole("alert")).toBeInTheDocument();
      });

      expect(screen.getByText(/failed to create job/i)).toBeInTheDocument();
    });

    it("allows retry after error", async () => {
      server.use(errorHandlers.segmentCreateError);
      const user = userEvent.setup();

      render(<App />);

      await waitFor(() => {
        expect(screen.getByRole("combobox")).toBeInTheDocument();
      });

      await user.selectOptions(screen.getByRole("combobox"), "sub-stroke0001");
      await user.click(
        screen.getByRole("button", { name: /run segmentation/i }),
      );

      await waitFor(() => {
        expect(screen.getByRole("alert")).toBeInTheDocument();
      });

      // Reset to success handler
      server.resetHandlers();

      // Retry
      await user.click(
        screen.getByRole("button", { name: /run segmentation/i }),
      );

      // Wait for job to complete (real timer now)
      await waitFor(
        () => {
          expect(screen.getByText("0.847")).toBeInTheDocument();
        },
        { timeout: 5000 },
      );

      expect(screen.queryByRole("alert")).not.toBeInTheDocument();
    });
  });

  describe("Multiple Runs", () => {
    it(
      "allows running segmentation on different cases",
      { timeout: 15000 },
      async () => {
        const user = userEvent.setup();
        render(<App />);

        await waitFor(() => {
          expect(screen.getByRole("combobox")).toBeInTheDocument();
        });

        // First case
        await user.selectOptions(
          screen.getByRole("combobox"),
          "sub-stroke0001",
        );
        await user.click(
          screen.getByRole("button", { name: /run segmentation/i }),
        );

        // Wait for first segmentation to complete - check metrics (Dice Score proves completion)
        await waitFor(
          () => {
            expect(screen.getByText("0.847")).toBeInTheDocument();
            // Button should no longer say "Processing..." after completion
            expect(
              screen.queryByRole("button", { name: /processing/i }),
            ).not.toBeInTheDocument();
          },
          { timeout: 5000 },
        );

        // Second case
        await user.selectOptions(
          screen.getByRole("combobox"),
          "sub-stroke0002",
        );
        await user.click(
          screen.getByRole("button", { name: /run segmentation/i }),
        );

        // Wait for second job to complete - check that case ID changed in metrics
        // Note: We look within the metrics container for the case ID to avoid matching dropdown
        await waitFor(
          () => {
            // The metrics panel shows case ID in a span with class "ml-2 font-mono"
            // after the "Case:" label
            const caseLabels = screen.getAllByText(/Case:/i);
            expect(caseLabels.length).toBeGreaterThan(0);
            // The second run should show sub-stroke0002 in the metrics
            const metricsContainer = screen.getByText("Results").closest("div");
            expect(metricsContainer).toHaveTextContent("sub-stroke0002");
          },
          { timeout: 5000 },
        );
      },
    );
  });
});