"use client";

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

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

export interface BlogCategory {
  id: string;
  name: string;
  slug: string;
}

interface BlogIndexProps {
  initialPosts: BlogPost[];
  initialTotal: number;
  categories: BlogCategory[];
  limit: number;
}

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>
  );
}

export function BlogIndex({
  initialPosts,
  initialTotal,
  categories,
  limit,
}: BlogIndexProps) {
  const [posts, setPosts] = useState<BlogPost[]>(initialPosts);
  const [total, setTotal] = useState(initialTotal);
  const [activeCategory, setActiveCategory] = useState<string>("all");
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const isFirst = useRef(true);

  useEffect(() => {
    // The initial ("all", page 1) data is already rendered from the server.
    if (isFirst.current) {
      isFirst.current = false;
      return;
    }
    let cancelled = false;
    setLoading(true);
    setError(null);
    api
      .getPosts({
        category: activeCategory === "all" ? undefined : activeCategory,
        page,
        limit,
      })
      .then(({ posts: data, total: t }) => {
        if (cancelled) return;
        setPosts(data);
        setTotal(t);
      })
      .catch((err) => {
        if (!cancelled) setError(err.message);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [activeCategory, page, limit]);

  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 (
    <>
      <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 ? (
          <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((pc) => (
                        <span
                          key={pc.category.id}
                          className="text-primary text-[10px] uppercase tracking-widest font-bold"
                        >
                          {pc.category.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>
    </>
  );
}