"use client";
import { Clock, MessageCircle } from "lucide-react";
import { Card } from "../ui/card";
import Image from "next/image";
import { useEffect, useRef, useState } from "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 Beranda() {
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [articles, setArticles] = useState<Article[]>([]);
  const [showData, setShowData] = useState("5");
  const [search, setSearch] = useState("");
  const [selectedCategories, setSelectedCategories] = useState<any>("");
  const [startDateValue, setStartDateValue] = useState({
    startDate: null,
    endDate: null,
  });

  useEffect(() => {
    initState();
  }, [page, showData, startDateValue, selectedCategories]);

  async function initState() {
    // loading();
    const req = {
      limit: showData,
      page,
      search,
      categorySlug: Array.from(selectedCategories).join(","),
      sort: "desc",
      isPublish: true,
      sortBy: "created_at",
    };

    try {
      const res = await getListArticle(req);
      setArticles(res?.data?.data || []);
      setTotalPage(res?.data?.meta?.totalPage || 1);
    } finally {
      // close();
    }
  }
  const scrollRef = useRef<HTMLDivElement>(null);

  const scrollLeft = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollBy({ left: -240, behavior: "smooth" });
    }
  };

  const scrollRight = () => {
    if (scrollRef.current) {
      scrollRef.current.scrollBy({ left: 240, behavior: "smooth" });
    }
  };
  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 lg:px-0">
      <aside className="w-full md:w-full lg:w-full xl:w-[352px] space-y-4 shrink-0">
        <Card className="rounded-none px-4 py-4">
          <h2 className="text-lg font-semibold border-b pb-2">
            Berita Pilihan
          </h2>
          <ul className="space-y-4">
            {articles.map((news, i) => (
              <li key={i}>
                <Link
                  className="flex gap-3 items-start"
                  href={`/detail/${news?.id}`}
                >
                  <Image
                    src={news?.thumbnailUrl as string}
                    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>
                </Link>
              </li>
            ))}
          </ul>
        </Card>
        <Card className="rounded-none px-4 py-4">
          <h2 className="text-lg font-semibold border-b ">Berita Opini</h2>
          <ul className="space-y-3 ">
            {articles.map((news, i) => (
              <li key={i}>
                <Link
                  className="flex items-start gap-2 text-sm font-medium border-b"
                  href={`/detail/${news?.id}`}
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                  >
                    <g
                      fill="none"
                      // fill-rule="evenodd"
                    >
                      <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="M5.669 4.76a1.47 1.47 0 0 1 2.04-1.177c1.062.454 3.442 1.533 6.462 3.276c3.021 1.744 5.146 3.267 6.069 3.958c.788.591.79 1.763.001 2.356c-.914.687-3.013 2.19-6.07 3.956c-3.06 1.766-5.412 2.832-6.464 3.28c-.906.387-1.92-.2-2.038-1.177c-.138-1.142-.396-3.735-.396-7.237c0-3.5.257-6.092.396-7.235"
                      />
                    </g>
                  </svg>
                  {news.title}
                </Link>
              </li>
            ))}
          </ul>
        </Card>

        <Card className="rounded-none px-4 py-4">
          <h2 className="text-lg font-semibold border-b pb-2">
            Berita Populer
          </h2>
          <div className="space-y-4 ">
            <div>
              <Link href={`/detail/${articles[0]?.id}`}>
                <div className="relative">
                  <img
                    src={articles[0]?.thumbnailUrl}
                    alt={articles[0]?.title}
                    className="w-full h-auto object-cover"
                  />
                  <span className="absolute bottom-1 left-1 bg-black text-white text-xs px-2 py-1">
                    {articles[0]?.categories?.[0]?.title || "TANPA KATEGORI"}
                  </span>
                </div>
                <h3 className="text-base font-bold mt-2">
                  {articles[0]?.title}
                </h3>
                <p className="text-xs text-[#A0A0A0] mt-1 flex items-center gap-1">
                  {" "}
                  <span className="text-black">
                    {articles[0]?.createdByName}{" "}
                  </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>{" "}
                  {new Date(articles[0]?.createdAt).toLocaleDateString(
                    "id-ID",
                    {
                      day: "2-digit",
                      month: "long",
                      year: "numeric",
                    }
                  )}
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-4 w-4"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      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 font-serif text-[#A0A0A0] mt-3 line-clamp-3">
                  {articles[0]?.description}
                </p>
              </Link>
            </div>

            {articles.slice(1).map((item, i) => (
              <div key={i}>
                <Link
                  className="flex items-start gap-3"
                  href={`/detail/${item?.id}`}
                >
                  <img
                    src={item.thumbnailUrl}
                    alt={item.title}
                    className="w-24 h-16 object-cover"
                  />
                  <p className="text-sm font-semibold">{item.title}</p>
                </Link>
              </div>
            ))}
          </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>

      <main className="w-full md:w-full lg:w-full xl:w-[655px] space-y-6 shrink-0">
        <div className="flex items-center gap-1 px-4 py-4 bg-white border">
          <button
            onClick={scrollLeft}
            className="flex items-center justify-center w-8 h-24 border rounded hover:bg-gray-100"
          >
            <span className="text-xl font-bold text-gray-700">&lt;</span>
          </button>

          <div
            ref={scrollRef}
            className="flex gap-2 overflow-hidden w-[600px] scroll-smooth"
          >
            {articles.length > 0 ? (
              articles.map((article) => (
                <div key={article.id}>
                  <Link
                    className="flex-shrink-0 flex items-start gap-3 w-[188px]"
                    href={`/detail/${article?.id}`}
                  >
                    <img
                      src={article.thumbnailUrl || "/placeholder.jpg"}
                      alt={article.title}
                      className="w-14 h-14 object-cover rounded"
                    />
                    <p className="text-xs font-medium w-[150px] line-clamp-3">
                      {article.title}
                    </p>
                  </Link>
                </div>
              ))
            ) : (
              <p className="text-gray-500 text-sm px-2">Loading...</p>
            )}
          </div>

          <button
            onClick={scrollRight}
            className="flex items-center justify-center w-8 h-24 border rounded hover:bg-gray-100"
          >
            <span className="text-xl font-bold text-gray-700">&gt;</span>
          </button>
        </div>
        <Card className="border shadow-sm bg-white rounded-none gap-1 py-0">
          {articles.length > 0 ? (
            articles.map((article) => (
              <div key={article.id}>
                <Link href={`/detail/${article?.id}`}>
                  <img
                    src={article.thumbnailUrl || "/komjen-pol.jpg"}
                    alt={article.title}
                    className="w-full h-64 object-cover mb-4"
                  />
                  <div className="p-8">
                    <p className="text-xs text-gray-500 uppercase mb-1">
                      {article.categories?.map((cat) => cat.title).join(", ") ||
                        "Beranda"}
                    </p>
                    <h1 className="text-xl font-bold mt-1">{article.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">
                        {article.createdByName}
                      </span>{" "}
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                      >
                        <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"
                        />
                      </svg>{" "}
                      {new Date(article.createdAt).toLocaleDateString("id-ID")}
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="h-4 w-4"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          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 line-clamp-3">
                      {article.description}
                    </p>
                    <button className="mt-4 text-xs w-6/12 md:w-3/12 border px-3 hover:bg-gray-100 transition py-2">
                      READ MORE
                    </button>
                  </div>
                </Link>
              </div>
            ))
          ) : (
            <p className="p-8 text-gray-500">Tidak ada artikel</p>
          )}
        </Card>

        <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 className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {articles.map((news, i) => (
            <div
              key={i}
              className="bg-white shadow-md rounded-none overflow-hidden border"
            >
              <Link
                className="bg-white shadow-md rounded-none overflow-hidden border"
                href={`/detail/${news?.id}`}
              >
                <div className="relative">
                  <img
                    src={news?.thumbnailUrl || "/komjen-pol.jpg"}
                    alt={news.title}
                    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] rounded-none uppercase">
                    {news?.categories?.[0]?.title || "TANPA KATEGORI"}
                  </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">{news.createdAt}</p>
                  </div>
                </div>
              </Link>
            </div>
          ))}
        </div>
        <Card className="px-5 py-5 rounded-none">
          <h2 className="text-sm font-semibold border-b pb-1 border-black inline-block">
            Berita Utama
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            {articles.map((news, i) => (
              <div key={i}>
                <Link className="flex gap-4" href={`/detail/${news?.id}`}>
                  <img
                    src={news.thumbnailUrl}
                    alt={news.title}
                    className="w-[100px] h-[70px] object-cover flex-shrink-0"
                  />
                  <p className="text-sm font-semibold text-gray-900 hover:underline leading-snug">
                    {news.title}
                  </p>
                </Link>
              </div>
            ))}
          </div>
        </Card>

        <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 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">
              Berita Pilihan
            </h2>

            {articles.map((recentNews, i) => (
              <div key={i}>
                <Link
                  className="flex flex-col sm:flex-row gap-4 mt-4"
                  href={`/detail/${recentNews?.id}`}
                >
                  <img
                    src={recentNews.thumbnailUrl || "/komjen-pol.jpg"}
                    alt={recentNews.title}
                    className="w-full sm:w-[220px] h-[157px] object-cover"
                  />
                  <div className="flex-1">
                    <h3 className="text-base font-bold">{recentNews.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">
                        {recentNews.createdByName}
                      </span>
                      <Clock className="w-3 h-3" />
                      {recentNews.createdAt}
                      <MessageCircle className="w-3 h-3" />0
                    </p>
                    <p className="text-sm text-gray-600 line-clamp-3">
                      {recentNews.description}
                    </p>
                  </div>
                </Link>
              </div>
            ))}

            <button className="mt-4 text-xs w-full border px-3 hover:bg-gray-100 transition py-2">
              LOAD MORE
            </button>
          </Card>

          <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>
      </main>

      <aside className="w-full md:w-full lg:w-full xl:w-[312px] space-y-6 shrink-0">
        {articles.map((news, i) => (
          <div className="border" key={i}>
            <Link
              className="rounded-none overflow-hidden bg-white shadow-sm p-0 gap-1"
              href={`/detail/${news?.id}`}
            >
              <div className="relative">
                {news?.thumbnailUrl && (
                  <img
                    src={news?.thumbnailUrl}
                    alt={news.title}
                    className="w-full h-[224px] object-cover"
                  />
                )}
                {news?.categories?.[0]?.title && (
                  <span className="absolute top-2 left-2 bg-black text-white text-[10px] px-2 py-1 rounded-none uppercase tracking-wide">
                    {news?.categories?.[0]?.title}
                  </span>
                )}
              </div>
              <div className="p-4">
                <h3 className="text-base font-bold leading-snug">
                  {news.title}
                </h3>
                {news.createdByName && news.createdAt && (
                  <p className="text-xs text-gray-500 mt-2 font-medium mb-4">
                    BY <span className="text-black">{news.createdByName}</span>{" "}
                    · {news.createdAt}
                  </p>
                )}
                {news.description && (
                  <p className="text-sm text-gray-600 mt-2 line-clamp-5">
                    {news.description}
                  </p>
                )}
              </div>
            </Link>
          </div>
        ))}
        <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>
    </section>
  );
}