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

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

export default function Health() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [isLoading, setIsLoading] = useState(true);

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

  async function fetchArticles() {
    setIsLoading(true);
    try {
      const res = await getListArticle({
        limit: "12",
        page: 1,
        search: "",
        categorySlug: "", // ubah sesuai slug kategori kamu
        isPublish: true,
        sortBy: "created_at",
        sort: "desc",
      });
      setArticles(res?.data?.data || []);
    } catch (error) {
      console.error("Error fetching Health articles:", error);
    } finally {
      setIsLoading(false);
    }
  }

  // Format tanggal Indonesia
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString("id-ID", {
      day: "2-digit",
      month: "long",
      year: "numeric",
    });
  };

  // Mapping artikel ke posisi layout
  const leftMain = articles[0];
  const leftList = articles.slice(1, 4);
  const centerMain = articles[4];
  const centerList = articles.slice(5, 8);
  const rightMain = articles[8];
  const rightList = articles.slice(9, 12);

  if (isLoading)
    return (
      <p className="text-center text-gray-500 py-10">
        Memuat berita kesehatan...
      </p>
    );

  return (
    <section className="max-w-7xl mx-auto px-4">
      <h2 className="text-lg font-bold text-white bg-red-600 inline-block px-4 py-2 border-b-2">
        KESEHATAN
      </h2>
      <h2 className="border-b-2 mb-4"></h2>

      {articles.length === 0 ? (
        <p className="text-gray-500 text-center py-10">
          Belum ada berita di kategori kesehatan.
        </p>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* === LEFT COLUMN === */}
          {leftMain && (
            <div className="w-full">
              <Link href={`/detail/${leftMain.id}`}>
                <div className="relative w-full aspect-video mb-2">
                  <Image
                    src={leftMain.thumbnailUrl || "/placeholder.jpg"}
                    alt={leftMain.title}
                    fill
                    className="object-cover"
                  />
                  <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
                    {leftMain.categories?.[0]?.title}
                  </span>
                </div>
                <h3 className="font-semibold text-base mb-2">
                  {leftMain.title}
                </h3>
                <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
                  by {leftMain.customCreatorName || leftMain.createdByName} ·{" "}
                  {formatDate(leftMain.createdAt)}
                </p>
                <p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
                  {leftMain.description}
                </p>
              </Link>
              <div className="space-y-8">
                {leftList.map((item) => (
                  <div key={item.id}>
                    <Link className="flex gap-3" href={`/detail/${item.id}`}>
                      <div className="relative w-[120px] h-[86px] shrink-0">
                        <Image
                          src={item.thumbnailUrl || "/placeholder.jpg"}
                          alt={item.title}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <div>
                        <h4 className="text-sm font-semibold mb-3 line-clamp-2">
                          {item.title}
                        </h4>
                        <p className="text-xs text-gray-500">
                          {formatDate(item.createdAt)}
                        </p>
                      </div>
                    </Link>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* === CENTER COLUMN === */}
          {centerMain && (
            <div className="w-full">
              <Link href={`/detail/${centerMain.id}`}>
                <div className="relative w-full aspect-video mb-2">
                  <Image
                    src={centerMain.thumbnailUrl || "/placeholder.jpg"}
                    alt={centerMain.title}
                    fill
                    className="object-cover"
                  />
                  <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
                    {centerMain.categories?.[0]?.title}
                  </span>
                </div>
                <h3 className="font-semibold text-base mb-2">
                  {centerMain.title}
                </h3>
                <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
                  by {centerMain.customCreatorName || centerMain.createdByName}{" "}
                  · {formatDate(centerMain.createdAt)}
                </p>
                <p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
                  {centerMain.description}
                </p>
              </Link>
              <div className="space-y-8">
                {centerList.map((item) => (
                  <div key={item.id}>
                    <Link className="flex gap-3" href={`/detail/${item.id}`}>
                      <div className="relative w-[120px] h-[86px] shrink-0">
                        <Image
                          src={item.thumbnailUrl || "/placeholder.jpg"}
                          alt={item.title}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <div>
                        <h4 className="text-sm font-semibold mb-3 line-clamp-2">
                          {item.title}
                        </h4>
                        <p className="text-xs text-gray-500">
                          {formatDate(item.createdAt)}
                        </p>
                      </div>
                    </Link>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* === RIGHT COLUMN === */}
          {rightMain && (
            <div className="w-full">
              <Link href={`/detail/${rightMain.id}`}>
                <div className="relative w-full aspect-video mb-2">
                  <Image
                    src={rightMain.thumbnailUrl || "/placeholder.jpg"}
                    alt={rightMain.title}
                    fill
                    className="object-cover"
                  />
                  <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
                    {rightMain.categories?.[0]?.title}
                  </span>
                </div>
                <h3 className="font-semibold text-base mb-2">
                  {rightMain.title}
                </h3>
                <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
                  by {rightMain.customCreatorName || rightMain.createdByName} ·{" "}
                  {formatDate(rightMain.createdAt)}
                </p>
                <p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
                  {rightMain.description}
                </p>
              </Link>
              <div className="space-y-8">
                {rightList.map((item) => (
                  <div key={item.id}>
                    <Link className="flex gap-3" href={`/detail/${item.id}`}>
                      <div className="relative w-[120px] h-[86px] shrink-0">
                        <Image
                          src={item.thumbnailUrl || "/placeholder.jpg"}
                          alt={item.title}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <div>
                        <h4 className="text-sm font-semibold mb-3 line-clamp-2">
                          {item.title}
                        </h4>
                        <p className="text-xs text-gray-500">
                          {formatDate(item.createdAt)}
                        </p>
                      </div>
                    </Link>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      <div className="relative my-8 h-[188px] overflow-hidden flex items-center mx-auto border">
        <Image
          src="/image-kolom.png"
          alt="Berita Utama"
          fill
          className="object-contain"
        />
      </div>
    </section>
  );
}