"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { getListArticle } from "@/service/article";
import { ScrollArea } from "@/components/ui/scroll-area"; // pastikan ada komponen ini
import { Calendar } from "lucide-react";
import Link from "next/link";

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

export default function News() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [recentPosts, setRecentPosts] = useState<Article[]>([]);

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

  async function fetchArticles() {
    try {
      const req = {
        limit: "8", // ambil 8 artikel untuk konten utama
        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 utama:", error);
    }
  }

  async function fetchRecentPosts() {
    try {
      const req = {
        limit: "5", // ambil 5 artikel untuk recent posts
        page: 1,
        search: "",
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      };

      const res = await getListArticle(req);
      setRecentPosts(res?.data?.data || []);
    } catch (error) {
      console.error("Gagal memuat recent posts:", error);
    }
  }

  return (
    <div className="max-w-[1300px] mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6 py-10 bg-white">
      {/* Scrollable Left Section */}
      <ScrollArea className="lg:col-span-2 pl-4 pr-4 md:pr-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {articles.slice(0, 4).map((article) => (
            <div key={article.id}>
              <Link href={`/detail/${article?.id}`}>
                <div className="w-full h-[280px] relative overflow-hidden">
                  <Image
                    src={
                      article.thumbnailUrl ||
                      article.files?.[0]?.fileUrl ||
                      "/default.jpg"
                    }
                    alt={article.title}
                    fill
                    className="object-cover"
                  />
                </div>
                <p className="text-xs text-[#717582] mt-2 ">
                  {article.categoryName}
                </p>
                <h2 className="text-2xl font-semibold font-serif text-[#2481D3] hover:text-blue-400 mt-2">
                  {article.title}
                </h2>
                <p className="mt-2 text-[#717582] text-[14px] line-clamp-3">
                  {article.description}
                </p>
                <div className="flex flex-row item-center gap-3">
                  <div className="text-sm  text-black">
                    {article.createdByName}{" "}
                  </div>
                  <div className="text-blue-400 mt-1">
                    <Calendar size={12} />
                  </div>
                  <div className="text-sm ">
                    {new Date(article.createdAt).toLocaleDateString("en-GB", {
                      day: "2-digit",
                      month: "long",
                      year: "numeric",
                    })}
                  </div>
                </div>
              </Link>
            </div>
          ))}
        </div>

        {/* Banner */}
        <div className="relative w-full my-10 h-[160px] md:h-[188px] overflow-hidden flex items-center border">
          <Image
            src="/image-kolom.png"
            alt="Berita Utama"
            fill
            className="object-cover"
          />
        </div>

        {/* Artikel kedua */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {articles.slice(4, 8).map((article) => (
            <div key={article.id}>
              <Link href={`/detail/${article?.id}`}>
                <div className="w-full h-[280px] relative overflow-hidden">
                  <Image
                    src={
                      article.thumbnailUrl ||
                      article.files?.[0]?.fileUrl ||
                      "/default.jpg"
                    }
                    alt={article.title}
                    fill
                    className="object-cover"
                  />
                </div>
                <p className="text-xs text-[#717582] mt-2 ">
                  {article.categoryName}
                </p>
                <h2 className="text-2xl font-semibold font-serif text-[#2481D3] hover:text-blue-400 mt-2">
                  {article.title}
                </h2>
                <p className="mt-2 text-[#717582] text-[14px] line-clamp-3">
                  {article.description}
                </p>
                <div className="flex flex-row item-center gap-3">
                  <div className="text-sm  text-black">
                    {article.createdByName}{" "}
                  </div>
                  <div className="text-blue-400 mt-1">
                    <Calendar size={12} />
                  </div>
                  <div className="text-sm ">
                    {new Date(article.createdAt).toLocaleDateString("en-GB", {
                      day: "2-digit",
                      month: "long",
                      year: "numeric",
                    })}
                  </div>
                </div>
              </Link>
            </div>
          ))}
        </div>

        {/* Banner */}
        <div className="relative w-full my-10 h-[160px] md:h-[188px] overflow-hidden flex items-center border">
          <Image
            src="/image-kolom.png"
            alt="Berita Utama"
            fill
            className="object-cover"
          />
        </div>

        {/* Pagination (sementara statis, bisa pakai API meta untuk dinamis) */}
        <div className="flex justify-end gap-3">
          <button className="w-8 h-8 flex items-center justify-center rounded-full bg-[#2481D3] text-white font-semibold">
            1
          </button>
          <button className="w-8 h-8 flex items-center justify-center rounded-full border border-blue-300 text-[#2481D3] font-semibold hover:bg-blue-80">
            2
          </button>
          <div className="w-8 h-8 flex items-center justify-center text-blue-500 font-semibold">
            ...
          </div>
          <button className="w-8 h-8 flex items-center justify-center rounded-full border border-blue-300 text-[#2481D3] font-semibold hover:bg-blue-80">
            7
          </button>
          <button className="w-8 h-8 flex items-center justify-center rounded-full border border-blue-300 text-[#2481D3] hover:bg-blue-100">
            <svg
              className="w-4 h-4"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 5l7 7-7 7"
              />
            </svg>
          </button>
        </div>
      </ScrollArea>

      {/* Fixed Right Section */}
      <div className="sticky top-10 h-fit bg-white mx-3 md:mx-0">
        <h3 className="text-xl font-semibold text-[#2481D3] border-b pb-2 mb-4">
          Recent Posts
        </h3>

        <div className="space-y-8">
          {recentPosts.map((item) => (
            <div key={item.id}>
              <Link
                className="flex items-start gap-3"
                href={`/detail/${item?.id}`}
              >
                <div className="w-[80px] h-[80px] relative shrink-0">
                  <Image
                    src={
                      item.thumbnailUrl ||
                      item.files?.[0]?.fileUrl ||
                      "/default.jpg"
                    }
                    alt={item.title}
                    fill
                    className="object-cover "
                  />
                </div>
                <div className="text-sm flex flex-col gap-1">
                  <p className="text-[#717582] text-xs font-bold">
                    {item.categoryName}
                  </p>
                  <p className="text-[#2481D3] hover:text-blue-400 font-semibold line-clamp-2 w-10/12">
                    {item.title}
                  </p>
                  <p className="text-xs text-[#717582]">
                    {new Date(item.createdAt).toLocaleDateString("en-GB", {
                      day: "2-digit",
                      month: "long",
                      year: "numeric",
                    })}
                  </p>
                </div>
              </Link>
            </div>
          ))}

          {/* Ads / Subscribe */}
          <div className="relative rounded w-full md:w-[300px] border ">
            <Image
              src="/kolom.png"
              alt="Iklan 2"
              width={300}
              height={200}
              className="object-cover"
            />
          </div>
          <div className="border p-5 w-full md:w-[300px] ">
            <h3 className="text-[#2481D3] text-lg font-semibold mb-2 w-10/12">
              Subscribe us to get the latest news!
            </h3>
            <label htmlFor="email" className="text-sm font-semibold block mb-2">
              Email:
            </label>
            <input
              type="email"
              id="email"
              placeholder="Your email address"
              className="w-full px-4 py-2 border border-gray-300 rounded mb-3 text-sm"
            />
            <button className="bg-[#2481D3] text-white px-4 py-2 rounded text-sm hover:bg-blue-700 transition">
              SUBSCRIBE
            </button>
          </div>
          <div className="relative rounded w-full md:w-[300px] border ">
            <Image
              src="/kolom.png"
              alt="Iklan 2"
              width={300}
              height={200}
              className="object-cover"
            />
          </div>
        </div>
      </div>
    </div>
  );
}