"use client";

import { SlidersHorizontal } from "lucide-react";
import { useEffect, useState } from "react";
import { Icons } from "../icons";
import { useRouter, useSearchParams } from "next/navigation";
import apis from "@/utils/apis";
import { useGlobalContext } from "@/context/Provider";

interface Cuisine {
  _id: string;
  name: string;
}

const FilterSidebar = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { Toast } = useGlobalContext();
  const params = new URLSearchParams(searchParams.toString());

  const [minPrice, setMinPrice] = useState(100);
  const [maxPrice, setMaxPrice] = useState(200);

  const [recommanded, setRecommanded] = useState(false);
  const [recommanded1, setRecommanded1] = useState(false);

  const veg = searchParams.get("veg");
  const nonVeg = searchParams.get("nonVeg");
  const rating = searchParams.get("rating");
  const sort = searchParams.get("sort");

  const [selectedCategories, setSelectedCategories] = useState<string[]>([
    "Breakfast",
  ]);

  const [sortOption, setSortOption] = useState("");

  const [selectedRatings, setSelectedRatings] = useState(false);
  const [otherFilters, setOtherFilters] = useState<string[]>(["Fast delivery"]);

  const [cuisines, setCuisines] = useState<Cuisine[]>([]);
  const [selectedCuisines, setSelectedCuisines] = useState<string[]>([]);
  const [loadingCuisines, setLoadingCuisines] = useState(true);
  const [isGrocery, setIsGrocery] = useState(false);

  useEffect(() => {
    const checkParentCategory = async () => {
      try {
        const response = await apis.ParentCategory.getParnetCategory();
        const data = response.data?.data || response.data || [];

        const groceryCategory = data.find((item: any) => item.slug === "grocery");

        const selectedParentCategory = typeof window !== "undefined"
          ? localStorage.getItem("selectedParentCategory")
          : null;

        if (groceryCategory && selectedParentCategory === groceryCategory._id) {
          setIsGrocery(true);
        } else {
          setIsGrocery(false);
        }
      } catch (error) {
        Toast.error(error);
      }
    };

    checkParentCategory();
  }, []);

  useEffect(() => {
    const fetchCuisines = async () => {
      try {
        setLoadingCuisines(true);
        const response = await apis.Cuisine.getCuisine();

        const cuisineList = response?.data ?? [];

        setCuisines(cuisineList);
      } catch (error) {
        Toast.error(error);
      } finally {
        setLoadingCuisines(false);
      }
    };

    fetchCuisines();
  }, []);

  //
  // Read cuisine names from search param
  //
  useEffect(() => {
    const cuisineParam = searchParams.get("search");

    if (cuisineParam && cuisines.some(c => c.name === cuisineParam)) {
      setSelectedCuisines([cuisineParam]);
    } else {
      setSelectedCuisines([]);
    }
  }, [searchParams, cuisines]);


  const toggleCategory = (category: string) => {
    setSelectedCategories((prev) =>
      prev.includes(category)
        ? prev.filter((c) => c !== category)
        : [...prev, category]
    );
  };

  //
  // UPDATED → use cuisine names instead of IDs and push to ?search=
  //
  const toggleCuisine = (cuisine: Cuisine) => {
    const name = cuisine.name;

    const isSelected = selectedCuisines.includes(name);
    const newSelection = isSelected ? "" : name;

    setSelectedCuisines(newSelection ? [newSelection] : []);

    const params = new URLSearchParams(searchParams.toString());

    if (newSelection) {
      params.set("search", newSelection);
    } else {
      params.delete("search");
    }

    router.push(`?${params.toString()}`);
  };


  const toggleRating = (rating: boolean) => {
    if (rating) {
      setSelectedRatings(true);
      params.set("rating", "true");
    } else {
      setSelectedRatings(false);
      params.delete("rating");
    }
    router.push(`?${params.toString()}`);
  };

  const toggleOtherFilter = (filter: string) => {
    setOtherFilters((prev) =>
      prev.includes(filter)
        ? prev.filter((f) => f !== filter)
        : [...prev, filter]
    );
  };

  const handleVeg = (newVal: boolean, type: string) => {
    if (type === "veg") {
      setRecommanded(newVal);
      params.delete("nonVeg");

      newVal ? params.set("veg", "true") : params.delete("veg");
    } else {
      setRecommanded1(newVal);
      params.delete("veg");

      newVal ? params.set("nonVeg", "true") : params.delete("nonVeg");
    }
    router.push(`?${params.toString()}`);
  };

  useEffect(() => {
    if (veg) {
      setRecommanded(true);
      setRecommanded1(false);
    } else if (nonVeg) {
      setRecommanded(false);
      setRecommanded1(true);
    } else {
      setRecommanded(false);
      setRecommanded1(false);
    }
  }, [veg, nonVeg]);

  useEffect(() => {
    setSelectedRatings(rating === "true");
  }, [rating]);

  useEffect(() => {
    setSortOption(sort || "");
  }, [sort]);

  const handleSortOptionChange = (option: "rating" | "distance") => {
    const newValue = sortOption === option ? "" : option;

    setSortOption(newValue);

    if (newValue) params.set("sort", newValue);
    else params.delete("sort");

    router.push(`?${params.toString()}`);
  };

  return (
    <div className="bg-white rounded-xl shadow-sm p-4 w-full max-w-[256px] border border-gray-300 mx-auto">
      <div className="flex justify-between items-center mb-4">
        <h3 className="font-semibold text-2xl">Filters</h3>
        <button>
          <SlidersHorizontal />
        </button>
      </div>

      {/* Sort Section */}
      <div className="py-3">
        <div className="w-full flex flex-row gap-2 justify-center items-center mb-3">
          <div className="w-1/3 border-t border-t-gray-300 h-0"></div>
          <span className="text-gray-500 text-sm">Sort by</span>
          <div className="w-1/3 border-t border-t-gray-300 h-0"></div>
        </div>

        <div className="space-y-2">
          <button
            className={`px-3 py-1 rounded-full text-sm border flex items-center w-full justify-center ${sortOption === "rating"
              ? "bg-brand-50 border-primary"
              : "border-gray-200"
              }`}
            onClick={() => handleSortOptionChange("rating")}
          >
            Rating - High to Low
          </button>
          <button
            className={`px-3 py-1 rounded-full text-sm border w-full ${sortOption === "distance"
              ? "bg-brand-50 border-primary"
              : "border-gray-200"
              }`}
            onClick={() => handleSortOptionChange("distance")}
          >
            Distance - Low to High
          </button>
        </div>
      </div>

      {/* Rating Section */}
      <div className="py-3">
        <div className="w-full flex flex-row gap-2 justify-center items-center mb-3">
          <div className="w-1/3 border-t border-t-gray-300 h-0"></div>
          <span className="text-gray-500 text-sm">Rating</span>
          <div className="w-1/3 border-t border-t-gray-300 h-0"></div>
        </div>
        <div className="flex flex-wrap gap-2">
          <button
            className={`px-3 py-1 rounded-full text-sm border flex items-center ${selectedRatings
              ? "bg-brand-50 border-primary"
              : "border-gray-200"
              }`}
            onClick={() => toggleRating(!selectedRatings)}
          >
            <div className="text-primary mr-2">
              <Icons.Star />
            </div>
            4.0+
          </button>
        </div>
      </div>

      {/* Cuisine Section */}
      {!isGrocery && (
        <div className="py-3">
          <div className="w-full flex flex-row gap-2 justify-center items-center mb-3">
            <div className="w-[28%] border-t border-t-gray-300 h-0"></div>
            <span className="text-gray-500 text-sm">Cuisine</span>
            <div className="w-[28%] border-t border-t-gray-300 h-0"></div>
          </div>

          <div className="flex flex-wrap gap-2">
            {loadingCuisines ? (
              <span className="text-sm text-gray-400">Loading cuisines...</span>
            ) : cuisines.length > 0 ? (
              cuisines.map((cuisine) => (
                <button
                  key={cuisine._id}
                  className={`px-3 py-1 rounded-full text-sm border ${selectedCuisines.includes(cuisine.name)
                    ? "bg-brand-50 border-primary"
                    : "border-gray-200"
                    }`}
                  onClick={() => toggleCuisine(cuisine)}
                >
                  {cuisine.name}
                </button>
              ))
            ) : (
              <span className="text-sm text-gray-400">No cuisines available</span>
            )}
          </div>
        </div>
      )}

      {/* Veg / Non-Veg */}
      {!isGrocery && (
        <div className="py-3">
          <div className="w-full flex flex-row gap-2 justify-center items-center mb-3">
            <div className="w-[28%] border-t border-t-gray-300 h-0"></div>
            <span className="text-gray-500 text-sm">More filters</span>
            <div className="w-[28%] border-t border-t-gray-300 h-0"></div>
          </div>

          <div className="flex flex-wrap gap-2">
            <button
              className={`px-3 py-1 rounded-full text-sm border ${recommanded ? "bg-brand-50 border-primary" : "border-gray-200"
                }`}
              onClick={() => handleVeg(!recommanded, "veg")}
            >
              Veg
            </button>

            <button
              className={`px-3 py-1 rounded-full text-sm border ${recommanded1 ? "bg-brand-50 border-primary" : "border-gray-200"
                }`}
              onClick={() => handleVeg(!recommanded1, "nonveg")}
            >
              Non-veg
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default FilterSidebar;