// @vitest-environment jsdom

import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { makeLogsPayload, makeLogsRegion } from "../test-helpers";
import { LogsSection } from "./logs-section";

describe("LogsSection", () => {
  it("renders coverage, filter controls and refresh action", () => {
    const setRange = vi.fn();
    const onRefresh = vi.fn();
    const logs = makeLogsPayload({
      coverage: { selected: 2, ready: 1, missingDatasource: 1, queryError: 1 },
      regions: [makeLogsRegion()],
    });

    render(
        <LogsSection
          logs={logs}
          logsLoading={false}
        logsFilterMode="include"
        logsFilterKeyword="ERROR"
        logsRangeMinutes={60}
        setLogsRangeMinutes={setRange}
        onRefresh={onRefresh}
      />
    );

    expect(screen.getByTestId("logs-coverage-summary")).toHaveTextContent(
      "2 selected · 1 ready · 1 datasource missing · 1 query error"
    );

    fireEvent.change(screen.getByLabelText("Logs filter mode"), { target: { value: "exclude" } });
    fireEvent.change(screen.getByLabelText("Logs filter keyword"), { target: { value: "panic" } });
    fireEvent.change(screen.getByLabelText("Logs time range"), { target: { value: "120" } });
    fireEvent.click(screen.getByRole("button", { name: "Refresh Logs" }));

    expect(setRange).toHaveBeenCalledWith(120);
    expect(onRefresh).toHaveBeenCalledWith({ mode: "exclude", keyword: "panic" });
  });

  it("shows query-error details only in the status dot tooltip", () => {
    const logs = makeLogsPayload({
      regions: [
        makeLogsRegion({
          status: "query-error",
          errorMessage: "Loki query failed",
          samples: [],
          errorCount: null,
          latestTimestamp: null,
        }),
      ],
    });

    render(
        <LogsSection
          logs={logs}
          logsLoading={false}
        logsFilterMode="include"
        logsFilterKeyword="ERROR"
        logsRangeMinutes={60}
        setLogsRangeMinutes={() => {}}
        onRefresh={() => {}}
      />
    );

    expect(screen.queryByText("Failed to load Logs")).not.toBeInTheDocument();
    expect(screen.queryByText("failed to load logs")).not.toBeInTheDocument();
    expect(screen.queryByText("Loki query failed")).not.toBeInTheDocument();
    expect(screen.getAllByText("-")).toHaveLength(3);

    const statusDot = screen.getByRole("img", { name: "Query error" });
    Object.defineProperty(statusDot, "getBoundingClientRect", {
      value: () => ({ left: 120, right: 128, top: 160, bottom: 168 }) as DOMRect,
    });
    Object.defineProperty(window, "innerHeight", { configurable: true, value: 240 });

    fireEvent.mouseEnter(statusDot);

    const tooltip = screen.getByRole("tooltip");
    expect(tooltip).toHaveTextContent("Query error");
    expect(tooltip).toHaveTextContent("Loki query failed");
    expect(tooltip).toHaveClass("fixed", "z-50");
    expect(tooltip).not.toHaveClass("absolute");
    expect(tooltip).toHaveClass("-translate-y-full");
    expect(tooltip).toHaveClass("w-[18rem]");
    expect(tooltip).toHaveStyle({ left: "160px", top: "152px" });
    expect(tooltip.parentElement).toBe(document.body);
    expect(tooltip.querySelector(".text-danger")).toHaveClass("block", "max-w-full");
  });

  it("shows error banner when logs request fails", () => {
    render(
      <LogsSection
        logs={null}
        logsLoading={false}
        logsError="Logs request timed out"
        logsFilterMode="include"
        logsFilterKeyword="ERROR"
        logsRangeMinutes={60}
        setLogsRangeMinutes={() => {}}
        onRefresh={() => {}}
      />
    );

    expect(screen.getByText("Failed to load Logs")).toBeInTheDocument();
    expect(screen.getByText("Logs request timed out")).toBeInTheDocument();
  });
});