import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { I18nProvider } from "@/translations/provider";
import FemaleOutcomeSheet from "./female-outcome-sheet";

function renderSheet(onSubmit = vi.fn()) {
  render(
    <I18nProvider locale="en">
      <FemaleOutcomeSheet onSubmit={onSubmit} />
    </I18nProvider>,
  );

  return onSubmit;
}

describe("FemaleOutcomeSheet", () => {
  afterEach(cleanup);

  beforeEach(() => {
    vi.useRealTimers();
  });

  it("keeps the profile unchanged when the acquaintance process is still ongoing", async () => {
    const onSubmit = renderSheet();

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

    expect(onSubmit).toHaveBeenCalledWith("success");
  });

  it("requires a cancellation reason and submits it as a failure", async () => {
    const onSubmit = renderSheet();

    await userEvent.click(
      screen.getByLabelText(
        /We did not reach the agreement needed to continue acquaintance/i,
      ),
    );

    const confirmation = screen.getByRole("button", {
      name: "Confirm",
    });
    expect(confirmation).toHaveProperty("disabled", true);

    await userEvent.click(
      screen.getByRole("button", { name: "No mutual interest" }),
    );
    expect(confirmation).toHaveProperty("disabled", false);

    fireEvent.click(confirmation);
    expect(onSubmit).toHaveBeenCalledWith("failure", "No mutual interest");
  });

  it("requires a written note when the other cancellation reason is selected", async () => {
    renderSheet();

    await userEvent.click(
      screen.getByLabelText(
        /We did not reach the agreement needed to continue acquaintance/i,
      ),
    );
    await userEvent.click(
      screen.getByRole("button", { name: "Other reasons" }),
    );

    const confirmation = screen.getByRole("button", {
      name: "Confirm",
    });
    expect(confirmation).toHaveProperty("disabled", true);

    fireEvent.change(
      screen.getByPlaceholderText(
        "Feel free to briefly explain your decision...",
      ),
      {
        target: {
          value: "The families could not agree on the next steps.",
        },
      },
    );
    expect(confirmation).toHaveProperty("disabled", false);
  });

  it("applies rtl direction when locale is Arabic (ar)", () => {
    render(
      <I18nProvider locale="ar">
        <FemaleOutcomeSheet />
      </I18nProvider>,
    );

    const dialog = screen.getByRole("dialog");
    expect(dialog).toHaveAttribute("dir", "rtl");
  });

  it("adapts dynamically from compact static to flutter-draggable-sheet when option 2 is chosen, and collapses back", async () => {
    renderSheet();

    const dialog = screen.getByRole("dialog");
    const section = dialog.querySelector("section");
    expect(section).not.toBeNull();

    // Initially in ongoing (Option A): compact static mode
    expect(section?.className).toContain("h-auto");
    expect(section?.className).not.toContain("flutter-draggable-sheet");

    // Click Option B (Canceled / Decline): switches to full expandable draggable mode
    await userEvent.click(
      screen.getByLabelText(
        /We did not reach the agreement needed to continue acquaintance/i,
      ),
    );

    expect(section?.className).toContain("flutter-draggable-sheet");
    expect(section?.className).not.toContain("h-auto");
    expect(screen.getByText("Please select the reason for cancellation:")).toBeInTheDocument();

    // Click Option A (Ongoing) again: reverts to compact mode
    await userEvent.click(
      screen.getByLabelText(
        /We are in the acquaintance\/proposal process/i,
      ),
    );

    expect(section?.className).toContain("h-auto");
    expect(section?.className).not.toContain("flutter-draggable-sheet");
    expect(screen.queryByText("Please select the reason for cancellation:")).not.toBeInTheDocument();
  });
});