"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
import { useRouter, useSearchParams } from "next/navigation";

const RestroFilter = ({ search, setSearch, restaurantData }: any) => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const veg = searchParams.get("veg");
  const nonVeg = searchParams.get("nonVeg");
  const rating = searchParams.get("rating");

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

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

  const handleVeg = (newVal: boolean, type: string) => {
    const params = new URLSearchParams(searchParams.toString());
    if (type === "veg") {
      setRecommanded(newVal);
      setRecommanded1(false);
      params.delete("nonVeg");
      newVal ? params.set("veg", "true") : params.delete("veg");
    } else {
      setRecommanded1(newVal);
      setRecommanded(false);
      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(() => {
    console.log("RestroFilter Rating Effect running with rating:", rating);
    setSelectedRatings(rating === "true");
  }, [rating]);



  const [isFilterOpen, setIsFilterOpen] = useState(false);

  return (
    <div className="flex flex-row flex-wrap items-center gap-3 relative">
      {/* Filters Button (Generic) */}
      <div className="relative">
        <button
          className="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-gray-200 bg-white shadow-sm hover:bg-gray-50 transition-colors"
          onClick={() => setIsFilterOpen(!isFilterOpen)}
        >
          <div className="text-black">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22 3H2L10 12.46V19L14 21V12.46L22 3Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <span className="text-sm font-medium text-gray-700">Filters</span>
          <span className="text-xs text-black">▼</span>
        </button>

        {isFilterOpen && (
          <>
            <div className="fixed inset-0 z-40" onClick={() => setIsFilterOpen(false)}></div>
            <div className="absolute top-full left-0 mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-100 z-50 p-4 max-h-[500px] overflow-y-auto">

              {/* Ratings Section */}
              <div className="mb-0">
                <h3 className="text-sm font-semibold text-gray-900 mb-3">Ratings</h3>
                <div className="space-y-3">
                  {[
                    { label: "4.0 & above", value: "4.0" },
                  ].map((item) => (
                    <label key={item.label} className="flex items-center gap-3 cursor-pointer group">
                      <div className="relative flex items-center">
                        <input
                          type="checkbox"
                          checked={selectedRatings && item.value === "4.0"} // Currently only supporting 4.0 logic
                          onChange={() => {
                            if (item.value === "4.0") {
                              toggleRating(!selectedRatings);
                            }
                          }}
                          className="peer h-5 w-5 cursor-pointer appearance-none rounded border border-gray-300 bg-white transition-all checked:border-black checked:bg-black"
                        />
                        <div className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white opacity-0 peer-checked:opacity-100">
                          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10 3L4.5 8.5L2 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </div>
                      </div>
                      <span className="text-sm text-gray-600 group-hover:text-gray-900">{item.label}</span>
                    </label>
                  ))}
                </div>
              </div>

            </div>
          </>
        )}
      </div>

      {/* Veg Button */}
      <button
        className={cn(
          "flex items-center gap-2 px-3 py-1.5 rounded-lg border shadow-sm transition-colors",
          recommanded
            ? "bg-green-50 border-green-500"
            : "bg-white border-gray-200 hover:bg-gray-50"
        )}
        onClick={() => handleVeg(!recommanded, "veg")}
      >
        <div className="w-4 h-4 border border-green-600 flex items-center justify-center p-0.5">
          <div className="w-full h-full rounded-full bg-green-600"></div>
        </div>
        <span className={cn("text-sm font-medium", recommanded ? "text-green-700" : "text-gray-700")}>
          Veg
        </span>
        {recommanded && (
          <span className="ml-1 text-xs text-green-700">✕</span>
        )}
      </button>

      {/* Non-Veg Button */}
      <button
        className={cn(
          "flex items-center gap-2 px-3 py-1.5 rounded-lg border shadow-sm transition-colors",
          recommanded1
            ? "bg-red-50 border-red-500"
            : "bg-white border-gray-200 hover:bg-gray-50"
        )}
        onClick={() => handleVeg(!recommanded1, "nonveg")}
      >
        <div className="w-4 h-4 border border-red-500 flex items-center justify-center p-0.5">
          <svg viewBox="0 0 24 24" fill="currentColor" className="text-red-500 w-full h-full">
            <path d="M12 2L22 22H2L12 2Z" />
          </svg>
        </div>
        <span className={cn("text-sm font-medium", recommanded1 ? "text-red-700" : "text-gray-700")}>
          Non-Veg
        </span>
        {recommanded1 && (
          <span className="ml-1 text-xs text-red-700">✕</span>
        )}
      </button>
    </div>
  );
};

export default RestroFilter;