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

vi.mock("@solidjs/router", () => ({
  A: (props: { href?: string; children?: JSX.Element; class?: string; onClick?: () => void }) => (
    <a href={props.href || "#"} class={props.class} onClick={props.onClick}>
      {props.children}
    </a>
  ),
  useLocation: () => ({ pathname: "/dashboard" }),
  useParams: () => ({ slug: "ai-scam-trends-2026" }),
  useSearchParams: () => [new URLSearchParams(), vi.fn()],
}));

import BlogPage from "./blog";
import BlogPostPage from "./blog/[slug]";
import AdsPage from "./ads";
import DashboardPage from "./(webapp)/dashboard";
import StatCard from "~/components/dashboard/StatCard";
import ActivityFeed from "~/components/dashboard/ActivityFeed";
import QuickActions from "~/components/dashboard/QuickActions";

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

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

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

describe("BlogPage (listing)", () => {
  it("renders hero section with blog headline", () => {
    mount(() => <BlogPage />);
    expect(document.body.textContent).toContain("ShieldAI Blog");
  });

  it("renders all 6 blog post cards", () => {
    mount(() => <BlogPage />);
    const cards = document.querySelectorAll(".gradient-card");
    expect(cards.length).toBeGreaterThanOrEqual(4);
  });

  it("renders tag filter buttons", () => {
    mount(() => <BlogPage />);
    expect(document.body.textContent).toContain("All");
    expect(document.body.textContent).toContain("AI Safety");
    expect(document.body.textContent).toContain("Privacy");
    expect(document.body.textContent).toContain("Deepfakes");
  });

  it("renders Load More button when there are more posts to show", () => {
    mount(() => <BlogPage />);
    expect(document.body.textContent).toContain("Load More Posts");
  });

  it("renders post titles and excerpts", () => {
    mount(() => <BlogPage />);
    expect(document.body.textContent).toContain("AI Scam Trends to Watch in 2026");
    expect(document.body.textContent).toContain("Sarah Chen");
    expect(document.body.textContent).toContain("Mike Reynolds");
  });
});

describe("BlogPostPage ([slug])", () => {
  it("renders post content for valid slug", () => {
    mount(() => <BlogPostPage />);
    expect(document.body.textContent).toContain("AI Scam Trends to Watch in 2026");
    expect(document.body.textContent).toContain("Sarah Chen");
    expect(document.body.textContent).toContain("Security Researcher");
    expect(document.body.textContent).toContain("May 15, 2026");
    expect(document.body.textContent).toContain("5 min read");
  });

  it("renders markdown content as HTML", () => {
    mount(() => <BlogPostPage />);
    expect(document.body.textContent).toContain("The Rise of AI-Powered Scams");
    expect(document.body.textContent).toContain("Voice Cloning Scams");
    expect(document.body.textContent).toContain("How to Protect Yourself");
  });

  it("renders social share buttons", () => {
    mount(() => <BlogPostPage />);
    const shareBtns = document.querySelectorAll("button[aria-label]");
    const shareLabels = Array.from(shareBtns).map(b => b.getAttribute("aria-label"));
    expect(shareLabels).toContain("Share on Twitter");
    expect(shareLabels).toContain("Share on LinkedIn");
    expect(shareLabels).toContain("Copy link");
  });

  it("renders related posts section", () => {
    mount(() => <BlogPostPage />);
    expect(document.body.textContent).toContain("Related Posts");
  });

  it("renders author card in sidebar", () => {
    mount(() => <BlogPostPage />);
    expect(document.body.textContent).toContain("Security Researcher");
  });

  it("renders back to blog link", () => {
    mount(() => <BlogPostPage />);
    expect(document.body.textContent).toContain("Back to Blog");
  });
});

describe("AdsPage", () => {
  it("renders conversion-focused headline", () => {
    mount(() => <AdsPage />);
    expect(document.body.textContent).toContain("Stop AI Scams Before");
    expect(document.body.textContent).toContain("They Reach You");
  });

  it("renders pricing section with 3 plans", () => {
    mount(() => <AdsPage />);
    expect(document.body.textContent).toContain("Basic");
    expect(document.body.textContent).toContain("Plus");
    expect(document.body.textContent).toContain("Premium");
    expect(document.body.textContent).toContain("$9");
    expect(document.body.textContent).toContain("$19");
    expect(document.body.textContent).toContain("$39");
  });

  it("marks Plus plan as Most Popular", () => {
    mount(() => <AdsPage />);
    const badges = document.body.querySelectorAll("span");
    const popularBadge = Array.from(badges).find(b => b.textContent === "Most Popular");
    expect(popularBadge).toBeTruthy();
  });

  it("renders FAQ section with toggle functionality", () => {
    mount(() => <AdsPage />);
    expect(document.body.textContent).toContain("Frequently Asked Questions");
    expect(document.body.textContent).toContain("How does ShieldAI detect voice clones?");
    expect(document.body.textContent).toContain("Is my data encrypted?");
  });

  it("renders trust badges", () => {
    mount(() => <AdsPage />);
    expect(document.body.textContent).toContain("14-day free trial");
    expect(document.body.textContent).toContain("No credit card required");
    expect(document.body.textContent).toContain("Cancel anytime");
  });

  it("renders trust metrics section", () => {
    mount(() => <AdsPage />);
    expect(document.body.textContent).toContain("99.7%");
    expect(document.body.textContent).toContain("200+");
    expect(document.body.textContent).toContain("50K+");
  });

  it("renders testimonials", () => {
    mount(() => <AdsPage />);
    expect(document.body.textContent).toContain("Trusted by Thousands");
  });

  it("renders CTA section with Get Started Free button", () => {
    mount(() => <AdsPage />);
    expect(document.body.textContent).toContain("Ready to protect your identity?");
    expect(document.body.textContent).toContain("Get Started Free");
  });
});

describe("DashboardPage", () => {
  it("renders dashboard title", () => {
    mount(() => <DashboardPage />);
    expect(document.body.textContent).toContain("Overview");
  });

  it("renders stat cards with mock data", () => {
    mount(() => <DashboardPage />);
    expect(document.body.textContent).toContain("Active Threats");
    expect(document.body.textContent).toContain("Protected Accounts");
    expect(document.body.textContent).toContain("Dark Web Scans");
    expect(document.body.textContent).toContain("Alerts Today");
    expect(document.body.textContent).toContain("3");
    expect(document.body.textContent).toContain("12");
    expect(document.body.textContent).toContain("1,847");
    expect(document.body.textContent).toContain("7");
  });

  it("renders sidebar with navigation links", () => {
    mount(() => <DashboardPage />);
    expect(document.body.textContent).toContain("Overview");
    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("Settings");
  });

  it("renders activity feed", () => {
    mount(() => <DashboardPage />);
    expect(document.body.textContent).toContain("Recent Activity");
    expect(document.body.textContent).toContain("New credential leak detected");
    expect(document.body.textContent).toContain("VoicePrint scan completed");
  });

  it("renders quick actions", () => {
    mount(() => <DashboardPage />);
    expect(document.body.textContent).toContain("Quick Actions");
    expect(document.body.textContent).toContain("Run Scan");
    expect(document.body.textContent).toContain("View Alerts");
    expect(document.body.textContent).toContain("Add Member");
    expect(document.body.textContent).toContain("Run Report");
  });
});

describe("StatCard", () => {
  it("renders label and value", () => {
    mount(() => (
      <StatCard label="Test Metric" value="42" icon={() => <svg />} />
    ));
    expect(document.body.textContent).toContain("Test Metric");
    expect(document.body.textContent).toContain("42");
  });

  it("renders up trend indicator", () => {
    mount(() => (
      <StatCard label="Up Trend" value="10" trend="up" trendLabel="+5%" icon={() => <svg />} />
    ));
    expect(document.body.textContent).toContain("+5%");
  });

  it("renders down trend indicator", () => {
    mount(() => (
      <StatCard label="Down Trend" value="10" trend="down" trendLabel="-3%" icon={() => <svg />} />
    ));
    expect(document.body.textContent).toContain("-3%");
  });
});

describe("ActivityFeed", () => {
  it("renders activities", () => {
    const activities = [
      { id: "1", title: "Test Alert", description: "Test description", timestamp: "5m ago", type: "alert" as const },
    ];
    mount(() => <ActivityFeed activities={activities} />);
    expect(document.body.textContent).toContain("Recent Activity");
    expect(document.body.textContent).toContain("Test Alert");
    expect(document.body.textContent).toContain("Test description");
    expect(document.body.textContent).toContain("5m ago");
  });
});

describe("QuickActions", () => {
  it("renders action buttons", () => {
    const actions = [
      { label: "Action 1", href: "/test", icon: () => <svg /> },
      { label: "Action 2", href: "/test2", icon: () => <svg /> },
    ];
    mount(() => <QuickActions actions={actions} />);
    expect(document.body.textContent).toContain("Quick Actions");
    expect(document.body.textContent).toContain("Action 1");
    expect(document.body.textContent).toContain("Action 2");
  });
});
