"use client";

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

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 BumnNews() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [popular, setPopular] = useState<Article[]>([]);
  const pathname = usePathname(); // ⬅️ "/bumn-news" misalnya
  const categoryName =
    pathname
      .split("/")
      .filter(Boolean)
      .pop()
      ?.replace(/-/g, " ") // ubah slug jadi teks rapi
      ?.replace(/\b\w/g, (c) => c.toUpperCase()) || "News";

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

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

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

  async function fetchPopular() {
    try {
      const req = {
        limit: "5",
        page: 1,
        search: "",
        categorySlug: "",
        sort: "",
        isPublish: true,
        sortBy: "",
      };
      const res = await getListArticle(req);
      setPopular(res?.data?.data || []);
    } catch (error) {
      console.error("Gagal memuat artikel populer:", error);
    }
  }

  return (
    <section className="max-w-screen-xl mx-auto px-3 md:px-5 py-8 grid grid-cols-1 md:grid-cols-4 gap-6">
      {/* Kiri - Breaking News */}
      <div className="md:col-span-2 space-y-6">
        <div className="mb-6">
          {/* Breadcrumb */}
          <div className="text-sm text-gray-500 mb-2">
            <span className="hover:text-blue-600 cursor-pointer">Home</span>
            <span className="mx-1">{">"}</span>
            <span className="hover:text-blue-600 cursor-pointer">Category</span>
            <span className="mx-1">{">"}</span>
            <span className="text-gray-700 font-medium">{categoryName}</span>
          </div>

          <h1 className="text-3xl font-bold">{categoryName}</h1>
        </div>
        {articles.map((item) => (
          <div key={item.id}>
            <Link
              className="flex gap-4 border-b pb-4"
              href={`/detail/${item?.id}`}
            >
              <Image
                src={item.thumbnailUrl || "/dummy.jpg"}
                alt={item.title}
                width={160}
                height={100}
                className="object-cover rounded-md w-40 h-28"
              />
              <div className="flex-1">
                <h3 className="text-base font-semibold hover:text-blue-600 cursor-pointer">
                  {item.title}
                </h3>
                <p className="text-xs text-gray-500 mt-1">
                  By {item.createdByName} •{" "}
                  {new Date(item.createdAt).toLocaleDateString("id-ID", {
                    day: "numeric",
                    month: "long",
                    year: "numeric",
                  })}
                </p>
                <p className="text-sm text-gray-600 mt-2 line-clamp-2">
                  {item.description}
                </p>
              </div>
            </Link>
          </div>
        ))}
      </div>

      {/* Tengah - Browse Categories & Topics (dummy) */}
      <div className="space-y-8">
        <div>
          <h4 className="font-bold text-gray-800 border-b pb-2 mb-3">
            BROWSE BY TOPICS
          </h4>
          <div className="flex flex-wrap gap-2 text-xs">
            {[
              "#GIIAS2025",
              "#mdtranscorp",
              "2018 League",
              "Bali United",
              "Chopper Bike",
            ].map((topic, i) => (
              <span
                key={i}
                className="bg-gray-100 px-2 py-1 rounded-md cursor-pointer hover:bg-gray-200"
              >
                {topic}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Kanan - Popular News */}
      <div>
        <h4 className="font-bold text-[#022b5f] border-b pb-2 mb-3">
          POPULAR NEWS
        </h4>

        {popular.length > 0 && (
          <div className="space-y-5">
            {/* Item pertama tampil besar */}
            <div className="relative">
              <Link href={`/detail/${popular[0]?.id}`}>
                <Image
                  src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"}
                  alt={
                    popular[0]?.files?.[0]?.file_alt ||
                    popular[0]?.title ||
                    "No Title"
                  }
                  width={400}
                  height={200}
                  className="w-full h-48 object-cover rounded-md"
                />
                <div className="mt-2">
                  <h5 className="text-sm font-semibold hover:text-blue-600 cursor-pointer">
                    {popular[0]?.title}
                  </h5>
                  <span className="absolute top-2 right-2 text-4xl font-bold text-gray-300/80">
                    01
                  </span>
                </div>
              </Link>
            </div>

            {/* Item sisanya */}
            <div className="space-y-4">
              {popular.slice(1).map((item, i) => (
                <div key={item.id}>
                  <Link
                    className="flex gap-3 items-start border-b pb-2 last:border-b-0"
                    href={`/detail/${item?.id}`}
                  >
                    <span className="text-lg font-bold text-gray-400">
                      0{i + 2}
                    </span>
                    <div>
                      <h5 className="text-sm font-medium hover:text-blue-600 cursor-pointer">
                        {item.title}
                      </h5>
                      <p className="text-xs text-gray-400">0 Shares</p>
                    </div>
                  </Link>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Advert */}
        <div className="mt-6">
          <Image
            src="/adversment.png"
            alt="Advertisement"
            width={300}
            height={250}
            className="mx-auto"
          />
        </div>
      </div>
    </section>
  );
}