import { describe, expect, it, vi } from "vitest";
import { fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";
import {
  renderWithProviders as render,
  screen,
  within,
} from "../utils/test-utils";
import { MethodCardPolicyDialog } from "../../app/(app)/create/components/MethodCardPolicyDialog";
import type { MethodCardPolicyStep } from "../../app/(app)/create/components/MethodCardPolicyDialog";

const steps: MethodCardPolicyStep[] = [
  {
    id: "core",
    title: "Core principle and scope",
    emptyDescription: "Write this part of the policy.",
    done: false,
    summary: "",
    renderEditor: () => (
      <textarea aria-label="Core principle and scope" defaultValue="" />
    ),
  },
];

describe("MethodCardPolicyDialog", () => {
  it("routes through a step then Add to Rule", () => {
    const onConfirm = vi.fn();
    render(
      <MethodCardPolicyDialog
        isOpen
        cardLabel="Signal"
        editing={false}
        steps={steps}
        onClose={() => undefined}
        onConfirm={onConfirm}
      />,
    );

    const dialog = screen.getByRole("dialog");
    expect(
      within(dialog).getByRole("button", { name: "Add to Rule" }),
    ).toBeInTheDocument();
    fireEvent.click(
      within(dialog).getByRole("button", { name: "Core principle and scope" }),
    );
    expect(
      within(dialog).getByRole("textbox", { name: "Core principle and scope" }),
    ).toBeInTheDocument();
    fireEvent.click(within(dialog).getByRole("button", { name: "Save" }));
    expect(
      within(dialog).getByRole("button", { name: "Add to Rule" }),
    ).toBeInTheDocument();
    fireEvent.click(within(dialog).getByRole("button", { name: "Add to Rule" }));
    expect(onConfirm).toHaveBeenCalledTimes(1);
  });
});