"use client";

import React, { 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;
  customCreatorName: 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 BreakingNews() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [popular, setPopular] = useState<Article[]>([]);
  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 === "jumbotron");

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

  async function fetchArticles() {
    try {
      const req = {
        limit: "5",
        page: 1,
        search: "",
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      };
      const res = await getListArticle(req);
      setArticles(res?.data?.data || []);
    } catch (error) {
      console.error("Gagal memuat artikel:", error);
    }
  }

  async function fetchPopular() {
    try {
      const req = {
        limit: "5",
        page: 1,
        search: "",
        categorySlug: "",
        sort: "",
        isPublish: true,
        sortBy: "",
      };
      const res = await getListArticle(req);
      setPopular(res?.data?.data || []);
    } catch (error) {
      console.error("Gagal memuat artikel populer:", error);
    }
  }

  return (
    <section className="max-w-screen-xl mx-auto px-3 md:px-5 py-8 grid grid-cols-1 md:grid-cols-4 gap-6">
      {/* Kiri - Breaking News */}
      <div className="md:col-span-2 space-y-6">
        {articles.map((item) => (
          <div key={item.id} className="flex gap-4 border-b pb-4">
            <Link className="flex gap-4" href={`/details/${item?.slug}`}>
              <Image
                src={item.thumbnailUrl || "/dummy.jpg"}
                alt={item.title}
                width={160}
                height={100}
                className="object-cover rounded-md w-40 h-28"
              />
              <div className="flex-1">
                <h3 className="text-base font-semibold hover:text-blue-600 cursor-pointer">
                  {item.title}
                </h3>
                <p className="text-xs text-gray-500 mt-1">
                  By {item?.customCreatorName || item?.createdByName} •{" "}
                  {new Date(item.createdAt).toLocaleDateString("id-ID", {
                    day: "numeric",
                    month: "long",
                    year: "numeric",
                  })}
                </p>
                <p className="text-sm text-gray-600 mt-2 line-clamp-2">
                  {item.description}
                </p>
              </div>
            </Link>
          </div>
        ))}
      </div>

      {/* Tengah - Browse Categories & Topics (dummy) */}
      <div className="space-y-8">
        <div>
          <h4 className="font-bold text-gray-800 border-b pb-2 mb-3">
            BROWSE BY CATEGORIES
          </h4>
          <ul className="space-y-2 text-sm text-gray-600">
            <li>Berita Opini</li>
            <li>Berita Populer</li>
            <li>Berita Terkini</li>
            <li>Jaga Negeri</li>
            <li>National</li>
            <li>Politics</li>
            <li>Ragam Nusantara</li>
          </ul>
        </div>
        <div>
          <h4 className="font-bold text-gray-800 border-b pb-2 mb-3">
            BROWSE BY TOPICS
          </h4>
          <div className="flex flex-wrap gap-2 text-xs">
            {[
              "#GIIAS2025",
              "#mdtranscorp",
              "2018 League",
              "Bali United",
              "Chopper Bike",
            ].map((topic, i) => (
              <span
                key={i}
                className="bg-gray-100 px-2 py-1 rounded-md cursor-pointer hover:bg-gray-200"
              >
                {topic}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Kanan - Popular News */}
      <div>
        <h4 className="font-bold text-blue-700 border-b pb-2 mb-3">
          POPULAR NEWS
        </h4>

        {popular.length > 0 && (
          <div className="space-y-5">
            {/* Item pertama tampil besar */}
            <div className="relative">
              <Link
                className="flex flex-col gap-4"
                href={`/details/${popular[0]?.slug}`}
              >
                <Image
                  src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"}
                  alt={
                    popular[0]?.files?.[0]?.file_alt ||
                    popular[0]?.title ||
                    "No Title"
                  }
                  width={400}
                  height={200}
                  className="w-full h-48 object-cover rounded-md"
                />
                <div className="mt-2">
                  <h5 className="text-sm font-semibold hover:text-blue-600 cursor-pointer">
                    {popular[0]?.title}
                  </h5>
                  <span className="absolute top-2 right-2 text-4xl font-bold text-gray-300/80">
                    01
                  </span>
                </div>
              </Link>
            </div>

            {/* Item sisanya */}
            <div className="space-y-4">
              {popular.slice(1).map((item, i) => (
                <div
                  key={item.id}
                  className="flex gap-3 items-start border-b pb-2 last:border-b-0"
                >
                  <Link className="flex gap-4" href={`/details/${item?.slug}`}>
                    <span className="text-lg font-bold text-gray-400">
                      0{i + 2}
                    </span>
                    <div>
                      <h5 className="text-sm font-medium hover:text-blue-600 cursor-pointer">
                        {item.title}
                      </h5>
                      <p className="text-xs text-gray-400">0 Shares</p>
                    </div>
                  </Link>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Advert */}
        <div className="mt-6">
          {bannerAd ? (
            <a
              href={bannerAd.redirectLink}
              target="_blank"
              rel="noopener noreferrer"
              className="block w-full"
            >
              <div className="relative w-full h-[350px] flex justify-center">
                <Image
                  src={bannerAd.contentFileUrl}
                  alt={bannerAd.title || "Iklan Banner"}
                  width={1200} // ukuran dasar untuk responsive
                  height={350}
                  className="object-contain w-full h-full"
                />
              </div>
            </a>
          ) : (
            <Image
              src="/kolom.png"
              alt="Berita Utama"
              width={1200}
              height={188}
              className="object-contain w-full h-[188px]"
            />
          )}
        </div>
      </div>
    </section>
  );
}