import { render, screen } from "@testing-library/react";
import type { PortfolioProjectView } from "@/lib/portfolio-data";
import CinematicHome from "./CinematicHome";
import { useCinematicScroll } from "./useCinematicScroll";
import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";

/**
 * Testes de caminhos-base de CinematicHome: o endereço do trabalho em destaque (projeto presente com site,
 * presente sem site, ausente), a repasse das props opcionais, a ordem das cenas e a ligação dos hooks.
 * As cenas e os hooks são trocados por dublês que registram o que recebem.
 */

const mockHeroProps = jest.fn();
const mockProjectsProps = jest.fn();
const mockModalitiesProps = jest.fn();
const mockTestimonialsProps = jest.fn();
const mockFooterProps = jest.fn();

jest.mock("../Hero", () => ({
  __esModule: true,
  default: (props: unknown) => {
    mockHeroProps(props);
    return <section data-testid="scene-hero" />;
  },
}));
jest.mock("../Projects", () => ({
  __esModule: true,
  default: (props: unknown) => {
    mockProjectsProps(props);
    return <section data-testid="scene-projects" />;
  },
}));
jest.mock("../About", () => ({
  __esModule: true,
  default: () => <section data-testid="scene-about" />,
}));
jest.mock("../WorkModalities", () => ({
  WorkModalities: (props: unknown) => {
    mockModalitiesProps(props);
    return <section data-testid="scene-modalities" />;
  },
}));
jest.mock("../EngineeringWithAI", () => ({
  __esModule: true,
  default: () => <section data-testid="scene-ai" />,
}));
jest.mock("../Testimonials", () => ({
  __esModule: true,
  default: (props: unknown) => {
    mockTestimonialsProps(props);
    return <section data-testid="scene-testimonials" />;
  },
}));
jest.mock("../Contact", () => ({
  __esModule: true,
  default: () => <section data-testid="scene-contact" />,
}));
jest.mock("../Footer", () => ({
  __esModule: true,
  default: (props: unknown) => {
    mockFooterProps(props);
    return <footer data-testid="footer" />;
  },
}));
jest.mock("../FloatingWhatsApp", () => ({
  __esModule: true,
  default: () => <div data-testid="floating-whatsapp" />,
}));
jest.mock("./useCinematicScroll", () => ({ useCinematicScroll: jest.fn() }));
jest.mock("./useHomeFragmentNavigation", () => ({
  useHomeFragmentNavigation: jest.fn(),
}));

const onLayoutReady = jest.fn();

function project(id: string, demoUrl: string | null): PortfolioProjectView {
  return { id, demoUrl } as unknown as PortfolioProjectView;
}

const lastHeroProps = () =>
  mockHeroProps.mock.calls[mockHeroProps.mock.calls.length - 1][0];

beforeEach(() => {
  jest.clearAllMocks();
  jest.mocked(useHomeFragmentNavigation).mockReturnValue(onLayoutReady);
});

describe("CinematicHome: endereço do trabalho em destaque", () => {
  it("path: the featured project is in the list with a site -> its domain goes to the hero", () => {
    render(
      <CinematicHome
        projects={[
          project("sev-modaintima", "https://sevmodaintima.com.br"),
          project(
            "lavacao-047",
            "https://www.landing-lavacao.vercel.app/pagina/",
          ),
        ]}
      />,
    );

    expect(lastHeroProps().workUrl).toEqual({
      text: "landing-lavacao.vercel.app/pagina",
      secure: true,
    });
  });

  it("path: the featured project is in the list but has no site -> no address", () => {
    render(<CinematicHome projects={[project("lavacao-047", null)]} />);

    expect(lastHeroProps().workUrl).toBeNull();
  });

  it("path: the featured project is not in the list -> no address", () => {
    render(
      <CinematicHome
        projects={[project("sev-modaintima", "https://sevmodaintima.com.br")]}
      />,
    );

    expect(lastHeroProps().workUrl).toBeNull();
  });

  it("path: empty project list -> no address and the page still renders", () => {
    render(<CinematicHome projects={[]} />);

    expect(lastHeroProps().workUrl).toBeNull();
    expect(screen.getByTestId("scene-contact")).toBeInTheDocument();
  });
});

describe("CinematicHome: props e estrutura", () => {
  it("path: every optional prop given -> each scene receives its own data", () => {
    const projects = [project("lavacao-047", "https://a.example.com")];
    const clients = [{ id: "lavacao-047", name: "Lavação 047" }];
    const testimonials = [
      { quote: "Ótimo.", name: "Ana", role: "Sócia", company: "Empresa" },
    ];
    const serviceLinks = [
      { href: "/servicos/x", label: "X", description: "Serviço X" },
    ];

    render(
      <CinematicHome
        projects={projects}
        clients={clients}
        testimonials={testimonials}
        serviceLinks={serviceLinks}
        heroStats={{ years: 5 }}
      />,
    );

    expect(lastHeroProps()).toMatchObject({ stats: { years: 5 }, clients });
    expect(mockProjectsProps).toHaveBeenCalledWith({ projects });
    expect(mockTestimonialsProps).toHaveBeenCalledWith({ items: testimonials });
    expect(mockModalitiesProps).toHaveBeenCalledWith({ serviceLinks });
    expect(mockFooterProps).toHaveBeenCalledWith({ serviceLinks });
  });

  it("path: optional props omitted -> the scenes receive undefined and decide their own defaults", () => {
    render(<CinematicHome projects={[]} />);

    expect(lastHeroProps()).toMatchObject({
      stats: undefined,
      clients: undefined,
    });
    expect(mockTestimonialsProps).toHaveBeenCalledWith({ items: undefined });
    expect(mockModalitiesProps).toHaveBeenCalledWith({
      serviceLinks: undefined,
    });
    expect(mockFooterProps).toHaveBeenCalledWith({ serviceLinks: undefined });
  });

  it("path: scenes sit in order inside <main>; the footer and the floating button sit outside it", () => {
    render(<CinematicHome projects={[]} />);

    const main = screen.getByRole("main");
    expect(
      Array.from(main.children).map((child) =>
        child.getAttribute("data-testid"),
      ),
    ).toEqual([
      "scene-hero",
      "scene-projects",
      "scene-about",
      "scene-modalities",
      "scene-ai",
      "scene-testimonials",
      "scene-contact",
    ]);
    expect(main).not.toContainElement(screen.getByTestId("footer"));
    expect(main).not.toContainElement(screen.getByTestId("floating-whatsapp"));
  });

  it("path: mount -> the scroll hook gets the <main> ref and the layout-ready callback runs once", () => {
    render(<CinematicHome projects={[]} />);

    const ref = jest.mocked(useCinematicScroll).mock.calls[0][0];
    expect(ref.current).toBe(screen.getByRole("main"));
    expect(onLayoutReady).toHaveBeenCalledTimes(1);
  });
});