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

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

describe("ServicesPanel", () => {
  it("renders an icon for each service", () => {
    const services: IOnBoardService[] = [{ id: 1 }, { id: 4 }, { id: 8 }];
    render(<ServicesPanel services={services} />);
    expect(screen.getByTestId("service-icon-1")).toBeTruthy();
    expect(screen.getByTestId("service-icon-4")).toBeTruthy();
    expect(screen.getByTestId("service-icon-8")).toBeTruthy();
  });

  it("maps service id 1 to shopping icon", () => {
    render(<ServicesPanel services={[{ id: 1 }]} />);
    const img = screen.getByTestId("service-icon-1") as HTMLImageElement;
    expect(img.src).toContain("shopping");
  });

  it("maps service id 4 to wifi icon", () => {
    render(<ServicesPanel services={[{ id: 4 }]} />);
    const img = screen.getByTestId("service-icon-4") as HTMLImageElement;
    expect(img.src).toContain("wifi");
  });

  it("uses fallback icon for unknown id", () => {
    render(<ServicesPanel services={[{ id: 99 }]} />);
    const img = screen.getByTestId("service-icon-99") as HTMLImageElement;
    expect(img.src).toContain("comfort-plus");
  });

  it("wraps icon in a link when service has url", () => {
    const services: IOnBoardService[] = [
      { id: 4, url: "https://wifi.example" },
    ];
    render(<ServicesPanel services={services} />);
    const link = screen.getByTestId("service-icon-4").closest("a");
    expect(link?.getAttribute("href")).toBe("https://wifi.example");
  });

  it("does not wrap icon in link when url is missing", () => {
    render(<ServicesPanel services={[{ id: 4 }]} />);
    const link = screen.getByTestId("service-icon-4").closest("a");
    expect(link).toBeNull();
  });

  it("has panel data-testid", () => {
    render(<ServicesPanel services={[{ id: 1 }]} />);
    expect(screen.getByTestId("services-panel")).toBeTruthy();
  });
});
