"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { getListArticle } from "@/service/article";
import Link from "next/link";
import { getAdvertise } from "@/service/advertisement";

type Article = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  createdAt: string;
  createdByName: string;
  slug: string;
  thumbnailUrl: string;
  categories: {
    title: string;
  }[];
  files: {
    fileUrl: string;
    file_alt: string;
  }[];
};

type Advertise = {
  id: number;
  title: string;
  description: string;
  placement: string;
  contentFileUrl: string;
  redirectLink: string;
};

export default function PopularNews() {
  const [popularNews, setPopularNews] = useState<Article[]>([]);
  const [showData, setShowData] = useState("5");
  const [bannerAd, setBannerAd] = useState<Advertise | null>(null);

  useEffect(() => {
    initStateAdver();
  }, []);

  async function initStateAdver() {
    const req = {
      limit: 100,
      page: 1,
      sort: "desc",
      sortBy: "created_at",
      isPublish: true,
    };

    try {
      const res = await getAdvertise(req);
      const data: Advertise[] = res?.data?.data || [1];

      // filter iklan dengan placement = "banner"
      const banner = data.find((ad) => ad.placement === "banner");

      if (banner) {
        setBannerAd(banner);
      }
    } catch (err) {
      console.error("Error fetching advertisement:", err);
    }
  }
  useEffect(() => {
    fetchPopularNews();
  }, []);

  async function fetchPopularNews() {
    try {
      const res = await getListArticle({
        limit: showData,
        page: 1,
        search: "",
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      });

      setPopularNews(res?.data?.data || []);
    } catch (err) {
      console.error("Gagal load berita populer:", err);
    }
  }

  return (
    <section className="w-full px-4 md:px-12 ">
      <div className="max-w-screen-xl mx-auto">
        <div className="flex flex-row items-center">
          <div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
          <h2 className="text-center text-lg font-semibold py-3">
            BERITA POPULER
          </h2>
          <div className="flex-grow border-t-3 border-gray-300 rounded-md mx-3 mt-1"></div>
        </div>

        <div className="mt-6 space-y-2">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
            {popularNews.slice(0, 3).map((news) => (
              <div
                key={news.id}
                className="relative h-[358px] group overflow-hidden"
              >
                <Link className=" gap-3" href={`/details/${news?.slug}`}>
                  <Image
                    src={news.thumbnailUrl || "/dummy.jpg"}
                    alt={news.title}
                    width={361}
                    height={358}
                    className="w-full h-[358px] object-cover transition-transform duration-300 group-hover:scale-105"
                  />
                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3">
                    <p className="text-xl font-serif font-medium">
                      {news.title}
                    </p>
                  </div>
                </Link>
              </div>
            ))}
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-2">
            {popularNews.slice(3).map((news) => (
              <div
                key={news.id}
                className="relative h-[267px] group overflow-hidden"
              >
                <Image
                  src={news.thumbnailUrl || "/dummy.jpg"}
                  alt={news.title}
                  width={500}
                  height={267}
                  className="w-full h-[267px] object-cover transition-transform duration-300 group-hover:scale-105"
                />
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3">
                  <p className="text-xl font-serif font-medium">{news.title}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Banner */}
      <div className="relative mt-5 mb-14 max-w-screen-xl h-[400px] overflow-hidden flex items-center mx-auto border">
        {bannerAd ? (
          <a
            href={bannerAd.redirectLink}
            target="_blank"
            rel="noopener noreferrer"
            className="block w-full"
          >
            <div className="relative w-full h-[400px] flex justify-center">
              <Image
                src={bannerAd.contentFileUrl}
                alt={bannerAd.title || "Iklan Banner"}
                width={1200} // ukuran dasar untuk responsive
                height={400}
                className="object-cover w-full h-full"
              />
            </div>
          </a>
        ) : (
          <Image
            src="/image-kolom.png"
            alt="Berita Utama"
            width={1200}
            height={188}
            className="object-contain w-full h-[188px]"
          />
        )}
      </div>
    </section>
  );
}