import {
  render,
  screen,
  cleanup,
  fireEvent,
  waitFor,
} from "@testing-library/react";
import { describe, it, expect, vi, afterEach } from "vitest";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { QuestionAnswersProvider } from "./question-answer-storage";
import { QuestionBirthplace } from "./question-birthplace";
import QuestionNumber from "./question-number";
import QuestionText from "./question-text";

vi.mock("@/translations/provider", () => ({
  useI18n: vi.fn(() => ({ locale: "fa", dictionary: {} })),
}));

describe("UI Config based behavior", () => {
  afterEach(() => {
    cleanup();
  });

  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });

  it("should trigger GeoIP only when ui_config.enable_geoip is true", () => {
    // With totally random title but ui_config.enable_geoip = true
    const qWithGeo = {
      id: "q1",
      title: "Random Title Here",
      type: "birthplace",
      order: 1,
      required: true,
      isVisible: true,
      description: "",
      tooltip: "",
      extras: {},
      options: [],
      ui_config: { enable_geoip: true },
    } as any;

    const { rerender } = render(
      <QueryClientProvider client={queryClient}>
        <QuestionAnswersProvider slug="test" questions={[qWithGeo]}>
          <QuestionBirthplace question={qWithGeo} />
        </QuestionAnswersProvider>
      </QueryClientProvider>,
    );

    // Auto button is present when GeoIP is active
    expect(screen.getByText("خودکار")).toBeDefined();

    // With title "residence" but no ui_config
    const qWithoutGeo = {
      id: "q2",
      title: "residence test",
      type: "birthplace",
      order: 1,
      required: true,
      isVisible: true,
      description: "",
      tooltip: "",
      extras: {},
      options: [],
      ui_config: {},
    } as any;

    rerender(
      <QueryClientProvider client={queryClient}>
        <QuestionAnswersProvider slug="test" questions={[qWithoutGeo]}>
          <QuestionBirthplace question={qWithoutGeo} />
        </QuestionAnswersProvider>
      </QueryClientProvider>,
    );

    expect(screen.queryByText("خودکار")).toBeNull();
  });

  it("should trigger currency behavior only when ui_config.currency_enabled is true", () => {
    // Title is random, but currency_enabled is true
    const qWithCurrency = {
      id: "q1",
      title: "Random Income",
      type: "number",
      order: 1,
      required: true,
      isVisible: true,
      description: "",
      tooltip: "",
      extras: { placeHolder: "", range: [0, 0] },
      options: [],
      ui_config: { currency_enabled: true },
    } as any;

    const { rerender } = render(
      <QueryClientProvider client={queryClient}>
        <QuestionAnswersProvider slug="test" questions={[qWithCurrency]}>
          <QuestionNumber question={qWithCurrency} />
        </QuestionAnswersProvider>
      </QueryClientProvider>,
    );

    // Dropdown arrow should be rendered in currency mode (path is in SVG)
    expect(screen.getByRole("img", { name: "Dropdown chevron" })).toBeDefined();

    // Title is "Monthly Income", but currency_enabled is false
    const qWithoutCurrency = {
      id: "q2",
      title: "Monthly Income",
      type: "number",
      order: 1,
      required: true,
      isVisible: true,
      description: "",
      tooltip: "",
      extras: { placeHolder: "", range: [0, 0] },
      options: [],
      ui_config: {},
    } as any;

    rerender(
      <QueryClientProvider client={queryClient}>
        <QuestionAnswersProvider slug="test" questions={[qWithoutCurrency]}>
          <QuestionNumber question={qWithoutCurrency} />
        </QuestionAnswersProvider>
      </QueryClientProvider>,
    );

    expect(screen.queryByRole("img", { name: "Dropdown chevron" })).toBeNull();
  });

  it("should render error message from validation.errorMessage or fallback to locale", async () => {
    // Title is random, type is email, custom error message
    const qCustomError = {
      id: "q1",
      title: "Random Email",
      type: "email",
      order: 1,
      required: true,
      isVisible: true,
      description: "",
      tooltip: "",
      extras: { placeHolder: "" },
      options: [],
      validation: { errorMessage: "Custom Backend Error" },
    } as any;

    const { rerender } = render(
      <QueryClientProvider client={queryClient}>
        <QuestionAnswersProvider slug="test" questions={[qCustomError]}>
          <QuestionText question={qCustomError} />
        </QuestionAnswersProvider>
      </QueryClientProvider>,
    );

    const input = screen.getByRole("textbox");
    fireEvent.change(input, { target: { value: "invalid_email" } });

    await waitFor(() => {
      expect(screen.getByText("Custom Backend Error")).toBeDefined();
    });

    const qFallbackError = {
      id: "q2",
      title: "Random Email",
      type: "email",
      order: 1,
      required: true,
      isVisible: true,
      description: "",
      tooltip: "",
      extras: { placeHolder: "" },
      options: [],
      validation: {},
    } as any;

    rerender(
      <QueryClientProvider client={queryClient}>
        <QuestionAnswersProvider slug="test" questions={[qFallbackError]}>
          <QuestionText question={qFallbackError} />
        </QuestionAnswersProvider>
      </QueryClientProvider>,
    );

    const input2 = screen.getByRole("textbox");
    fireEvent.change(input2, { target: { value: "invalid_email_again" } });

    await waitFor(() => {
      expect(screen.getByText("یک آدرس ایمیل معتبر وارد کنید.")).toBeDefined();
    });
  });

  it("should preserve city input when country is selected or changed in birthplace", async () => {
    const qBirthplace = {
      id: "birthplace_test",
      title: "Birthplace",
      type: "birthplace",
      order: 1,
      required: true,
      isVisible: true,
      description: "",
      tooltip: "",
      extras: { placeHolder: "City, region" },
      options: [],
      ui_config: {},
    } as any;

    render(
      <QueryClientProvider client={queryClient}>
        <QuestionAnswersProvider slug="test" questions={[qBirthplace]}>
          <QuestionBirthplace question={qBirthplace} />
        </QuestionAnswersProvider>
      </QueryClientProvider>,
    );

    // Type city into input
    const cityInput = screen.getByPlaceholderText("City, region");
    expect(document.activeElement).not.toBe(cityInput);
    fireEvent.change(cityInput, { target: { value: "Tehran" } });
    expect((cityInput as HTMLInputElement).value).toBe("Tehran");

    // Open country dropdown
    const countryButton = screen.getByText("انتخاب کشور");
    fireEvent.click(countryButton);
    expect(document.body.classList.contains("dropdown-open")).toBe(true);

    // Select Iran
    const iranOption = screen.getByRole("button", { name: "ایران" });
    fireEvent.click(iranOption);

    // City should still be Tehran!
    expect((cityInput as HTMLInputElement).value).toBe("Tehran");
    await waitFor(() => {
      expect(document.activeElement).toBe(cityInput);
      expect(document.body.classList.contains("dropdown-open")).toBe(false);
    });
  });
});
