"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { Calendar, User, ArrowLeft, Share2, MessageCircle, Clock, Tag, ChevronLeft } from "lucide-react";

export default function BlogPostClient({ params }: { params: { id: string } }) {
    const id = params.id;

    // Use the same data structure as the list page (in a real app, this would come from an API)
    const blogs = [
        {
            id: "1",
            title: "The Future of Solar Energy in Maharashtra",
            content: `
                <p class="text-xl leading-relaxed mb-8 font-medium text-theme-primary">Solar energy is rapidly transforming the landscape of Maharashtra. With the state government's aggressive push towards renewable energy, we are seeing an unprecedented surge in both residential and industrial solar installations.</p>
                
                <h2 class="text-3xl font-bold mb-6 mt-12 text-theme-primary">Government Initiatives</h2>
                <p class="mb-6">The Maharashtra State Electricity Distribution Company Limited (MSEDCL) has introduced several simplified subsidy schemes for rooftop solar installations. These initiatives aim to reduce the carbon footprint of urban areas while providing significant savings on electricity bills for homeowners.</p>
                
                <div class="my-10 p-8 rounded-3xl bg-primary-500/5 border border-primary-500/20 italic text-lg leading-relaxed text-theme-secondary">
                    "Maharashtra is aiming to achieve 25,000 MW of solar power capacity by 2027, making it one of the largest hubs for renewable energy in India."
                </div>

                <h2 class="text-3xl font-bold mb-6 mt-12 text-theme-primary">Technological Advancements</h2>
                <p class="mb-6">Beyond traditional panels, new technologies like bifacial solar modules and smart inverters are becoming more accessible. These advancements allow for higher efficiency even in space-constrained urban environments.</p>
                <p class="mb-6">As we look towards 2025, the goal of making Maharashtra a leader in green energy seems more achievable than ever before.</p>
            `,
            image: "https://images.unsplash.com/photo-1509391366360-2e959784a276?q=80&w=2072&auto=format&fit=crop",
            author: "Admin",
            authorRole: "Energy Policy Expert",
            date: "Dec 22, 2024",
            readTime: "5 min read",
            category: "Renewable Energy"
        },
        {
            id: "2",
            title: "Understanding EV Charging Infrastructure",
            content: `<p>Charging into the future...</p>`,
            image: "https://images.unsplash.com/photo-1593941707882-a5bba14938c7?q=80&w=2072&auto=format&fit=crop",
            author: "Tech Team",
            authorRole: "Technical Lead",
            date: "Dec 20, 2024",
            readTime: "8 min read",
            category: "EV Infrastructure"
        },
    ];

    const blog = blogs.find(b => b.id === id) || blogs[0];

    return (
        <div className="min-h-screen bg-theme-bg pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
            {/* Decorative Elements */}
            <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary-500/5 rounded-full blur-[120px] -z-10 translate-x-1/3 -translate-y-1/3" />

            <div className="max-w-4xl mx-auto relative">
                {/* Navigation */}
                <motion.div
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    className="mb-12"
                >
                    <Link
                        href="/blogs"
                        className="inline-flex items-center text-primary-600 hover:text-primary-700 font-semibold transition-colors group"
                    >
                        <div className="p-2 rounded-full bg-primary-500/10 mr-3 group-hover:bg-primary-500 group-hover:text-white transition-all">
                            <ChevronLeft className="w-5 h-5" />
                        </div>
                        Back to Insights
                    </Link>
                </motion.div>

                {/* Hero Section */}
                <header className="mb-12">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                    >
                        <span className="inline-block px-4 py-1 rounded-full bg-primary-500 text-white text-xs font-bold uppercase tracking-widest mb-6 px-4 py-1.5">
                            {blog.category}
                        </span>

                        <h1 className="text-4xl md:text-6xl font-bold text-theme-primary mb-8 leading-[1.15] tracking-tight">
                            {blog.title}
                        </h1>

                        <div className="flex flex-wrap items-center justify-between gap-6 py-8 border-y border-theme-muted/10">
                            <div className="flex items-center gap-4">
                                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-white font-bold text-xl shadow-lg">
                                    {blog.author.charAt(0)}
                                </div>
                                <div>
                                    <p className="text-lg font-bold text-theme-primary leading-none mb-1">{blog.author}</p>
                                    <p className="text-sm text-theme-muted font-medium">{blog.authorRole}</p>
                                </div>
                            </div>

                            <div className="flex items-center gap-8 text-theme-secondary font-medium">
                                <div className="flex items-center gap-2">
                                    <Calendar className="w-5 h-5 text-primary-500" />
                                    <span>{blog.date}</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <Clock className="w-5 h-5 text-solar-500" />
                                    <span>{blog.readTime}</span>
                                </div>
                            </div>

                            <div className="flex items-center gap-3">
                                <button className="p-3 rounded-full bg-gray-100 dark:bg-gray-800 text-theme-primary hover:bg-primary-500 hover:text-white transition-all">
                                    <Share2 className="w-5 h-5" />
                                </button>
                                <button className="p-3 rounded-full bg-gray-100 dark:bg-gray-800 text-theme-primary hover:bg-primary-500 hover:text-white transition-all">
                                    <MessageCircle className="w-5 h-5" />
                                </button>
                            </div>
                        </div>
                    </motion.div>
                </header>

                {/* Main Content Area */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.2 }}
                >
                    <div className="relative h-[400px] md:h-[550px] w-full mb-16 rounded-[2.5rem] overflow-hidden shadow-2xl">
                        <Image
                            src={blog.image}
                            alt={blog.title}
                            fill
                            className="object-cover"
                            priority
                        />
                    </div>

                    <div className="prose prose-xl dark:prose-invert max-w-none text-theme-secondary leading-relaxed">
                        <div
                            dangerouslySetInnerHTML={{ __html: blog.content }}
                            className="blog-content-wrapper"
                        />
                    </div>

                    {/* Footer / Newsletter */}
                    <div className="mt-24 p-10 md:p-16 rounded-[3rem] glass-card relative overflow-hidden">
                        <div className="absolute top-0 right-0 w-64 h-64 bg-primary-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />

                        <div className="relative z-10 text-center max-w-2xl mx-auto">
                            <h3 className="text-3xl md:text-4xl font-bold text-theme-primary mb-6">Stay Updated on Solar Energy</h3>
                            <p className="text-theme-secondary text-lg mb-10 leading-relaxed">Join our inner circle to receive the latest Maharashtra energy news, tender alerts, and subsidy guides directly in your inbox.</p>

                            <form className="flex flex-col sm:flex-row gap-4">
                                <input
                                    type="email"
                                    placeholder="your@email.com"
                                    className="flex-grow px-8 py-4 rounded-2xl bg-white dark:bg-dark-800 border-2 border-theme-muted/10 text-theme-primary placeholder:text-theme-muted focus:border-primary-500 focus:outline-none transition-all shadow-sm"
                                />
                                <button className="px-10 py-4 bg-primary-600 text-white font-bold rounded-2xl hover:bg-primary-700 transition-all shadow-xl shadow-primary-500/20 active:scale-95 whitespace-nowrap">
                                    Get Notified
                                </button>
                            </form>
                            <p className="mt-6 text-xs text-theme-muted">We respect your privacy. Unsubscribe at any time.</p>
                        </div>
                    </div>
                </motion.div>
            </div>
        </div>
    );
}