// components/landing-page/breaking-news.tsx
"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { Calendar } from "lucide-react";
import { getListArticle } from "@/service/article";

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

export default function BreakingNews() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [editorArticles, setEditorArticles] = useState<Article[]>([]);
  const [newsArticles, setNewsArticles] = useState<Article[]>([]);
  const [activeTab, setActiveTab] = useState<
    "trending" | "comments" | "latest"
  >("trending");

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

  async function fetchArticles() {
    try {
      const req = {
        limit: "8",
        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 breaking news:", error);
    }
  }

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

  async function fetchEditorArticles() {
    try {
      const req = {
        limit: "6", // jumlah artikel yg ditampilkan
        page: 1,
        search: "",
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      };

      const res = await getListArticle(req);
      setEditorArticles(res?.data?.data || []);
      setNewsArticles(res?.data?.data || []);
    } catch (error) {
      console.error("Gagal memuat Editor's Pick:", error);
    }
  }

  const mainArticle = articles[0];
  const sideArticles = articles.slice(1, 5);
  const popularArticles = articles.slice(1, 5);

  return (
    <section className="max-w-7xl mx-auto px-4 py-8">
      <div className="flex flex-row gap-4">
        <div className="w-9/12">
          {mainArticle && (
            <div className="">
              <div className="grid md:grid-cols-2 gap-6 items-center">
                {/* LEFT - Image */}
                <div className="relative w-full h-[220px] md:h-[300px] overflow-hidden">
                  <Image
                    src={
                      mainArticle.thumbnailUrl ||
                      mainArticle.files?.[0]?.file_url ||
                      "/placeholder.png"
                    }
                    alt={mainArticle.title}
                    fill
                    className="object-cover"
                  />
                </div>

                {/* RIGHT - Content */}
                <div className="flex flex-col justify-center">
                  <span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3 w-fit">
                    {mainArticle.categoryName?.toUpperCase()}
                  </span>

                  <h2 className="text-xl md:text-2xl font-bold mb-2 leading-snug hover:underline cursor-pointer">
                    {mainArticle.title}
                  </h2>

                  <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
                    <span className="font-semibold text-blue-600">
                      {mainArticle.createdByName}
                    </span>
                    <div className="flex items-center gap-1">
                      <Calendar size={14} />
                      {new Date(mainArticle.createdAt).toLocaleDateString(
                        "en-GB",
                        {
                          day: "2-digit",
                          month: "long",
                          year: "numeric",
                        }
                      )}
                    </div>
                    <span>0</span>
                  </div>

                  <p className="text-sm text-gray-600 mb-4 line-clamp-3">
                    {mainArticle.description}
                  </p>

                  <button className="border border-gray-400 px-4 py-2 text-xs font-semibold hover:bg-black hover:text-white transition w-fit">
                    READ MORE
                  </button>
                </div>
              </div>
            </div>
          )}
          <div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
            <Image
              src={"/image-kolom.png"}
              alt="Kolom PPS"
              fill
              className="w-full object-cover"
            />
          </div>

          <div className="mt-10">
            <h2 className="text-lg md:text-xl font-bold mb-4 border-b pb-2">
              Editor's Pick
            </h2>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {editorArticles?.map((article) => {
                const imageUrl =
                  article.thumbnailUrl ||
                  article.files?.[0]?.file_url ||
                  "/placeholder.png";

                const category =
                  article.categoryName ||
                  article.categories?.[0]?.title ||
                  "NEWS";

                return (
                  <div key={article.id} className="group">
                    {/* Image */}
                    <div className="relative w-full h-[180px] overflow-hidden mb-3">
                      <Image
                        src={imageUrl}
                        alt={article.title}
                        fill
                        className="object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                      <span className="absolute bottom-2 left-2 bg-yellow-400 text-black px-2 py-1 text-[10px] font-bold">
                        {category.toUpperCase()}
                      </span>
                    </div>

                    {/* Title */}
                    <h3 className="font-semibold text-sm md:text-base mb-2 leading-snug group-hover:underline cursor-pointer">
                      {article.title}
                    </h3>

                    {/* Date */}
                    <div className="flex items-center gap-2 text-xs text-gray-500">
                      <Calendar size={14} />
                      {new Date(article.createdAt).toLocaleDateString("en-GB", {
                        day: "2-digit",
                        month: "long",
                        year: "numeric",
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
            <Image
              src={"/image-kolom.png"}
              alt="Kolom PPS"
              fill
              className="w-full object-cover"
            />
          </div>
          {/* News Index Section */}
          <div className="mt-10">
            <h2 className="text-lg md:text-xl font-bold mb-4 border-b pb-2">
              News Index
            </h2>

            <div className="flex flex-col gap-8">
              {newsArticles?.map((article) => {
                const imageUrl =
                  article.thumbnailUrl ||
                  article.files?.[0]?.file_url ||
                  "/placeholder.png";

                return (
                  <div
                    key={article.id}
                    className="grid grid-cols-1 md:grid-cols-3 gap-4"
                  >
                    {/* LEFT - Image */}
                    <div className="relative w-full h-[180px] md:h-[140px] rounded-md overflow-hidden md:col-span-1">
                      <Image
                        src={imageUrl}
                        alt={article.title}
                        fill
                        className="object-cover"
                      />
                    </div>

                    {/* RIGHT - Content */}
                    <div className="md:col-span-2 flex flex-col justify-center">
                      <h3 className="font-bold text-lg md:text-xl mb-2 leading-snug hover:underline cursor-pointer">
                        {article.title}
                      </h3>

                      <div className="flex items-center gap-4 text-xs text-gray-500 mb-2">
                        <span className="font-semibold text-blue-600">
                          {article.createdByName || "DODDODYDOD"}
                        </span>
                        <div className="flex items-center gap-1">
                          <Calendar size={14} />
                          {new Date(article.createdAt).toLocaleDateString(
                            "en-GB",
                            {
                              day: "2-digit",
                              month: "long",
                              year: "numeric",
                            }
                          )}
                        </div>
                        <span>0</span>
                      </div>

                      <p className="text-sm text-gray-600 line-clamp-2">
                        {article.description}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* RIGHT - Tabs + Side Articles */}
        <div className="w-3/12">
          {/* Tabs */}
          <div className="flex gap-4 border-b mb-4 text-sm font-semibold">
            {["trending", "comments", "latest"].map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab as any)}
                className={`pb-2 ${
                  activeTab === tab
                    ? "border-b-2 border-black text-black"
                    : "text-gray-500"
                }`}
              >
                {tab.charAt(0).toUpperCase() + tab.slice(1)}
              </button>
            ))}
          </div>

          {/* List */}
          <div className="space-y-4">
            {sideArticles.map((a) => (
              <div key={a.id} className="flex gap-3 items-center">
                <div className="relative w-20 h-16 flex-shrink-0 rounded overflow-hidden">
                  <Image
                    src={
                      a.thumbnailUrl ||
                      a.files?.[0]?.file_url ||
                      "/placeholder.png"
                    }
                    alt={a.title}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="flex-1">
                  <h4 className="text-sm font-semibold line-clamp-2 hover:underline">
                    {a.title}
                  </h4>
                  <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
                    <Calendar size={12} />
                    {new Date(a.createdAt).toLocaleDateString("en-GB", {
                      day: "2-digit",
                      month: "long",
                      year: "numeric",
                    })}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
            <Image
              src="/kolom.png"
              alt="Berita Utama"
              fill
              className="object-contain rounded"
            />
          </div>
          <div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
            <Image
              src="/kolom.png"
              alt="Berita Utama"
              fill
              className="object-contain rounded"
            />
          </div>
          {/* Follow Us Section */}
          <div className="mt-10">
            <h2 className="text-lg md:text-xl font-bold mb-4 border-b pb-2">
              Follow Us
            </h2>

            <div className="grid grid-cols-2 gap-4">
              <div className="flex flex-col items-center justify-center border rounded p-4">
                <span className="text-3xl text-blue-600 font-bold">Bē</span>
                <span className="text-lg font-semibold mt-2">140</span>
                <span className="text-xs text-gray-500">Followers</span>
              </div>

              <div className="flex flex-col items-center justify-center border rounded p-4">
                <span className="text-3xl text-pink-500 font-bold">◉</span>
                <span className="text-lg font-semibold mt-2">643</span>
                <span className="text-xs text-gray-500">Followers</span>
              </div>
            </div>
          </div>

          {/* Popular News Section */}
          <div className="mt-10">
            <h2 className="text-lg md:text-xl font-bold mb-4 border-b pb-2">
              Popular News
            </h2>

            {/* Artikel Utama (Top 1) */}
            {popularArticles.length > 0 && (
              <div className="mb-6">
                <div className="relative w-full h-[220px] md:h-[280px] rounded overflow-hidden">
                  <Image
                    src={
                      popularArticles[0].thumbnailUrl ||
                      popularArticles[0].files?.[0]?.file_url ||
                      "/placeholder.png"
                    }
                    alt={popularArticles[0].title}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="flex items-start justify-between mt-3">
                  <h3 className="font-bold text-base md:text-lg leading-snug max-w-[85%]">
                    {popularArticles[0].title}
                  </h3>
                  <span className="text-3xl font-bold text-gray-300">01</span>
                </div>
                <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
                  <span>154 Shares</span>
                </div>
              </div>
            )}

            {/* Artikel 2 - 5 */}
            <div className="space-y-4">
              {popularArticles.slice(1, 5).map((a, i) => (
                <div key={a.id} className="flex items-center gap-3">
                  {/* Nomor Urut */}
                  <div className="w-10 h-10 flex items-center justify-center rounded-full border text-sm font-bold text-gray-500">
                    {String(i + 2).padStart(2, "0")}
                  </div>

                  {/* Judul & Info */}
                  <div className="flex-1">
                    <h4 className="text-sm font-semibold line-clamp-2 hover:underline">
                      {a.title}
                    </h4>
                    <div className="flex items-center gap-2 text-xs text-gray-400 mt-1">
                      <span>{154 - i} Shares</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Banner Slot */}
      <div className="mt-8 border text-center py-10 text-gray-400 font-bold tracking-widest">
        KOLOM PPS
      </div>
    </section>
  );
}
