// frontend/src/shell/WorkflowBar.test.tsx
import { render, screen } from "@testing-library/react";
import { WorkflowBar } from "./WorkflowBar";
import { useSessionStore } from "../store/sessionStore";

beforeEach(() => useSessionStore.getState().resetSession());

test("highlights the phase matching currentPhase", () => {
  useSessionStore.getState().setPhase("F4");
  render(<WorkflowBar />);
  expect(screen.getByTestId("phase-F4")).toHaveAttribute("data-active", "true");
  // Other phases are not highlighted.
  expect(screen.getByTestId("phase-F1")).toHaveAttribute("data-active", "false");
  expect(screen.getByTestId("phase-F8")).toHaveAttribute("data-active", "false");
});

test("no phase highlighted when currentPhase is null", () => {
  render(<WorkflowBar />);
  for (const id of ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8"]) {
    expect(screen.getByTestId(`phase-${id}`)).toHaveAttribute("data-active", "false");
  }
});

test("dots carry done / running / pending states around the active phase", () => {
  useSessionStore.getState().setPhase("F3");
  render(<WorkflowBar />);
  expect(screen.getByTestId("phase-F1")).toHaveAttribute("data-state", "done");
  expect(screen.getByTestId("phase-F3")).toHaveAttribute("data-state", "running");
  expect(screen.getByTestId("phase-F5")).toHaveAttribute("data-state", "pending");
});

test("phase_started colors a phase even when no human gate was rendered", () => {
  const store = useSessionStore.getState();
  store.setPhase("F1");
  store.applyEvent({ type: "system_event", event: "phase_started", phase: "F2" });

  render(<WorkflowBar />);

  expect(screen.getByTestId("phase-F1")).toHaveAttribute("data-state", "done");
  expect(screen.getByTestId("phase-F2")).toHaveAttribute("data-state", "running");
  expect(screen.getByTestId("phase-F3")).toHaveAttribute("data-state", "pending");
});

test("the active dot turns to the error state when phaseError flags it", () => {
  const st = useSessionStore.getState();
  st.applyEvent({ type: "ui_request", ui_request: { id: "u", widget: "select", phase: "F3_x" } });
  st.applyEvent({ type: "info", level: "error", text: "boom" });
  render(<WorkflowBar />);
  expect(screen.getByTestId("phase-F3")).toHaveAttribute("data-state", "error");
});

test("currentPhase F1 renders F1 as running (yellow)", () => {
  useSessionStore.getState().setPhase("F1");
  render(<WorkflowBar />);
  expect(screen.getByTestId("phase-F1")).toHaveAttribute("data-state", "running");
});

test("finalized marks all phases done (green)", () => {
  useSessionStore.getState().setPhase("F8");
  render(<WorkflowBar finalized />);
  for (const id of ["F1", "F4", "F8"]) {
    expect(screen.getByTestId(`phase-${id}`)).toHaveAttribute("data-state", "done");
  }
});