// components/landing-page/header.tsx
"use client";

import Image from "next/image";
import { Calendar, Eye, MessageSquare } from "lucide-react";
import { useEffect, useState } from "react";
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;
  slug: string;
  createdAt: string;
  createdByName: 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 Header() {
  const [articles, setArticles] = 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 === "jumbotron");

      if (banner) {
        setBannerAd(banner);
      }
    } catch (err) {
      console.error("Error fetching advertisement:", err);
    }
  }

  useEffect(() => {
    fetchArticles();
  }, [showData]);

  async function fetchArticles() {
    try {
      const req = {
        limit: showData,
        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);
    }
  }

  return (
    <div>
      <div className="max-w-7xl mx-auto py-6 grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* LEFT MAIN CONTENT */}
        <div className="lg:col-span-3 flex flex-col gap-1">
          {/* Bagian 3 artikel di atas */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-1">
            {articles.slice(0, 3).map((post) => (
              <div
                key={post.id}
                className="relative group overflow-hidden h-56 md:h-64"
              >
                <Link href={`/details/${post?.slug}`}>
                  <Image
                    src={post.thumbnailUrl || "/default.jpg"}
                    alt={post.title}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-black/40"></div>
                  <div className="absolute bottom-3 left-3 right-3 text-white">
                    <span className="bg-black text-white text-xs px-2 py-1 rounded">
                      {post.categoryName || post.categories?.[0]?.title}
                    </span>
                    <h2 className="mt-2 font-semibold text-lg leading-snug">
                      {post.title}
                    </h2>
                    <div className="flex items-center gap-4 text-xs mt-2 opacity-90">
                      <span className="flex items-center gap-1">
                        <Calendar className="w-3 h-3" />{" "}
                        {new Date(post.createdAt).toLocaleDateString("id-ID", {
                          day: "numeric",
                          month: "long",
                          year: "numeric",
                        })}
                      </span>
                      <span className="flex items-center gap-1">
                        <Eye className="w-3 h-3" />{" "}
                        {/* belum ada views di API */}0
                      </span>
                      <span className="flex items-center gap-1">
                        <MessageSquare className="w-3 h-3" />{" "}
                        {/* belum ada comments */}0
                      </span>
                    </div>
                  </div>
                </Link>
              </div>
            ))}
          </div>

          {/* Bagian 2 artikel di bawah */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
            {articles.slice(3, 5).map((post) => (
              <div
                key={post.id}
                className="relative group overflow-hidden h-56 md:h-64"
              >
                <Link href={`/details/${post?.slug}`}>
                  <Image
                    src={post.thumbnailUrl || "/default.jpg"}
                    alt={post.title}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-black/40"></div>
                  <div className="absolute bottom-3 left-3 right-3 text-white">
                    <span className="bg-black text-white text-xs px-2 py-1 rounded">
                      {post.categoryName || post.categories?.[0]?.title}
                    </span>
                    <h2 className="mt-2 font-semibold text-lg leading-snug">
                      {post.title}
                    </h2>
                    <div className="flex items-center gap-4 text-xs mt-2 opacity-90">
                      <span className="flex items-center gap-1">
                        <Calendar className="w-3 h-3" />{" "}
                        {new Date(post.createdAt).toLocaleDateString("id-ID", {
                          day: "numeric",
                          month: "long",
                          year: "numeric",
                        })}
                      </span>
                      <span className="flex items-center gap-1">
                        <Eye className="w-3 h-3" /> 0
                      </span>
                      <span className="flex items-center gap-1">
                        <MessageSquare className="w-3 h-3" /> 0
                      </span>
                    </div>
                  </div>
                </Link>
              </div>
            ))}
          </div>
        </div>

        {/* SIDEBAR */}
        <aside className="space-y-6">
          {/* Weather box */}
          <div className="bg-white border shadow p-4">
            <h3 className="bg-[#3a75a9] text-white px-3 py-1 font-semibold text-sm inline-block rounded">
              WEATHER INFORMATION
            </h3>
            <p className="text-sm mt-3">
              <span className="bg-red-600 text-white text-xs px-2 py-1 rounded mr-2">
                Weather widget
              </span>
              You need to fill API key to Customize &gt; General Options &gt;
              Weather API Key to get this widget work.
            </p>
          </div>

          {/* Kolom PPS */}
          <div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
            {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-cover 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>
        </aside>
      </div>
    </div>
  );
}