import React, { useEffect, useMemo, useRef, useState } from 'react';
import './fields.css';

export type SearchableMultiSelectItem = {
  value: string;
  label: string;
  description?: string;
  meta?: string;
  inactive?: boolean;
};

type SearchableMultiSelectProps = {
  label?: string;
  description?: string;
  value: string[];
  items: SearchableMultiSelectItem[];
  onChange: (values: string[]) => void;
  placeholder?: string;
  searchPlaceholder?: string;
  loading?: boolean;
  error?: string | null;
  emptyMessage?: string;
  noResultsMessage?: string;
};

export const SearchableMultiSelect: React.FC<SearchableMultiSelectProps> = ({
  label,
  description,
  value,
  items,
  onChange,
  placeholder = 'Select options…',
  searchPlaceholder = 'Search…',
  loading = false,
  error = null,
  emptyMessage = 'No options are available.',
  noResultsMessage = 'No matching options found.',
}) => {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');

  const selectedLookup = useMemo(() => new Set(value), [value]);

  const selectedItems = useMemo(
    () => value.map((selectedValue) => items.find((item) => item.value === selectedValue)).filter(Boolean) as SearchableMultiSelectItem[],
    [items, value]
  );

  const filteredItems = useMemo(() => {
    const normalizedQuery = query.trim().toLowerCase();

    return items.filter((item) => {
      if (selectedLookup.has(item.value)) {
        return false;
      }

      if (!normalizedQuery) {
        return true;
      }

      return [item.label, item.meta, item.description]
        .filter(Boolean)
        .some((part) => (part as string).toLowerCase().includes(normalizedQuery));
    });
  }, [items, query, selectedLookup]);

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

    document.addEventListener('mousedown', handlePointerDown);

    return () => {
      document.removeEventListener('mousedown', handlePointerDown);
    };
  }, []);

  const addValue = (nextValue: string) => {
    if (!selectedLookup.has(nextValue)) {
      onChange([...value, nextValue]);
    }
    setQuery('');
    inputRef.current?.focus();
  };

  const removeValue = (nextValue: string) => {
    onChange(value.filter((currentValue) => currentValue !== nextValue));
  };

  const hasItems = items.length > 0;

  return (
    <div className="ips-field-group">
      {label && <div className="ips-field-label">{label}</div>}
      <div
        ref={rootRef}
        className={`ips-searchable-multiselect${open ? ' is-open' : ''}`}
      >
        <div
          role="button"
          tabIndex={0}
          className="ips-searchable-multiselect__control"
          onClick={() => {
            setOpen((current) => !current);
            window.setTimeout(() => inputRef.current?.focus(), 0);
          }}
          onKeyDown={(event) => {
            if (event.key === 'Enter' || event.key === ' ') {
              event.preventDefault();
              setOpen((current) => !current);
              window.setTimeout(() => inputRef.current?.focus(), 0);
            }
          }}
        >
          <div className="ips-searchable-multiselect__chips">
            {selectedItems.map((item) => (
              <span key={item.value} className="ips-tag-chip">
                {item.label}
                <button
                  type="button"
                  className="ips-tag-chip__remove"
                  onClick={(event) => {
                    event.stopPropagation();
                    removeValue(item.value);
                  }}
                  aria-label={`Remove ${item.label}`}
                >
                  ×
                </button>
              </span>
            ))}
            {!selectedItems.length && (
              <span className="ips-searchable-multiselect__placeholder">{placeholder}</span>
            )}
          </div>
          <span className="ips-searchable-multiselect__caret" aria-hidden="true">
            {open ? '▴' : '▾'}
          </span>
        </div>

        {open && (
          <div className="ips-searchable-multiselect__menu">
            <div className="ips-searchable-multiselect__search">
              <input
                ref={inputRef}
                type="text"
                value={query}
                onChange={(event) => setQuery(event.target.value)}
                placeholder={searchPlaceholder}
                className="ips-searchable-multiselect__input"
              />
            </div>

            <div className="ips-searchable-multiselect__options">
              {loading && <div className="ips-searchable-multiselect__empty">Loading options…</div>}
              {!loading && error && (
                <div className="ips-searchable-multiselect__empty ips-searchable-multiselect__empty--error">
                  {error}
                </div>
              )}
              {!loading && !error && !hasItems && (
                <div className="ips-searchable-multiselect__empty">{emptyMessage}</div>
              )}
              {!loading && !error && hasItems && !filteredItems.length && (
                <div className="ips-searchable-multiselect__empty">
                  {query.trim() ? noResultsMessage : 'All options are already selected.'}
                </div>
              )}
              {!loading &&
                !error &&
                filteredItems.map((item) => (
                  <button
                    key={item.value}
                    type="button"
                    className={`ips-searchable-multiselect__option${item.inactive ? ' is-inactive' : ''}`}
                    onMouseDown={(event) => {
                      event.preventDefault();
                      addValue(item.value);
                    }}
                  >
                    <span className="ips-searchable-multiselect__option-copy">
                      <span className="ips-searchable-multiselect__option-label">{item.label}</span>
                      {(item.meta || item.description) && (
                        <span className="ips-searchable-multiselect__option-meta">
                          {item.meta ? <strong>{item.meta}</strong> : null}
                          {item.meta && item.description ? ' • ' : null}
                          {item.description ?? ''}
                        </span>
                      )}
                    </span>
                  </button>
                ))}
            </div>
          </div>
        )}
      </div>
      {description && <div className="ips-field-description">{description}</div>}
    </div>
  );
};