import React, { useState, useRef, useEffect } from "react";
import { ChevronDown, X } from "lucide-react";

interface Option {
  value: string;
  label: string;
}

interface MultiSelectProps {
  options: Option[];
  value: string[];
  onChange: (value: string[]) => void;
  placeholder?: string;
  disabled?: boolean;
  style?: React.CSSProperties;
  singleSelect?: boolean;
}

export const MultiSelect: React.FC<MultiSelectProps> = ({
  options,
  value,
  onChange,
  placeholder = "Select options",
  disabled = false,
  style = {},
  singleSelect = false,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [hoveredOption, setHoveredOption] = useState<string | null>(null);
  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 handleSelect = (optionValue: string) => {
    if (singleSelect) {
      onChange([optionValue]);
      setIsOpen(false);
    } else {
      if (value.includes(optionValue)) {
        onChange(value.filter((v) => v !== optionValue));
      } else {
        onChange([...value, optionValue]);
      }
    }
  };

  const removeOption = (optionValue: string) => {
    onChange(value.filter((v) => v !== optionValue));
  };

  return (
    <div
      ref={dropdownRef}
      style={{
        position: "relative",
        width: "100%",
        fontFamily: "Inter, sans-serif",
        ...style,
      }}
    >
      <div
        onClick={() => !disabled && setIsOpen(!isOpen)}
        style={{
          border: "1px solid #D5D7DA",
          background: disabled ? "#F5F5F5" : "#fff",
          borderRadius: 8,
          minHeight: 48,
          padding: "0px 16px",
          cursor: disabled ? "not-allowed" : "pointer",
          display: "flex",
          flexWrap: "wrap",
          gap: 8,
          alignItems: "center",
        }}
      >
        {value.length === 0 ? (
          <span style={{ color: "#A0A4AB", fontSize: 16 }}>{placeholder}</span>
        ) : (
          value.map((selectedValue) => (
            <div
              key={selectedValue}
              style={{
                background: "#E7F4FE",
                padding: "4px 8px",
                borderRadius: 4,
                display: "flex",
                alignItems: "center",
                gap: 4,
                fontSize: 14,
                color: "#3662E3",
              }}
            >
              <span>
                {options.find((opt) => opt.value === selectedValue)?.label}
              </span>
              {!singleSelect && (
                <X
                  size={14}
                  style={{ cursor: "pointer" }}
                  onClick={(e) => {
                    e.stopPropagation();
                    removeOption(selectedValue);
                  }}
                />
              )}
            </div>
          ))
        )}
        <ChevronDown
          size={20}
          style={{
            marginLeft: "auto",
            color: "#A0A4AB",
            transform: isOpen ? "rotate(180deg)" : "none",
            transition: "transform 0.2s",
          }}
        />
      </div>

      {isOpen && (
        <div
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            right: 0,
            background: "#fff",
            border: "1px solid #D5D7DA",
            borderRadius: 8,
            marginTop: 4,
            maxHeight: 200,
            overflowY: "auto",
            zIndex: 1000,
            boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
          }}
        >
          {options.map((option) => (
            <div
              key={option.value}
              onClick={() => handleSelect(option.value)}
              onMouseEnter={() => setHoveredOption(option.value)}
              onMouseLeave={() => setHoveredOption(null)}
              style={{
                padding: "12px 16px",
                cursor: "pointer",
                background: value.includes(option.value)
                  ? "#F0F4FF"
                  : hoveredOption === option.value
                  ? "#F5F5F5"
                  : "transparent",
                color: value.includes(option.value) ? "#175CD3" : "#414651",
                fontSize: 16,
                fontWeight: value.includes(option.value) ? 500 : 400,
              }}
            >
              {option.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};