import { ProjectGalleryLightbox } from "@/components/portfolios/ProjectGalleryLightbox";
import { Reveal } from "@/components/Reveal";
import { PageCta } from "@/components/shared/PageCta";
import { PageHero } from "@/components/shared/PageHero";
import { newsAndBlogPage } from "@/data/site";
import type { DisplayNewsItem } from "@/lib/api";

/**
 * Shared detail template for a single news or blog item — same rules as
 * NewsListing keeps the two archives consistent, this keeps their detail
 * pages consistent too, and mirrors the portfolio detail page's own
 * jump-nav + gallery pattern since blog items carry the same gallery field.
 * Body content is the item's real mainTextHtml from the API; nothing here
 * is invented, and the gallery section only appears once a post actually
 * has images to show.
 */
export function NewsArticleDetail({
  item,
  basePath,
  sectionLabel,
}: {
  item: DisplayNewsItem;
  basePath: string;
  sectionLabel: string;
}) {
  const hasGallery = item.gallery.length > 0;

  const navItems = [
    { id: "overview", label: "معرفی" },
    ...(hasGallery ? [{ id: "gallery", label: "گالری تصاویر" }] : []),
  ];

  return (
    <>
      <PageHero
        image={item.image}
        caption={item.date}
        title={item.title}
        breadcrumb={[
          { label: "صفحه اصلی", href: "/" },
          { label: "مقالات و اخبار", href: "/news-and-blog" },
          { label: sectionLabel, href: basePath },
          { label: item.title, href: `${basePath}/${item.slug}` },
        ]}
      />

      {navItems.length > 1 && (
        <nav aria-label="بخش‌های صفحه" className="border-b border-line bg-paper">
          <ul className="no-scrollbar mx-auto flex max-w-[1400px] items-center gap-8 overflow-x-auto px-6 lg:px-12">
            {navItems.map((navItem) => (
              <li key={navItem.id}>
                <a
                  href={`#${navItem.id}`}
                  className="block scroll-mt-24 py-5 text-sm whitespace-nowrap text-muted transition-colors duration-300 hover:text-gold"
                >
                  {navItem.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      )}

      <section id="overview" className="scroll-mt-20 bg-paper py-16 lg:py-24">
        <div className="mx-auto max-w-[1400px] px-6 lg:px-12">
          <Reveal>
            <div className="mx-auto mb-14 flex max-w-[738px] flex-col items-center gap-3 text-center">
              <p className="kicker justify-center">{sectionLabel}</p>
              <time dateTime={item.publishedAt} className="text-xs text-muted">
                {item.date}
              </time>
            </div>
          </Reveal>

          {item.bodyHtml && (
            <Reveal delay={90}>
              <div className="cms-body" dangerouslySetInnerHTML={{ __html: item.bodyHtml }} />
            </Reveal>
          )}
        </div>
      </section>

      {hasGallery && (
        <section id="gallery" className="scroll-mt-20 bg-sand py-16 lg:py-24">
          <div className="mx-auto max-w-[1400px] px-6 lg:px-12">
            <Reveal>
              <p className="kicker mb-14 justify-center">گالری تصاویر</p>
            </Reveal>

            <ProjectGalleryLightbox images={item.gallery} alt={item.title} />
          </div>
        </section>
      )}

      <PageCta
        caption={newsAndBlogPage.cta.caption}
        title={newsAndBlogPage.cta.title}
        action={newsAndBlogPage.cta.action}
      />
    </>
  );
}
