"use client";

import MainBillboardCard from "@/components/billboards/MainBillboardCard/MainBillboardCard";
import Container from "@/components/elements/Container";
import RoundedInput from "@/components/elements/RoundedInput";
import FilterModal from "@/components/settings/my-billboards/FilterModal";
import PageTitle from "@/components/settings/PageTitle";
import useInfiniteScroll from "@/hooks/useInfiniteScroll";
import { IAdvertising } from "@/types/types";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import BoldIcon from "@/components/ui/BoldIcon";

function MyBillboard() {
  const router = useRouter();

  const [searchText, setSearchText] = useState("");
  const [search, setSearch] = useState("");
  const [showFilterModal, setShowFilterModal] = useState<boolean>(false);
  const [statusFiler, setStatusFiler] = useState<string>("");
  const { data, isFetchingNextPage, refetch } = useInfiniteScroll({
    endpoint: "/advertising/user-advertising",
    queryKey: ["advertising", search],
    params: { search: search, status: statusFiler },
  });

  const getAdStatusAndColor = (adStatus: string) => {
    const statusMap: Record<string, { label: string; color: string }> = {
      pre_payment: { label: "پرداخت نشده", color: "#aaa" },
      paid: { label: "در انتظار تایید", color: "#007bff" },
      accepted: { label: "منتشر شده", color: "#28a745" },
      rejected: { label: "رد شده", color: "#dc3545" },
      expired: { label: "منقضی شده", color: "#6c757d" },
    };

    return statusMap[adStatus] || { label: "نامشخص", color: "#000" };
  };
  const clearFilters = () => {
    setStatusFiler("");
  };
  return (
    <Container>
      <PageTitle>بیلبورد</PageTitle>
      <div className="px-4 text-xs md:text-sm">
        <div className="flex items-center justify-between relative px-4 text-sm gap-3">
          <div className="w-full relative">
            <RoundedInput
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
              placeholder="جستجو"
              className="w-full"
            />
            <Image
              width={25}
              height={25}
              alt="filter icon"
              src="/images/icons/search-normal.svg"
              className=" min-w-[25px] absolute left-3 top-[7px]"
              onClick={() => setSearch(searchText)}
            />
          </div>
          <div className="flex items-center gap-3">
            <button onClick={() => setShowFilterModal(true)}>
              <Image
                width={25}
                height={25}
                alt="filter icon"
                src="/images/icons/candle.svg"
                className="dark:invert min-w-[25px]"
              />
            </button>
            <Link href="/billboards/new" aria-label="ثبت بیلبورد">
              <BoldIcon
                name="add-square"
                size={25}
                tinted
                className="min-w-[25px] text-neutral-700 dark:text-neutral-200"
              />
            </Link>
          </div>
        </div>
        <div className="w-full mt-10">
          {data?.pages.length === 0 ||
          (data?.pages[0]?.advertisings?.length === 0 &&
            !isFetchingNextPage) ? (
            <p className="text-center text-gray-500">بیلبوردی ثبت نشده است.</p>
          ) : (
            data?.pages?.map((page, pageIndex) => (
              <React.Fragment key={pageIndex}>
                {page?.advertisings?.map((item: IAdvertising) => {
                  const { label } = getAdStatusAndColor(item?.status || "");
                  return (
                    <div
                      className="cursor-pointer"
                      onClick={() =>
                        router.push(
                          `/settings/my-billboards/${item?._id}/${item?.title}`
                        )
                      }
                      key={item?._id}
                    >
                      <MainBillboardCard
                        adStatus={label}
                        color={"#fff"}
                        borderColor={"#ccc"}
                        textColor={"#111"}
                        billboard={item}
                        showExpire={true}
                      />
                    </div>
                  );
                })}
              </React.Fragment>
            ))
          )}
        </div>
      </div>
      {showFilterModal && (
        <FilterModal
          setShowFilterModal={setShowFilterModal}
          showFilterModal={showFilterModal}
          clearFilters={clearFilters}
          statusFiler={statusFiler}
          setStatusFiler={setStatusFiler}
          refetch={refetch}
        />
      )}
    </Container>
  );
}

export default MyBillboard;
