"use client";
import {
  Autocomplete,
  AutocompleteItem,
  BreadcrumbItem,
  Breadcrumbs,
  Button,
  DatePicker,
  Image,
  Input,
  Listbox,
  ListboxItem,
  Pagination,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Select,
  SelectItem,
} from "@heroui/react";
import {
  CalendarIcon,
  Calender,
  ChevronLeftIcon,
  ChevronRightIcon,
  ClockIcon,
  EyeFilledIcon,
  SearchIcon,
  TimesIcon,
  UserIcon,
} from "../../icons";
import Link from "next/link";
import { useCallback, useEffect, useRef, useState } from "react";
import {
  getArticleByCategoryLanding,
  getListArticle,
} from "@/services/article";
import {
  convertDateFormatNoTimeV2,
  formatMonthString,
  htmlToString,
  textEllipsis,
} from "@/utils/global";
import {
  useParams,
  usePathname,
  useRouter,
  useSearchParams,
} from "next/navigation";
import { close, loading } from "@/config/swal";
import { format } from "date-fns";
import { getCategoryById } from "@/services/master-categories";
import AsyncSelect from "react-select/async";

const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];

export default function ListNews() {
  const [article, setArticle] = useState<any>([]);
  const [page, setPage] = useState(1);
  const router = useRouter();
  const pathname = usePathname();
  const [totalPage, setTotalPage] = useState(1);
  const topRef = useRef<HTMLDivElement>(null);
  const params = useParams();
  const category = params?.name;
  const searchParams = useSearchParams();
  const categoryIds = searchParams.get("category_id");
  const [categories, setCategories] = useState<any>([]);
  const [searchValue, setSearchValue] = useState(
    searchParams.get("search") || ""
  );
  const [categorySearch, setCategorySearch] = useState("");
  const [selectedCategoryId, setSelectedCategoryId] = useState<any>([]);

  const today = new Date();
  const [year, setYear] = useState(today.getFullYear());

  const [selectedMonth, setSelectedMonth] = useState<number | null>(
    searchParams.get("month") ? Number(searchParams.get("month")) - 1 : null
  );
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  const handleMonthClick = (monthIndex: number) => {
    setSelectedMonth(monthIndex);
    setSelectedDate(new Date(year, monthIndex, 1));
  };

  useEffect(() => {
    const search = searchParams.get("search");
    const category = searchParams.get("category_id");
    if (searchParams.get("search")) {
      setSearchValue(String(searchParams.get("search")));
      getArticle({ title: String(search) });
    }

    if (category && category !== "") {
      getCategoryFromQueries(category.split(","));
    }
  }, [searchParams]);

  const getCategoryFromQueries = async (category: string[]) => {
    const temp = [];
    for (const element of category) {
      const res = await getCategoryById(Number(element));
      if (res?.data?.data) {
        temp.push(res?.data?.data);
      }
    }

    const setup = setupCategory(temp);
    setSelectedCategoryId(setup);
    getArticle({ category: setup });
  };

  useEffect(() => {
    getArticle();
  }, [page, searchParams]);

  async function getArticle(props?: { title?: string; category?: any }) {
    loading();
    // topRef.current?.scrollIntoView({ behavior: "smooth" });
    const req = {
      page: page,
      search: props?.title || searchValue || "",
      limit: "9",
      isPublish: true,
      sort: "desc",
      categorySlug:
        pathname.includes("polda") || pathname.includes("satker")
          ? String(category)
          : "",
      categoryIds: props?.category
        ? props.category.map((val: any) => val.id).join(",")
        : selectedCategoryId.length > 0
        ? selectedCategoryId.map((val: any) => val.id).join(",")
        : "",

      startDate:
        selectedDate && selectedMonth !== null
          ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
          : "",
      endDate:
        selectedDate && selectedMonth !== null
          ? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
          : "",
    };
    const response = await getListArticle(req);
    setArticle(response?.data?.data);
    setTotalPage(response?.data?.meta?.totalPage);
    close();
  }

  const debounceTimeout = useRef<NodeJS.Timeout | null>(null);

  const getCategory = async (search?: string) => {
    const res = await getArticleByCategoryLanding({
      // limit: debouncedValue === "" ? "5" : "",
      // title: debouncedValue,
      limit: !search || search === "" ? "5" : "",
      title: search ? search : "",
    });
    if (res?.data?.data) {
      setCategories(res?.data?.data);
      return res?.data?.data;
    }
    return [];
  };

  const setupCategory = (data: any) => {
    const temp = [];
    for (const element of data) {
      temp.push({
        id: element.id,
        label: element.title,
        value: element.id,
      });
    }
    return temp;
  };

  const loadOptions = useCallback(
    (inputValue: string, callback: (options: any) => void) => {
      if (debounceTimeout.current) {
        clearTimeout(debounceTimeout.current);
      }

      debounceTimeout.current = setTimeout(async () => {
        try {
          const data = await getCategory(inputValue);
          callback(setupCategory(data));
        } catch (error) {
          callback([]);
        }
      }, 1500);
    },
    []
  );

  return (
    <div className="bg-white border-b-1" ref={topRef}>
      <div className="text-black py-5 px-3 lg:w-[75vw] mx-auto bg-white">
        <div className="flex flex-row gap-4">
          <Link href="/" className="text-black font-semibold">
            Beranda
          </Link>
          <ChevronRightIcon />
          <p className="text-black">Berita</p>
        </div>
        <div className="w-full flex justify-center">
          <div className="py-5 lg:py-10 lg:mx-auto flex flex-col lg:flex-row gap-2 items-end grow-0 mx-auto">
            <Input
              aria-label="Judul"
              className="w-full lg:w-[300px]"
              classNames={{
                inputWrapper: "bg-white hover:!bg-gray-100 border-1 rounded-md",
                input: "text-sm !text-black",
              }}
              // onKeyDown={(event) => {
              //   if (event.key === "Enter") {
              //     router.push(pathname + `?search=${searchValue}`);
              //     getArticle();
              //   }
              // }}
              labelPlacement="outside"
              placeholder="Judul..."
              value={searchValue}
              onValueChange={setSearchValue}
              type="search"
            />
            <AsyncSelect
              isMulti
              loadOptions={loadOptions}
              defaultOptions
              placeholder="Kategori"
              className="z-50 min-w-[300px] max-w-[600px]"
              classNames={{
                control: () =>
                  "border border-gray-300 border-1 rounded-xl min-w-[300px] max-w-[600px]",
                menu: () => "z-50",
              }}
              value={selectedCategoryId}
              onChange={setSelectedCategoryId}
            />
            <div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[200px] rounded-md px-2">
              <Popover placement="bottom" showArrow={true} className="w-full">
                <PopoverTrigger>
                  <a className="px-2 py-1 text-sm w-[220px]">
                    {" "}
                    {selectedDate
                      ? format(selectedDate, "MMMM yyyy")
                      : "Pilih Bulan"}
                  </a>
                </PopoverTrigger>
                <PopoverContent className="p-4 w-[200px]">
                  <div className="flex items-center justify-between mb-2 px-1 w-full">
                    <button
                      className="text-gray-500 hover:text-black"
                      onClick={() => setYear((prev) => prev - 1)}
                    >
                      <ChevronLeftIcon />
                    </button>
                    <span className="font-semibold text-center">{year}</span>
                    <button
                      className="text-gray-500 hover:text-black"
                      onClick={() => setYear((prev) => prev + 1)}
                    >
                      <ChevronRightIcon />
                    </button>
                  </div>

                  <div className="grid grid-cols-3 gap-2 w-full">
                    {months.map((month, idx) => (
                      <button
                        key={idx}
                        onClick={() => handleMonthClick(idx)}
                        className={`py-1 rounded-md text-sm transition-colors ${
                          selectedDate &&
                          selectedDate.getMonth() === idx &&
                          selectedDate.getFullYear() === year
                            ? "bg-blue-500 text-white"
                            : "hover:bg-gray-200 text-gray-700"
                        }`}
                      >
                        {month}
                      </button>
                    ))}
                  </div>
                </PopoverContent>
              </Popover>{" "}
              {selectedDate && (
                <a
                  className="cursor-pointer w-[20px]"
                  onClick={() => setSelectedDate(null)}
                >
                  <TimesIcon size={20} />
                </a>
              )}
            </div>
            <Button
              onPress={() => getArticle()}
              className="bg-red-600 text-white w-[80px] rounded-md"
            >
              Cari
            </Button>
            {/* </Link> */}
          </div>
        </div>
        {article?.length < 1 || !article ? (
          <div className="flex justify-center items-center">Tidak ada Data</div>
        ) : (
          <>
            <section
              id="content"
              className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7"
            >
              {article?.map((news: any) => (
                <Link
                  href={`/news/detail/${news?.id}-${news?.slug}`}
                  key={news?.id}
                >
                  <div className="">
                    <Image
                      src={
                        news.thumbnailUrl == ""
                          ? "/no-image.jpg"
                          : news.thumbnailUrl
                      }
                      width={1920}
                      alt="thumbnail"
                      className="rounded-b-none h-[27vh] w-full object-cover"
                    />
                  </div>
                  <div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-b-md">
                    <div className="font-semibold text-lg">{news?.title}</div>
                    <div className="flex flex-row items-center py-1 text-[10px] gap-2">
                      <div className="flex flex-row items-center gap-1">
                        <CalendarIcon size={18} />
                        <p>{formatMonthString(news?.createdAt)}</p>
                      </div>
                      <div className="flex flex-row items-center">
                        <ClockIcon size={18} />
                        <p>{`${new Date(news?.createdAt)
                          .getHours()
                          .toString()
                          .padStart(2, "0")}:${new Date(news?.createdAt)
                          .getMinutes()
                          .toString()
                          .padStart(2, "0")}`}</p>
                      </div>
                      <div className="flex flex-row items-center gap-1">
                        <UserIcon size={14} />
                        <p>{news?.createdByName}</p>
                      </div>
                    </div>
                    <div className="text-sm">
                      {textEllipsis(htmlToString(news?.description), 165)}
                    </div>
                  </div>
                </Link>
              ))}
            </section>
            <div className="flex justify-center mt-5">
              <Pagination
                page={page}
                total={totalPage}
                onChange={setPage}
                classNames={{
                  item: "w-fit px-3",
                  cursor: "w-fit px-3",
                }}
              />
            </div>
          </>
        )}
      </div>
    </div>
  );
}