import "@testing-library/jest-dom/vitest";
import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import {
  NavigationToolRail,
  type NavigationToolId
} from "../src/components/NavigationToolRail";
import { NavigationWorkspace } from "../src/components/NavigationWorkspace";

afterEach(cleanup);

describe("NavigationToolRail", () => {
  it("renders the fixed tool order with accessible state and badge information", () => {
    const onSelect = vi.fn<(tool: NavigationToolId) => void>();

    render(
      <NavigationToolRail
        activeTool="conditions"
        onSelect={onSelect}
        workspaceId="test-workspace"
        statuses={{
          anchor: "alarm",
          conditions: "active",
          upcoming: "caution",
          route: "stale"
        }}
        badges={{ upcoming: 123 }}
      />
    );

    const rail = screen.getByRole("navigation", { name: "Navigationswerkzeuge" });
    const buttons = within(rail).getAllByRole("button");
    expect(buttons.map((button) => button.dataset.tool)).toEqual([
      "boat",
      "anchor",
      "conditions",
      "upcoming",
      "route"
    ]);

    expect(screen.getByRole("button", { name: /Mein Boot, bereit, öffnen/ })).toBeVisible();

    const anchor = screen.getByRole("button", { name: /Ankerwache, Alarm, öffnen/ });
    expect(anchor).toHaveAttribute("data-status", "alarm");
    expect(anchor).toHaveAttribute("aria-controls", "test-workspace");
    expect(anchor).toHaveAttribute("aria-expanded", "false");
    expect(anchor).toHaveAttribute("aria-pressed", "false");

    const conditions = screen.getByRole("button", {
      name: /Wetter und Tide, aktiv, geöffnet/
    });
    expect(conditions).toHaveAttribute("aria-expanded", "true");
    expect(conditions).toHaveAttribute("aria-pressed", "true");

    const upcoming = screen.getByRole("button", {
      name: /Als Nächstes, Warnung, 99\+ Hinweise, öffnen/
    });
    expect(upcoming).toHaveAttribute("data-status", "caution");
    expect(within(upcoming).getByText("99+")).toBeVisible();

    const route = screen.getByRole("button", { name: /Route, Daten veraltet, öffnen/ });
    fireEvent.click(route);
    expect(onSelect).toHaveBeenCalledWith("route");
  });
});

describe("NavigationWorkspace", () => {
  it("keeps compact content inaccessible and exposes controlled size and close actions", () => {
    const onSheetStateChange = vi.fn();
    const onClose = vi.fn();
    const onBack = vi.fn();

    const { container, rerender } = render(
      <NavigationWorkspace
        id="test-workspace"
        activeTool="route"
        title="Routenübersicht"
        summary="12 sm bis zum Ziel"
        status="active"
        sheetState="compact"
        presentation="bottom-sheet"
        onSheetStateChange={onSheetStateChange}
        onBack={onBack}
        onClose={onClose}
        footer={<button type="button">Navigation starten</button>}
      >
        <button type="button">Route bearbeiten</button>
      </NavigationWorkspace>
    );

    const workspace = screen.getByRole("complementary", { name: "Routenübersicht" });
    expect(workspace).toHaveAttribute("data-tool", "route");
    expect(workspace).toHaveAttribute("data-status", "active");
    expect(workspace).toHaveAttribute("data-presentation", "bottom-sheet");
    expect(workspace).toHaveAttribute("data-sheet-state", "compact");
    expect(container.querySelector(".navigation-workspace-body")).toHaveAttribute("hidden");
    expect(container.querySelector(".navigation-workspace-footer")).toHaveAttribute("hidden");
    expect(screen.queryByRole("button", { name: "Route bearbeiten" })).not.toBeInTheDocument();

    fireEvent.click(
      screen.getByRole("button", { name: "Arbeitsbereich auf halbe Höhe vergrößern" })
    );
    expect(onSheetStateChange).toHaveBeenCalledWith("half");
    fireEvent.click(screen.getByRole("button", { name: "Zurück" }));
    expect(onBack).toHaveBeenCalledTimes(1);
    fireEvent.click(screen.getByRole("button", { name: "Route schließen" }));
    expect(onClose).toHaveBeenCalledTimes(1);

    rerender(
      <NavigationWorkspace
        id="test-workspace"
        activeTool="route"
        title="Routenübersicht"
        sheetState="half"
        onClose={onClose}
      >
        <button type="button">Route bearbeiten</button>
      </NavigationWorkspace>
    );
    expect(screen.getByRole("button", { name: "Route bearbeiten" })).toBeVisible();
    expect(container.querySelector(".navigation-workspace-body")).not.toHaveAttribute("hidden");
  });
});