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

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

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

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

vi.mock("~/components/dashboard/WidgetFilterBar.js", () => ({
  WidgetFilterBar: () => <div>filters</div>,
}));

vi.mock("~/hooks/useWidgetFilterOptions.js", () => ({
  useWidgetFilterOptions: () => ({ chapters: [] }),
}));

describe("TopValueWidget", () => {
  it("adds score breakdown explainability to the score badge hover text", () => {
    useQueryMock.mockReturnValue({
      data: [
        {
          id: "res_1",
          eid: "pparker",
          displayName: "Peter Parker",
          chapter: "Delivery",
          lcrCents: 9_500,
          valueScore: 91,
          valueScoreBreakdown: {
            skillDepth: 85,
            skillBreadth: 74,
            costEfficiency: 93,
            chargeability: 78,
            experience: 88,
            total: 91,
          },
          valueScoreUpdatedAt: "2026-03-03T00:00:00.000Z",
          countryName: "Germany",
          federalState: "BY",
          metroCityName: "Augsburg",
        },
      ],
      isLoading: false,
    });

    const html = renderToStaticMarkup(
      <TopValueWidget config={{ limit: 10 }} onConfigChange={() => {}} />,
    );

    expect(html).toContain("Peter Parker: Value score 91");
    expect(html).toContain("Skill depth 85");
    expect(html).toContain("Cost efficiency 93");
    expect(html).toContain("Updated Mar 3, 2026");
  });
});
