import { useParams, Link } from "react-router"
import { ArrowLeft, Calendar, Clock, User, Tag, ShoppingCart, TrendingDown, Zap, CheckCircle2 } from "lucide-react"
import { getBlogPostBySlug, getRelatedBlogPosts, type BlogPost } from "@/data/blogData"
import { SEO } from "@/components/SEO"
import { SchemaMarkup } from "@/components/SchemaMarkup"
import { getProductImage } from "@/data/staticData"

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",
  "Security": "bg-green-500/20 text-green-400",
  "Productivity": "bg-blue-500/20 text-blue-400",
  "Guides": "bg-yellow-500/20 text-yellow-400",
}

export default function BlogPostPage() {
  const { slug } = useParams<{ slug: string }>()
  const post = slug ? getBlogPostBySlug(slug) : undefined
  const related = post ? getRelatedBlogPosts(post) : []

  if (!post) {
    return (
      <div className="min-h-screen pt-28 px-4 flex items-center justify-center">
        <div className="text-center">
          <p className="text-xl text-slate-400 mb-4">Article not found</p>
          <Link to="/blog" className="btn-primary">Back to Blog</Link>
        </div>
      </div>
    )
  }

  return (
    <>
      <SEO
        title={post.metaTitle}
        description={post.metaDescription}
        keywords={post.keywords.join(", ")}
        image={post.image}
        imageAlt={post.imageAlt}
        path={`/blog/${post.slug}`}
        type="article"
        article={{
          publishedAt: post.publishedAt,
          modifiedAt: post.publishedAt,
          author: post.author,
          section: post.category,
          tags: post.tags,
        }}
      />
      <SchemaMarkup type="BlogPosting" data={post} />
      <div className="min-h-screen pt-28 pb-16 px-4">
        <div className="max-w-4xl mx-auto">
          <Link
            to="/blog"
            className="flex items-center gap-2 text-sm text-slate-400 hover:text-white mb-6 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />Back to Blog
          </Link>

          {/* Article Header */}
          <article>
            <div className="mb-8">
              <div className="flex flex-wrap items-center gap-3 mb-4">
                <span className={`px-3 py-1 rounded-full text-sm ${CAT_COLORS[post.category] || "bg-white/5 text-slate-400"}`}>
                  {post.category}
                </span>
                {post.tags.map(tag => (
                  <span key={tag} className="flex items-center gap-1 text-xs text-slate-500">
                    <Tag className="w-3 h-3" />{tag}
                  </span>
                ))}
              </div>
              <h1 className="text-3xl md:text-5xl font-bold mb-4 leading-tight">
                {post.title}
              </h1>
              <div className="flex flex-wrap items-center gap-4 text-sm text-slate-400">
                <span className="flex items-center gap-1">
                  <User className="w-4 h-4" />{post.author} — {post.authorTitle}
                </span>
                <span className="flex items-center gap-1">
                  <Calendar className="w-4 h-4" />{post.publishedAt}
                </span>
                <span className="flex items-center gap-1">
                  <Clock className="w-4 h-4" />{post.readTime} read
                </span>
              </div>
            </div>

            {/* Featured Image */}
            <div className="h-64 md:h-96 rounded-2xl overflow-hidden mb-10 relative">
              <img
                src={post.image}
                alt={post.imageAlt}
                className="w-full h-full object-cover"
                loading="eager"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-[#030712]/60 to-transparent" />
            </div>

            {/* Excerpt */}
            <div className="glass-card p-6 mb-8 border-l-4 border-l-[#f97316]">
              <p className="text-lg text-slate-300 italic leading-relaxed">
                {post.excerpt}
              </p>
            </div>

            {/* Why You Save Box */}
            <div className="glass-card p-6 mb-8 bg-gradient-to-br from-[#22c55e]/10 to-[#f97316]/5 border border-[#22c55e]/20">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 rounded-full bg-[#22c55e]/20 flex items-center justify-center">
                  <TrendingDown className="w-5 h-5 text-[#22c55e]" />
                </div>
                <h3 className="text-xl font-bold text-[#22c55e]">Why You Save Up to 96%</h3>
              </div>
              <p className="text-slate-300 leading-relaxed">{post.whyYouSave}</p>
              <div className="flex flex-wrap gap-4 mt-4">
                {["Bulk Wholesale Pricing", "100% Genuine Licenses", "No Middlemen Markup", "24H Money-Back Guarantee"].map(item => (
                  <span key={item} className="flex items-center gap-1 text-sm text-[#22c55e]">
                    <CheckCircle2 className="w-4 h-4" />{item}
                  </span>
                ))}
              </div>
            </div>

            {/* Article Content */}
            <div
              className="prose prose-invert prose-lg max-w-none blog-content"
              dangerouslySetInnerHTML={{ __html: post.content }}
            />
          </article>

          {/* Related Products Section */}
          {post.relatedProducts.length > 0 && (
            <div className="mt-12">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 rounded-full bg-[#f97316]/20 flex items-center justify-center">
                  <Zap className="w-5 h-5 text-[#f97316]" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold">Recommended Products</h3>
                  <p className="text-sm text-slate-400">Top deals mentioned in this article</p>
                </div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                {post.relatedProducts.map((rp) => {
                  const img = getProductImage(rp.slug, rp.category)
                  return (
                    <Link
                      key={rp.slug}
                      to={`/product/${rp.slug}`}
                      className="group glass-card overflow-hidden hover:border-[#f97316]/30 transition-all"
                    >
                      <div className="h-32 overflow-hidden relative">
                        <img
                          src={img}
                          alt={rp.imageAlt}
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                          loading="lazy"
                        />
                        <div className="absolute top-2 right-2 px-2 py-1 rounded-full bg-red-500 text-xs font-bold">
                          {rp.discount} OFF
                        </div>
                      </div>
                      <div className="p-3">
                        <h4 className="font-medium text-sm group-hover:text-[#f97316] transition-colors line-clamp-1 mb-1">
                          {rp.name}
                        </h4>
                        <div className="flex items-center justify-between">
                          <div className="flex items-baseline gap-2">
                            <span className="text-[#f97316] font-bold text-sm">${rp.price}</span>
                            <span className="text-xs text-slate-500 line-through">${rp.originalPrice}</span>
                          </div>
                          <span className="text-xs text-green-400 flex items-center gap-0.5">
                            <ShoppingCart className="w-3 h-3" />View
                          </span>
                        </div>
                      </div>
                    </Link>
                  )
                })}
              </div>
            </div>
          )}

          {/* Author Box */}
          <div className="glass-card p-6 mt-12 flex items-start gap-4">
            <div className="w-14 h-14 rounded-full bg-gradient-to-br from-[#f97316] to-[#22c55e] flex items-center justify-center text-xl font-bold flex-shrink-0">
              S
            </div>
            <div>
              <h3 className="font-semibold mb-1">{post.author}</h3>
              <p className="text-sm text-slate-400 mb-2">{post.authorTitle} at Subscription Hero</p>
              <p className="text-sm text-slate-500">
                Helping 10,000+ customers save up to 96% on premium digital subscriptions since 2023.
              </p>
            </div>
          </div>

          {/* Related Articles */}
          {related.length > 0 && (
            <div className="mt-12">
              <h3 className="text-2xl font-bold mb-6">Related Articles</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {related.map((rp: BlogPost) => (
                  <Link
                    key={rp.id}
                    to={`/blog/${rp.slug}`}
                    className="glass-card p-4 hover:border-[#f97316]/30 transition-all"
                  >
                    <span className={`px-2 py-0.5 rounded-full text-xs ${CAT_COLORS[rp.category] || "bg-white/5 text-slate-400"}`}>
                      {rp.category}
                    </span>
                    <h4 className="font-medium text-sm hover:text-[#f97316] transition-colors line-clamp-2 mt-2">
                      {rp.title}
                    </h4>
                  </Link>
                ))}
              </div>
            </div>
          )}

          {/* CTA */}
          <div className="glass-card p-8 mt-12 text-center bg-gradient-to-br from-[#f97316]/10 to-[#22c55e]/10">
            <h3 className="text-2xl font-bold mb-3">Ready to Start Saving?</h3>
            <p className="text-slate-400 mb-6 max-w-lg mx-auto">
              Browse our catalog of 81+ premium subscriptions and save up to 96% on your favorite tools.
            </p>
            <Link to="/shop" className="btn-primary inline-flex items-center gap-2">
              Browse All Products
            </Link>
          </div>
        </div>
      </div>
    </>
  )
}