"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { ArrowRight, ArrowLeft, ChevronRight } from "lucide-react";
import { api } from "@/lib/api";
import { formatDate } from "@/lib/utils";
import { Navbar } from "@/components/public/Navbar";
import { Footer } from "@/components/public/Footer";

interface Post {
  id: string;
  slug: string;
  title: string;
  excerpt?: string;
  content?: string;
  author?: string;
  authorPubkey?: string;
  publishedAt?: string;
  createdAt?: string;
  categories?: { id: string; name: string; slug: string }[];
  featured?: boolean;
}

interface Category {
  id: string;
  name: string;
  slug: string;
}

function PostCardSkeleton() {
  return (
    <div className="bg-surface-container-low rounded-xl overflow-hidden animate-pulse">
      <div className="p-6 space-y-4">
        <div className="flex gap-2">
          <div className="h-5 w-16 bg-surface-container-high rounded-full" />
          <div className="h-5 w-20 bg-surface-container-high rounded-full" />
        </div>
        <div className="h-7 w-3/4 bg-surface-container-high rounded" />
        <div className="space-y-2">
          <div className="h-4 w-full bg-surface-container-high rounded" />
          <div className="h-4 w-2/3 bg-surface-container-high rounded" />
        </div>
        <div className="flex justify-between items-center pt-4">
          <div className="h-4 w-32 bg-surface-container-high rounded" />
          <div className="h-4 w-24 bg-surface-container-high rounded" />
        </div>
      </div>
    </div>
  );
}

function FeaturedPostSkeleton() {
  return (
    <div className="bg-surface-container-low rounded-xl overflow-hidden animate-pulse mb-12">
      <div className="p-8 md:p-12 space-y-4">
        <div className="h-5 w-24 bg-surface-container-high rounded-full" />
        <div className="h-10 w-2/3 bg-surface-container-high rounded" />
        <div className="space-y-2 max-w-2xl">
          <div className="h-4 w-full bg-surface-container-high rounded" />
          <div className="h-4 w-full bg-surface-container-high rounded" />
          <div className="h-4 w-1/2 bg-surface-container-high rounded" />
        </div>
        <div className="h-4 w-48 bg-surface-container-high rounded" />
      </div>
    </div>
  );
}

export default function BlogPage() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [activeCategory, setActiveCategory] = useState<string>("all");
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const limit = 9;

  useEffect(() => {
    api.getCategories().then(setCategories).catch(() => {});
  }, []);

  useEffect(() => {
    setLoading(true);
    setError(null);
    api
      .getPosts({
        category: activeCategory === "all" ? undefined : activeCategory,
        page,
        limit,
      })
      .then(({ posts: data, total: t }) => {
        setPosts(data);
        setTotal(t);
      })
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, [activeCategory, page]);

  const totalPages = Math.ceil(total / limit);
  const featured = posts.find((p) => p.featured);
  const regularPosts = featured ? posts.filter((p) => p.id !== featured.id) : posts;

  return (
    <>
      <Navbar />

      <div className="min-h-screen">
        <header className="pt-24 pb-16 px-8">
          <div className="max-w-7xl mx-auto">
            <p className="uppercase tracking-[0.2em] text-primary mb-4 font-semibold text-sm">
              From the Nostr Network
            </p>
            <h1 className="text-5xl md:text-7xl font-black tracking-tighter mb-4">
              Blog
            </h1>
            <p className="text-xl text-on-surface-variant max-w-xl leading-relaxed">
              Curated Bitcoin content from the Nostr network
            </p>
          </div>
        </header>

        <div className="max-w-7xl mx-auto px-8 mb-12">
          <div className="flex flex-wrap gap-3">
            <button
              onClick={() => { setActiveCategory("all"); setPage(1); }}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                activeCategory === "all"
                  ? "bg-primary text-on-primary"
                  : "bg-surface-container-high text-on-surface hover:bg-surface-bright"
              }`}
            >
              All
            </button>
            {categories.map((cat) => (
              <button
                key={cat.id}
                onClick={() => { setActiveCategory(cat.slug); setPage(1); }}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                  activeCategory === cat.slug
                    ? "bg-primary text-on-primary"
                    : "bg-surface-container-high text-on-surface hover:bg-surface-bright"
                }`}
              >
                {cat.name}
              </button>
            ))}
          </div>
        </div>

        <div className="max-w-7xl mx-auto px-8 pb-24">
          {error && (
            <div className="bg-error-container/20 text-error rounded-xl p-6 mb-8">
              Failed to load posts: {error}
            </div>
          )}

          {loading ? (
            <>
              <FeaturedPostSkeleton />
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {Array.from({ length: 6 }).map((_, i) => (
                  <PostCardSkeleton key={i} />
                ))}
              </div>
            </>
          ) : posts.length === 0 ? (
            <div className="text-center py-24">
              <p className="text-2xl font-bold text-on-surface-variant mb-2">
                No posts yet
              </p>
              <p className="text-on-surface-variant/60">
                Check back soon for curated Bitcoin content.
              </p>
            </div>
          ) : (
            <>
              {featured && page === 1 && (
                <Link
                  href={`/blog/${featured.slug}`}
                  className="block bg-surface-container-low rounded-xl overflow-hidden mb-12 group hover:bg-surface-container-high transition-colors"
                >
                  <div className="p-8 md:p-12">
                    <span className="inline-block px-3 py-1 text-xs font-bold uppercase tracking-widest text-primary bg-primary/10 rounded-full mb-6">
                      Featured
                    </span>
                    <h2 className="text-3xl md:text-4xl font-black tracking-tight mb-4 group-hover:text-primary transition-colors">
                      {featured.title}
                    </h2>
                    {featured.excerpt && (
                      <p className="text-on-surface-variant text-lg leading-relaxed max-w-2xl mb-6">
                        {featured.excerpt}
                      </p>
                    )}
                    <div className="flex items-center gap-4 text-sm text-on-surface-variant/60">
                      {featured.author && <span>{featured.author}</span>}
                      {featured.publishedAt && (
                        <span>{formatDate(featured.publishedAt)}</span>
                      )}
                    </div>
                  </div>
                </Link>
              )}

              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                {regularPosts.map((post) => (
                  <Link
                    key={post.id}
                    href={`/blog/${post.slug}`}
                    className="group flex flex-col bg-zinc-900 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200"
                  >
                    {post.categories && post.categories.length > 0 && (
                      <div className="flex flex-wrap gap-2 mb-4">
                        {post.categories.map((cat) => (
                          <span
                            key={cat.id}
                            className="text-primary text-[10px] uppercase tracking-widest font-bold"
                          >
                            {cat.name}
                          </span>
                        ))}
                      </div>
                    )}

                    <h3 className="font-bold text-base mb-3 leading-snug group-hover:text-primary transition-colors">
                      {post.title}
                    </h3>

                    {post.excerpt && (
                      <p className="text-on-surface-variant text-sm leading-relaxed mb-5 flex-1 line-clamp-3">
                        {post.excerpt}
                      </p>
                    )}

                    <div className="flex items-center justify-between mt-auto pt-4 border-t border-zinc-800/60">
                      <div className="flex items-center gap-2 text-xs text-on-surface-variant/50">
                        {post.author && <span>{post.author}</span>}
                        {post.author && (post.publishedAt || post.createdAt) && <span>·</span>}
                        {(post.publishedAt || post.createdAt) && (
                          <span>
                            {formatDate(post.publishedAt || post.createdAt!)}
                          </span>
                        )}
                      </div>
                      <span className="text-primary text-xs font-semibold flex items-center gap-1.5 group-hover:gap-2.5 transition-all">
                        Read <ArrowRight size={12} />
                      </span>
                    </div>
                  </Link>
                ))}
              </div>

              {totalPages > 1 && (
                <div className="flex items-center justify-center gap-4 mt-16">
                  <button
                    onClick={() => setPage((p) => Math.max(1, p - 1))}
                    disabled={page === 1}
                    className="flex items-center gap-2 px-5 py-2.5 rounded-lg bg-surface-container-high text-on-surface font-medium transition-colors hover:bg-surface-bright disabled:opacity-30 disabled:cursor-not-allowed"
                  >
                    <ArrowLeft size={16} /> Previous
                  </button>
                  <span className="text-sm text-on-surface-variant">
                    Page {page} of {totalPages}
                  </span>
                  <button
                    onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                    disabled={page === totalPages}
                    className="flex items-center gap-2 px-5 py-2.5 rounded-lg bg-surface-container-high text-on-surface font-medium transition-colors hover:bg-surface-bright disabled:opacity-30 disabled:cursor-not-allowed"
                  >
                    Next <ChevronRight size={16} />
                  </button>
                </div>
              )}
            </>
          )}
        </div>
      </div>

      <Footer />
    </>
  );
}