import { createSignal, For, Show } from "solid-js";
import { Title } from "@solidjs/meta";
import { A } from "@solidjs/router";
import { cn } from "~/lib/utils";
import { Badge, Button, Card } from "~/components/ui";
import PageContainer from "~/components/layout/PageContainer";

interface BlogPost {
  slug: string;
  title: string;
  excerpt: string;
  author: string;
  date: string;
  readingTime: string;
  coverImage: string;
  tags: string[];
}

const allTags = ["Identity Theft", "AI Safety", "Privacy", "Deepfakes", "Dark Web", "Scam Alerts", "Product News"];

const blogPosts: BlogPost[] = [
  {
    slug: "ai-scam-trends-2026",
    title: "AI Scam Trends to Watch in 2026",
    excerpt: "As AI technology advances, scammers are finding new ways to exploit it. Here are the top threats to watch and how to protect yourself.",
    author: "Sarah Chen",
    date: "May 15, 2026",
    readingTime: "5 min read",
    coverImage: "",
    tags: ["AI Safety", "Scam Alerts", "Deepfakes"],
  },
  {
    slug: "dark-web-monitoring-guide",
    title: "The Complete Guide to Dark Web Monitoring",
    excerpt: "Learn how dark web monitoring works, what data gets exposed, and how ShieldAI keeps your information safe from cybercriminals.",
    author: "Mike Reynolds",
    date: "May 10, 2026",
    readingTime: "8 min read",
    coverImage: "",
    tags: ["Dark Web", "Privacy"],
  },
  {
    slug: "protecting-family-identity",
    title: "Protecting Your Family's Digital Identity",
    excerpt: "Your family's personal data is at risk. Discover the steps you can take to protect everyone in your household from identity theft.",
    author: "Emily Torres",
    date: "May 5, 2026",
    readingTime: "6 min read",
    coverImage: "",
    tags: ["Identity Theft", "Privacy"],
  },
  {
    slug: "deepfake-voice-scams",
    title: "Deepfake Voice Scams: How They Work and How to Spot Them",
    excerpt: "AI-generated voice clones are being used to impersonate loved ones. Here's what to listen for and how ShieldAI's VoicePrint can help.",
    author: "Sarah Chen",
    date: "April 28, 2026",
    readingTime: "7 min read",
    coverImage: "",
    tags: ["Deepfakes", "AI Safety", "Scam Alerts"],
  },
  {
    slug: "what-is-data-broker",
    title: "What Is a Data Broker and How to Remove Your Information",
    excerpt: "Data brokers collect and sell your personal information. Find out how to opt out and reclaim your privacy with RemoveBrokers.",
    author: "Alex Kim",
    date: "April 20, 2026",
    readingTime: "4 min read",
    coverImage: "",
    tags: ["Privacy", "Identity Theft"],
  },
  {
    slug: "shieldai-product-update-may-2026",
    title: "ShieldAI Product Update — May 2026",
    excerpt: "New features including improved VoicePrint detection, expanded dark web monitoring, and a redesigned dashboard experience.",
    author: "Product Team",
    date: "April 15, 2026",
    readingTime: "3 min read",
    coverImage: "",
    tags: ["Product News"],
  },
];

const POSTS_PER_PAGE = 4;

export default function BlogPage() {
  const [selectedTag, setSelectedTag] = createSignal<string | null>(null);
  const [visibleCount, setVisibleCount] = createSignal(POSTS_PER_PAGE);

  const filtered = () => {
    const tag = selectedTag();
    if (!tag) return blogPosts;
    return blogPosts.filter((p) => p.tags.includes(tag));
  };

  const visible = () => filtered().slice(0, visibleCount());
  const hasMore = () => visibleCount() < filtered().length;

  return (
    <main>
      <Title>ShieldAI Blog — AI-Powered Identity Protection</Title>

      <section class="relative py-20 md:py-28 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-[var(--color-brand-primary)]/5 to-transparent" />
        <PageContainer class="relative z-10">
          <div class="text-center">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-text-primary)] mb-4">
              ShieldAI Blog
            </h1>
            <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
              Insights on identity protection, AI safety, and the latest digital threats
            </p>
          </div>
        </PageContainer>
      </section>

      <section class="pb-20">
        <PageContainer>
          <div class="flex flex-wrap items-center gap-2 mb-10">
            <button
              type="button"
              onClick={() => { setSelectedTag(null); setVisibleCount(POSTS_PER_PAGE); }}
              class={cn(
                "px-3 py-1.5 rounded-full text-sm font-medium transition-colors",
                !selectedTag()
                  ? "bg-[var(--color-brand-primary)] text-white"
                  : "bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]",
              )}
            >
              All
            </button>
            <For each={allTags}>
              {(tag) => (
                <button
                  type="button"
                  onClick={() => { setSelectedTag(tag); setVisibleCount(POSTS_PER_PAGE); }}
                  class={cn(
                    "px-3 py-1.5 rounded-full text-sm font-medium transition-colors",
                    selectedTag() === tag
                      ? "bg-[var(--color-brand-primary)] text-white"
                      : "bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]",
                  )}
                >
                  {tag}
                </button>
              )}
            </For>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <For each={visible()}>
              {(post) => (
                <A href={`/blog/${post.slug}`}>
                  <Card class="h-full hover:shadow-lg transition-shadow duration-300">
                    <div class="h-40 bg-gradient-to-br from-[var(--color-brand-primary)]/20 to-[var(--color-brand-accent)]/20 rounded-lg mb-4 flex items-center justify-center text-[var(--color-text-tertiary)]">
                      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="opacity-40">
                        <rect x="4" y="6" width="24" height="20" rx="2" stroke="currentColor" stroke-width="2"/>
                        <path d="M4 12h24M12 6v20" stroke="currentColor" stroke-width="2"/>
                      </svg>
                    </div>
                    <div class="flex flex-wrap gap-1.5 mb-3">
                      <For each={post.tags}>
                        {(tag) => <Badge variant="default">{tag}</Badge>}
                      </For>
                    </div>
                    <h2 class="text-lg font-semibold text-[var(--color-text-primary)] mb-2 line-clamp-2">
                      {post.title}
                    </h2>
                    <p class="text-sm text-[var(--color-text-secondary)] mb-4 line-clamp-2">
                      {post.excerpt}
                    </p>
                    <div class="flex items-center justify-between text-xs text-[var(--color-text-tertiary)] mt-auto">
                      <span>{post.author}</span>
                      <span>{post.date} · {post.readingTime}</span>
                    </div>
                  </Card>
                </A>
              )}
            </For>
          </div>

          <Show when={hasMore()}>
            <div class="text-center mt-10">
              <Button
                variant="secondary"
                onClick={() => setVisibleCount((c) => c + POSTS_PER_PAGE)}
              >
                Load More Posts
              </Button>
            </div>
          </Show>
        </PageContainer>
      </section>
    </main>
  );
}
