"use client";
import React from "react";
import { motion } from "motion/react";
import { ChevronRight, Calendar, User, ArrowLeft, Sparkles, BookOpen, Mail, Check } from "lucide-react";
import { toast } from "sonner";
import { Product } from "../lib/data/products";
import { productService } from "../lib/services/productService";

export interface BlogPost {
   id: string;
   slug: string;
   title: string;
   excerpt: string;
   image: string;
   date: string;
   author: string;
   content: string;
}

import { useRouter } from 'next/navigation';
import Image from 'next/image';

export default function BlogPage({ blogs = [] }: { blogs: BlogPost[] }) {
   const router = useRouter();
   const [selectedPost, setSelectedPost] = React.useState<BlogPost | null>(null);
   const [products, setProducts] = React.useState<Product[]>([]);

   React.useEffect(() => {
      productService.getProducts({ limit: 10 }).then(res => setProducts(res.data));
   }, []);

   if (selectedPost) {
      return (
         <div className="min-h-screen bg-medical-gray-50 pt-8 pb-20 px-4 font-vazir" dir="rtl">
            <div className="max-w-7xl mx-auto">
               {/* Standard Breadcrumb Navigation & Integrated Back Button */}
               <div className="flex items-center justify-between mb-8 pb-4 border-b border-medical-gray-200/60 font-vazir" dir="rtl">
                  <div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400 whitespace-nowrap">
                     <span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/')}>خانه</span>
                     <ChevronRight className="w-3 h-3 text-medical-gray-300" />
                     <span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => setSelectedPost(null)}>مجله سلامت</span>
                     <ChevronRight className="w-3 h-3 text-medical-gray-300" />
                     <span className="text-canina-blue font-black">{selectedPost.title}</span>
                  </div>

                  <button
                     onClick={() => setSelectedPost(null)}
                     className="px-3.5 py-1.5 bg-white border border-medical-gray-200 rounded-lg text-medical-gray-600 shadow-xs flex items-center gap-1.5 font-bold text-xs hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
                  >
                     <ChevronRight className="w-3.5 h-3.5" />
                     <span>بازگشت</span>
                  </button>
               </div>

               <div className="grid lg:grid-cols-12 gap-12">
                  <div className="lg:col-span-8">
                     <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="bg-white rounded-[3.5rem] border border-medical-gray-200 shadow-2xl overflow-hidden"
                     >
                        <div className="aspect-video w-full overflow-hidden relative">
                           <Image src={selectedPost.image} alt={selectedPost.title} fill className="w-full h-full object-cover" unoptimized />
                        </div>
                        <div className="p-12">
                           <div className="flex items-center gap-4 text-xs font-bold text-canina-blue mb-8">
                              <div className="bg-canina-blue/10 px-4 py-1.5 rounded-full uppercase tracking-widest">تحقیق بالینی</div>
                              <div className="flex items-center gap-1">
                                 <Calendar className="w-4 h-4" />
                                 {selectedPost.date}
                              </div>
                           </div>
                           <h1 className="text-4xl lg:text-5xl font-black text-medical-gray-900 mb-10 leading-tight">
                              {selectedPost.title}
                           </h1>
                           <div className="prose prose-lg max-w-none text-medical-gray-600 leading-[2] text-justify space-y-6">
                              <p className="font-bold text-medical-gray-900 italic text-xl border-r-4 border-canina-blue pr-6 py-2">
                                 {selectedPost.excerpt}
                              </p>
                              <div className="whitespace-pre-line">
                                 {selectedPost.content}
                              </div>
                           </div>

                           <div className="mt-16 pt-10 border-t border-medical-gray-100 flex items-center justify-between">
                              <div className="flex items-center gap-4">
                                 <div className="w-14 h-14 bg-medical-gray-100 rounded-full flex items-center justify-center text-medical-gray-400 border-2 border-white shadow-lg">
                                    <User className="w-8 h-8" />
                                 </div>
                                 <div>
                                    <div className="font-black text-medical-gray-900 text-lg">{selectedPost.author}</div>
                                    <div className="font-bold text-medical-gray-400">تیم تحقیق و توسعه کانینا آلمان</div>
                                 </div>
                              </div>
                              <div className="flex gap-4">
                                 <button className="p-4 bg-medical-gray-100 rounded-2xl hover:bg-canina-blue hover:text-white transition-all text-medical-gray-400">
                                    <Sparkles className="w-6 h-6" />
                                 </button>
                              </div>
                           </div>
                        </div>
                     </motion.div>
                  </div>

                  <div className="lg:col-span-4 space-y-10">
                     <div className="bg-canina-blue rounded-[3rem] p-10 text-white shadow-2xl relative overflow-hidden">
                        <div className="absolute top-0 left-0 p-8 opacity-10">
                           <Sparkles className="w-20 h-20" />
                        </div>
                        <h4 className="text-2xl font-black mb-6 italic relative z-10">محصولات پیشنهادی</h4>
                        <div className="space-y-6 relative z-10">
                           {products.slice(4, 7).map(p => (
                              <div
                                 key={p.id}
                                  onClick={() => router.push(`/shop/${p.slug || p.id}`)}
                                 className="bg-white/10 border border-white/20 p-4 rounded-3xl flex items-center gap-4 cursor-pointer hover:bg-white/20 transition-all group"
                              >
                                 <div className="w-16 h-16 bg-white rounded-2xl p-2 shrink-0 group-hover:scale-110 transition-transform relative overflow-hidden">
                                    <Image src={p.image} alt={p.name} fill className="w-full h-full object-contain p-2" unoptimized />
                                 </div>
                                 <div>
                                    <div className="text-[10px] font-black opacity-50 uppercase tracking-widest">{p.category}</div>
                                    <div className="text-sm font-black font-vazir text-white">{p.name}</div>
                                 </div>
                              </div>
                           ))}
                        </div>
                     </div>

                     <div className="bg-white rounded-[3rem] border border-medical-gray-200 p-10 shadow-xl">
                        <h4 className="text-xl font-black italic mb-6">محبوب‌ترین مقالات</h4>
                        <div className="space-y-6">
                           {blogs.map(p => (
                              <div
                                 key={p.id}
                                 onClick={() => router.push(`/blog/${p.slug}`)}
                                 className="flex items-center gap-4 cursor-pointer group"
                              >
                                 <div className="w-16 h-16 rounded-2xl overflow-hidden shrink-0 relative">
                                    <Image src={p.image} alt={p.title} fill className="w-full h-full object-cover group-hover:scale-110 transition-transform" unoptimized />
                                 </div>
                                 <div className="text-sm font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors line-clamp-2">
                                    {p.title}
                                 </div>
                              </div>
                           ))}
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      );
   }

   return (
      <div className="min-h-screen bg-medical-gray-50 pt-8 pb-20 px-4 font-vazir" dir="rtl">
         <div className="max-w-7xl mx-auto">
            {/* Breadcrumb Navigation & Integrated Back Button */}
            <div className="flex items-center justify-between mb-8 pb-4 border-b border-medical-gray-200/60 font-vazir">
               <div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400">
                  <span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/')}>خانه</span>
                  <ChevronRight className="w-3 h-3 text-medical-gray-300" />
                  <span className="text-canina-blue font-black">مجله سلامت</span>
               </div>

               <button
                  onClick={() => router.push('/')}
                  className="px-3.5 py-1.5 bg-white border border-medical-gray-200 rounded-lg text-medical-gray-600 shadow-xs flex items-center gap-1.5 font-bold text-xs hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
               >
                  <ChevronRight className="w-3.5 h-3.5" />
                  <span>بازگشت</span>
               </button>
            </div>

            {/* Header */}
            <div className="mb-10 text-right">
               <div className="inline-flex items-center gap-2 px-3 py-1 bg-canina-blue/10 text-canina-blue rounded-full text-xs font-black uppercase tracking-widest mb-3">
                  <BookOpen className="w-3.5 h-3.5" />
                  <span>Canina Science Blog</span>
               </div>
               <h1 className="text-3xl sm:text-4xl lg:text-5xl font-black text-medical-gray-900 leading-tight">
                  مجله تخصصی <span className="text-canina-blue">سلامت پت‌ها</span>
               </h1>
               <p className="text-sm sm:text-base text-medical-gray-500 font-medium mt-3 max-w-xl leading-relaxed">
                  آخرین یافته‌های علمی محققین کانینا آلمان در مورد تغذیه و سلامت پت‌ها.
               </p>
            </div>

            {/* Featured Post */}
            {blogs.length > 0 && (
               <div className="mb-20">
                  <motion.div
                     initial={{ opacity: 0, y: 20 }}
                     animate={{ opacity: 1, y: 0 }}
                     className="bg-white rounded-[3.5rem] overflow-hidden border border-medical-gray-200 shadow-2xl flex flex-col lg:flex-row cursor-pointer group"
                     onClick={() => router.push(`/blog/${blogs[0].slug}`)}
                  >
                     <div className="lg:w-1/2 aspect-video lg:aspect-auto relative overflow-hidden">
                        <Image
                           src={blogs[0].image}
                           alt={blogs[0].title}
                           fill
                           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                           unoptimized
                        />
                     </div>
                     <div className="lg:w-1/2 p-12 flex flex-col justify-center">
                        <div className="flex items-center gap-4 text-xs font-bold text-canina-blue mb-6">
                           <div className="bg-canina-blue/10 px-3 py-1 rounded-full uppercase tracking-widest">تخصصی</div>
                           <div className="flex items-center gap-1">
                              <Calendar className="w-3 h-3" />
                              {blogs[0].date}
                           </div>
                        </div>
                        <h2 className="text-3xl lg:text-4xl font-black text-medical-gray-900 mb-6 leading-tight group-hover:text-canina-blue transition-colors">
                           {blogs[0].title}
                        </h2>
                        <p className="text-lg text-medical-gray-500 mb-8 leading-relaxed italic">
                           {blogs[0].excerpt}
                        </p>
                        <div className="flex items-center justify-between pt-8 border-t border-medical-gray-100">
                           <div className="flex items-center gap-3">
                              <div className="w-10 h-10 bg-medical-gray-100 rounded-full flex items-center justify-center text-medical-gray-400">
                                 <User className="w-6 h-6" />
                              </div>
                              <div className="text-sm">
                                 <div className="font-black text-medical-gray-900">{blogs[0].author}</div>
                                 <div className="font-bold text-medical-gray-400">نویسنده کانینا</div>
                              </div>
                           </div>
                           <div className="flex items-center gap-2 text-canina-blue font-black">
                              ادامه مطلب
                              <ArrowLeft className="w-5 h-5 group-hover:-translate-x-2 transition-transform" />
                           </div>
                        </div>
                     </div>
                  </motion.div>
               </div>
            )}

            {/* Post Grid */}
            <div className="grid md:grid-cols-2 gap-8">
               {blogs.slice(1).map((post, idx) => (
                  <motion.div
                     key={post.id}
                     initial={{ opacity: 0, y: 20 }}
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ delay: idx * 0.1 }}
                     className="bg-white rounded-[3rem] overflow-hidden border border-medical-gray-200 shadow-xl group hover:shadow-2xl transition-all cursor-pointer"
                     onClick={() => router.push(`/blog/${post.slug}`)}
                  >
                     <div className="aspect-[16/9] overflow-hidden relative">
                        <Image
                           src={post.image}
                           alt={post.title}
                           fill
                           className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                           unoptimized
                        />
                     </div>
                     <div className="p-8">
                        <div className="flex items-center gap-4 text-[10px] font-bold text-canina-blue mb-4">
                           <div className="flex items-center gap-1">
                              <Calendar className="w-3 h-3" />
                              {post.date}
                           </div>
                        </div>
                        <h3 className="text-xl font-black text-medical-gray-900 mb-4 group-hover:text-canina-blue transition-colors line-clamp-2 leading-snug">
                           {post.title}
                        </h3>
                        <p className="text-sm text-medical-gray-500 line-clamp-3 leading-relaxed mb-6">
                           {post.excerpt}
                        </p>
                        <div className="flex items-center gap-2 text-medical-gray-900 font-bold group">
                           مطالعه مقاله
                           <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
                        </div>
                     </div>
                  </motion.div>
               ))}

               {/* Ultra-Premium Redesigned Newsletter / CTA Box */}
               <motion.div
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.7 }}
                  className="bg-gradient-to-br from-canina-blue via-canina-blue/95 to-medical-gray-900 rounded-[3rem] p-8 sm:p-14 text-white relative overflow-hidden font-vazir shadow-2xl border border-white/10"
                  dir="rtl"
               >
                  {/* Decorative Glassmorphic Background Elements */}
                  <div className="absolute top-0 right-0 w-96 h-96 bg-canina-teal/15 rounded-full blur-[100px] pointer-events-none" />
                  <div className="absolute bottom-0 left-0 w-80 h-80 bg-canina-gold/10 rounded-full blur-[90px] pointer-events-none" />
                  <div className="absolute -top-12 -left-12 opacity-5 pointer-events-none select-none">
                     <span className="text-[180px] font-black italic tracking-tighter font-sans text-white">CANINA</span>
                  </div>

                  <div className="relative z-10 max-w-4xl mx-auto flex flex-col items-center text-center space-y-8">
                     
                     {/* Top Premium Badge */}
                     <div className="inline-flex items-center gap-2.5 px-4 py-2 bg-white/10 backdrop-blur-md rounded-full border border-white/20 shadow-inner">
                        <div className="w-6 h-6 rounded-lg bg-canina-gold text-canina-dark flex items-center justify-center font-black text-xs italic shadow-md">
                           C
                        </div>
                        <span className="text-xs font-black text-white/90 tracking-wider font-vazir">
                           خبرنامه اختصاصی پژوهشگاه کانینا آلمان
                        </span>
                        <Sparkles className="w-3.5 h-3.5 text-canina-gold animate-pulse" />
                     </div>

                     {/* Headline & Description */}
                     <div className="space-y-4 max-w-2xl">
                        <h3 className="text-3xl sm:text-4xl lg:text-5xl font-black font-vazir text-white leading-tight">
                           مشترک <span className="text-transparent bg-clip-text bg-gradient-to-r from-canina-gold via-white to-canina-teal">خبرنامه علمی</span> شوید
                        </h3>
                        <p className="text-sm sm:text-base text-white/80 font-medium font-vazir leading-relaxed">
                           ماهانه یک ایمیل حاوی تازه‌ترین یافتـه‌های پزشکی، کاتالوگ‌های درمانی اختصاصی کانینا و کدهای تخفیف ویژه برای شما ارسال می‌شود.
                        </p>
                     </div>

                     {/* Main Interactive Floating Input Bar */}
                     <div className="w-full max-w-xl">
                        <form onSubmit={(e) => { e.preventDefault(); toast.success("عضویت شما در خبرنامه علمی با موفقیت ثبت شد!"); }} className="w-full bg-white/15 backdrop-blur-xl border border-white/25 p-2 rounded-2xl sm:rounded-full flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 shadow-2xl hover:border-canina-gold/40 transition-all group" dir="ltr">
                           <input
                              type="email"
                              required
                              placeholder="آدرس ایمیل شما (name@domain.com)..."
                              className="flex-1 bg-transparent border-none text-xs sm:text-sm outline-none text-white placeholder:text-white/45 px-3 sm:px-4 py-2.5 sm:py-0 font-sans text-left"
                           />
                           <button 
                              type="submit"
                              className="bg-canina-gold hover:bg-white text-canina-dark px-6 sm:px-8 py-3.5 rounded-xl sm:rounded-full font-black text-xs sm:text-sm transition-all duration-300 whitespace-nowrap shadow-xl hover:scale-105 flex items-center justify-center gap-2 font-vazir cursor-pointer flex-shrink-0"
                              dir="rtl"
                           >
                              <span>عضویت آنی</span>
                              <Mail className="w-4 h-4" />
                           </button>
                        </form>
                     </div>

                     {/* Bottom Feature Micro Badges */}
                     <div className="pt-2 flex flex-wrap items-center justify-center gap-6 text-xs text-white/70 font-bold font-vazir border-t border-white/10 w-full max-w-xl">
                        <div className="flex items-center gap-2">
                           <Check className="w-4 h-4 text-canina-gold" />
                           <span>بدون اسپم (حداکثر ۱ ایمیل در ماه)</span>
                        </div>
                        <div className="flex items-center gap-2">
                           <Check className="w-4 h-4 text-canina-gold" />
                           <span>امکان لغو عضویت با یک کلیک</span>
                        </div>
                     </div>

                  </div>
               </motion.div>
            </div>

            {/* Synergy Products Cross-sell */}
            <section className="mt-32 p-12 bg-canina-blue rounded-[4rem] text-white overflow-hidden relative shadow-2xl">
               <div className="absolute inset-0 opacity-20 pointer-events-none">
                  <div className="grid grid-cols-6 h-full w-full">
                     {Array.from({ length: 36 }).map((_, i) => (
                        <div key={i} className="border border-white/20" />
                     ))}
                  </div>
               </div>
               <div className="relative z-10 flex flex-col lg:flex-row items-center gap-12">
                  <div className="flex-1">
                     <h3 className="text-3xl lg:text-4xl font-black italic mb-6">علم آلمانی در خدمت سلامت پت شما</h3>
                     <p className="text-white/80 mb-8 leading-relaxed max-w-xl">
                        تمامی مقالات این وبلاگ بر اساس کاتالوگ‌های رسمی و نتایج آزمایشگاهی کمپانی کانینا آلمان تدوین شده است.
                     </p>
                     <button
                        onClick={() => router.push('/shop')}
                        className="bg-white text-canina-blue px-8 py-4 rounded-2xl font-black hover:scale-105 transition-transform"
                     >
                        مشاهده محصولات تخصصی
                     </button>
                  </div>
                  <div className="grid grid-cols-2 gap-4 flex-shrink-0">
                     {products.slice(0, 2).map((p) => (
                        <div
                           key={p.id}
                            onClick={() => router.push(`/shop/${p.slug || p.id}`)}
                            className="bg-white/10 border border-white/20 p-6 rounded-3xl cursor-pointer hover:bg-white/20 transition-all text-center group"
                         >
                            <div className="w-20 h-20 mx-auto mb-4 relative overflow-hidden">
                               <Image src={p.image} alt={p.name} fill className="w-full h-full object-contain group-hover:scale-110 transition-transform" unoptimized />
                            </div>
                           <h5 className="text-[10px] font-black">{p.name}</h5>
                        </div>
                     ))}
                  </div>
               </div>
            </section>
         </div>
      </div>
   );
}