import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import type { WidgetDescriptor } from "../api/types";
import { JoinReviewWidget } from "./JoinReviewWidget";

const descriptor = {
  id: "u-joins",
  widget: "join-review",
  title: "F4 — Proposed joins",
  confirm_label: "Continue",
  reserved: ["other"],
  options: [
    {
      id: "procedure-event",
      label: "Procedure to event",
      detail: "JOIN procedure p ON p.patient_id = e.patient_id",
      rationale: "Patient grain",
    },
    {
      id: "event-time",
      label: "Event to time",
      detail: "JOIN dim_time d ON d.day_key = e.time_key",
      rationale: "DWH time key",
    },
  ],
} satisfies WidgetDescriptor;

test("renders joins as read-only information and Continue accepts the complete set", async () => {
  const onRespond = vi.fn();
  render(<JoinReviewWidget descriptor={descriptor} onRespond={onRespond} />);

  expect(screen.queryAllByRole("checkbox")).toHaveLength(0);
  expect(screen.getByText("Procedure to event")).toBeInTheDocument();
  expect(screen.getByText(descriptor.options[0].detail)).toBeInTheDocument();
  expect(screen.getByText("Patient grain")).toBeInTheDocument();

  await userEvent.click(screen.getByRole("button", { name: "Continue" }));

  expect(onRespond).toHaveBeenCalledWith({
    id: "u-joins",
    kind: "join-review",
    choices: ["procedure-event", "event-time"],
  });
});

test("Other specify sends textual feedback instead of a join selection", async () => {
  const onRespond = vi.fn();
  render(<JoinReviewWidget descriptor={descriptor} onRespond={onRespond} />);

  await userEvent.click(screen.getByRole("button", { name: "Other — specify" }));
  await userEvent.type(screen.getByPlaceholderText("Describe your alternative…"), "Use the episode key");
  await userEvent.click(screen.getByRole("button", { name: "Send" }));

  expect(onRespond).toHaveBeenCalledWith({
    id: "u-joins",
    control: "freetext",
    text: "Use the episode key",
  });
});