import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { render } from "solid-js/web";
import type { JSX } from "solid-js";

vi.mock("@solidjs/router", () => ({
  A: (props: { href?: string; children?: JSX.Element }) => {
    const href = props.href || "#";
    return (
      <a href={href}>
        {props.children}
      </a>
    );
  },
}));

import HeroSection from "./HeroSection";

function mount(comp: () => JSX.Element): HTMLDivElement {
  const container = document.createElement("div");
  document.body.appendChild(container);
  render(() => comp(), container);
  return container;
}

beforeEach(() => {
  document.body.innerHTML = "";
});

afterEach(() => {
  document.body.innerHTML = "";
});

describe("HeroSection", () => {
  it("renders the headline with AI-Powered Identity Protection", () => {
    mount(() => <HeroSection />);
    expect(document.body.textContent).toContain("AI-Powered");
    expect(document.body.textContent).toContain("Identity Protection");
    expect(document.body.textContent).toContain("for Everyone");
  });

  it("renders the subheadline", () => {
    mount(() => <HeroSection />);
    expect(document.body.textContent).toContain("ShieldAI uses advanced AI");
  });

  it("renders the Get Started CTA", () => {
    mount(() => <HeroSection />);
    expect(document.body.textContent).toContain("Get Started");
    const primaryBtn = document.querySelector("button.gradient-primary");
    expect(primaryBtn).toBeTruthy();
  });

  it("renders the Learn More CTA", () => {
    mount(() => <HeroSection />);
    expect(document.body.textContent).toContain("Learn More");
  });

  it("renders trust indicators", () => {
    mount(() => <HeroSection />);
    expect(document.body.textContent).toContain("No credit card required");
    expect(document.body.textContent).toContain("Free tier available");
  });

  it("renders the shield icon SVG", () => {
    mount(() => <HeroSection />);
    const svg = document.querySelector("svg");
    expect(svg).toBeTruthy();
  });

  it("wraps content in PageContainer", () => {
    mount(() => <HeroSection />);
    const container = document.querySelector(".max-w-7xl");
    expect(container).toBeTruthy();
  });

  it("renders two buttons for CTAs", () => {
    mount(() => <HeroSection />);
    const buttons = document.querySelectorAll("button");
    expect(buttons.length).toBe(2);
  });

  it("has Get Started button wrapped in link to /signup", () => {
    mount(() => <HeroSection />);
    const links = document.querySelectorAll("a");
    const signupLink = Array.from(links).find(
      (a) => a.getAttribute("href") === "/signup",
    );
    expect(signupLink).toBeTruthy();
    expect(signupLink!.textContent).toContain("Get Started");
  });

  it("has Learn More button wrapped in link to #features", () => {
    mount(() => <HeroSection />);
    const links = document.querySelectorAll("a");
    const featuresLink = Array.from(links).find(
      (a) => a.getAttribute("href") === "#features",
    );
    expect(featuresLink).toBeTruthy();
    expect(featuresLink!.textContent).toContain("Learn More");
  });

  it("applies custom class prop", () => {
    mount(() => <HeroSection class="custom-hero" />);
    const section = document.querySelector("section.custom-hero");
    expect(section).toBeTruthy();
  });

  it("has centered text layout", () => {
    mount(() => <HeroSection />);
    const inner = document.querySelector(".text-center");
    expect(inner).toBeTruthy();
  });

  it("has responsive vertical padding", () => {
    mount(() => <HeroSection />);
    const inner = document.querySelector(".py-20");
    expect(inner).toBeTruthy();
    expect(inner!.className).toContain("md:py-32");
  });
});
