import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import { notFound, permanentRedirect } from 'next/navigation';
import SeoJsonLd from '@/components/SeoJsonLd';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';
import { blogPostingSchema, breadcrumbSchema, howToSchema } from '@/lib/schema';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { blogPosts, type BlogPostData } from '@/lib/blog-data';

export function generateStaticParams() {
  return Object.keys(blogPosts).map((slug) => ({
    slug,
  }));
}

export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
  // Prevent soft 404s for missing assets in metadata generation
  if (params.slug.match(/\.(png|jpg|jpeg|gif|svg|ico|json|txt|xml)$/i)) {
    return notFound();
  }

  const post = blogPosts[params.slug];

  if (!post) {
    return notFound();
  }

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.datePublished,
      modifiedTime: post.dateModified,
      authors: [post.author],
      images: [
        {
          url: post.image,
          alt: post.imageAlt,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.image],
    },
  };
}

export default function BlogPostPage({ params }: { params: { slug: string } }) {


  // Prevent soft 404s for missing assets
  if (params.slug.match(/\.(png|jpg|jpeg|gif|svg|ico|json|txt|xml)$/i)) {
    notFound();
  }

  const post = blogPosts[params.slug];

  if (!post) {
    notFound();
  }

  const breadcrumbItems: BreadcrumbItem[] = [
    { name: 'Home', url: '/' },
    { name: 'Blog', url: '/blog' },
    { name: post.title, url: `/blog/${post.slug}` },
  ];

  const schemas: any[] = [
    blogPostingSchema({
      title: post.title,
      description: post.excerpt,
      slug: post.slug,
      author: post.author,
      authorUrl: post.authorUrl,
      datePublished: post.datePublished,
      dateModified: post.dateModified,
      image: post.image,
    }),
    breadcrumbSchema(breadcrumbItems),
  ];

  if (post.howTo) {
    schemas.push(howToSchema(post.howTo));
  }

  return (
    <>
      <SeoJsonLd data={schemas} />
      <div className="py-20 bg-gradient-to-b from-gray-50 to-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <Breadcrumbs items={breadcrumbItems} />

            <article className="bg-white rounded-2xl shadow-sm p-8 md:p-12">
              <header className="mb-10">
                <div className="flex items-center flex-wrap gap-3 mb-6">
                  <Badge variant="info">{post.category}</Badge>
                  <span className="text-gray-500 flex items-center">
                    <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {post.readTime} read
                  </span>
                  <span className="text-gray-500">By {post.author}</span>
                  <span className="text-gray-500">{post.date}</span>
                </div>

                <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
                  {post.title}
                </h1>

                {post.answer && (
                  <div className="bg-blue-50 border-l-4 border-blue-500 p-6 mb-8 rounded-r-lg">
                    <h2 className="text-xl font-semibold mb-2 text-gray-900">Quick Answer</h2>
                    <p className="text-lg text-gray-800 leading-relaxed">{post.answer}</p>
                  </div>
                )}

                <div className="relative w-full h-96 rounded-2xl overflow-hidden shadow-lg mb-8">
                  <Image
                    src={post.image}
                    alt={post.imageAlt}
                    fill
                    className="object-cover"
                    priority
                  />
                </div>
              </header>

              <div
                className="prose prose-lg max-w-none
                  prose-headings:font-bold prose-headings:text-gray-900
                  prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
                  prose-h3:text-2xl prose-h3:mt-8 prose-h3:mb-4
                  prose-p:text-gray-700 prose-p:leading-relaxed prose-p:mb-6 prose-p:text-lg
                  prose-ul:my-6 prose-ul:space-y-2
                  prose-li:text-gray-700 prose-li:leading-relaxed
                  prose-strong:text-gray-900 prose-strong:font-semibold"
                dangerouslySetInnerHTML={{ __html: post.content }}
              />

              {post.howTo && (
                <div className="mt-12 bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-2xl border border-blue-200">
                  <h2 className="text-3xl font-bold text-gray-900 mb-6">{post.howTo.name}</h2>
                  <p className="text-lg text-gray-700 mb-6 leading-relaxed">{post.howTo.description}</p>
                  <ol className="space-y-6">
                    {post.howTo.steps.map((step: any, index: number) => (
                      <li key={index} className="flex items-start">
                        <span className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-lg mr-4">
                          {index + 1}
                        </span>
                        <div className="flex-1">
                          <h3 className="font-semibold text-xl mb-2 text-gray-900">{step.name}</h3>
                          <p className="text-gray-700 leading-relaxed">{step.text}</p>
                        </div>
                      </li>
                    ))}
                  </ol>
                </div>
              )}

              <div className="mt-16 p-10 bg-gradient-to-br from-primary-50 to-primary-100 rounded-2xl text-center border border-primary-200">
                <h2 className="text-3xl font-bold text-gray-900 mb-4">
                  Ready to Track Your QR Campaigns?
                </h2>
                <p className="text-lg text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed">
                  Start creating professional dynamic QR codes with advanced scan analytics, campaign tracking, and real-time insights.
                </p>
                <Link href="/signup">
                  <Button size="lg">Create QR Code Free</Button>
                </Link>
              </div>

              {/* Related Articles Section */}
              <div className="mt-16">
                <h2 className="text-2xl font-bold text-gray-900 mb-8">Related Articles</h2>
                <div className="overflow-x-auto pb-4 -mx-4 px-4">
                  <div className="flex gap-6" style={{ minWidth: 'max-content' }}>
                    {Object.values(blogPosts)
                      .filter((p) => p.slug !== post.slug)
                      .map((relatedPost) => (
                        <Link
                          key={relatedPost.slug}
                          href={`/blog/${relatedPost.slug}`}
                          className="group block bg-gray-50 rounded-xl p-6 hover:bg-gray-100 transition-colors flex-shrink-0"
                          style={{ width: '320px' }}
                        >
                          <Badge variant="default" className="mb-3">{relatedPost.category}</Badge>
                          <h3 className="font-semibold text-gray-900 group-hover:text-primary-600 transition-colors mb-2 line-clamp-2">
                            {relatedPost.title}
                          </h3>
                          <p className="text-sm text-gray-600 line-clamp-2">{relatedPost.excerpt}</p>
                          <span className="text-sm text-primary-600 mt-3 inline-block">Read more →</span>
                        </Link>
                      ))}
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </>
  );
}