'use client';

import React, { useMemo } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { AnnouncementBar } from '@/layout/AnnouncementBar';
import { Header } from '@/layout/Header';
import { Navbar } from '@/layout/Navbar';
import { Footer } from '@/layout/Footer';
import { StickyHeaderSpacer } from '@/components/StickyHeaderSpacer';
import { FloatingButtons } from '@/components/FloatingButtons';
import { BlogArticleView } from '@/components/blog/BlogViews';
import { DEMO_BLOG_ARTICLES, findBlogArticle } from '@/lib/blogDefaults';

export default function BlogArticlePage() {
  const params = useParams<{ slug: string }>();
  const slug = String(params?.slug || '');
  const article = useMemo(
    () => findBlogArticle(DEMO_BLOG_ARTICLES, slug),
    [slug]
  );
  const related = useMemo(() => {
    if (!article) return [];
    return DEMO_BLOG_ARTICLES.filter(
      (a) => a.slug !== article.slug && a.category === article.category
    ).slice(0, 2);
  }, [article]);

  return (
    <div className="min-h-screen bg-[#F8F9FB] text-[#1E293B] flex flex-col font-sans">
      <AnnouncementBar />
      <Header />
      <StickyHeaderSpacer />
      <Navbar />
      <main className="flex-grow py-10 pb-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px]">
          {article ? (
            <BlogArticleView article={article} related={related} />
          ) : (
            <div className="bg-white border border-gray-200 rounded-2xl p-10 text-center max-w-lg mx-auto">
              <h1 className="text-lg font-bold text-[#1E293B]">Article not found</h1>
              <p className="text-[13px] text-gray-500 mt-2 mb-6">
                This story is missing or no longer published.
              </p>
              <Link
                href="/blog"
                className="inline-flex items-center justify-center h-10 px-5 rounded-lg bg-primary text-white text-[13px] font-semibold"
              >
                Back to News & Blog
              </Link>
            </div>
          )}
        </div>
      </main>
      <Footer />
      <FloatingButtons />
    </div>
  );
}