"use client";

import { AnimatePresence, motion } from "framer-motion";
import { ChevronDown } from "lucide-react";
import React, { useEffect, useRef, useState } from "react";

interface SeaQaFilterDropdownProps {
  label: string;
  options?: string[];
  groups?: { name: string; options: string[] }[];
  placeholder: string;
  selected: string[];
  onToggle: (option: string) => void;
  width?: string;
}

const SeaQaFilterDropdown: React.FC<SeaQaFilterDropdownProps> = ({
  label,
  options,
  groups,
  placeholder,
  selected,
  onToggle,
  width = "162px",
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const hasSelection = selected.length > 0;

  return (
    <div className="flex flex-col gap-1.5" ref={dropdownRef}>
      <label className="text-white/70 text-[11px] font-semibold px-1 leading-4 uppercase tracking-wider">
        {label}
      </label>

      <div className="relative">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className={`bg-white rounded-lg flex items-center gap-2 px-3 cursor-pointer focus:outline-none transition-all ${
            hasSelection ? "shadow-md" : "shadow-sm hover:shadow"
          }`}
          style={{ width, height: "38px" }}
        >
          <span
            className={`text-sm truncate flex-1 text-left ${
              hasSelection
                ? "font-semibold text-gray-900"
                : "font-medium text-gray-400"
            }`}
          >
            {hasSelection ? selected.join(", ") : placeholder}
          </span>
          {hasSelection && (
            <span className="bg-brand-blue-primary text-white text-[10px] font-bold rounded-full flex items-center justify-center shrink-0 w-[18px] h-[18px]">
              {selected.length}
            </span>
          )}
          <ChevronDown
            size={15}
            className={`shrink-0 transition-transform duration-200 ${
              isOpen ? "rotate-180 text-gray-700" : "text-gray-400"
            }`}
          />
        </button>

        <AnimatePresence>
          {isOpen && (
            <motion.div
              initial={{ opacity: 0, y: -6, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -6, scale: 0.98 }}
              transition={{ duration: 0.15, ease: "easeOut" }}
              className="absolute z-50 top-[calc(100%+6px)] left-0 bg-white rounded-2xl border border-gray-100"
              style={{
                minWidth: "200px",
                boxShadow:
                  "0 8px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06)",
              }}
            >
              <div className="p-2 flex flex-col max-h-[320px] overflow-y-auto no-scrollbar">
                {groups
                  ? groups.map((group, gi) => (
                      <div key={group.name}>
                        {gi > 0 && (
                          <div className="h-px bg-gray-100 mx-1.5 my-2" />
                        )}
                        <p className="text-sm font-bold text-black px-2.5 pt-1.5 pb-1 leading-5">
                          {group.name}
                        </p>
                        <div className="flex flex-col gap-0.5 pl-3">
                          {group.options.map((option) => (
                            <button
                              key={`${group.name}-${option}`}
                              type="button"
                              onClick={() => onToggle(option)}
                              className={`w-full text-left text-sm leading-5 px-2 py-1.5 rounded-lg transition-colors cursor-pointer ${
                                selected.includes(option)
                                  ? "bg-blue-light/10 text-blue-light font-semibold"
                                  : "text-gray-600 font-medium hover:bg-gray-50 hover:text-gray-900"
                              }`}
                            >
                              {option}
                            </button>
                          ))}
                        </div>
                      </div>
                    ))
                  : options?.map((option) => (
                      <button
                        key={option}
                        type="button"
                        onClick={() => onToggle(option)}
                        className={`w-full text-left text-sm leading-5 px-2.5 py-1.5 rounded-lg transition-colors cursor-pointer ${
                          selected.includes(option)
                            ? "bg-blue-light/10 text-blue-light font-semibold"
                            : "text-gray-700 font-medium hover:bg-gray-50 hover:text-gray-900"
                        }`}
                      >
                        {option}
                      </button>
                    ))}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

export default SeaQaFilterDropdown;