"use client";

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

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

export default function Header() {
  const [articles, setArticles] = useState<Article[]>([]);

  useEffect(() => {
    const fetchArticles = async () => {
      const req = {
        limit: "10",
        page: 1,
        search: "",
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      };

      const res = await getListArticle(req);
      setArticles(res?.data?.data || []);
      console.log("data slider", res?.data?.data || []);
    };

    fetchArticles();
  }, []);

  const flashArticles = articles.slice(0, 8);
  const mainArticle = articles[8] || articles[0];
  const recentPosts = articles.slice(1, 5);

  return (
    <section className="max-w-7xl mx-auto bg-white px-4">
      {/* FLASH STRIP */}
      <div className="flex items-center justify-between mt-6 mb-3">
        <div className="flex items-center gap-3">
          <h4 className="text-green-600 font-semibold">Flash</h4>
          <span className="text-red-500">⚡</span>
        </div>
        <div className="text-xs text-gray-500 hidden md:block">LOAD MORE ➜</div>
      </div>

      <div className="overflow-x-auto no-scrollbar py-2">
        <div className="flex gap-4">
          {flashArticles.map((item) => (
            <Link
              href={`/details/${item.slug}`}
              key={`flash-${item.id}`}
              className="min-w-[200px] md:min-w-[220px] bg-gray-800 rounded-lg overflow-hidden relative shadow"
            >
              <div className="relative w-[200px] md:w-[220px] h-[140px]">
                <Image
                  src={
                    item.thumbnailUrl ||
                    item.files?.[0]?.fileUrl ||
                    "/placeholder.jpg"
                  }
                  alt={item.title}
                  fill
                  className="object-cover"
                />
              </div>

              {/* dark overlay with text */}
              <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent text-white">
                <p className="text-xs line-clamp-2">{item.title}</p>
                <div className="flex items-center justify-between mt-2 text-[11px] text-gray-300">
                  <span className="text-yellow-300 bg-black/30 px-1 rounded-sm">
                    {item.categoryName ||
                      item.categories?.[0]?.title ||
                      "Berita"}
                  </span>
                  <span>●</span>
                </div>
              </div>

              {/* play icon */}
              <div className="absolute top-3 right-3 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center">
                <svg
                  className="w-4 h-4 text-black"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M8 5v14l11-7z" />
                </svg>
              </div>
            </Link>
          ))}
        </div>
      </div>

      {/* Main Layout */}
      <div className="grid grid-cols-1 md:grid-cols-[2.2fr_1fr] gap-6">
        {/* LEFT SIDE – MAIN ARTICLE */}
        {mainArticle ? (
          <div className="relative h-[500px] w-full rounded-xl overflow-hidden shadow-md">
            <Link href={`/details/${mainArticle.slug}`}>
              <Image
                src={
                  mainArticle.thumbnailUrl ||
                  mainArticle.files?.[0]?.fileUrl ||
                  "/placeholder.jpg"
                }
                alt={mainArticle.files?.[0]?.file_alt || mainArticle.title}
                fill
                className="object-cover"
              />

              {/* White Card Overlay */}
              <div className="absolute bottom-6 left-6 bg-white bg-opacity-95 backdrop-blur-sm p-6  shadow-lg max-w-lg">
                <span className="text-[11px] bg-green-700 text-white px-2 py-1 rounded-sm">
                  {mainArticle.categoryName ||
                    mainArticle.categories?.[0]?.title ||
                    "Berita"}
                </span>

                <h2 className="text-xl md:text-2xl font-bold text-gray-900 mt-2 leading-snug">
                  {mainArticle.title}
                </h2>

                <div className="flex items-center gap-2 text-gray-600 text-xs mt-3">
                  <span>
                    By{" "}
                    {mainArticle.customCreatorName ||
                      mainArticle.createdByName ||
                      "Admin"}
                  </span>
                  <span>•</span>
                  <span>
                    {new Date(
                      mainArticle?.publishedAt ?? mainArticle?.createdAt,
                    )
                      .toLocaleString("id-ID", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                        hour: "2-digit",
                        minute: "2-digit",
                        hour12: false,
                        timeZone: "Asia/Jakarta",
                      })
                      .replace("pukul ", "")}{" "}
                    WIB
                  </span>
                </div>
              </div>
            </Link>
          </div>
        ) : (
          <p className="text-gray-500">Loading...</p>
        )}

        {/* RIGHT SIDE – RECENT POSTS */}
        <div>
          <h3 className="text-lg font-semibold mb-3">Recent Posts</h3>

          <div className="space-y-4">
            {recentPosts.map((item) => (
              <Link
                key={item.id}
                href={`/details/${item.slug}`}
                className="flex gap-3"
              >
                <div className="relative w-35 h-25 rounded-md overflow-hidden">
                  <Image
                    src={
                      item.thumbnailUrl ||
                      item.files?.[0]?.fileUrl ||
                      "/placeholder.jpg"
                    }
                    alt={item.title}
                    fill
                    className="object-cover"
                  />
                </div>

                <div className="flex flex-col">
                  <p className="text-sm font-semibold line-clamp-2">
                    {item.title}
                  </p>
                  <span className="text-xs text-gray-500 mt-1">
                    {new Date(item?.publishedAt ?? item?.createdAt)
                      .toLocaleString("id-ID", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                        hour: "2-digit",
                        minute: "2-digit",
                        hour12: false,
                        timeZone: "Asia/Jakarta",
                      })
                      .replace("pukul ", "")}{" "}
                    WIB
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>

      {/* LOAD MORE */}
      <div className="flex justify-center my-6">
        <button className="text-gray-600 text-sm flex items-center gap-2 border-b pb-1">
          <span>LOAD MORE</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path
              d="M12 5v14M5 12h14"
              stroke="#9CA3AF"
              strokeWidth="1.5"
              strokeLinecap="round"
            />
          </svg>
        </button>
      </div>

      {/* KOLOM PPS BOTTOM BANNER */}
      <div className="relative h-[140px] w-full overflow-hidden rounded-none my-5 border rounded-md">
        <Image
          src="/image-kolom.png"
          alt="Kolom PPS Bottom Banner"
          fill
          className="object-contain"
        />
      </div>
    </section>
  );
}