unis_crm/frontend/src/components/AdaptiveSelect.tsx

import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Check, ChevronDown, X } from "lucide-react";
import { cn } from "@/lib/utils";

export type AdaptiveSelectOption = {
  value: string;
  label: string;
  disabled?: boolean;
};

type AdaptiveSelectBaseProps = {
  options: AdaptiveSelectOption[];
  placeholder?: string;
  sheetTitle?: string;
  disabled?: boolean;
  className?: string;
  searchable?: boolean;
  searchPlaceholder?: string;
};

type AdaptiveSelectSingleProps = AdaptiveSelectBaseProps & {
  multiple?: false;
  value?: string;
  onChange: (value: string) => void;
};

type AdaptiveSelectMultipleProps = AdaptiveSelectBaseProps & {
  multiple: true;
  value?: string[];
  onChange: (value: string[]) => void;
};

type AdaptiveSelectProps = AdaptiveSelectSingleProps | AdaptiveSelectMultipleProps;

function useIsMobileViewport() {
  const [isMobile, setIsMobile] = useState(() => {
    if (typeof window === "undefined") {
      return false;
    }
    return window.matchMedia("(max-width: 639px)").matches;
  });

  useEffect(() => {
    if (typeof window === "undefined") {
      return;
    }

    const mediaQuery = window.matchMedia("(max-width: 639px)");
    const handleChange = () => setIsMobile(mediaQuery.matches);
    handleChange();

    if (typeof mediaQuery.addEventListener === "function") {
      mediaQuery.addEventListener("change", handleChange);
      return () => mediaQuery.removeEventListener("change", handleChange);
    }

    mediaQuery.addListener(handleChange);
    return () => mediaQuery.removeListener(handleChange);
  }, []);

  return isMobile;
}

export function AdaptiveSelect({
  options,
  placeholder = "请选择",
  sheetTitle,
  disabled = false,
  className,
  searchable = false,
  searchPlaceholder = "请输入关键字搜索",
  value,
  multiple = false,
  onChange,
}: AdaptiveSelectProps) {
  const [open, setOpen] = useState(false);
  const [searchKeyword, setSearchKeyword] = useState("");
  const containerRef = useRef<HTMLDivElement | null>(null);
  const isMobile = useIsMobileViewport();
  const selectedValues = multiple
    ? Array.isArray(value) ? value : []
    : typeof value === "string" && value ? [value] : [];
  const selectedLabel = selectedValues.length > 0
    ? selectedValues
        .map((selectedValue) => options.find((option) => option.value === selectedValue)?.label)
        .filter((label): label is string => Boolean(label))
        .join("、")
    : placeholder;
  const normalizedSearchKeyword = searchKeyword.trim().toLowerCase();
  const visibleOptions = searchable && normalizedSearchKeyword
    ? options.filter((option) => {
        const label = option.label.toLowerCase();
        const optionValue = option.value.toLowerCase();
        return label.includes(normalizedSearchKeyword) || optionValue.includes(normalizedSearchKeyword);
      })
    : options;

  useEffect(() => {
    if (!open || isMobile) {
      return;
    }

    const handlePointerDown = (event: MouseEvent) => {
      if (!containerRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    };

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpen(false);
      }
    };

    document.addEventListener("mousedown", handlePointerDown);
    document.addEventListener("keydown", handleEscape);
    return () => {
      document.removeEventListener("mousedown", handlePointerDown);
      document.removeEventListener("keydown", handleEscape);
    };
  }, [isMobile, open]);

  useEffect(() => {
    if (!open || !isMobile) {
      return;
    }

    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = previousOverflow;
    };
  }, [isMobile, open]);

  useEffect(() => {
    if (!open && searchKeyword) {
      setSearchKeyword("");
    }
  }, [open, searchKeyword]);

  const handleSelect = (nextValue: string) => {
    if (multiple) {
      const currentValues = Array.isArray(value) ? value : [];
      const nextValues = currentValues.includes(nextValue)
        ? currentValues.filter((item) => item !== nextValue)
        : [...currentValues, nextValue];
      (onChange as (value: string[]) => void)(nextValues);
      return;
    }

    (onChange as (value: string) => void)(nextValue);
    setOpen(false);
  };

  const renderOption = (option: AdaptiveSelectOption) => {
    const isSelected = multiple
      ? selectedValues.includes(option.value)
      : option.value === value;
    return (
      <button
        key={`${option.value}-${option.label}`}
        type="button"
        disabled={option.disabled}
        onClick={() => handleSelect(option.value)}
        className={cn(
          "flex w-full items-center justify-between rounded-xl px-3 py-3 text-left text-sm transition-colors",
          isSelected
            ? "bg-violet-600 text-white shadow-sm"
            : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800",
          option.disabled ? "cursor-not-allowed opacity-50" : "",
        )}
      >
        <span className="break-anywhere">{option.label}</span>
        {isSelected ? <Check className="h-4 w-4 shrink-0" /> : null}
      </button>
    );
  };

  return (
    <div ref={containerRef} className="relative">
      <button
        type="button"
        disabled={disabled}
        onClick={() => {
          if (!disabled) {
            setOpen((current) => !current);
          }
        }}
        className={cn(
          "crm-btn-sm crm-input-text flex w-full items-center justify-between border border-slate-200 bg-white text-left outline-none transition-colors hover:border-slate-300 focus:border-violet-500 focus:ring-1 focus:ring-violet-500 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-800 dark:bg-slate-900/50 dark:hover:border-slate-700",
          className,
        )}
      >
        <span className={selectedValues.length > 0 ? "break-anywhere text-slate-900 dark:text-white" : "crm-field-note"}>
          {selectedLabel}
        </span>
        <ChevronDown className={cn("h-4 w-4 shrink-0 text-slate-400 transition-transform", open ? "rotate-180" : "")} />
      </button>

      <AnimatePresence>
        {open && !isMobile ? (
          <motion.div
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 8 }}
            className="absolute z-30 mt-2 w-full rounded-2xl border border-slate-200 bg-white p-2 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
          >
            {searchable ? (
              <div className="mb-2">
                <input
                  type="text"
                  value={searchKeyword}
                  onChange={(event) => setSearchKeyword(event.target.value)}
                  placeholder={searchPlaceholder}
                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700 outline-none transition-colors focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-800/70 dark:text-slate-100"
                />
              </div>
            ) : null}
            <div className="max-h-72 space-y-1 overflow-y-auto pr-1">
              {visibleOptions.length > 0 ? visibleOptions.map(renderOption) : (
                <div className="rounded-xl px-3 py-6 text-center text-sm text-slate-500 dark:text-slate-400">
                  未找到匹配选项
                </div>
              )}
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>

      <AnimatePresence>
        {open && isMobile ? (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 z-[120] bg-slate-900/35 backdrop-blur-sm dark:bg-slate-950/70"
              onClick={() => setOpen(false)}
            />
            <motion.div
              initial={{ opacity: 0, y: 24 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 24 }}
              className="fixed inset-x-0 bottom-0 z-[130] px-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-3"
            >
              <div className="mx-auto w-full max-w-lg rounded-3xl border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-900">
                <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
                  <div>
                    <p className="text-base font-semibold text-slate-900 dark:text-white">{sheetTitle || placeholder}</p>
                    <p className="crm-field-note mt-1">{multiple ? "可多选" : "请选择一个选项"}</p>
                  </div>
                  <button
                    type="button"
                    onClick={() => setOpen(false)}
                    className="rounded-full p-2 text-slate-400 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800"
                  >
                    <X className="h-5 w-5" />
                  </button>
                </div>
                <div className="max-h-[60vh] space-y-2 overflow-y-auto px-4 py-4 pb-[calc(1rem+env(safe-area-inset-bottom))]">
                  {searchable ? (
                    <input
                      type="text"
                      value={searchKeyword}
                      onChange={(event) => setSearchKeyword(event.target.value)}
                      placeholder={searchPlaceholder}
                      className="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 outline-none transition-colors focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-800/70 dark:text-slate-100"
                    />
                  ) : null}
                  {visibleOptions.length > 0 ? visibleOptions.map(renderOption) : (
                    <div className="rounded-2xl border border-dashed border-slate-200 px-4 py-6 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
                      未找到匹配选项
                    </div>
                  )}
                  {multiple ? (
                    <button
                      type="button"
                      onClick={() => setOpen(false)}
                      className="mt-2 w-full rounded-2xl bg-violet-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-violet-500"
                    >
                      完成
                    </button>
                  ) : null}
                </div>
              </div>
            </motion.div>
          </>
        ) : null}
      </AnimatePresence>
    </div>
  );
}