// app/news/[id]/page.tsx

import Image from "next/image";
import { Calendar, User, Eye, ArrowLeft, Zap } from "lucide-react";
import Link from "next/link";
import BannerHeader from "@/components/bannerHeader";
import newsImg from '../../../../../public/assets/news/news3.jpg';
import { newsData, getRelatedNews } from '@/lib/news'; // 👈 lib থেকে ডাটা


export default async function NewsDetailsPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const newsId = Number(id);
  const news = newsData.find(item => item.id === newsId);
  
  const relatedNews = getRelatedNews(newsId, 4);

  if (!news) {
    return (
      <div className="container mx-auto px-4 py-20 text-center">
        <h1 className="text-3xl font-bold text-red-600">News not found!</h1>
        <Link href="/news" className="text-blue-600 hover:underline mt-4 inline-block">
          ← Back to All News
        </Link>
      </div>
    );
  }

  return (
    <div className="bg-gray-50">
      <BannerHeader bannerTitle='News Details' image={newsImg.src} />
      
      <div className="container mx-auto px-4 lg:py-8 pb-8 pt-8">
        <Link href="/news" className="inline-flex py-1 px-3 rounded-sm bg-orange-600/10 items-center gap-2 text-orange-500 hover:text-orange-600 mb-5 transition-colors">
          <ArrowLeft className="w-4 h-4" />
          Back to All News
        </Link>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 space-y-8">
            <div className="relative rounded-2xl overflow-hidden lg:h-[550px] h-[400px] group">
              <Image
                src={news.image}
                alt={news.title}
                fill
                className="object-cover group-hover:scale-105 transition-transform duration-700"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent"></div>
                <section className="hidden lg:block absolute bottom-0 left-0 right-0 p-8 text-white" aria-label={news.title}>
                  <div className="flex items-center gap-2 mb-3">
                    <span className="bg-white/20 px-3 py-1 rounded-full text-xs">Featured</span>
                    <span className="bg-white/20 px-3 py-1 rounded-full text-xs">{news.category}</span>
                  </div>
                  <h1 className="lg:text-3xl text-xl font-bold mb-2">{news.title}</h1>
                  <div className="flex flex-wrap items-center gap-4 lg:text-sm text-xs text-blue-100">
                    <span className="flex items-center gap-1">
                      <Calendar className="w-4 h-4" />
                      {news.date}
                    </span>
                    <span>•</span>
                    <span className="flex items-center gap-1">
                      <Eye className="w-4 h-4" />
                      {news.views} views
                    </span>
                    <span>•</span>
                    <span className="flex items-center gap-1">
                      <User className="w-4 h-4" />
                      {news.author}
                    </span>
                    <span>•</span>
                    <span>{news.readTime}</span>
                  </div>
                </section>
              
            </div>

            <div className="rounded-2xl p-6 md:p-8 shadow-sm border border-gray-100">
               <section className="lg:hidden block text-gray-800 mb-8" aria-label={news.title}>
                  <div className="flex items-center gap-2 mb-3">
                    <span className="bg-white/20 pr-3 py-1 rounded-full text-xs">Featured</span>
                    <span className="bg-white/20 py-1 rounded-full text-xs">{news.category}</span>
                  </div>
                  <h1 className="lg:text-3xl text-xl font-bold mb-2">{news.title}</h1>
                  <div className="flex flex-wrap items-center gap-4 lg:text-sm text-xs text-blue-400">
                    <span className="flex items-center gap-1">
                      <Calendar className="w-4 h-4" />
                      {news.date}
                    </span>
                    <span>•</span>
                    <span className="flex items-center gap-1">
                      <Eye className="w-4 h-4" />
                      {news.views} views
                    </span>
                    <span>•</span>
                    <span className="flex items-center gap-1">
                      <User className="w-4 h-4" />
                      {news.author}
                    </span>
                    <span>•</span>
                    <span>{news.readTime}</span>
                  </div>
                </section>
              <h2 className="text-xl font-semibold text-gray-800 mb-4">About This News</h2>
              <div className="space-y-4 text-gray-700 leading-relaxed">
  {news.description.map((item, index) => {
    if (item.type === "question") {
      return (
        <h3 key={index} className="font-bold text-black text-lg mt-6 mb-2" dangerouslySetInnerHTML={{ __html: item.text }} />
      );
    } else {
      return (
        <p key={index} dangerouslySetInnerHTML={{ __html: item.text }} />
      );
    }
  })}
</div>
            </div>

            <div>
              <h2 className="text-2xl font-bold text-gray-800 mb-4">Related News</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {relatedNews.map((article) => (
                  <Link href={`/news/${article.id}`} key={article.id}>
                    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-lg transition-shadow duration-300 h-full">
                      <div className="relative h-[300px] w-full">
                        <Image
                          src={article.image}
                          alt={article.title}
                          fill
                          className="object-cover"
                        />
                        <div className="absolute top-3 left-3">
                          <span className="bg-black/70 text-white text-xs px-3 py-1 rounded-full backdrop-blur-sm">
                            {article.category}
                          </span>
                        </div>
                      </div>
                      <div className="p-5">
                        <h3 className="font-semibold text-gray-800 text-base mb-2 line-clamp-2 hover:text-orange-600 transition-colors">
                          {article.title}
                        </h3>
                        <div className="flex items-center gap-3 text-xs text-gray-500">
                          <span className="flex items-center gap-1">
                            <Calendar className="w-3 h-3" />
                            {article.date}
                          </span>
                          <span className="flex items-center gap-1">
                            <Eye className="w-3 h-3" />
                            {article.views} views
                          </span>
                        </div>
                        <div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
                          <User className="w-3 h-3" />
                          <span>{article.author}</span>
                        </div>
                      </div>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          </div>

          <div className="space-y-6">
             <div className="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
              <h3 className="text-lg font-bold text-gray-900 mb-4">More Latest News</h3>
              <div className="space-y-4">
                {relatedNews.slice( 1, 3,).map((article) => (
                  <Link href={`/news/${article.id}`} key={article.id} className="flex gap-4 border-b border-gray-100 pb-4 last:border-0 last:pb-0">
                    <div className="relative w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden">
                      <Image
                        src={article.image}
                        alt={article.title}
                        fill
                        className="object-cover"
                      />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800 text-sm hover:text-orange-600 transition-colors line-clamp-2">
                        {article.title}
                      </h4>
                      <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
                        <span>{article.date}</span>
                        <span>•</span>
                        <span>{article.views} views</span>
                      </div>
                      <span className="inline-block mt-1 bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded">
                        {article.category}
                      </span>
                    </div>
                  </Link>
                ))}
              </div>
            </div>

            {/* Flash Sale Badge */}
            <div className="bg-gradient-to-r from-orange-500 to-red-500 rounded-2xl p-6 text-white">
              <div className="flex items-center gap-2 mb-2">
                <Zap className="w-5 h-5" />
                <span className="font-bold">This News</span>
              </div>
              <p className="text-sm text-orange-100">Category & Tags</p>
            </div>
            {/* Category & Tags */}
            <div className="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
              <div className="mb-4">
                <h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Category:</h4>
                <div className="inline-block bg-blue-50 text-blue-700 px-4 py-1.5 rounded-full text-sm font-medium">
                  {news.category}
                </div>
              </div>
              <div>
                <h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Tags:</h4>
                <div className="flex flex-wrap gap-2">
                  <span className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors cursor-pointer">{news.category}</span>
                  <span className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors cursor-pointer">Safety</span>
                  <span className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors cursor-pointer">Quality</span>
                  <span className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors cursor-pointer">SQ</span>
                </div>
              </div>
            </div>

            {/* News Stats */}
            <div className="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
              <h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">News Stats</h4>
              <div className="grid grid-cols-2 gap-4">
                <div className="text-center bg-blue-50 rounded-xl p-3">
                  <div className="text-2xl font-bold text-blue-600">{newsData.length}</div>
                  <div className="text-xs text-gray-500">Total News</div>
                </div>
                <div className="text-center bg-green-50 rounded-xl p-3">
                  <div className="text-2xl font-bold text-green-600">{news.views}</div>
                  <div className="text-xs text-gray-500">Total Views</div>
                </div>
                <div className="text-center bg-purple-50 rounded-xl p-3">
                  <div className="text-2xl font-bold text-purple-600">{newsData.filter(n => n.category === news.category).length}</div>
                  <div className="text-xs text-gray-500">In This Category</div>
                </div>
                <div className="text-center bg-orange-50 rounded-xl p-3">
                  <div className="text-2xl font-bold text-orange-600">{news.readTime}</div>
                  <div className="text-xs text-gray-500">Read Time</div>
                </div>
              </div>
            </div>

            {/* Quick Info */}
            <div className="bg-white rounded-2xl shadow-sm p-6 border border-gray-100">
              <h4 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Quick Info</h4>
              <div className="space-y-3 text-sm">
                <div className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors">
                  <User className="w-4 h-4 text-blue-500" />
                  <span><strong>Author:</strong> {news.author}</span>
                </div>
                <div className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors">
                  <Calendar className="w-4 h-4 text-blue-500" />
                  <span><strong>Published:</strong> {news.date}</span>
                </div>
                <div className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg transition-colors">
                  <Eye className="w-4 h-4 text-blue-500" />
                  <span><strong>Views:</strong> {news.views}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}