import React, { useEffect, useRef, useState } from "react";
import Label from "../Label";
import { useDebounce } from "../../../utils/appUtils";
import { useEmployeesName } from "../../../hooks/useEmployees";
import { useProjectBothName } from "../../../hooks/useProjects";
import EmployeeRepository from "../../../repositories/EmployeeRepository";

const SelectEmployeeServerSide = ({
  label = "Select",
  placeholder = "Select Employee",
  required = false,
  value = null,
  onChange,
  valueKey = "id",
  isFullObject = false,
  isMultiple = false,
  projectId = null,
  isAllEmployee = false,
}) => {
  const [searchText, setSearchText] = useState("");
  const debounce = useDebounce(searchText, 300);
  const [forcedSelected, setForcedSelected] = useState(null);

  const { data, isLoading } = useEmployeesName(
    projectId,
    debounce,
    isAllEmployee
  );

  const options = data?.data ?? [];
  const [open, setOpen] = useState(false);
  const dropdownRef = useRef(null);

  const getDisplayName = (emp) => {
    if (!emp) return "";
    return `${emp.firstName || ""} ${emp.lastName || ""}`.trim();
  };

  let selectedSingle = null;
  if (!isMultiple) {
    if (isFullObject && value) selectedSingle = value;
    else if (!isFullObject && value)
      selectedSingle =
        options.find((o) => o[valueKey] === value) || forcedSelected;
  }

  let selectedList = [];
  if (isMultiple && Array.isArray(value)) {
    if (isFullObject) selectedList = value;
    else {
      selectedList = options.filter((opt) => value.includes(opt[valueKey]));
    }
  }

  const displayText = !isMultiple
    ? getDisplayName(selectedSingle) || placeholder
    : selectedList.length > 0
    ? selectedList.map((e) => getDisplayName(e)).join(", ")
    : placeholder;

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleSelect = (option) => {
    if (!isMultiple) {
      if (isFullObject) onChange(option);
      else onChange(option[valueKey]);
      setOpen(false);
    } else {
      let updated = [];
      const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
      updated = exists
        ? selectedList.filter((e) => e[valueKey] !== option[valueKey])
        : [...selectedList, option];
      if (isFullObject) onChange(updated);
      else onChange(updated.map((x) => x[valueKey]));
    }
  };

  useEffect(() => {
    if (!value || isFullObject) return;

    const exists = options.some((o) => o[valueKey] === value);
    if (exists) return;

    const loadSingleEmployee = async () => {
      try {
        const emp = await EmployeeRepository.getEmployeeName(
          null,
          null,
          true,
          value
        );
        setForcedSelected(emp.data[0]);
      } catch (err) {
        console.error("Failed to load selected employee", err);
      }
    };

    loadSingleEmployee();
  }, [value, options, isFullObject, valueKey]);

  return (
    <div className="mb-3 position-relative" ref={dropdownRef}>
      {label && (
        <Label className="form-label" required={required}>
          {label}
        </Label>
      )}

      {/* MAIN BUTTON */}
      <button
        type="button"
        className={`select2-icons form-select d-flex align-items-center justify-content-between ${
          open ? "show" : ""
        }`}
        onClick={() => setOpen((prev) => !prev)}
      >
        <span className={`text-truncate ${!displayText ? "text-muted" : ""}`}>
          {displayText}
        </span>
      </button>

      {open && (
        <ul
          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            zIndex: 1050,
            marginTop: "4px",
            borderRadius: "0.375rem",
            padding: 0,
          }}
        >
          <li className="p-1 sticky-top bg-white" style={{ zIndex: 10 }}>
            <input
              type="search"
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
              className="form-control form-control-sm"
              placeholder="Search..."
            />
          </li>

          {isLoading && (
            <li className="dropdown-item text-muted text-center">Loading...</li>
          )}

          {!isLoading && options.length === 0 && (
            <li className="dropdown-item text-muted text-center">
              No results found
            </li>
          )}

          {!isLoading &&
            options.map((option) => {
              const isActive = isMultiple
                ? selectedList.some((x) => x[valueKey] === option[valueKey])
                : selectedSingle &&
                  selectedSingle[valueKey] === option[valueKey];

              return (
                <li key={option[valueKey]} className="px-1 rounded">
                  <button
                    type="button"
                    className={`dropdown-item rounded ${
                      isActive ? "active" : ""
                    }`}
                    onClick={() => handleSelect(option)}
                  >
                    {getDisplayName(option)}
                  </button>
                </li>
              );
            })}
        </ul>
      )}
    </div>
  );
};

export default SelectEmployeeServerSide;

export const SelectProjectField = ({
  label = "Select",
  placeholder = "Select Project",
  required = false,
  value = null,
  onChange,
  valueKey = "id",
  isFullObject = false,
  isMultiple = false,
  isAllProject = false,
}) => {
  const [searchText, setSearchText] = useState("");
  const debounce = useDebounce(searchText, 300);

  const { data, isLoading } = useProjectBothName(debounce);

  const options = data ?? [];
  const [open, setOpen] = useState(false);
  const dropdownRef = useRef(null);

  const getDisplayName = (project) => {
    if (!project) return "";
    return `${project.name || ""}`.trim();
  };

  let selectedSingle = null;

  if (!isMultiple) {
    if (isFullObject && value) selectedSingle = value;
    else if (!isFullObject && value)
      selectedSingle = options.find((o) => o[valueKey] === value);
  }

  let selectedList = [];

  if (isMultiple && Array.isArray(value)) {
    if (isFullObject) selectedList = value;
    else {
      selectedList = options.filter((opt) => value.includes(opt[valueKey]));
    }
  }

  /** Main button label */
  const displayText = !isMultiple
    ? getDisplayName(selectedSingle) || placeholder
    : selectedList.length > 0
    ? selectedList.map((e) => getDisplayName(e)).join(", ")
    : placeholder;

  /** -----------------------------
   * HANDLE OUTSIDE CLICK
   * ----------------------------- */
  useEffect(() => {
    const handleClickOutside = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  /** -----------------------------
   * HANDLE SELECT
   * ----------------------------- */
  const handleSelect = (option) => {
    if (!isMultiple) {
      // SINGLE SELECT
      if (isFullObject) onChange(option);
      else onChange(option[valueKey]);
    } else {
      // MULTIPLE SELECT
      let updated = [];

      const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);

      if (exists) {
        // remove
        updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
      } else {
        // add
        updated = [...selectedList, option];
      }

      if (isFullObject) onChange(updated);
      else onChange(updated.map((x) => x[valueKey]));
    }
  };

  return (
    <div className="mb-3 position-relative" ref={dropdownRef}>
      {label && (
        <Label className="form-label" required={required}>
          {label}
        </Label>
      )}

      {/* MAIN BUTTON */}
      <button
        type="button"
        className={`select2-icons form-select d-flex align-items-center justify-content-between ${
          open ? "show" : ""
        }`}
        onClick={() => setOpen((prev) => !prev)}
      >
        <span className={`text-truncate ${!displayText ? "text-muted" : ""}`}>
          {displayText}
        </span>
      </button>

      {/* DROPDOWN */}
      {open && (
        <ul
          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            zIndex: 1050,
            marginTop: "2px",
            borderRadius: "0.375rem",
            overflow: "hidden",
          }}
        >
          <div className="p-1">
            <input
              type="search"
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
              className="form-control form-control-sm"
              placeholder="Search..."
            />
          </div>

          {isLoading && (
            <li className="dropdown-item text-muted text-center">Loading...</li>
          )}

          {!isLoading && options.length === 0 && (
            <li className="dropdown-item text-muted text-center">
              No results found
            </li>
          )}

          {!isLoading &&
            options.map((option) => {
              const isActive = isMultiple
                ? selectedList.some((x) => x[valueKey] === option[valueKey])
                : selectedSingle &&
                  selectedSingle[valueKey] === option[valueKey];

              return (
                <li key={option[valueKey]} className="px-1 rounded w-full">
                  <button
                    type="button"
                    className={`dropdown-item rounded d-block text-truncate w-100  ${
                      isActive ? "active" : ""
                    }`}
                    onClick={() => handleSelect(option)}
                  >
                    {getDisplayName(option)}
                  </button>
                </li>
              );
            })}
        </ul>
      )}
    </div>
  );
};

export const SelectFieldSearch = ({
  label = "Select",
  placeholder = "Select ",
  required = false,
  value = null,
  onChange,
  valueKey = "id",
  labelKey = "name",
  disabled = false,
  isFullObject = false,
  isMultiple = false,
  hookParams,
  useFetchHook,
}) => {
  const [searchText, setSearchText] = useState("");
  const debounce = useDebounce(searchText, 300);

  const { data, isLoading } = useFetchHook(...hookParams, debounce);
  const options = data?.data ?? [];
  const [open, setOpen] = useState(false);
  const dropdownRef = useRef(null);

  const getDisplayName = (entity) => {
    if (!entity) return "";
    return `${entity[labelKey] || ""}`.trim();
  };

  /** -----------------------------
   * SELECTED OPTION (SINGLE)
   * ----------------------------- */
  let selectedSingle = null;

  if (!isMultiple) {
    if (isFullObject && value) selectedSingle = value;
    else if (!isFullObject && value)
      selectedSingle = options.find((o) => o[valueKey] === value);
  }

  /** -----------------------------
   * SELECTED OPTION (MULTIPLE)
   * ----------------------------- */
  let selectedList = [];
  if (isMultiple && Array.isArray(value)) {
    if (isFullObject) selectedList = value;
    else {
      selectedList = options.filter((opt) => value.includes(opt[valueKey]));
    }
  }

  /** Main button label */
  const displayText = !isMultiple
    ? getDisplayName(selectedSingle) || placeholder
    : selectedList.length > 0
    ? selectedList.map((e) => getDisplayName(e)).join(", ")
    : placeholder;

  /** -----------------------------
   * HANDLE OUTSIDE CLICK
   * ----------------------------- */
  useEffect(() => {
    const handleClickOutside = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // MERGED OPTIONS TO ENSURE SELECTED VALUE APPEARS EVEN IF NOT IN SEARCH RESULT
  const [mergedOptions, setMergedOptions] = useState([]);

  useEffect(() => {
    let finalList = [...options];

    if (!isMultiple && value && !isFullObject) {
      // already selected option inside options?
      const exists = options.some((o) => o[valueKey] === value);

      // if selected item not found, try to get from props (value) as fallback
      if (!exists && typeof value === "object") {
        finalList.unshift(value);
      }
    }

    if (isMultiple && Array.isArray(value)) {
      value.forEach((val) => {
        const id = isFullObject ? val[valueKey] : val;
        const exists = options.some((o) => o[valueKey] === id);

        if (!exists && typeof val === "object") {
          finalList.unshift(val);
        }
      });
    }

    setMergedOptions(finalList);
  }, [options, value]);

  /** -----------------------------
   * HANDLE SELECT
   * ----------------------------- */
  const handleSelect = (option) => {
    if (!isMultiple) {
      // SINGLE SELECT
      if (isFullObject) onChange(option);
      else onChange(option[valueKey]);
    } else {
      // MULTIPLE SELECT
      let updated = [];

      const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);

      if (exists) {
        // remove
        updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
      } else {
        // add
        updated = [...selectedList, option];
      }

      if (isFullObject) onChange(updated);
      else onChange(updated.map((x) => x[valueKey]));
    }
  };

  return (
    <div className="mb-3 position-relative" ref={dropdownRef}>
      {label && (
        <Label className="form-label" required={required}>
          {label}
        </Label>
      )}

      {/* MAIN BUTTON */}
      <button
        type="button"
        className={`select2-icons form-select d-flex align-items-center justify-content-between  ${
          open ? "show" : ""
        }`}
        disabled={disabled}
        onClick={() => setOpen((prev) => !prev)}
      >
        <span className={`text-truncate ${!displayText ? "text-muted" : ""}`}>
          {displayText}
        </span>
      </button>

      {/* DROPDOWN */}
      {open && (
        <ul
          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded overflow-x-hidden"
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            zIndex: 1050,
            marginTop: "2px",
            borderRadius: "0.375rem",
            overflow: "hidden",
          }}
        >
          <div className="p-1">
            <input
              type="search"
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
              className="form-control form-control-sm"
              placeholder="Search..."
              disabled={disabled}
            />
          </div>

          {isLoading && (
            <li className="dropdown-item text-muted text-center">Loading...</li>
          )}

          {!isLoading && options.length === 0 && (
            <li className="dropdown-item text-muted text-center">
              No results found
            </li>
          )}

          {!isLoading &&
            options.map((option) => {
              const isActive = isMultiple
                ? selectedList.some((x) => x[valueKey] === option[valueKey])
                : selectedSingle &&
                  selectedSingle[valueKey] === option[valueKey];

              return (
                <li key={option[valueKey]}>
                  <button
                    type="button"
                    className={`dropdown-item ${isActive ? "active" : ""}`}
                    onClick={() => handleSelect(option)}
                  >
                    {getDisplayName(option)}
                  </button>
                </li>
              );
            })}
        </ul>
      )}
    </div>
  );
};