"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 { 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";

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 [debouncedValue, setDebouncedValue] = useState("");
  const [selectedCategoryId, setSelectedCategoryId] = useState<any>(
    categoryIds ? categoryIds : ""
  );

  const [count, setCount] = useState(0);

  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));
  };

  const getCategoryId = async () => {
    if (categoryIds) {
      const res = await getCategoryById(Number(selectedCategoryId));
      setCategorySearch(res?.data?.data.title);
      setCategories([res?.data?.data]);
      setCount(1);
    }
  };

  useEffect(() => {
    getCategory();
    if (categoryIds && count == 0) {
      getCategoryId();
    }
  }, [debouncedValue]);

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

  const getCategory = async () => {
    const res = await getArticleByCategoryLanding({
      limit: debouncedValue === "" ? "5" : "",
      title: debouncedValue,
    });
    if (res?.data?.data) {
      setCategories(res?.data?.data);
    }
  };

  async function getArticle() {
    loading();
    // topRef.current?.scrollIntoView({ behavior: "smooth" });
    const req = {
      page: page,
      search: searchValue || "",
      limit: "9",
      isPublish: true,
      sort: "desc",
      categorySlug:
        pathname.includes("polda") || pathname.includes("satker")
          ? String(category)
          : "",
      categoryIds: selectedCategoryId,
      // categoryIds:
      //   selectedCategoryId && categorySearch !== "" ? selectedCategoryId : "",
      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();
  }

  useEffect(() => {
    const timeout = setTimeout(() => {
      setDebouncedValue(categorySearch);
    }, 1500);

    return () => clearTimeout(timeout);
  }, [categorySearch]);

  const onInputChange = (value: string) => {
    setCategorySearch(value);
    if (value === "") {
      setSelectedCategoryId("");
    }
  };

  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="py-5 lg:py-10 lg:px-10 flex flex-col lg:flex-row gap-2 items-end">
          <Input
            aria-label="Judul"
            className="w-full"
            classNames={{
              inputWrapper: "bg-white hover:!bg-gray-100 border-1",
              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"
          />
          <div className="flex w-full lg:w-fit gap-4">
            <Autocomplete
              className="w-full lg:w-[240px] mt-0"
              label=""
              labelPlacement="outside"
              variant="bordered"
              placeholder="Kategori"
              inputValue={categorySearch}
              // selectedKey={selectedCategoryId}
              onInputChange={onInputChange}
              onSelectionChange={(e) => setSelectedCategoryId(e)}
              inputProps={{ classNames: { inputWrapper: "border-1" } }}
              defaultItems={categories}
            >
              {/* {categories.length > 0 &&
                categories.map((category: any) => (
                  <AutocompleteItem key={`${category.id}`}>
                    {category.title}
                  </AutocompleteItem>
                ))} */}
              {(item: any) => (
                <AutocompleteItem key={item.id}>{item.title}</AutocompleteItem>
              )}
            </Autocomplete>
          </div>
          <div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[240px] rounded-xl 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-[220px]">
                <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>
          {/* <Link
            href={`/news/all?search=${searchValue}&category_id=${
              selectedCategoryId || ""
            }&month=${selectedMonth && selectedDate ? selectedMonth + 1 : ""}`}
          > */}
          <Button
            onPress={getArticle}
            className="bg-red-600 text-white w-[80px]"
          >
            Cari
          </Button>
          {/* </Link> */}
        </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 text-center",
                }}
              />
            </div>
          </>
        )}
      </div>
    </div>
  );
}