// @vitest-environment happy-dom
// Pure prop-driven component; match the act() convention used by the
// other ClaimDrawer test files (ClaimDrawerHeader / ClaimDrawerSkeleton /
// ClaimDrawerError / ValidationPanel / ServiceLinesTable).
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;

import React, { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { describe, expect, it } from "vitest";
import { DiagnosesList } from "./DiagnosesList";
import type { ClaimDetailDiagnosis } from "@/types";

function renderIntoContainer(element: React.ReactElement): {
  container: HTMLDivElement;
  unmount: () => void;
} {
  const container = document.createElement("div");
  document.body.appendChild(container);
  const root: Root = createRoot(container);
  act(() => {
    root.render(element);
  });
  return {
    container,
    unmount: () => {
      act(() => root.unmount());
      container.remove();
    },
  };
}

function makeDiagnosis(
  overrides: Partial<ClaimDetailDiagnosis> = {}
): ClaimDetailDiagnosis {
  return {
    code: "E11.9",
    qualifier: "ABK",
    ...overrides,
  };
}

describe("DiagnosesList", () => {
  it("test_section_label_includes_count", () => {
    const diagnoses = [
      makeDiagnosis({ code: "E11.9" }),
      makeDiagnosis({ code: "I10", qualifier: null }),
      makeDiagnosis({ code: "M54.5", qualifier: null }),
    ];

    const { container, unmount } = renderIntoContainer(
      <DiagnosesList diagnoses={diagnoses} />
    );

    const label = container.querySelector('[data-testid="section-label"]');
    expect(label).not.toBeNull();

    // `uppercase` is applied via Tailwind CSS, so textContent gives the
    // source-case string "Diagnoses"; assert case-insensitively and
    // confirm the visual transform via the className sniff below.
    const text = (label?.textContent ?? "").toLowerCase();
    expect(text).toContain("diagnoses");
    expect(text).toContain("(3)");

    // Eyebrow style (uppercase + tracking) — sniff the className.
    // The shared `.eyebrow` class in index.css consolidates the
    // eyebrow treatment; tests assert it lands on the section label.
    const cls = label?.className ?? "";
    expect(cls).toContain("eyebrow");

    unmount();
  });

  it("test_empty_state_renders_when_no_diagnoses", () => {
    const { container, unmount } = renderIntoContainer(
      <DiagnosesList diagnoses={[]} />
    );

    const empty = container.querySelector('[data-testid="diagnoses-empty"]');
    expect(empty).not.toBeNull();
    expect(empty?.textContent ?? "").toContain("No diagnoses");

    // No list rendered in the empty state.
    expect(container.querySelector('[data-testid="diagnoses-list"]')).toBeNull();
    expect(
      container.querySelectorAll('[data-testid="diagnosis-item"]').length
    ).toBe(0);

    // Section label still present, but with count "(0)".
    const label = container.querySelector('[data-testid="section-label"]');
    expect(label?.textContent ?? "").toContain("(0)");

    unmount();
  });

  it("test_single_diagnosis_renders_code", () => {
    const { container, unmount } = renderIntoContainer(
      <DiagnosesList
        diagnoses={[makeDiagnosis({ code: "E11.9", qualifier: null })]}
      />
    );

    const items = container.querySelectorAll('[data-testid="diagnosis-item"]');
    expect(items.length).toBe(1);
    expect(items[0].textContent ?? "").toContain("E11.9");

    unmount();
  });

  it("test_qualifier_shown_when_present", () => {
    const { container, unmount } = renderIntoContainer(
      <DiagnosesList
        diagnoses={[makeDiagnosis({ code: "E11.9", qualifier: "ABK" })]}
      />
    );

    const item = container.querySelector('[data-testid="diagnosis-item"]');
    expect(item).not.toBeNull();

    const text = item?.textContent ?? "";
    // Both the qualifier and the code should appear together.
    expect(text).toContain("ABK");
    expect(text).toContain("E11.9");

    unmount();
  });

  it("test_qualifier_absent_does_not_render_garbage", () => {
    const { container, unmount } = renderIntoContainer(
      <DiagnosesList
        diagnoses={[makeDiagnosis({ code: "E11.9", qualifier: null })]}
      />
    );

    const item = container.querySelector('[data-testid="diagnosis-item"]');
    expect(item).not.toBeNull();

    const text = (item?.textContent ?? "").toLowerCase();
    // No stringified null/undefined.
    expect(text).not.toContain("undefined");
    expect(text).not.toContain("null");
    // No stray separator that would imply a missing qualifier slot.
    expect(text).not.toContain("·");

    unmount();
  });

  it("test_description_from_inline_dict_when_available", () => {
    const { container, unmount } = renderIntoContainer(
      <DiagnosesList
        diagnoses={[makeDiagnosis({ code: "E11.9", qualifier: null })]}
      />
    );

    const item = container.querySelector('[data-testid="diagnosis-item"]');
    expect(item).not.toBeNull();

    const text = item?.textContent ?? "";
    // E11.9 is in the inline ICD-10 dict: "Type 2 diabetes mellitus
    // without complications". Assert a stable substring.
    expect(text.toLowerCase()).toContain("type 2 diabetes");

    unmount();
  });

  it("test_description_absent_for_unknown_code", () => {
    // A clearly-fake code that's not in the inline dict.
    const { container, unmount } = renderIntoContainer(
      <DiagnosesList
        diagnoses={[
          makeDiagnosis({ code: "ZZZ.99", qualifier: null }),
        ]}
      />
    );

    const item = container.querySelector('[data-testid="diagnosis-item"]');
    expect(item).not.toBeNull();

    const text = (item?.textContent ?? "").trim();
    // Only the code should appear — no description placeholder, no
    // separator dangling after the code.
    expect(text).toContain("ZZZ.99");
    // Should not contain any of the known dict descriptions.
    expect(text.toLowerCase()).not.toContain("diabetes");
    expect(text.toLowerCase()).not.toContain("hypertension");
    expect(text.toLowerCase()).not.toContain("asthma");

    unmount();
  });
});