'use client'

import Link from 'next/link'
import { useParams } from 'next/navigation'
import { ChevronRight } from 'lucide-react'
import HeroCard from '@/app/_components/HeroCard'
import ArticleCard, { ArticleCardSkeleton } from '@/app/_components/ArticleCard'
import { NewsDetailCard, NewsDetailCardSkeleton } from '@/app/_components/NewsDetailCard'
import { getNews } from '@/lib/services/news/getNews'
import { getNewsBySlug } from '@/lib/services/news/getNewsBySlug'
import { useSectionHero } from '@/lib/services/sections/useSectionHero'

export default function NewsDetailPage() {
  const params = useParams();
  const slug = Array.isArray(params.slug) ? params.slug[0] : params.slug;

  // Handle undefined slug case
  if (!slug) {
    return <div>No news found.</div>;
  }

  // Use the custom hook to get the article by its slug
  const { article, articleError, articleLoading } = getNewsBySlug(slug);

  // Fetch recent and popular news
  const { featuredNews, recentNews, popularNews, newsError, popularError } = getNews();

  // Handle errors
  if (articleError || newsError || popularError) {
    return <div>Error loading data.</div>;
  }

  const { heroData, heroError, heroLoading } = useSectionHero("news-hero-section");


  return (
    <div className="min-h-screen bg-gray-100">
      {/* Hero Section */}
      <HeroCard
        title={heroData?.title || "NEWS / INFORMATION"}
        subtitle={heroData?.description || "Discover our range of innovative solutions across various industries"}
        backgroundImage={heroData?.background_photo_url || "/images/bg-magna.png"}
        alt="News"
        isLoading={heroLoading}
      />

      {/* Breadcrumbs */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <nav className="flex" aria-label="Breadcrumb">
          <ol className="inline-flex items-center space-x-1 md:space-x-3">
            <li className="inline-flex items-center">
              <Link href="/" className="text-gray-700 hover:text-[#2D4897]">
                Home
              </Link>
            </li>
            <ChevronRight className="w-4 h-4 text-gray-400" />
            <li className="inline-flex items-center">
              <Link href="/news" className="text-gray-700 hover:text-[#2D4897]">
                News
              </Link>
            </li>
            <ChevronRight className="w-4 h-4 text-gray-400" />
            <li>
              <span className="text-gray-500" aria-current="page">{article?.title}</span>
            </li>
          </ol>
        </nav>
      </div>

      {/* Main Content */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-2 pb-10">
        <div className="flex flex-col lg:flex-row gap-8">
          {/* Article Content */}
          <div className="lg:w-2/3">
            {articleLoading ? (
              <div className="space-y-4">
                <ArticleCardSkeleton />
              </div>
            ) : (
              <ArticleCard article={article} />
            )}
          </div>

          {/* Sidebar */}
          <div className="lg:w-1/3 space-y-8">
            {/* Recent News */}
            <div className="bg-white rounded-lg shadow-md p-6">
              <h2 className="text-xl font-bold mb-4">Recent News</h2>
              <div className="space-y-4">
                {articleLoading ? (
                  Array.from({ length: 3 }).map((_, idx) => (
                    <NewsDetailCardSkeleton key={idx} />
                  ))
                ) : recentNews.length > 0 ? (
                  recentNews.map((news) => (
                    <NewsDetailCard
                      key={news.slug}
                      title={news.title}
                      image={news.image}
                      date={news.date}
                      link={`/news/${news.slug}`}
                    />
                  ))
                ) : (
                  <div>No recent news available.</div>
                )}
              </div>
            </div>

            {/* Most Popular */}
            <div className="bg-white rounded-lg shadow-md p-6">
              <h2 className="text-xl font-bold mb-4">Most Popular</h2>
              <div className="space-y-4">
                {articleLoading ? (
                  Array.from({ length: 3 }).map((_, idx) => (
                    <NewsDetailCardSkeleton key={idx} />
                  ))
                ) : popularNews.length > 0 ? (
                  popularNews.map((pick) => (
                    <NewsDetailCard
                      key={pick.slug}
                      title={pick.title}
                      image={pick.image}
                      date={pick.date}
                      link={`/news/${pick.slug}`}
                    />
                  ))
                ) : (
                  <div>No popular news available.</div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}