import Image from "next/image";
import Link from "next/link";

import { Reveal } from "@/components/Reveal";
import { Pagination } from "@/components/shared/Pagination";
import type { DisplayNewsItem } from "@/lib/api";

const PAGE_SIZE = 9;

/**
 * Grid + pagination for a full news or blog archive. Used by both /news and
 * /blog so the two keep identical rules — only the item list, base path and
 * empty-state copy differ between them.
 */
export function NewsListing({
  items,
  page,
  basePath,
  emptyMessage,
}: {
  items: DisplayNewsItem[];
  page: number;
  basePath: string;
  emptyMessage: string;
}) {
  const totalPages = Math.max(1, Math.ceil(items.length / PAGE_SIZE));
  const currentPage = Math.min(totalPages, Math.max(1, page));
  const pageItems = items.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);

  return (
    <div className="mx-auto max-w-[1400px] px-6 lg:px-12">
      {pageItems.length === 0 ? (
        <p className="py-16 text-center text-muted">{emptyMessage}</p>
      ) : (
        <ul className="grid gap-8 md:grid-cols-3 lg:gap-10">
          {pageItems.map((item, i) => (
            <Reveal as="li" key={item.slug} delay={(i % 6) * 70}>
              <Link href={`${basePath}/${item.slug}`} className="group block h-full">
                <article className="flex h-full flex-col bg-paper">
                  <div className="relative aspect-[16/11] overflow-hidden">
                    <Image
                      src={item.image}
                      alt={item.title}
                      fill
                      quality={80}
                      sizes="(max-width: 768px) 100vw, 33vw"
                      loading={i < 3 ? "eager" : "lazy"}
                      className="object-cover transition-transform duration-[1100ms] ease-out-soft group-hover:scale-[1.07]"
                    />
                    <div className="absolute inset-0 bg-ink/0 transition-colors duration-500 group-hover:bg-ink/20" />
                  </div>

                  <div className="flex flex-1 flex-col p-7 lg:p-8">
                    <time className="flex items-center gap-2.5 text-[0.8rem] text-muted">
                      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3.5 w-3.5 text-gold">
                        <rect x="3.5" y="5" width="17" height="15.5" rx="2" stroke="currentColor" strokeWidth="1.4" />
                        <path d="M3.5 10h17M8 3.5V6M16 3.5V6" stroke="currentColor" strokeWidth="1.4" />
                      </svg>
                      {item.date}
                    </time>

                    <h3 className="mt-4 text-[1.22rem] leading-[1.75] font-bold text-ink transition-colors duration-300 group-hover:text-gold">
                      {item.title}
                    </h3>

                    <span className="mt-auto flex items-center gap-2 pt-7 text-sm text-muted transition-colors duration-300 group-hover:text-gold">
                      ادامه مطلب
                      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3.5 w-3.5 transition-transform duration-300 group-hover:-translate-x-1">
                        <path d="M19 12H5m0 0 6-6m-6 6 6 6" stroke="currentColor" strokeWidth="1.8" />
                      </svg>
                    </span>
                  </div>
                </article>
              </Link>
            </Reveal>
          ))}
        </ul>
      )}

      <Pagination
        page={currentPage}
        totalPages={totalPages}
        hrefFor={(p) => `${basePath}?page=${p}`}
      />
    </div>
  );
}
