import { screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { AddressMapPreview } from "@/components/common/address-map-preview";
import { renderWithProviders } from "@/test/test-utils";

const complete = { street: "6735 Trippel Rd", city: "Theodore", state: "AL" };

function mapFrame() {
  return screen.getByTitle("Map of 6735 Trippel Rd Theodore AL");
}

describe("AddressMapPreview structured input", () => {
  it("renders a compact accessible placeholder while the address is incomplete", () => {
    renderWithProviders(
      <AddressMapPreview address={{ street: "6735 Trippel Rd" }} placeholderWhenIncomplete />,
      { withAuth: false },
    );

    const placeholder = screen.getByRole("status");
    expect(placeholder).toHaveTextContent(/street, city, and state/i);
    expect(screen.queryByTitle(/^Map of /)).not.toBeInTheDocument();
  });

  it("transitions from the placeholder to the iframe once the address completes", () => {
    const { rerender } = renderWithProviders(
      <AddressMapPreview
        address={{ street: "6735 Trippel Rd", city: "Theodore" }}
        placeholderWhenIncomplete
      />,
      { withAuth: false },
    );

    expect(screen.getByRole("status")).toBeInTheDocument();

    rerender(<AddressMapPreview address={complete} placeholderWhenIncomplete />);
    const frame = mapFrame();
    expect(frame).toBeInTheDocument();
    expect(frame).toHaveAttribute(
      "src",
      "https://www.google.com/maps?q=6735%20Trippel%20Rd%20Theodore%20AL&output=embed",
    );
    expect(screen.queryByRole("status")).not.toBeInTheDocument();
  });

  it("stays blank for incomplete input when the placeholder is not opted into", () => {
    const { container } = renderWithProviders(
      <AddressMapPreview address={{ street: "6735 Trippel Rd" }} />,
      { withAuth: false },
    );

    expect(container.querySelector("iframe")).toBeNull();
    expect(screen.queryByRole("status")).not.toBeInTheDocument();
  });
});

describe("AddressMapPreview pre-composed query", () => {
  it("renders the map only when the saved query is non-empty", () => {
    const { container, rerender } = renderWithProviders(<AddressMapPreview query="900 Live St" />, {
      withAuth: false,
    });

    expect(screen.getByTitle("Map of 900 Live St")).toBeInTheDocument();

    rerender(<AddressMapPreview query="   " />);
    expect(container.querySelector("iframe")).toBeNull();
    expect(screen.queryByRole("status")).not.toBeInTheDocument();
  });
});