"use client";

import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Modal from "../elements/Modal";
import RoundedButton from "../elements/RoundedButton";
import { btnHeightSm, filterChipClass, toggleBtnClass } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import useAxios from "@/hooks/useAxios";
import { IExpertise } from "@/types/types";

interface IFilterProps {
  setShowFilterModal: (e: boolean) => void;
  selectedExpertise: string;
  setSelectedExpertise: (value: string) => void;
  setFilterRequestsPrice: (e: string) => void;
  setFilterAge: (e: string) => void;
  setFilterGender: (e: string) => void;
  handleFilterChange: () => void;
  clearFilters: () => void;
  showFilterModal: boolean;
  filterRequestsPrice: string;
  filterAge: string;
  filterGender: string;
}

const FilterModal = ({
  setShowFilterModal,
  showFilterModal,
  selectedExpertise,
  setSelectedExpertise,
  setFilterRequestsPrice,
  setFilterAge,
  setFilterGender,
  filterRequestsPrice,
  filterAge,
  filterGender,
  handleFilterChange,
  clearFilters,
}: IFilterProps) => {
  const { t } = useTranslation("common");
  const { request } = useAxios();
  const [expertiseList, setExpertiseList] = useState<IExpertise[]>([]);
  const [loadingExpertise, setLoadingExpertise] = useState(false);

  useEffect(() => {
    if (!showFilterModal) return;

    const fetchExpertise = async () => {
      setLoadingExpertise(true);
      try {
        const response = await request<{ expertises: IExpertise[] }>(
          "GET",
          "/expertise"
        );
        setExpertiseList(response?.expertises ?? []);
      } catch {
        setExpertiseList([]);
      } finally {
        setLoadingExpertise(false);
      }
    };

    void fetchExpertise();
  }, [showFilterModal]);

  const handleExpertiseSelect = (expertise: string) => {
    setSelectedExpertise(expertise);
  };

  return (
    <Modal
      isOpen={showFilterModal}
      onClose={() => setShowFilterModal(false)}
      height="fit"
      elevated
      panelClassName="!p-0 max-h-[90dvh] w-full overflow-y-auto overscroll-y-contain touch-pan-y [-webkit-overflow-scrolling:touch]"
    >
      <div className="px-4 pt-5 pb-[calc(6rem+env(safe-area-inset-bottom,0px))]">
        <div className="mx-auto flex w-full max-w-sm flex-col items-center">
          <span className="mb-4 block text-center font-semibold">
            {t("filters.projectsTitle")}
          </span>

          <div className="mb-4 w-full">
            <p className="mb-2 text-center text-xs text-neutral-500">
              {t("filters.expertise")}
            </p>
            {loadingExpertise ? (
              <p className="py-2 text-center text-xs text-neutral-400">
                {t("filters.loadingExpertise")}
              </p>
            ) : (
              <div className="flex flex-wrap justify-center gap-2">
                <button
                  type="button"
                  className={filterChipClass(!selectedExpertise)}
                  onClick={() => handleExpertiseSelect("")}
                >
                  {t("filters.all")}
                </button>
                {expertiseList.map((item) => {
                  const isActive = selectedExpertise === item.expertise;
                  return (
                    <button
                      key={item._id}
                      type="button"
                      className={filterChipClass(isActive)}
                      onClick={() =>
                        handleExpertiseSelect(isActive ? "" : item.expertise)
                      }
                    >
                      {item.expertise}
                    </button>
                  );
                })}
              </div>
            )}
          </div>

          <span className="mb-2 block w-full text-center font-semibold">
            {t("filters.sortTitle")}
          </span>
          <div className="mb-5 grid w-full grid-cols-2 gap-4">
            <RoundedButton
              type="button"
              onClick={() => setFilterRequestsPrice("request")}
              className={cn(
                toggleBtnClass(filterRequestsPrice === "request"),
                btnHeightSm,
                "w-full"
              )}
            >
              {t("filters.mostOffers")}
            </RoundedButton>
            <RoundedButton
              type="button"
              onClick={() => setFilterRequestsPrice("price")}
              className={cn(
                toggleBtnClass(filterRequestsPrice === "price"),
                btnHeightSm,
                "w-full"
              )}
            >
              {t("filters.mostBudget")}
            </RoundedButton>
          </div>

          <span className="mb-2 block w-full text-center font-semibold">
            {t("filters.age")}
          </span>
          <div className="mb-5 grid w-full grid-cols-3 gap-4">
            <RoundedButton
              type="button"
              onClick={() => setFilterAge("all")}
              className={cn(toggleBtnClass(filterAge === "all"), btnHeightSm, "w-full")}
            >
              {t("filters.noAgeLimit")}
            </RoundedButton>
            <RoundedButton
              type="button"
              onClick={() => setFilterAge("old")}
              className={cn(toggleBtnClass(filterAge === "old"), btnHeightSm, "w-full")}
            >
              25-30
            </RoundedButton>
            <RoundedButton
              type="button"
              onClick={() => setFilterAge("18-25")}
              className={cn(
                toggleBtnClass(filterAge === "18-25"),
                btnHeightSm,
                "w-full"
              )}
            >
              18-25
            </RoundedButton>
          </div>

          <span className="mb-2 block w-full text-center font-semibold">
            {t("filters.gender")}
          </span>
          <div className="mb-5 grid w-full grid-cols-2 gap-4">
            <RoundedButton
              type="button"
              onClick={() => setFilterGender("male")}
              className={cn(
                toggleBtnClass(filterGender === "male"),
                btnHeightSm,
                "w-full"
              )}
            >
              {t("auth.male")}
            </RoundedButton>
            <RoundedButton
              type="button"
              onClick={() => setFilterGender("female")}
              className={cn(
                toggleBtnClass(filterGender === "female"),
                btnHeightSm,
                "w-full"
              )}
            >
              {t("auth.female")}
            </RoundedButton>
          </div>

          <div className="mt-6 flex w-full flex-col items-center gap-3 border-t border-neutral-200 pt-5 dark:border-neutral-700">
            <RoundedButton
              type="button"
              variant="primary"
              onClick={() => {
                handleFilterChange();
                setShowFilterModal(false);
              }}
              className="h-10 w-full max-w-[200px] text-sm"
            >
              {t("filters.apply")}
            </RoundedButton>
            <RoundedButton
              type="button"
              onClick={() => clearFilters()}
              className="h-10 w-full max-w-[200px] text-sm"
            >
              {t("filters.clear")}
            </RoundedButton>
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default FilterModal;
