import React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vitest";
import { PeakTimesWidget } from "./PeakTimesWidget.js";

const { useQueryMock } = vi.hoisted(() => ({
  useQueryMock: vi.fn(),
}));

vi.mock("next/dynamic", () => ({
  default: () => () => <div>chart</div>,
}));

vi.mock("~/lib/trpc/client.js", () => ({
  trpc: {
    dashboard: {
      getPeakTimes: {
        useQuery: useQueryMock,
      },
    },
  },
}));

vi.mock("~/components/ui/InfoTooltip.js", () => ({
  InfoTooltip: () => <span>i</span>,
}));

describe("PeakTimesWidget", () => {
  it("shows calendar basis only when details are enabled", () => {
    globalThis.React = React;
    useQueryMock.mockReturnValue({
      data: [
        {
          period: "2026-03",
          periodStart: "2026-03-01",
          totalHours: 120,
          capacityHours: 160,
          bookedHours: 120,
          remainingHours: 40,
          overbookedHours: 0,
          utilizationPct: 75,
          groups: [
            {
              name: "Delivery",
              hours: 120,
              capacityHours: 160,
              remainingHours: 40,
              overbookedHours: 0,
              utilizationPct: 75,
            },
          ],
          derivation: {
            periodStart: "2026-03-01",
            periodEnd: "2026-03-31",
            calendarContextCount: 2,
            resourceCount: 2,
            groupCount: 1,
            baseAvailableHours: 176,
            effectiveAvailableHours: 160,
            publicHolidayHoursDeduction: 8,
            absenceDayEquivalent: 1,
            absenceHoursDeduction: 8,
            calendarLocations: [
              {
                countryCode: "DE",
                countryName: "Germany",
                federalState: "BY",
                metroCityName: "Munich",
                resourceCount: 1,
                effectiveAvailableHours: 80,
              },
              {
                countryCode: "DE",
                countryName: "Germany",
                federalState: "HH",
                metroCityName: "Hamburg",
                resourceCount: 1,
                effectiveAvailableHours: 80,
              },
            ],
            bookedHours: 120,
            capacityHours: 160,
            remainingCapacityHours: 40,
            overbookedHours: 0,
            utilizationPct: 75,
          },
        },
      ],
      isLoading: false,
    });

    const compactHtml = renderToStaticMarkup(
      <PeakTimesWidget config={{ showDetails: false }} onConfigChange={() => {}} />,
    );
    const detailedHtml = renderToStaticMarkup(
      <PeakTimesWidget config={{ showDetails: true }} onConfigChange={() => {}} />,
    );

    expect(compactHtml).not.toContain("calendar bases");
    expect(compactHtml).not.toContain("DE / BY / Munich");
    expect(detailedHtml).toContain("2 calendar bases");
    expect(detailedHtml).toContain("DE / BY / Munich (1x");
    expect(detailedHtml).toContain("DE / HH / Hamburg (1x");
  });
});
