"use client";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react";
import FilterModal from "./FilterModal";

const expertiseList = [
  { name: "مدلینگ", color: "#B89FFF" },
  { name: "زیبایی", color: "#23bace" },
  { name: "عکاسی", color: "#dace63" },
];

interface ProjectsFilterProps {
  expertise: string;
}

function ProjectsFilter({ expertise }: ProjectsFilterProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [showFilterModal, setShowFilterModal] = useState<boolean>(false);
  const [filterRequestsPrice, setFilterRequestsPrice] = useState<string>("");
  const [filterAge, setFilterAge] = useState<string>("");
  const [filterGender, setFilterGender] = useState<string>("");

  // مقداردهی اولیه از URL
  useEffect(() => {
    setFilterRequestsPrice(
      searchParams.get("most_requests")
        ? "request"
        : searchParams.get("most_price")
        ? "price"
        : ""
    );
    setFilterAge(searchParams.get("age") || "");
    setFilterGender(searchParams.get("gender") || "");
  }, [searchParams]);

  const handleFilterChange = (filter?: string) => {
    const currentQuery = new URLSearchParams(window.location.search);

    if (filter) {
      currentQuery.set("expertise", filter);
    }

    // فقط یکی از `most_requests` یا `most_price` در URL بماند
    currentQuery.delete("most_requests");
    currentQuery.delete("most_price");

    if (filterRequestsPrice) {
      currentQuery.set(
        filterRequestsPrice === "request" ? "most_requests" : "most_price",
        "true"
      );
    }

    if (filterAge) currentQuery.set("age", filterAge);
    if (filterGender) currentQuery.set("gender", filterGender);

    router.push(`/projects?${currentQuery.toString()}`);
  };

  const clearFilters = () => {
    setFilterRequestsPrice("");
    setFilterAge("");
    setFilterGender("");

    const currentQuery = new URLSearchParams(window.location.search);
    currentQuery.delete("most_requests");
    currentQuery.delete("most_price");
    currentQuery.delete("age");
    currentQuery.delete("gender");

    router.push(`/projects?${currentQuery.toString()}`);
  };

  return (
    <div>
      <div className="flex items-center justify-between relative px-4 text-sm">
        <div className="flex items-center gap-3">
          {expertiseList.map((item) => (
            <button
              key={item.name}
              className="border rounded-full px-4 py-1"
              onClick={() => handleFilterChange(item.name)}
              style={{
                borderColor: item.color,
                backgroundColor: expertise === item.name ? item.color : "",
              }}
            >
              {item.name}
            </button>
          ))}
        </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"
            />
          </button>
          <button onClick={() => router.push("/search")}>
            <Image
              width={25}
              height={25}
              alt="filter icon"
              src="/images/icons/search-normal.svg"
            />
          </button>
        </div>
      </div>
      {showFilterModal && (
        <FilterModal
          setShowFilterModal={setShowFilterModal}
          showFilterModal={showFilterModal}
          setFilterRequestsPrice={setFilterRequestsPrice}
          setFilterAge={setFilterAge}
          setFilterGender={setFilterGender}
          filterRequestsPrice={filterRequestsPrice}
          filterAge={filterAge}
          filterGender={filterGender}
          handleFilterChange={handleFilterChange}
          clearFilters={clearFilters}
        />
      )}
    </div>
  );
}

export default ProjectsFilter;
