import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MultiselectWidget } from "./MultiselectWidget";

test("confirms the checked ids including initially selected", async () => {
  const onRespond = vi.fn();
  render(
    <MultiselectWidget
      descriptor={{
        id: "u1",
        widget: "multiselect",
        options: [
          { id: "t1", label: "t1", selected: true },
          { id: "t2", label: "t2" },
        ],
      }}
      onRespond={onRespond}
    />
  );
  await userEvent.click(screen.getByRole("checkbox", { name: /t2/ }));
  await userEvent.click(screen.getByRole("button", { name: /confirm/i }));
  expect(onRespond).toHaveBeenCalledWith({ id: "u1", kind: "multiselect", choices: ["t1", "t2"] });
});

test("uses memory-specific selection copy without changing selected ids", async () => {
  const onRespond = vi.fn();
  render(
    <MultiselectWidget
      descriptor={{
        id: "u-memory",
        widget: "multiselect",
        selection_label: "memory da applicare",
        confirm_label: "Applica le memory selezionate",
        options: [
          { id: "recommended", label: "Memory raccomandata", selected: true },
          { id: "optional", label: "Memory opzionale", selected: false },
        ],
      }}
      onRespond={onRespond}
    />
  );

  expect(screen.getByRole("checkbox", { name: /memory raccomandata/i })).toBeChecked();
  expect(screen.getByText("1 / 2 memory da applicare")).toBeInTheDocument();
  await userEvent.click(screen.getByRole("button", { name: "Applica le memory selezionate" }));
  expect(onRespond).toHaveBeenCalledWith({ id: "u-memory", kind: "multiselect", choices: ["recommended"] });
});

test("shows the exact content and provenance for every memory option", () => {
  render(
    <MultiselectWidget
      descriptor={{
        id: "u-memory-content",
        widget: "multiselect",
        options: [
          {
            id: "mem-42",
            label: "paziente attivo",
            detail: "flag_attivo = TRUE",
            rationale: "*Confermato* dal reviewer",
            meta: { question_context: "Conta i **pazienti attivi**" },
          },
        ],
      }}
      onRespond={vi.fn()}
    />
  );

  expect(screen.getByText("flag_attivo = TRUE")).toBeInTheDocument();
  expect(screen.getByText("Confermato").tagName).toBe("EM");
  expect(screen.getByText("pazienti attivi").tagName).toBe("STRONG");
});

test("renders memory detail as human-friendly Markdown", () => {
  render(
    <MultiselectWidget
      descriptor={{
        id: "u-memory-markdown",
        widget: "multiselect",
        selection_label: "memory da applicare",
        options: [
          {
            id: "mem-0042",
            label: "Paziente attivo",
            detail: "**Definizione**\n\n- `flag_attivo = TRUE`\n- record non annullato",
          },
        ],
      }}
      onRespond={vi.fn()}
    />
  );

  expect(screen.getByText("Definizione").tagName).toBe("STRONG");
  expect(screen.getByText("flag_attivo = TRUE").tagName).toBe("CODE");
  expect(screen.getByText("record non annullato").closest("li")).not.toBeNull();
  expect(screen.queryByText("**Definizione**")).not.toBeInTheDocument();
});

test("select-all checks all options", async () => {
  const onRespond = vi.fn();
  render(
    <MultiselectWidget
      descriptor={{
        id: "u1",
        widget: "multiselect",
        options: [
          { id: "a", label: "Alpha" },
          { id: "b", label: "Beta" },
        ],
      }}
      onRespond={onRespond}
    />
  );
  await userEvent.click(screen.getByRole("button", { name: /select all/i }));
  await userEvent.click(screen.getByRole("button", { name: /confirm/i }));
  expect(onRespond).toHaveBeenCalledWith({ id: "u1", kind: "multiselect", choices: ["a", "b"] });
});

test("deselect-all unchecks all options", async () => {
  const onRespond = vi.fn();
  render(
    <MultiselectWidget
      descriptor={{
        id: "u1",
        widget: "multiselect",
        options: [
          { id: "a", label: "Alpha", selected: true },
          { id: "b", label: "Beta", selected: true },
        ],
      }}
      onRespond={onRespond}
    />
  );
  await userEvent.click(screen.getByRole("button", { name: /deselect all/i }));
  await userEvent.click(screen.getByRole("button", { name: /confirm/i }));
  expect(onRespond).toHaveBeenCalledWith({ id: "u1", kind: "multiselect", choices: [] });
});

test("confirm is disabled when nothing checked and allow_empty is false", async () => {
  const onRespond = vi.fn();
  render(
    <MultiselectWidget
      descriptor={{
        id: "u1",
        widget: "multiselect",
        allow_empty: false,
        options: [{ id: "x", label: "X" }],
      }}
      onRespond={onRespond}
    />
  );
  const btn = screen.getByRole("button", { name: /confirm/i });
  expect(btn).toBeDisabled();
  await userEvent.click(btn);
  expect(onRespond).not.toHaveBeenCalled();
});

test("deselect-all with allow_empty false disables Conferma (empty confirm impossible)", async () => {
  const onRespond = vi.fn();
  render(
    <MultiselectWidget
      descriptor={{
        id: "u1",
        widget: "multiselect",
        allow_empty: false,
        options: [
          { id: "a", label: "Alpha", selected: true },
          { id: "b", label: "Beta", selected: true },
        ],
      }}
      onRespond={onRespond}
    />
  );
  const btn = screen.getByRole("button", { name: /confirm/i });
  expect(btn).not.toBeDisabled();
  await userEvent.click(screen.getByRole("button", { name: /deselect all/i }));
  expect(btn).toBeDisabled();
  await userEvent.click(btn);
  expect(onRespond).not.toHaveBeenCalled();
});

test("confirm is enabled when allow_empty is false but something is checked", async () => {
  const onRespond = vi.fn();
  render(
    <MultiselectWidget
      descriptor={{
        id: "u1",
        widget: "multiselect",
        allow_empty: false,
        options: [{ id: "x", label: "X", selected: true }],
      }}
      onRespond={onRespond}
    />
  );
  const btn = screen.getByRole("button", { name: /confirm/i });
  expect(btn).not.toBeDisabled();
  await userEvent.click(btn);
  expect(onRespond).toHaveBeenCalledWith({ id: "u1", kind: "multiselect", choices: ["x"] });
});

test("renders reserved controls and emits control on click", async () => {
  const onRespond = vi.fn();
  render(
    <MultiselectWidget
      descriptor={{
        id: "u1",
        widget: "multiselect",
        options: [{ id: "a", label: "Alpha" }],
        reserved: ["back", "exit", "other"],
      }}
      onRespond={onRespond}
    />
  );
  await userEvent.click(screen.getByRole("button", { name: /go back/i }));
  expect(onRespond).toHaveBeenCalledWith({ id: "u1", control: "back" });
  await userEvent.click(screen.getByRole("button", { name: /^exit$/i }));
  expect(onRespond).toHaveBeenCalledWith({ id: "u1", control: "exit" });
});