"use client";
import { Textarea } from "@/components/ui/textarea";
import { useParams, usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Link } from "@/i18n/routing";
import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";

const IndeksDetail = () => {
  const [indeksData, setIndeksData] = useState<any>();
  const params = useParams();
  const slug = params?.slug;
  const [relatedPost, setRelatedPost] = useState<any>();

  useEffect(() => {
    initFetch();
    detailFetch();
  }, []);
  const initFetch = async () => {
    const response = await getDetailIndeks();
    console.log(response);
    setRelatedPost(response?.data?.data?.content);
  };
  const detailFetch = async () => {
    const response = await publicDetailBlog(slug);
    console.log(response);
    setIndeksData(response?.data?.data);
  };

  return (
    <>
      <div className="p-4 lg:px-60 lg:p-12">
        {/* Judul */}
        <div className="flex flex-col mb-5">
          <h1 className="text-lg mb-2">Indeks / Detail</h1>
          <h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
        </div>
        {/* Gambar Utama */}
        <div className="flex items-center justify-center">
          <img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" />
        </div>
        {/* Footer Informasi */}
        <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
          <div className="flex flex-row items-center mt-3 justify-between">
            oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
          </div>
        </div>

        {/* Keterangan */}
        <div className="w-auto">
          <p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
        </div>
      </div>

      {/* Comment */}
      <div className="w-full">
        <div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
          <div className="gap-5 flex flex-col px-4 lg:px-16">
            <p className="flex items-start text-lg">Berikan Komentar</p>
            <Textarea placeholder="Type your comments here." className="flex w-full" />
            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
          </div>
        </div>

        {/* Konten Serupa */}
        <div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
          <Carousel>
            <CarouselContent className="w-full max-w-7xl">
              {relatedPost?.map((relate: any) => (
                <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
                  <Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
                    <img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
                    <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
                      <p className="flex flex-row items-center text-[10px] gap-2">
                        {formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
                      </p>
                    </div>
                  </Link>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious />
            <CarouselNext />
          </Carousel>
        </div>
      </div>
    </>
  );
};

export default IndeksDetail;