"use client";

import React, { useState, useMemo } from "react";
import { useApp } from "@/context/AppContext";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
import { AIAssistant } from "@/components/AIAssistant";
import { mockBlogs, Blog } from "@/data/mockData";
import { Calendar, User, Clock, ArrowRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export default function BlogPage() {
  const { t } = useApp();
  const [selectedCategory, setSelectedCategory] = useState<string>("");

  const categories = ["Fashion", "Styling", "Streetwear", "New Collections", "Brand Stories"];

  // Filtered blogs
  const filteredBlogs = useMemo(() => {
    if (selectedCategory) {
      return mockBlogs.filter((b) => b.category === selectedCategory);
    }
    return mockBlogs;
  }, [selectedCategory]);

  return (
    <div className="flex min-h-screen flex-col bg-[#F8F7F2]">
      <Navbar />

      <main className="flex-1 py-12 px-6 md:px-12 mx-auto max-w-7xl w-full">
        {/* Header */}
        <div className="mb-10 text-center space-y-2">
          <span className="text-[10px] font-bold tracking-[0.35em] text-[#D4AF37] uppercase">STARBOY PRESS</span>
          <h1 className="font-serif text-3xl font-bold uppercase tracking-widest text-[#0a0a0a]">
            STREETWEAR JOURNAL
          </h1>
          <p className="text-xs text-neutral-500 font-light max-w-md mx-auto">
            Explore styling blueprints, fabrication breakdowns, and design perspectives behind the brand drops.
          </p>
        </div>

        {/* Categories filters block */}
        <div className="flex flex-wrap justify-center border-t border-b border-[#1A1A1A]/10 py-4 mb-12 gap-2 text-xs uppercase font-bold tracking-widest bg-white">
          <button
            onClick={() => setSelectedCategory("")}
            className={`px-4 py-1.5 transition-all ${
              selectedCategory === "" ? "text-[#D4AF37]" : "text-black hover:text-[#D4AF37]"
            }`}
          >
            All Articles
          </button>
          {categories.map((cat) => (
            <button
              key={cat}
              onClick={() => setSelectedCategory(cat)}
              className={`px-4 py-1.5 transition-all ${
                selectedCategory === cat ? "text-[#D4AF37]" : "text-black hover:text-[#D4AF37]"
              }`}
            >
              {cat}
            </button>
          ))}
        </div>

        {/* Blog Posts Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredBlogs.map((blog) => (
            <article
              key={blog.id}
              className="border border-[#1A1A1A]/10 bg-white p-6 flex flex-col justify-between hover:shadow-md transition-all duration-300"
            >
              <div className="space-y-4">
                {/* Image */}
                <div className="relative aspect-[16/10] w-full overflow-hidden bg-neutral-100 border border-[#1A1A1A]/5">
                  <Image
                    src={blog.coverImage}
                    alt={blog.title}
                    fill
                    className="object-cover transition-transform duration-500 hover:scale-105"
                  />
                  {/* Category tag */}
                  <span className="absolute top-4 left-4 bg-black text-[#F8F7F2] text-[8px] font-extrabold px-2 py-1 tracking-widest uppercase">
                    {blog.category}
                  </span>
                </div>

                {/* Metadata */}
                <div className="flex items-center gap-4 text-[9px] text-neutral-400 font-sans uppercase font-semibold">
                  <span className="flex items-center gap-1">
                    <User className="w-3.5 h-3.5 text-[#D4AF37]" /> {blog.author}
                  </span>
                  <span className="flex items-center gap-1">
                    <Calendar className="w-3.5 h-3.5" /> {blog.date}
                  </span>
                  <span className="flex items-center gap-1">
                    <Clock className="w-3.5 h-3.5" /> {blog.readTime}
                  </span>
                </div>

                {/* Title */}
                <h3 className="font-serif text-base font-bold text-black uppercase leading-snug tracking-wide hover:text-[#D4AF37] transition-colors">
                  {blog.title}
                </h3>

                {/* Content excerpt */}
                <p className="text-xs text-neutral-600 font-light leading-relaxed font-sans line-clamp-3">
                  {blog.content}
                </p>
              </div>

              <div className="pt-6 mt-6 border-t border-[#1A1A1A]/5">
                <span className="text-xs font-bold uppercase tracking-widest text-black hover:text-[#D4AF37] flex items-center gap-1 transition-colors cursor-pointer">
                  Read Full Journal <ArrowRight className="w-3.5 h-3.5" />
                </span>
              </div>
            </article>
          ))}
        </div>

      </main>

      <Footer />
      <FloatingWhatsApp />
      <AIAssistant />
    </div>
  );
}