import { useState } from "react"
import { Link } from "react-router"
import { Search, Clock, Eye } from "lucide-react"
import { getBlogPosts, getBlogCategories, type BlogPost } from "@/data/blogData"
import { SEO } from "@/components/SEO"

const CAT_COLORS: Record<string, string> = {
  "AI Tools": "bg-purple-500/20 text-purple-400",
  "Streaming": "bg-red-500/20 text-red-400",
  "Design Tools": "bg-pink-500/20 text-pink-400",
  "VPN": "bg-green-500/20 text-green-400",
  "Productivity": "bg-blue-500/20 text-blue-400",
  "Security": "bg-green-500/20 text-green-400",
  "Guides": "bg-yellow-500/20 text-yellow-400",
}

export default function Blog() {
  const [search, setSearch] = useState("")
  const [activeCategory, setActiveCategory] = useState("")
  const categories = getBlogCategories()
  const posts = getBlogPosts(activeCategory || undefined, search || undefined)

  return (
    <>
      <SEO
        title="Blog | Tips, Guides & Reviews for Premium Subscriptions"
        description="Expert tips, in-depth comparisons, and money-saving guides for premium software subscriptions. Learn how to save up to 96% on Netflix, ChatGPT, Canva Pro & more."
        keywords="premium subscriptions blog, software savings tips, Netflix guide, ChatGPT review, Canva Pro tutorial"
        path="/blog"
      />
      <div className="min-h-screen pt-28 pb-16 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-3">Latest Insights</h1>
            <p className="text-slate-400">Tips, guides, and news about premium subscriptions</p>
          </div>

          <div className="flex flex-col md:flex-row gap-4 mb-8">
            <div className="flex-1 relative">
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
              <input
                type="text"
                placeholder="Search articles..."
                value={search}
                onChange={e => setSearch(e.target.value)}
                className="w-full pl-12 pr-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:outline-none focus:border-[#f97316]"
              />
            </div>
          </div>

          <div className="flex flex-wrap gap-2 mb-8">
            <button
              onClick={() => setActiveCategory("")}
              className={`px-4 py-2 rounded-full text-sm transition-all ${!activeCategory ? "bg-[#f97316] text-white" : "bg-white/5 border border-white/10 hover:bg-white/10"}`}
            >
              All
            </button>
            {categories.map(cat => (
              <button
                key={cat}
                onClick={() => setActiveCategory(cat)}
                className={`px-4 py-2 rounded-full text-sm transition-all ${activeCategory === cat ? "bg-[#f97316] text-white" : "bg-white/5 border border-white/10 hover:bg-white/10"}`}
              >
                {cat}
              </button>
            ))}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {posts.map((post: BlogPost) => (
              <Link
                key={post.id}
                to={`/blog/${post.slug}`}
                className="group glass-card overflow-hidden hover:border-[#f97316]/30 transition-all duration-300 flex flex-col"
              >
                <div className="h-48 overflow-hidden relative">
                  <img
                    src={post.image}
                    alt={post.imageAlt}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    loading="lazy"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
                </div>
                <div className="p-5 flex flex-col flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <span className={`px-2 py-1 rounded-full text-xs ${CAT_COLORS[post.category] || "bg-white/5 text-slate-400"}`}>
                      {post.category}
                    </span>
                    <span className="text-xs text-slate-500 flex items-center gap-1">
                      <Clock className="w-3 h-3" />{post.readTime}
                    </span>
                  </div>
                  <h3 className="font-semibold mb-2 group-hover:text-[#f97316] transition-colors line-clamp-2">
                    {post.title}
                  </h3>
                  <p className="text-sm text-slate-400 line-clamp-2 mb-3 flex-1">
                    {post.excerpt}
                  </p>
                  <div className="flex items-center justify-between text-xs text-slate-500">
                    <span>{post.author}</span>
                    <span className="flex items-center gap-1">
                      <Eye className="w-3 h-3" />{post.publishedAt}
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>

          {posts.length === 0 && (
            <div className="text-center py-20 text-slate-400">No articles found</div>
          )}
        </div>
      </div>
    </>
  )
}