"use client";

import { useState } from "react";
import Select, { components } from "react-select";


type Option = {
  label: string;
  value: string;
};

type Props = {
  disabled?: boolean;
  options: Option[];
  value: Option | Option[] | null | any;
  onChange: (option: Option | Option[] | null | any) => void;
  placeholder?: string;
  getOptionLabel?: (option: any) => any;
  getOptionValue?: (option: any) => string;
  isOptionDisabled?: (option: any) => boolean;
  isMulti?: boolean; // ✅ NEW
  disabledOptionLabel?: string; //
  isLoading?: boolean;
};


// export default function TailwindSelect({
//   options,
//   value,
//   onChange,
//   placeholder = "Select option",
//   getOptionLabel,
//   getOptionValue,
//   isOptionDisabled,
//   disabledOptionLabel,
//   isMulti = false, // ✅ default single select
//   isLoading = false,
//   disabled
// }: Props) {


//   return (
//     <Select
//       isDisabled={disabled}
//       options={options}
//       value={value}
//       onChange={onChange}
//       placeholder={placeholder}
//       isSearchable
//       isMulti={isMulti} // ✅ ENABLE MULTI SELECT
//       closeMenuOnSelect={!isMulti} // ✅ Better UX
//       hideSelectedOptions={false}
//       classNamePrefix="custom-react-select"
//       className="w-full"
//       isLoading={isLoading}
//       getOptionLabel={getOptionLabel}
//       getOptionValue={getOptionValue}
//       isOptionDisabled={isOptionDisabled}
//       formatOptionLabel={(option: any, { context }) => {
//         const isDisabled = isOptionDisabled?.(option);

//         return (
//           <div className="flex items-center justify-between gap-2">
//             <span>{getOptionLabel ? getOptionLabel(option) : option.label}</span>

//             {context === "menu" && isDisabled && disabledOptionLabel && (
//               <span className="text-xs text-grey92">
//                 {disabledOptionLabel}
//               </span>
//             )}
//           </div>
//         );
//       }}
//       // classNames={{
//       //   control: (state) =>
//       //     `min-h-[46px]! md:!min-h-[50px] 2xl:!min-h-[56px]
//       //      cursor-pointer! rounded-xl! 2xl:!rounded-2xl
//       //      !border border-grey32! px-1 bg-theme-bg!
//       //      ${state.isFocused ? "!border-blue-500" : ""}
//       //      !shadow-none`,

//       //   menu: () =>
//       //     "!rounded-2xl !mt-2 !border !border-grey32 !shadow-lg bg-secondary25!",

//       //   menuList: () => "!p-1",

//       //   option: (state) =>
//       //     `!rounded-xl !px-3 !py-2 text-sm! md:!text-base
//       //      ${state.isDisabled
//       //       ? "opacity-50 cursor-not-allowed!"
//       //       : "cursor-pointer! hover:bg-primary/10!"
//       //     }
//       //      ${state.isSelected
//       //       ? "bg-primary! !text-light"
//       //       : ""
//       //     }`,

//       //   multiValue: () =>
//       //     "bg-primary/20 !rounded-lg !px-2",

//       //   multiValueLabel: () =>
//       //     "text-light text-sm",

//       //   multiValueRemove: () =>
//       //     "text-light hover:bg-primary/30 rounded-md",

//       //   singleValue: () => "text-sm! md:!text-base !text-light",
//       //   placeholder: () => "text-sm! md:!text-base !text-light",
//       //   dropdownIndicator: () => "!text-light",
//       //   indicatorSeparator: () => "!hidden",
//       // }}
//       classNames={{
//         control: (state) =>
//           `min-h-[46px]! md:!min-h-[50px] 2xl:!min-h-[56px]
//      cursor-text! rounded-xl! 2xl:!rounded-2xl
//      !border border-grey32! bg-theme-bg!
//      px-2
//      ${state.isFocused ? "!border-blue-500" : ""}
//      !shadow-none`,

//         valueContainer: () =>
//           "flex flex-wrap gap-2 py-1",

//         menu: () =>
//           "!rounded-2xl !mt-2 !border !border-grey32 !shadow-lg bg-secondary25!",

//         menuList: () => "!p-1",

//         option: (state) =>
//           `!rounded-xl !px-3 !py-2 text-sm! md:!text-base
//      ${state.isDisabled
//             ? "opacity-50 cursor-not-allowed!"
//             : "cursor-pointer! hover:bg-primary/10!"
//           }
//      ${state.isSelected
//             ? "bg-primary! !text-light"
//             : ""
//           }`,

//         multiValue: () =>
//           "!bg-primary/20 !rounded-lg !px-2 !py-1 flex items-center gap-1",

//         multiValueLabel: () =>
//           "!text-light text-sm whitespace-nowrap",

//         multiValueRemove: () =>
//           "!text-light hover:!bg-primary/30 rounded-md p-1 transition",

//         input: () =>
//           "text-light",

//         singleValue: () =>
//           "text-sm! md:!text-base !text-light",

//         placeholder: () =>
//           "text-sm! md:!text-base !text-light",

//         dropdownIndicator: () => "!text-light",
//         indicatorSeparator: () => "!hidden",
//       }}

//     />
//   );
// }

export default function TailwindSelect({
  options,
  value,
  onChange,
  placeholder = "Select option",
  getOptionLabel,
  getOptionValue,
  isOptionDisabled,
  disabledOptionLabel,
  isMulti = false,
  isLoading = false,
  disabled
}: Props) {

  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <Select
      isDisabled={disabled}
      options={options}
      value={value}
      onChange={(option) => {
        onChange(option);
        if (!isMulti) {
          setMenuOpen(false); // close for single
        }
      }}
      placeholder={placeholder}
      isSearchable
      isMulti={isMulti}
      closeMenuOnSelect={!isMulti}
      hideSelectedOptions={false}
      classNamePrefix="custom-react-select"
      className="w-full"
      isLoading={isLoading}
      getOptionLabel={getOptionLabel}
      getOptionValue={getOptionValue}
      isOptionDisabled={isOptionDisabled}

      /** ✅ CONTROL MENU */
      menuIsOpen={menuOpen}
      onMenuOpen={() => setMenuOpen(true)}
      onMenuClose={() => setMenuOpen(false)}

      /** ✅ CLOSE ON MOUSE LEAVE (MULTI ONLY) */
      components={{
        Menu: (props) => (
          <div onMouseLeave={() => isMulti && setMenuOpen(false)}>
            <components.Menu {...props} />
          </div>
        ),
      }}

      formatOptionLabel={(option: any, { context }) => {
        const isDisabled = isOptionDisabled?.(option);

        return (
          <div className="flex items-center justify-between gap-2">
            <span>{getOptionLabel ? getOptionLabel(option) : option.label}</span>

            {context === "menu" && isDisabled && disabledOptionLabel && (
              <span className="text-xs text-grey92">
                {disabledOptionLabel}
              </span>
            )}
          </div>
        );
      }}

      classNames={{
        control: (state) =>
          `min-h-[46px]! md:!min-h-[50px] 2xl:!min-h-[56px]
           cursor-text! rounded-xl! 2xl:!rounded-2xl
           !border border-grey32! bg-theme-bg!
           px-2
           ${state.isFocused ? "!border-blue-500" : ""}
           !shadow-none`,

        valueContainer: () => "flex flex-wrap gap-2 py-1",

        menu: () =>
          "!rounded-2xl !mt-2 !border !border-grey32 !shadow-lg bg-secondary25!",

        menuList: () => "!p-1",

        option: (state) =>
          `!rounded-xl !px-3 !py-2 text-sm! md:!text-base
           ${state.isDisabled
            ? "opacity-50 cursor-not-allowed!"
            : "cursor-pointer! hover:bg-primary/20!"
          }
           ${state.isSelected ? "bg-primary! !text-light" : ""}`,

        multiValue: () =>
          "!bg-primary/20 !rounded-lg !px-2 !py-1 flex items-center gap-1",

        multiValueLabel: () =>
          "!text-light text-sm whitespace-nowrap",

        multiValueRemove: () =>
          "!text-light hover:!bg-primary/30 rounded-md p-1 transition",

        input: () => "text-light",
        singleValue: () => "text-sm! md:!text-base !text-light",
        placeholder: () => "text-sm! md:!text-base !text-light",
        dropdownIndicator: () => "!text-light",
        indicatorSeparator: () => "!hidden",
      }}
    />
  );
}