// @vitest-environment jsdom
import { forwardRef } from "react";
import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";
import { FlightsMiniList } from "./FlightsMiniList.js";
import type { ISimpleFlight } from "../../types.js";

// Match the router mock convention used across the project.
// Forward the ref so parent-held refs to list items still resolve to DOM nodes.
vi.mock("@modern-js/runtime/router", () => ({
  Link: forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement> & { to: string }>(
    ({ children, to, ...props }, ref) => (
      <a ref={ref} href={to} {...props}>{children}</a>
    ),
  ),
}));

vi.mock("@/i18n/provider.js", () => ({
  useTranslation: () => ({ t: (k: string) => k }),
}));

// Mock scrollIntoView (not implemented in jsdom)
beforeEach(() => {
  Element.prototype.scrollIntoView = vi.fn();
});

function makeFlight(id: string, date = "20260416"): ISimpleFlight {
  return {
    id,
    routeType: "Direct" as const,
    flyingTime: "1h",
    status: "Scheduled" as const,
    flightId: { carrier: "SU", flightNumber: "0022", suffix: "", date },
    operatingBy: {},
    leg: {
      arrival: {
        scheduled: { airport: "LED", airportCode: "LED", city: "SPB", cityCode: "LED", countryCode: "RU" },
        latest: { airport: "LED", airportCode: "LED", city: "SPB", cityCode: "LED", countryCode: "RU" },
        dispatch: "", gate: "", terminal: "",
        times: { scheduledArrival: { dayChange: { value: 0, title: "" }, local: "12:30", localTime: "", tzOffset: 0, utc: "" } },
      },
      dayChange: 0,
      departure: {
        scheduled: { airport: "SVO", airportCode: "SVO", city: "MOW", cityCode: "MOW", countryCode: "RU" },
        latest: { airport: "SVO", airportCode: "SVO", city: "MOW", cityCode: "MOW", countryCode: "RU" },
        dispatch: "", gate: "", terminal: "", checkingStatus: "Scheduled", parkingStand: "",
        times: { scheduledDeparture: { dayChange: { value: 0, title: "" }, local: "10:00", localTime: "", tzOffset: 0, utc: "" } },
      },
      equipment: {},
      flags: { checkinAvailable: false, returnToAirport: false, routeChanged: false },
      flyingTime: "1h",
      index: 0,
      operatingBy: {},
      status: "Scheduled" as const,
      updated: "",
    },
  };
}

describe("FlightsMiniList", () => {
  it("returns null when flights array is empty", () => {
    const current = makeFlight("SU0022-20260416");
    const { container } = render(
      <FlightsMiniList flights={[]} currentFlight={current} lang="ru" />,
    );
    expect(container.firstChild).toBeNull();
  });

  it("returns null when flights array has only one flight", () => {
    const current = makeFlight("SU0022-20260416");
    const { container } = render(
      <FlightsMiniList flights={[current]} currentFlight={current} lang="ru" />,
    );
    expect(container.firstChild).toBeNull();
  });

  it("renders one item per flight when multiple flights", () => {
    const flights = [
      makeFlight("SU0022-20260416", "20260416"),
      makeFlight("SU0022-20260417", "20260417"),
      makeFlight("SU0022-20260418", "20260418"),
    ];
    render(<FlightsMiniList flights={flights} currentFlight={flights[0]!} lang="ru" />);
    expect(screen.getByTestId("mini-list-item-SU0022-20260416")).toBeTruthy();
    expect(screen.getByTestId("mini-list-item-SU0022-20260417")).toBeTruthy();
    expect(screen.getByTestId("mini-list-item-SU0022-20260418")).toBeTruthy();
  });

  it("highlights the item matching currentFlight.id", () => {
    const flights = [
      makeFlight("SU0022-20260416", "20260416"),
      makeFlight("SU0022-20260417", "20260417"),
    ];
    render(<FlightsMiniList flights={flights} currentFlight={flights[1]!} lang="ru" />);
    const selected = screen.getByTestId("mini-list-item-SU0022-20260417");
    const notSelected = screen.getByTestId("mini-list-item-SU0022-20260416");
    expect(selected.className).toMatch(/--selected/);
    expect(notSelected.className).not.toMatch(/--selected/);
  });

  it("calls scrollIntoView on the selected item after mount", async () => {
    const flights = [
      makeFlight("SU0022-20260416", "20260416"),
      makeFlight("SU0022-20260417", "20260417"),
    ];
    render(<FlightsMiniList flights={flights} currentFlight={flights[1]!} lang="ru" />);
    await Promise.resolve();
    expect(Element.prototype.scrollIntoView).toHaveBeenCalledWith(
      expect.objectContaining({ block: "center", behavior: "smooth" }),
    );
  });

  it("has data-testid on the container", () => {
    const flights = [
      makeFlight("SU0022-20260416", "20260416"),
      makeFlight("SU0022-20260417", "20260417"),
    ];
    render(<FlightsMiniList flights={flights} currentFlight={flights[0]!} lang="ru" />);
    expect(screen.getByTestId("flights-mini-list")).toBeTruthy();
  });
});
