"use client";

import { ChevronLeft, ChevronRight, Clock, MessageCircle } from "lucide-react";
import { Card } from "../ui/card";
import Image from "next/image";
import { getListArticle } from "@/service/article";
import { useState, useEffect } from "react";
import latestNews from "./latest-news";

type Article = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  createdAt: string;
  createdByName: string;
  customCreatorName: string;
  thumbnailUrl: string;
  categories: { title: string }[];
  files: { fileUrl: string; file_alt: string }[];
  image: string;
  author: string;
  category: string;
  date: string;
  expert: string;
};

export default function Beranda() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [mainNews, setMainNews] = useState<Article | null>(null);
  const [latestNewsMid, setLatestNewsMid] = useState<Article[]>([]);
  const [recentNews, setRecentNews] = useState<Article[]>([]);
  const [latestNews, setLatestNews] = useState<Article[]>([]);

  useEffect(() => {
    const fetchArticles = async () => {
      try {
        const req = {
          limit: "6", // ambil 6 berita, 1 untuk main + 5 untuk lainnya
          page: 1,
          search: "",
          categorySlug: "",
          sort: "desc",
          isPublish: true,
          sortBy: "created_at",
        };

        const res = await getListArticle(req);
        const data = res?.data?.data || [];

        setArticles(data);
        setMainNews(data[0] || null);
        setLatestNewsMid(data.slice(1, 5));
        setRecentNews(res?.data?.data || []);
        setLatestNews(res?.data?.data || []);
      } catch (err) {
        console.error("Error fetching articles:", err);
      }
    };

    fetchArticles();
  }, []);

  const formatDate = (dateString?: string) => {
    if (!dateString) return "";
    return new Date(dateString).toLocaleDateString("id-ID", {
      day: "numeric",
      month: "long",
      year: "numeric",
    });
  };
  return (
    <section className="max-w-[1600px] px-4 lg:mx-auto py-8 flex flex-col md:flex-wrap lg:flex-row justify-between gap-6 ">
      {/* Berita Terpopuler */}
      <aside className="w-full md:w-full lg:w-full xl:w-[312px] space-y-4 shrink-0">
        <Card className="rounded-none px-4 py-4">
          <h2 className="text-lg font-semibold border-b pb-2">
            Berita Terpopuler
          </h2>
          <ul className="space-y-4">
            {articles.map((news) => {
              const imageUrl =
                news.thumbnailUrl ||
                news.files?.[0]?.fileUrl ||
                "/placeholder.jpg";

              return (
                <li key={news.id} className="flex gap-3 items-start">
                  <Image
                    src={imageUrl}
                    width={100}
                    height={71}
                    alt={news.title}
                    className="w-[100px] h-[71px] object-cover"
                  />

                  <p className="text-sm leading-snug font-semibold px-2">
                    {news.title}
                  </p>
                </li>
              );
            })}
          </ul>

          <div className="flex gap-2 pt-4">
            <button className="text-xs border px-2 py-1 flex items-center gap-1">
              <ChevronLeft size={14} /> Prev
            </button>
            <button className="text-xs border px-2 py-1 flex items-center gap-1">
              Next <ChevronRight size={14} />
            </button>
          </div>
        </Card>
        <div className="relative w-auto 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>
      </aside>

      {/* Berita Utama */}
      <main className="w-full md:w-full lg:w-full xl:w-[655px] space-y-6 shrink-0">
        {mainNews && (
          <Card className="border p-8 shadow-sm bg-white rounded-none gap-1">
            <p className="text-xs text-gray-500 uppercase mb-1">Beranda</p>
            <h1 className="text-xl font-bold mt-1">{mainNews.title}</h1>
            <p className="text-[10px] md:text-sm text-gray-500 mt-1 flex items-center gap-3">
              BY{" "}
              <span className="text-black font-semibold text-[10px] md:text-sm">
                {mainNews.customCreatorName ||
                  mainNews.createdByName ||
                  "Redaksi"}
              </span>{" "}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
              >
                <g fill="none">
                  <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                  <path
                    fill="currentColor"
                    d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
                  />
                </g>
              </svg>{" "}
              {formatDate(mainNews.createdAt)}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeWidth={2}
                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                />
              </svg>
              0
            </p>
            <p className="text-sm text-[#666666] mt-2">
              {mainNews.description}
            </p>
            <button className="mt-4 text-xs w-3/12 border px-3 hover:bg-gray-100 transition py-2">
              READ MORE
            </button>
          </Card>
        )}

        <div className="flex gap-2">
          <button className="text-xs border px-3 py-1 flex items-center gap-1">
            <ChevronLeft size={14} /> Prev
          </button>
          <button className="text-xs border px-3 py-1 flex items-center gap-1">
            Next <ChevronRight size={14} />
          </button>
        </div>

        {/* Grid Berita Tambahan */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {latestNewsMid.map((news) => {
            const imageUrl =
              news.thumbnailUrl ||
              news.files?.[0]?.fileUrl ||
              "/placeholder.jpg";
            const category =
              news.categoryName || news.categories?.[0]?.title || "Berita";

            return (
              <div
                key={news.id}
                className="bg-white shadow-md rounded-none overflow-hidden border"
              >
                <div className="relative">
                  <Image
                    src={imageUrl}
                    alt={news.title}
                    width={400}
                    height={223}
                    className="w-full h-[223px] object-cover"
                  />
                  <span className="absolute bottom-0 left-1/2 -translate-x-1/2 bg-black text-white text-[10px] px-2 py-[2px] uppercase">
                    {category}
                  </span>
                </div>
                <div className="p-4 text-center">
                  <h3 className="text-lg font-semibold text-gray-900 mb-3 leading-snug px-9">
                    {news.title}
                  </h3>
                  <div className="flex flex-row items-center justify-center text-gray-500 gap-1">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                    >
                      <g fill="none">
                        <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                        <path
                          fill="currentColor"
                          d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
                        />
                      </g>
                    </svg>{" "}
                    <p className="text-xs text-gray-400">
                      {formatDate(news.createdAt)}
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Recent News */}
        <div className="space-y-4">
          <Card className="px-5 py-5 rounded-none">
            <h2 className="text-sm font-semibold border-b pb-1 border-black inline-block">
              Recent News
            </h2>

            {recentNews.map((item, i) => (
              <div key={i} className="flex flex-col sm:flex-row gap-4 mt-4">
                <Image
                  src={item.thumbnailUrl || "/placeholder.jpg"}
                  alt={item.title}
                  width={220}
                  height={157}
                  className="w-full sm:w-[220px] h-[157px] object-cover"
                />
                <div className="flex-1">
                  <h3 className="text-base font-bold">{item.title}</h3>
                  <p className="text-xs text-gray-500 mt-1 flex flex-wrap items-center gap-2 mb-3">
                    BY{" "}
                    <span className="font-semibold text-black">
                      {item.customCreatorName ||
                        item.createdByName ||
                        "Redaksi"}
                    </span>
                    <Clock className="w-3 h-3" />
                    {new Date(item.createdAt).toLocaleDateString("id-ID", {
                      day: "2-digit",
                      month: "short",
                      year: "numeric",
                    })}
                    <MessageCircle className="w-3 h-3" />0
                  </p>
                  <p className="text-sm text-gray-600 line-clamp-3">
                    {item.description || ""}
                  </p>
                </div>
              </div>
            ))}

            {/* Pagination */}
            <div className="flex gap-2">
              <button className="text-xs border px-3 py-1  flex items-center gap-1">
                <ChevronLeft size={14} /> Prev
              </button>
              <button className="text-xs border px-3 py-1  flex items-center gap-1">
                Next <ChevronRight size={14} />
              </button>
            </div>
          </Card>

          {/* Banner Iklan */}
          <div className="relative my-5 h-[125px] overflow-hidden flex items-center mx-auto border">
            <Image
              src="/image-kolom.png"
              alt="Berita Utama"
              fill
              className="object-cover"
            />
          </div>
        </div>

        {/* Pagination */}
      </main>

      {/* Berita Terbaru */}
      <aside className="w-full md:w-full lg:w-full xl:w-[312px] space-y-6 shrink-0">
        {latestNews.map((news, i) => (
          <Card
            key={i}
            className="rounded-none overflow-hidden bg-white shadow-sm p-0 gap-1"
          >
            <div className="relative">
              {news.thumbnailUrl && (
                <Image
                  src={news.thumbnailUrl}
                  alt={news.title}
                  width={600}
                  height={224}
                  className="w-full h-[224px] object-cover"
                />
              )}
              {news.categoryName && (
                <span className="absolute top-2 left-2 bg-black text-white text-[10px] px-2 py-1 rounded-none uppercase tracking-wide">
                  {news.categoryName}
                </span>
              )}
            </div>
            <div className="p-4">
              <h3 className="text-base font-bold leading-snug">{news.title}</h3>

              <p className="text-xs text-gray-500 mt-2 font-medium mb-4">
                BY{" "}
                <span className="text-black">
                  {news.customCreatorName || news.createdByName || "Redaksi"}
                </span>{" "}
                ·{" "}
                {new Date(news.createdAt).toLocaleDateString("id-ID", {
                  day: "2-digit",
                  month: "short",
                  year: "numeric",
                })}
              </p>

              <p className="text-sm text-gray-600 mt-2 line-clamp-5">
                {news.description || ""}
              </p>
            </div>
          </Card>
        ))}
      </aside>
    </section>
  );
}