/* eslint-disable @typescript-eslint/no-explicit-any */
// CustomizedSelect: Proper select box component styled like SelectField
import React, { useState, useRef, useEffect } from "react";
import ThreeDotsLoader from "../Loader/ThreeDotsLoader";
import { createBuilding, createRoad } from "../../Api/CustomerApi";

interface Options {
  id: string;
  name: string;
  code: string;
}

interface Option {
  id: string;
  name: string;
  code: string;
}
interface CustomizedSelectProps {
  options: Options[];
  value: string | Option | null;
  onChange: (value: string | Option | null) => void;
  errors?: string;
  placeholder?: string;
  className?: string;
  width?: string;
  icon?: React.ReactNode;
  label?: string;
  allowNewOption?: boolean;
  isCreatable?: boolean;
  isCreatableModal?: boolean;
  isLoading?: boolean;
  name?: string;
  otherInfo?:
    | {
        road?: { id: number; name: string; code?: string };
        block?: { id: number; name: string; code?: string };
      }
    | any;
}

export const CustomizedSelect: React.FC<CustomizedSelectProps> = ({
  options = [],
  value,
  onChange,
  errors,
  placeholder = "Select an option",
  className = "",
  width = "",
  icon,
  label,
  allowNewOption = false,
  isCreatable = false,
  isCreatableModal = false,
  isLoading = false,
  name = "",
  otherInfo
}) => {
  const [showDropdown, setShowDropdown] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const selectRef = useRef<HTMLDivElement>(null);
  const [localOptions, setLocalOptions] = useState<Options[]>(options);

  useEffect(() => {
    setLocalOptions(options);
  }, [options]);

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

  const handleOptionSelect = (option: Option) => {
    onChange(option);
    setShowDropdown(false);
    setSearchQuery(option.code);
  };

  const handleToggleDropdown = () => {
    if (!isLoading) {
      setShowDropdown(!showDropdown);
      if (!showDropdown)
        setSearchQuery(
          typeof value === "object" && value !== null ? value.code : value || ""
        );
    }
  };

  const handleClearSelection = () => {
    onChange(null);
    setSearchQuery("");
  };

  const isOptionSelected = typeof value === "object" && value !== null;

  // Filter options by search query (code or name, case-insensitive)
  const filteredOptions = localOptions.filter((option) => {
    const q = searchQuery ? searchQuery.trim().toLowerCase() : "";
    if (!q) return true;
    return (
      option.name.toLowerCase().includes(q) ||
      (option.code && option.code.toLowerCase().includes(q))
    );
  });

  const handleRoadSave = async (newRoad: Option ) => {
    try {
      const response = await createRoad({...newRoad, block_id: otherInfo?.block?.id});
      console.log(response?.status,'response>>>>>>>>>>>>>>>>>>>>>>>')
      if (response && response.status) {
        const {id = "", name = "", code = ""} = response?.data;
        const newOption: Option = {
          id: id ||newRoad?.id,
          name: name || newRoad?.name,
          code: code || newRoad?.code,
        };
        const updatedOptions = [...localOptions, newOption];
        setLocalOptions(updatedOptions);
        onChange(newOption);
        setShowDropdown(false);
        setSearchQuery(newOption.name);
      }
      // else {
      //   const updatedOptions = [...localOptions, newRoad];
      //   setLocalOptions(updatedOptions);
      //   onChange(newRoad);
      //   setShowDropdown(false);
      //   setSearchQuery(newRoad.name);
      // }
    } catch (error: any) {
      console.log(error)
      // const updatedOptions = [...localOptions, newRoad];
      // setLocalOptions(updatedOptions);
      // onChange(newRoad);
      // setShowDropdown(false);
      // setSearchQuery(newRoad.name);
    }
  };
  const handleBuildingSave = async (newRoad: any ) => {
    try {
      const response = await createBuilding({...newRoad, block_id: otherInfo?.block?.id, road_id: otherInfo?.road?.id});
      console.log(response?.status,'response>>>>>>>>>>>>>>>>>>>>>>>')
      if (response && response.status) {
        const {id = "", name = "", code = ""} = response?.data;
        const newOption: Option = {
          id: id ||newRoad?.id,
          name: name || newRoad?.name,
          code: code || newRoad?.code,
        };
        const updatedOptions = [...localOptions, newOption];
        setLocalOptions(updatedOptions);
        onChange(newOption);
        setShowDropdown(false);
        setSearchQuery(newOption.name);
      } 
      // else {
      //   const updatedOptions = [...localOptions, newRoad];
      //   setLocalOptions(updatedOptions);
      //   onChange(newRoad);
      //   setShowDropdown(false);
      //   setSearchQuery(newRoad.name);
      // }
    } catch (error: any) {
      console.log(error)
      // const updatedOptions = [...localOptions, newRoad];
      // setLocalOptions(updatedOptions);
      // onChange(newRoad);
      // setShowDropdown(false);
      // setSearchQuery(newRoad.name);
    }
  };
  const handleAddNewOption = () => {
    const trimmedQuery = searchQuery ? searchQuery.trim() : '';
    if (!trimmedQuery) return;
    // Prevent duplicate
    const exists = localOptions.some(
      (option) => option.name.toLowerCase() === trimmedQuery.toLowerCase()
    );
    if (exists) return;
    const newOption = {
      id: trimmedQuery,
      name: trimmedQuery,
      code: trimmedQuery,
    };
    if(name === 'Road No' && typeof trimmedQuery === 'string') {
      handleRoadSave(newOption)
    } 
    else if(name === 'Building No' && typeof trimmedQuery === 'string') {
      handleBuildingSave({...newOption, road_id: 1})
    }
    else {
      const updatedOptions = [...localOptions, newOption];
      setLocalOptions(updatedOptions);
      onChange(newOption);
      setShowDropdown(false);
      setSearchQuery(newOption.name);
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
    setShowDropdown(true);
    if (allowNewOption) {
      onChange(e.target.value);
    }
  };

  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (
      e.key === "Enter" &&
      isCreatable &&
      searchQuery  && searchQuery.trim() !== "" &&
      !localOptions.some(
        (option) =>
          option.name.toLowerCase() === searchQuery.trim().toLowerCase()
      )
    ) {
      e.preventDefault();
      handleAddNewOption();
    }
  };

  // const getDisplayValue = () => {
  //   if (typeof value === 'object' && value !== null) {
  //     return value.name;
  //   }
  //   return value || placeholder;
  // };

  function formatCreateLabel(inputValue: string): React.ReactNode {
    if (inputValue.trim() === "") {
      return <span>Add</span>;
    } else {
      return (
        <>
          <button
            className="select-create-option w-100 py-2"
            onClick={(e) => {
              e.stopPropagation();
              handleAddNewOption();
            }}
          >
            <p className="text-center mb-0 font-400 font-16 w-100 color-primary">
              <i className="ri-add-circle-line position-relative add-new-icon" />
              &nbsp;Add&nbsp;
              <b className="font-700 color-black">
                {inputValue ? `'${inputValue}'` : ""}
              </b>
            </p>
            {/* <p></p> */}
            {/* <p className="mb-0 px-3"><hr className="mb-0 mt-2 opacity-30"/></p> */}
            {/* {name === 'buildingNo' && referenceData?.road?.name && referenceData?.block?.name && (
                    <div className="select-create-context">
                      <p className="mb-0">Road - {referenceData?.road?.code}{(referenceData?.road?.name && referenceData?.road?.name !== referenceData?.road?.code) ? `, ${referenceData?.road?.name}` : ''}, Block - {referenceData?.block?.code}{(referenceData?.block?.name && referenceData?.block?.name !== referenceData?.block?.code) ? `,  ${referenceData?.block?.name}` : ''}</p>
                    </div>
                  )} */}
          </button>
          <hr className="mb-0 mt-0" />
        </>
      );
    }
  }

  return (
    <>
      <style>
        {`
          .select-field-container {
            position: relative;
            display: flex;
            align-items: center;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            min-height: 38px;
            cursor: pointer;
            user-select: none;
          }
          .select-field-container:hover {
            border-color: #999;
          }
          .select-field-container.has-error {
            border-color: red;
          }
          .select-field-display {
            flex: 1;
            padding: 8px 12px;
            font-size: 14px;
            color: #333;
            background: transparent;
            border: none;
            outline: none;
            cursor: pointer;
            text-align: left;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .select-field-display.placeholder {
            color: #999;
          }
          .select-field-clear {
            padding: 4px 8px;
            background: none;
            border: none;
            cursor: pointer;
            color: #999;
            font-size: 16px;
            line-height: 1;
          }
          .select-field-clear:hover {
            color: #666;
          }
          .select-field-arrow {
            padding: 4px 8px;
            color: #999;
            font-size: 12px;
            pointer-events: none;
            transition: transform 0.2s;
          }
          .select-field-arrow.open {
            transform: rotate(180deg);
          }
          .select-field-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            min-width: 60px;
            max-width: 60px;
            height: 100%;
            position: relative;
          }
          .select-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1000;
            background: #fff;
            border: 1px solid #ccc;
            border-top: none;
            border-radius: 0 0 4px 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            max-height: 200px;
            overflow-y: auto;
          }
          .select-option {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
          }
          .select-option:hover {
            background-color: #f5f5f5;
          }
          .select-option:last-child {
            border-bottom: none;
          }
          .select-option.selected {
            background-color: #e3f2fd;
            color: #1976d2;
          }
          .select-create-option .select-create-context {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            color: #0066cc;
            background-color: #cccccc !important;
          }
          .select-create-option .select-create-context:hover {
            background-color: #e9ecef;
          }
          .select-no-options {
            padding: 8px 12px;
            color: #666;
            font-style: italic;
          }
          .input-style-select .select-field-container {
            min-height: 52px;
            border-radius: 10px;
          }
          .select-create-context {
            font-size: 12px;
            color: #888;
          }
          .input-style.has-icon.has-borders input.padding-left-8 {
            padding-left: 8px !important;
          }
          .border-bottom01 {
            border-bottom: 1px solid #eee;
          }
          .input-style.has-icon.has-borders i.add-new-icon {
            padding-left: 0 !important;
          }
        `}
      </style>
      <div
        ref={selectRef}
        className={`input-style01 input-style-select ${className} ${
          errors ? "has-error" : ""
        }`}
        style={{ width, position: "relative" }}
      >
        {/* Icon */}
        {icon && (
          <div
            className="input-icon"
            style={{
              position: "absolute",
              top: "50%",
              transform: "translateY(-50%)",
              zIndex: 2,
              pointerEvents: "none",
            }}
          >
            <i className={`${icon} color-primary`} />
          </div>
        )}

        <div className={`select-field-container ${errors ? "has-error" : ""}`}>
          <input
            type="text"
            value={searchQuery}
            onChange={handleInputChange}
            onKeyDown={handleInputKeyDown}
            placeholder={placeholder}
            style={{
              paddingLeft: icon ? "40px" : "12px",
              fontSize: "14px",
              border: "none",
              outline: "none",
              background: "transparent",
              width: "100%",
            }}
            className="select-field-display"
            onClick={handleToggleDropdown}
            onFocus={() => setShowDropdown(true)}
          />

          {/* Actions: clear, loader, arrow */}
          <div className="select-field-actions">
            {isOptionSelected && (
              <button
                type="button"
                className="select-field-clear"
                onClick={(e) => {
                  e.stopPropagation();
                  handleClearSelection();
                }}
                title="Clear selection"
              >
                ×
              </button>
            )}

            {isLoading && (
              <div
                style={{
                  padding: "4px 0",
                  display: "flex",
                  alignItems: "center",
                }}
              >
                <ThreeDotsLoader />
              </div>
            )}

            <div className={`select-field-arrow ${showDropdown ? "open" : ""}`}>
              ▼
            </div>
          </div>
        </div>

        {/* Dropdown */}
        {showDropdown && (
          <div className="select-dropdown">
            {isCreatable &&
            searchQuery && 
            searchQuery.trim() !== "" &&
            !localOptions.some(
              (option) =>
                option.name.toLowerCase() === searchQuery.trim().toLowerCase()
            ) ? (
              <div
                onMouseDown={handleAddNewOption}
                style={{
                  padding: 0,
                  background: "transparent",
                  border: "none",
                }}
              >
                <>{formatCreateLabel(searchQuery)}</>
              </div>
            ) : null}
            {filteredOptions.length > 0 && (
              <>
                {filteredOptions.map((option) => (
                  <div
                    key={option.id}
                    className={`select-option ${
                      typeof value === "object" &&
                      value !== null &&
                      value.id === option.id
                        ? "selected"
                        : ""
                    }`}
                    onMouseDown={() => handleOptionSelect(option)}
                  >
                    {option?.id === "add-new" ? (
                      <>
                        <p className="text-center mb-0 font-400 font-16 w-100 color-primary">
                          <i className="ri-add-circle-line position-relative add-new-icon" />
                          &nbsp;Add&nbsp;
                          <b className="font-700 color-black">{name}</b>
                        </p>{" "}
                      </>
                    ) : (
                      <>
                        <p className="text-center mb-0 border-bottom01">
                          {option?.code ? `${option?.code} - ` : ""}
                          {option.name}
                        </p>
                      </>
                    )}
                  </div>
                ))}
              </>
            )}
            {!allowNewOption && filteredOptions.length === 0 && (
              <>
                {isCreatableModal ? (
                  <>
                    <div
                      className={`select-option`}
                      onMouseDown={() =>
                        handleOptionSelect({ id: "add-new", name: "", code: "" })
                      }
                    >
                      <p className="text-center mb-0 font-400 font-16 w-100 color-primary">
                        <i className="ri-add-circle-line position-relative add-new-icon" />
                        &nbsp;Add&nbsp;
                        <b className="font-700 color-black">{name}</b>
                      </p>
                    </div>
                    <div className="select-no-options text-center">
                      No options available
                    </div>
                  </>
                ) : (
                  <>
                    <div className="select-no-options text-center">
                      No options available
                    </div>
                  </>
                )}
              </>
            )}
          </div>
        )}

        {/* Label */}
        {label && (
          <label className="color-theme opacity-80 text-uppercase font-700 font-10">
            {label}
          </label>
        )}
      </div>
    </>
  );
};

export default CustomizedSelect;