"use client";

import Container from "@/components/elements/Container";
import RoundedButton from "@/components/elements/RoundedButton";
import CommentModal from "@/components/settings/offers/CommentModal";
import ConfirmModal from "@/components/settings/offers/ConfirmModal";
import OffersItem from "@/components/settings/offers/OffersItem";
import PageTitle from "@/components/settings/PageTitle";
import UserDetails from "@/components/settings/UserDetails";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import useInfiniteScroll from "@/hooks/useInfiniteScroll";
import { IOffers } from "@/types/types";
import React, { useState } from "react";
import { toggleBtnClass } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

const FILTER_SENT = "درخواست";
const FILTER_RECEIVED = "دریافت";

function Offers() {
  const { t } = useTranslation("common");
  const [filter, setFilter] = useState<string>(FILTER_SENT);
  const [showCommentModal, setShowCommentModal] = useState<boolean>(false);
  const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
  const [itemToAction, setItemToAction] = useState<IOffers | null>(null);

  const { data, isFetchingNextPage, refetch } = useInfiniteScroll({
    endpoint: "/offers",
    queryKey: ["offers", filter],
    params: { status_filter: filter },
  });

  const actionHandler = (item: IOffers) => {
    setItemToAction(item);
    if (filter === FILTER_RECEIVED) {
      setShowConfirmModal(true);
    } else if (item?.status === "accepted") {
      setShowCommentModal(true);
    }
  };

  return (
    <LocalePageShell>
      <Container>
        <PageTitle>{t("settings.nav.offers")}</PageTitle>
        <div className="text-xs md:text-sm">
          <UserDetails />
          <div className="grid grid-cols-2 w-full gap-4 mx-auto max-w-md mt-8">
            <RoundedButton
              className={cn(toggleBtnClass(filter === FILTER_SENT), "h-9")}
              onClick={() => setFilter(FILTER_SENT)}
            >
              {t("settings.offers.sent")}
            </RoundedButton>
            <RoundedButton
              className={cn(toggleBtnClass(filter === FILTER_RECEIVED), "h-9")}
              onClick={() => setFilter(FILTER_RECEIVED)}
            >
              {t("settings.offers.received")}
            </RoundedButton>
          </div>
          <div className="w-full mt-10">
            {data?.pages.length === 0 ||
            (data?.pages[0]?.offer?.length === 0 && !isFetchingNextPage) ? (
              <p className="text-center text-gray-500">
                {t("settings.offers.empty")}
              </p>
            ) : (
              data?.pages?.map((page, pageIndex) => (
                <React.Fragment key={pageIndex}>
                  {page?.offer?.map((item: IOffers) => (
                    <OffersItem
                      key={item?._id}
                      item={item}
                      mode={filter === FILTER_RECEIVED ? "received" : "sent"}
                      actionHandler={actionHandler}
                    />
                  ))}
                </React.Fragment>
              ))
            )}
          </div>
        </div>
        {showCommentModal && (
          <CommentModal
            isOpen={showCommentModal}
            onClose={() => setShowCommentModal(false)}
            item={itemToAction}
          />
        )}
        {showConfirmModal && (
          <ConfirmModal
            isOpen={showConfirmModal}
            onClose={() => setShowConfirmModal(false)}
            item={itemToAction}
            mode="received"
            refetch={refetch}
          />
        )}
      </Container>
    </LocalePageShell>
  );
}

export default Offers;
