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 HowItWorksSection from "./HowItWorksSection";
import FeaturesGridSection from "./FeaturesGridSection";
import ForUsersSection from "./ForUsersSection";
import WhyShieldAISection from "./WhyShieldAISection";
import CTABannerSection from "./CTABannerSection";

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("HowItWorksSection", () => {
  it("renders the section heading", () => {
    mount(() => <HowItWorksSection />);
    expect(document.body.textContent).toContain("How It Works");
  });

  it("renders the section subheading", () => {
    mount(() => <HowItWorksSection />);
    expect(document.body.textContent).toContain(
      "Three simple steps to full identity protection",
    );
  });

  it("renders all 3 steps", () => {
    mount(() => <HowItWorksSection />);
    expect(document.body.textContent).toContain("Enroll Your Identity");
    expect(document.body.textContent).toContain("We Monitor 24/7");
    expect(document.body.textContent).toContain("Get Instant Alerts");
  });

  it("renders step descriptions", () => {
    mount(() => <HowItWorksSection />);
    expect(document.body.textContent).toContain(
      "Sign up and add your emails",
    );
    expect(document.body.textContent).toContain("dark web scans");
    expect(document.body.textContent).toContain("real-time notifications");
  });

  it("renders 3 numbered circles with gradient-primary", () => {
    mount(() => <HowItWorksSection />);
    const circles = document.querySelectorAll(".gradient-primary");
    expect(circles.length).toBe(3);
  });

  it("has the anchor ID for smooth scrolling", () => {
    mount(() => <HowItWorksSection />);
    const section = document.querySelector('#how-it-works');
    expect(section).toBeTruthy();
  });

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

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

describe("FeaturesGridSection", () => {
  it("renders the section heading", () => {
    mount(() => <FeaturesGridSection />);
    expect(document.body.textContent).toContain("Platform Features");
  });

  it("renders the section subheading", () => {
    mount(() => <FeaturesGridSection />);
    expect(document.body.textContent).toContain("Comprehensive protection");
  });

  it("renders all 6 feature cards", () => {
    mount(() => <FeaturesGridSection />);
    expect(document.body.textContent).toContain("DarkWatch");
    expect(document.body.textContent).toContain("VoicePrint");
    expect(document.body.textContent).toContain("SpamShield");
    expect(document.body.textContent).toContain("HomeTitle");
    expect(document.body.textContent).toContain("RemoveBrokers");
    expect(document.body.textContent).toContain("Family Plans");
  });

  it("renders 6 Card components", () => {
    mount(() => <FeaturesGridSection />);
    const cards = document.querySelectorAll(".gradient-card");
    expect(cards.length).toBe(6);
  });

  it("renders feature descriptions", () => {
    mount(() => <FeaturesGridSection />);
    expect(document.body.textContent).toContain("dark web monitoring");
    expect(document.body.textContent).toContain("voice clone detection");
    expect(document.body.textContent).toContain("scam call blocking");
  });

  it("has the anchor ID for smooth scrolling", () => {
    mount(() => <FeaturesGridSection />);
    const section = document.querySelector('#features');
    expect(section).toBeTruthy();
  });

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

  it("uses responsive grid layout", () => {
    mount(() => <FeaturesGridSection />);
    const grid = document.querySelector(".grid-cols-1");
    expect(grid).toBeTruthy();
    expect(grid!.className).toContain("md:grid-cols-2");
    expect(grid!.className).toContain("lg:grid-cols-3");
  });
});

describe("ForUsersSection", () => {
  it("renders the section heading", () => {
    mount(() => <ForUsersSection />);
    expect(document.body.textContent).toContain("For Everyone");
  });

  it("renders the section subheading", () => {
    mount(() => <ForUsersSection />);
    expect(document.body.textContent).toContain(
      "Whether you're protecting yourself",
    );
  });

  it("renders both panels", () => {
    mount(() => <ForUsersSection />);
    expect(document.body.textContent).toContain("For Individuals");
    expect(document.body.textContent).toContain("For Families");
  });

  it("renders individual panel description", () => {
    mount(() => <ForUsersSection />);
    expect(document.body.textContent).toContain(
      "Personal identity protection",
    );
  });

  it("renders family panel description", () => {
    mount(() => <ForUsersSection />);
    expect(document.body.textContent).toContain("Group management tools");
  });

  it("renders bullet items for individuals", () => {
    mount(() => <ForUsersSection />);
    expect(document.body.textContent).toContain(
      "Monitor personal email and phone numbers",
    );
    expect(document.body.textContent).toContain(
      "Dark web credential scanning",
    );
  });

  it("renders bullet items for families", () => {
    mount(() => <ForUsersSection />);
    expect(document.body.textContent).toContain(
      "Add unlimited family members",
    );
    expect(document.body.textContent).toContain("Shared alert dashboard");
  });

  it("renders checkmark icons", () => {
    mount(() => <ForUsersSection />);
    const checkmarks = document.querySelectorAll(
      'svg path[fill="var(--color-success)"]',
    );
    expect(checkmarks.length).toBeGreaterThan(0);
  });

  it("renders 2 Card components for panels", () => {
    mount(() => <ForUsersSection />);
    const cards = document.querySelectorAll(".gradient-card");
    expect(cards.length).toBe(2);
  });

  it("has the anchor ID for smooth scrolling", () => {
    mount(() => <ForUsersSection />);
    const section = document.querySelector('#for-users');
    expect(section).toBeTruthy();
  });

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

  it("uses two-column grid on desktop", () => {
    mount(() => <ForUsersSection />);
    const grid = document.querySelector(".grid-cols-1");
    expect(grid).toBeTruthy();
    expect(grid!.className).toContain("md:grid-cols-2");
  });
});

describe("WhyShieldAISection", () => {
  it("renders the section heading", () => {
    mount(() => <WhyShieldAISection />);
    expect(document.body.textContent).toContain("Why ShieldAI");
  });

  it("renders the section subheading", () => {
    mount(() => <WhyShieldAISection />);
    expect(document.body.textContent).toContain(
      "Built on cutting-edge technology",
    );
  });

  it("renders all 3 value prop cards", () => {
    mount(() => <WhyShieldAISection />);
    expect(document.body.textContent).toContain("Proactive, Not Reactive");
    expect(document.body.textContent).toContain("AI-Powered Detection");
    expect(document.body.textContent).toContain("Privacy First");
  });

  it("renders value prop descriptions", () => {
    mount(() => <WhyShieldAISection />);
    expect(document.body.textContent).toContain(
      "detect threats before they cause damage",
    );
    expect(document.body.textContent).toContain(
      "Machine learning models trained",
    );
    expect(document.body.textContent).toContain("encrypted and private");
  });

  it("renders bullet items for each card", () => {
    mount(() => <WhyShieldAISection />);
    expect(document.body.textContent).toContain(
      "Real-time dark web scanning",
    );
    expect(document.body.textContent).toContain(
      "Deepfake voice identification",
    );
    expect(document.body.textContent).toContain("End-to-end encrypted data");
  });

  it("renders 3 Card components", () => {
    mount(() => <WhyShieldAISection />);
    const cards = document.querySelectorAll(".gradient-card");
    expect(cards.length).toBe(3);
  });

  it("has the anchor ID for smooth scrolling", () => {
    mount(() => <WhyShieldAISection />);
    const section = document.querySelector('#why-shieldai');
    expect(section).toBeTruthy();
  });

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

  it("uses three-column grid on desktop", () => {
    mount(() => <WhyShieldAISection />);
    const grid = document.querySelector(".grid-cols-1");
    expect(grid).toBeTruthy();
    expect(grid!.className).toContain("md:grid-cols-3");
  });
});

describe("CTABannerSection", () => {
  it("renders the CTA headline", () => {
    mount(() => <CTABannerSection />);
    expect(document.body.textContent).toContain(
      "Ready to protect your identity?",
    );
  });

  it("renders the CTA subtext", () => {
    mount(() => <CTABannerSection />);
    expect(document.body.textContent).toContain(
      "Join thousands of users",
    );
  });

  it("renders Create Account button", () => {
    mount(() => <CTABannerSection />);
    expect(document.body.textContent).toContain("Create Account");
    const primaryBtn = document.querySelector("button.gradient-primary");
    expect(primaryBtn).toBeTruthy();
  });

  it("renders Sign In button", () => {
    mount(() => <CTABannerSection />);
    expect(document.body.textContent).toContain("Sign In");
  });

  it("has Create Account link to /signup", () => {
    mount(() => <CTABannerSection />);
    const links = document.querySelectorAll("a");
    const signupLink = Array.from(links).find(
      (a) => a.getAttribute("href") === "/signup",
    );
    expect(signupLink).toBeTruthy();
    expect(signupLink!.textContent).toContain("Create Account");
  });

  it("has Sign In link to /login", () => {
    mount(() => <CTABannerSection />);
    const links = document.querySelectorAll("a");
    const loginLink = Array.from(links).find(
      (a) => a.getAttribute("href") === "/login",
    );
    expect(loginLink).toBeTruthy();
    expect(loginLink!.textContent).toContain("Sign In");
  });

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

  it("has the anchor ID for smooth scrolling", () => {
    mount(() => <CTABannerSection />);
    const section = document.querySelector('#cta');
    expect(section).toBeTruthy();
  });

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

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

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

  it("uses gradient card for CTA banner", () => {
    mount(() => <CTABannerSection />);
    const card = document.querySelector(".gradient-card");
    expect(card).toBeTruthy();
  });
});
