import React, { useState, useEffect } from "react";
import { BlogPost } from "@/entities/BlogPost";
import BlogCard from "../components/blog/BlogCard";
import CategoryFilter from "../components/blog/CategoryFilter";
import { Loader2 } from "lucide-react";

export default function Blog() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [activeCategory, setActiveCategory] = useState("all");

  useEffect(() => {
    loadPosts();
  }, []);

  const loadPosts = async () => {
    try {
      const data = await BlogPost.filter({ published: true }, "-created_date");
      setPosts(data);
    } catch (error) {
      console.error("Error loading posts:", error);
    } finally {
      setLoading(false);
    }
  };

  const filteredPosts = activeCategory === "all" ?
  posts :
  posts.filter((post) => post.category === activeCategory);

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-center space-y-4">
          <Loader2 className="w-8 h-8 animate-spin mx-auto text-[var(--brand-coral)]" />
          <p className="text-gray-600">Loading beautiful stories...</p>
        </div>
      </div>);

  }

  return (
    <div className="max-w-7xl mx-auto px-6 py-12">
      {/* Hero Section */}
      <div className="text-center mb-16 space-y-6">
        <h1 className="text-5xl lg:text-7xl font-bold text-[var(--brand-coral)] tracking-wider drop-shadow-sm">
          MINOR MENACE
        </h1>
        <p className="text-xl text-[var(--text-muted)] max-w-2xl mx-auto leading-relaxed">Late-Diagnosed, queer, AuDHD, mad, disabled, POC

        </p>
      </div>

      {/* Category Filter */}
      <CategoryFilter
        activeCategory={activeCategory}
        onCategoryChange={setActiveCategory} />


      {/* Content */}
      {filteredPosts.length === 0 ?
      <div className="text-center py-20">
          <div className="w-24 h-24 mx-auto mb-6 rounded-full bg-red-50/60 flex items-center justify-center">
            <div className="atomic-icon text-[var(--brand-coral)] scale-150">
              <div className="orbit"></div>
              <div className="orbit"></div>
            </div>
          </div>
          <h3 className="text-2xl font-semibold text-[var(--text-main)] mb-4">No posts found</h3>
          <p className="text-[var(--text-muted)]">
            {activeCategory === "all" ?
          "No blog posts have been published yet." :
          `No posts found in the ${activeCategory} category.`}
          </p>
        </div> :

      <div className="pb-12">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredPosts.map((post) =>
          <BlogCard key={post.id} post={post} />
          )}
          </div>
        </div>
      }
    </div>);

}