// 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";
import Link from "next/link";

type Article = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  createdAt: string;
  createdByName: string;
  thumbnailUrl: string;
  categories: { title: string }[];
  files: { fileUrl: 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="">
              <Link href={`/detail/${mainArticle?.id}`}>
                <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]?.fileUrl ||
                        "/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>
              </Link>
            </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]?.fileUrl ||
                  "/placeholder.png";

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

                return (
                  <div key={article.id} className="group">
                    <Link href={`/detail/${article?.id}`}>
                      {/* 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>
                    </Link>
                  </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]?.fileUrl ||
                  "/placeholder.png";

                return (
                  <div key={article.id}>
                    <Link
                      className="grid grid-cols-1 md:grid-cols-3 gap-4"
                      href={`/detail/${article?.id}`}
                    >
                      {/* 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>
                    </Link>
                  </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">
                <Link
                  className="flex gap-3 items-center"
                  href={`/detail/${a?.id}`}
                >
                  <div className="relative w-20 h-16 flex-shrink-0 rounded overflow-hidden">
                    <Image
                      src={
                        a.thumbnailUrl ||
                        a.files?.[0]?.fileUrl ||
                        "/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>
                </Link>
              </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">
                <Link href={`/detail/${popularArticles[0]?.id}`}>
                  <div className="relative w-full h-[220px] md:h-[280px] rounded overflow-hidden">
                    <Image
                      src={
                        popularArticles[0].thumbnailUrl ||
                        popularArticles[0].files?.[0]?.fileUrl ||
                        "/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>
                </Link>
              </div>
            )}

            {/* Artikel 2 - 5 */}
            <div className="space-y-4">
              {popularArticles.slice(1, 5).map((a, i) => (
                <div key={a.id}>
                  <Link
                    className="flex items-center gap-3"
                    href={`/detail/${a?.id}`}
                  >
                    {/* 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>
                  </Link>
                </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>
  );
}