import search from "@/app/[locale]/(protected)/app/chat/components/search";
import { useTranslations } from "next-intl";
import { useParams, useRouter } from "next/navigation";
import router from "next/router";
import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import Image from "next/image";
import { getHeroData } from "@/service/landing/landing";
import { title } from "process";
import { htmlToString } from "@/utils/globals";
import { Link } from "@/i18n/routing";

const ScrollableContent = () => {
  const [contentType, setContentType] = useState("all");
  const [search, setSearch] = useState("");
  const router = useRouter();
  const params = useParams();
  const locale = params?.locale;
  const t = useTranslations("LandingPage");
  const [content, setContent] = useState<any>();
  useEffect(() => {
    async function fetchCategories() {
      const url = "https://netidhub.com/api/csrf";

      try {
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        return data;
      } catch (error) {
        console.error("Fetch error: ", error);
      }
    }

    fetchCategories();
    initFetch();
  }, []);

  const initFetch = async () => {
    const response = await getHeroData();
    console.log(response);
    let data = response?.data?.data?.content;

    setContent(data);
  };
  return (
    <>
      <div className="text-center">
        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
          <span className="text-[#bb3523] dark:text-white">
            {t("exploration")}
          </span>{" "}
          {t("and")}{" "}
          <span className="text-[#bb3523] dark:text-white">
            {t("download")}
          </span>{" "}
          {t("coverage")}{" "}
        </h1>
        <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
        <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
          {t("officialCoverage")}
        </p>

        <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
          <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
            <Select value={contentType} onValueChange={setContentType}>
              <SelectTrigger className="w-[180px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="all">{t("allContent")}</SelectItem>
                  <SelectItem value="image">{t("image")}</SelectItem>
                  <SelectItem value="video">{t("video")}</SelectItem>
                  <SelectItem value="document">{t("text")}</SelectItem>
                  <SelectItem value="audio">{t("audio")}</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
            <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
              <span className="material-icons text-black dark:text-white px-4">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="1em"
                  height="1em"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="currentColor"
                    d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
                  />
                </svg>
              </span>
              <input
                type="text"
                placeholder={t("search")}
                className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none"
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
          </div>
          <button
            onClick={() =>
              router.push(`/${contentType}/filter?title=${search}`)
            }
            className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700"
          >
            {t("searchCoverage")}
            <Icon icon="ri:arrow-right-s-line" fontSize={20} />
          </button>
        </div>
      </div>
      <div className="flex flex-col md:flex-row gap-6 py-8">
        <div className="w-full md:w-1/2 px-4">
          <h2 className="text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
            Berita Polda
          </h2>
          <div className="grid gap-4">
            {content?.slice(0, 4).map((item: any, index: number) => (
              <div
                key={index}
                className={`bg-white rounded-lg shadow-md overflow-hidden ${
                  index === 0 ? "" : "flex"
                }`}
              >
                <div
                  className={`relative ${
                    index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
                  }`}
                >
                  <Link
                    href={
                      Number(item?.fileTypeId) == 1
                        ? `${locale}/image/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 2
                        ? `${locale}/video/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 3
                        ? `${locale}/document/detail/${item?.slug}`
                        : `${locale}/audio/detail/${item?.slug}`
                    }
                  >
                    <Image
                      src={item.thumbnailLink}
                      alt={item.title}
                      layout="fill"
                      objectFit="cover"
                    />
                    <div className="absolute top-2 right-2 bg-white rounded-full p-1 shadow">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="1.5em"
                        height="1.5em"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                      >
                        <path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2m-2 0H5V5h14ZM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5Z" />
                      </svg>
                    </div>
                  </Link>
                </div>
                {/* <Link
                  href={
                    Number(item?.fileTypeId) == 1
                      ? `${locale}/image/detail/${item?.slug}`
                      : Number(item?.fileTypeId) == 2
                      ? `${locale}/video/detail/${item?.slug}`
                      : Number(item?.fileTypeId) == 3
                      ? `${locale}/document/detail/${item?.slug}`
                      : `${locale}/audio/detail/${item?.slug}`
                  }
                > */}
                <div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
                  <p className="text-sm text-[#bb3523] font-bold mb-1">
                    {item.categoryName}
                  </p>
                  <h3 className="text-sm font-semibold text-gray-800">
                    {item.title}
                  </h3>
                  <p className="text-xs text-gray-500 mt-1 truncate">
                    {htmlToString(item.description)}
                  </p>
                </div>
                {/* </Link> */}
              </div>
            ))}
            <button className="w-full mt-2 py-2 border border-[#bb3523] text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:text-white transition">
              LIHAT SEMUA
            </button>
          </div>
        </div>

        {/* Berita SATKER */}
        <div className="w-full md:w-1/2 px-4">
          <h2 className="text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
            Berita Satker
          </h2>
          <div className="grid gap-4">
            {content
              ?.filter((item: any) => item.isPublishOnPolda === true)
              .slice(0, 4)
              .map((item: any, index: number) => (
                <div
                  key={index}
                  className={`bg-white rounded-lg shadow-md overflow-hidden ${
                    index === 0 ? "" : "flex"
                  }`}
                >
                  <div
                    className={`relative ${
                      index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
                    }`}
                  >
                    <Link
                      href={
                        Number(item?.fileTypeId) == 1
                          ? `${locale}/image/detail/${item?.slug}`
                          : Number(item?.fileTypeId) == 2
                          ? `${locale}/video/detail/${item?.slug}`
                          : Number(item?.fileTypeId) == 3
                          ? `${locale}/document/detail/${item?.slug}`
                          : `${locale}/audio/detail/${item?.slug}`
                      }
                    >
                      <Image
                        src={item.thumbnailLink}
                        alt={item.title}
                        layout="fill"
                        objectFit="cover"
                      />
                      <div className="absolute top-2 right-2 bg-white rounded-full p-1 shadow">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="1.5em"
                          height="1.5em"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                        >
                          <path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2m-2 0H5V5h14ZM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5Z" />
                        </svg>
                      </div>
                    </Link>
                  </div>
                  <div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
                    <p className="text-sm text-[#bb3523] font-bold mb-1">
                      {item.categoryName}
                    </p>
                    <h3 className="text-sm font-semibold text-gray-800">
                      {item.title}
                    </h3>
                    <p className="text-xs text-gray-500 mt-1 truncate">
                      {htmlToString(item.description)}
                    </p>
                  </div>
                </div>
              ))}
            <button className="w-full mt-2 py-2 border border-[#bb3523] text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:text-white transition">
              LIHAT SEMUA
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default ScrollableContent;
