/**
 * @vitest-environment jsdom
 */

import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { CityPickerPopup } from "./CityPickerPopup.js";
import { transformDictionaries } from "@/shared/dictionaries/index.js";
import type { IRawDictionaries } from "@/shared/dictionaries/index.js";

const raw: IRawDictionaries = {
  regions: [
    { world_region_id: 500374, title: { ru: "Россия и страны СНГ" } },
    { world_region_id: 1, title: { ru: "Азия" } },
  ],
  countries: [
    { code: "RU", title: { ru: "Россия" }, world_region_id: 500374 },
    { code: "CN", title: { ru: "Китай" }, world_region_id: 1 },
  ],
  cities: [
    { code: "MOW", title: { ru: "Москва" }, country_code: "RU", has_afl_flights: true, location: { lat: 55, lon: 37 } },
    { code: "LED", title: { ru: "Санкт-Петербург" }, country_code: "RU", has_afl_flights: true, location: { lat: 60, lon: 30 } },
    { code: "BJS", title: { ru: "Пекин" }, country_code: "CN", has_afl_flights: true, location: { lat: 39, lon: 116 } },
  ],
  airports: [
    { code: "SVO", city_code: "MOW", title: { ru: "Шереметьево" }, has_afl_flights: true, location: { lat: 55, lon: 37 } },
    { code: "DME", city_code: "MOW", title: { ru: "Домодедово" }, has_afl_flights: true, location: { lat: 55, lon: 37 } },
    { code: "LED", city_code: "LED", title: { ru: "Пулково" }, has_afl_flights: true, location: { lat: 60, lon: 30 } },
    { code: "PEK", city_code: "BJS", title: { ru: "Пекин аэропорт" }, has_afl_flights: true, location: { lat: 39, lon: 116 } },
  ],
};
const dictionaries = transformDictionaries(raw, "ru");

describe("CityPickerPopup", () => {
  it("renders a tab button per region", () => {
    render(<CityPickerPopup dictionaries={dictionaries} onSelect={vi.fn()} />);
    expect(screen.getByText("Россия и страны СНГ")).toBeTruthy();
    expect(screen.getByText("Азия")).toBeTruthy();
  });

  it("shows the first region's rows by default", () => {
    render(<CityPickerPopup dictionaries={dictionaries} onSelect={vi.fn()} />);
    expect(screen.getByText("Москва")).toBeTruthy();
  });

  it("switches to another region when tab clicked", () => {
    render(<CityPickerPopup dictionaries={dictionaries} onSelect={vi.fn()} />);
    fireEvent.click(screen.getByText("Азия"));
    expect(screen.getByText("Пекин")).toBeTruthy();
  });

  it("calls onSelect with city code when city cell clicked", () => {
    const onSelect = vi.fn();
    render(<CityPickerPopup dictionaries={dictionaries} onSelect={onSelect} />);
    fireEvent.click(screen.getByText("Санкт-Петербург"));
    expect(onSelect).toHaveBeenCalledWith("LED");
  });

  it("calls onSelect with airport code when airport cell clicked (multi-airport city)", () => {
    const onSelect = vi.fn();
    render(<CityPickerPopup dictionaries={dictionaries} onSelect={onSelect} />);
    fireEvent.click(screen.getByText("Шереметьево"));
    expect(onSelect).toHaveBeenCalledWith("SVO");
  });

  it("highlights the selectedCode cell", () => {
    const { container } = render(
      <CityPickerPopup dictionaries={dictionaries} selectedCode="LED" onSelect={vi.fn()} />,
    );
    const activeCells = container.querySelectorAll(".city-active");
    expect(activeCells.length).toBeGreaterThan(0);
  });

  it("hides GPS button when onLocate is not provided", () => {
    render(<CityPickerPopup dictionaries={dictionaries} onSelect={vi.fn()} />);
    expect(screen.queryByTestId("city-picker-locate")).toBeNull();
  });

  it("shows GPS button when onLocate is provided and invokes it on click", () => {
    const onLocate = vi.fn();
    render(
      <CityPickerPopup dictionaries={dictionaries} onSelect={vi.fn()} onLocate={onLocate} />,
    );
    fireEvent.click(screen.getByTestId("city-picker-locate"));
    expect(onLocate).toHaveBeenCalled();
  });
});
