'use client';

import { useEffect, useState } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import { Calendar, User, ArrowLeft, Tag } from 'lucide-react';
import TopHeader from '@/components/TopHeader';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import ContactModal from '@/components/ContactModal';
import { getBlogBySlug } from '../../../data/blogs';

export default function BlogDetailClient() {
    const [isContactModalOpen, setIsContactModalOpen] = useState(false);
    const router = useRouter();
    const params = useParams();
    const slug = params?.slug as string;
    const blog = slug ? getBlogBySlug(slug) : undefined;

    useEffect(() => {
        if (!blog && slug) {
            router.push('/blog');
        }
    }, [blog, slug, router]);

    if (!blog) {
        return null;
    }

    return (
        <main className="min-h-screen">
            <TopHeader onContactClick={() => setIsContactModalOpen(true)} />
            <Navbar onContactClick={() => setIsContactModalOpen(true)} />

            {/* Hero Section */}
            <section className="relative pt-32 pb-16 sm:pt-40 sm:pb-20 overflow-hidden bg-gradient-to-b from-gold-50 to-white">
                <div className="absolute inset-0">
                    <div className="absolute top-0 right-0 w-96 h-96 bg-gold-200/30 rounded-full blur-3xl" />
                    <div className="absolute bottom-0 left-0 w-96 h-96 bg-brown-100/20 rounded-full blur-3xl" />
                </div>

                <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6 }}
                    >
                        {/* Back Button */}
                        <Link href="/blog">
                            <motion.button
                                whileHover={{ x: -5 }}
                                whileTap={{ scale: 0.95 }}
                                className="flex items-center gap-2 text-brown-700 hover:text-brown-900 mb-8 font-medium transition-colors"
                            >
                                <ArrowLeft size={18} />
                                <span>Back to Blogs</span>
                            </motion.button>
                        </Link>

                        {/* Category Badge */}
                        <motion.div
                            initial={{ opacity: 0, scale: 0.9 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ delay: 0.1 }}
                            className="inline-flex items-center gap-2 mb-4 px-4 py-2 glass rounded-full"
                        >
                            <Tag size={14} className="text-gold-600" />
                            <span className="text-gold-600 font-medium">{blog.category}</span>
                        </motion.div>

                        {/* Title */}
                        <motion.h1
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.2 }}
                            className="font-display text-4xl sm:text-5xl lg:text-6xl font-bold text-brown-900 mb-6"
                        >
                            {blog.title}
                        </motion.h1>

                        {/* Meta Info */}
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.3 }}
                            className="flex flex-wrap items-center gap-6 text-brown-700 mb-8"
                        >

                            <div className="flex items-center gap-2">
                                <Calendar size={18} />
                                <span>{new Date(blog.date).toLocaleDateString('en-US', {
                                    year: 'numeric',
                                    month: 'long',
                                    day: 'numeric',
                                    timeZone: 'UTC'
                                })}</span>
                            </div>
                        </motion.div>
                    </motion.div>
                </div>
            </section>

            {/* Blog Content */}
            <section className="py-12 sm:py-16 bg-white">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="max-w-4xl mx-auto">
                        {/* Featured Image Placeholder */}
                        <motion.div
                            initial={{ opacity: 0, scale: 0.95 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ delay: 0.4 }}
                            className="relative h-64 sm:h-96 mb-12 bg-gradient-to-br from-gold-200 to-brown-200 rounded-2xl overflow-hidden shadow-xl"
                        >
                            {blog.image ? (
                                <Image
                                    src={blog.image}
                                    alt={blog.imageAlt || blog.title}
                                    fill
                                    className="object-cover"
                                    priority
                                />
                            ) : (
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <div className="text-8xl text-gold-600/30 font-display font-bold">
                                        FC
                                    </div>
                                </div>
                            )}
                        </motion.div>

                        {/* Article Content */}
                        <motion.article
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.5 }}
                            className="prose prose-lg max-w-none
                                prose-headings:font-display prose-headings:text-brown-900 prose-headings:font-bold
                                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-brown-700 prose-p:leading-relaxed prose-p:mb-6
                                prose-strong:text-brown-900 prose-strong:font-semibold
                                prose-a:text-gold-600 prose-a:no-underline hover:prose-a:underline
                            "
                            dangerouslySetInnerHTML={{ __html: blog.content }}
                        />

                        {/* Back to Blogs */}
                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 0.6 }}
                            className="mt-12 pt-8 border-t border-gold-200"
                        >
                            <Link href="/blog">
                                <motion.button
                                    whileHover={{ x: -5 }}
                                    whileTap={{ scale: 0.95 }}
                                    className="flex items-center gap-2 text-gold-600 hover:text-gold-700 font-semibold transition-colors"
                                >
                                    <ArrowLeft size={18} />
                                    <span>Back to All Blogs</span>
                                </motion.button>
                            </Link>
                        </motion.div>
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section className="py-20 bg-gradient-to-b from-brown-900 to-black relative overflow-hidden">
                <div className="absolute inset-0">
                    <div className="absolute top-0 right-0 w-96 h-96 bg-gold-500/10 rounded-full blur-3xl opacity-50" />
                    <div className="absolute bottom-0 left-0 w-96 h-96 bg-gold-500/10 rounded-full blur-3xl opacity-50" />
                </div>

                <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.6 }}
                        className="max-w-3xl mx-auto"
                    >
                        <h2 className="font-display text-4xl sm:text-5xl font-bold text-white mb-6">
                            Ready to Experience Luxury?
                        </h2>
                        <p className="text-lg sm:text-xl text-white/80 mb-10 leading-relaxed">
                            Discover the artistry and passion behind our premium hand-crafted chocolates.
                            Treat yourself or your loved ones to an unforgettable indulgence.
                        </p>

                        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <Link href="/#products">
                                <motion.button
                                    whileHover={{ scale: 1.05 }}
                                    whileTap={{ scale: 0.95 }}
                                    className="px-8 py-4 bg-gold-500 text-brown-950 rounded-full font-bold text-lg shadow-lg shadow-gold-500/20 hover:bg-gold-400 transition-colors"
                                >
                                    View Our Collection
                                </motion.button>
                            </Link>
                            <button
                                onClick={() => setIsContactModalOpen(true)}
                                className="px-8 py-4 border-2 border-white/20 text-white rounded-full font-bold text-lg hover:bg-white/10 transition-colors"
                            >
                                Contact Us
                            </button>
                        </div>
                    </motion.div>
                </div>
            </section>

            <Footer />
            <ContactModal isOpen={isContactModalOpen} onClose={() => setIsContactModalOpen(false)} />
        </main>
    );
}