import { useState, useEffect, useRef } from "react";
import { IValueSet, useValueSetServiceContext } from "../../services";
import { Input } from "../ui/input.tsx";
import { isLoincTerm } from "../../utils/observationPanelValue";

interface LoincCodeSearchProps {
  onSelect: (coding: IValueSet) => void;
  placeholder?: string;
  disabled?: boolean;
}

const MIN_SEARCH_CHARS = 2;
const LoincCodeSearch = ({
  onSelect,
  placeholder = "Search LOINC codes (e.g. blood pressure)...",
  disabled = false,
}: LoincCodeSearchProps) => {
  const { searchLoincCodesWithStatus } = useValueSetServiceContext();
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<IValueSet[]>([]);
  const [searching, setSearching] = useState(false);
  // Its own state, never folded into an empty result list. See the note on the render below.
  const [unavailable, setUnavailable] = useState(false);
  const searchIdRef = useRef(0);

  useEffect(() => {
    if (query.trim().length < MIN_SEARCH_CHARS) {
      setResults([]);
      setSearching(false);
      setUnavailable(false);
      return;
    }
    const currentId = ++searchIdRef.current;
    setSearching(true);
    const timer = setTimeout(async () => {
      // A code picked here codes a result, so only LOINC terms are offered, never Parts (LP...).
      const outcome = await searchLoincCodesWithStatus(query.trim(), undefined, true);
      if (currentId === searchIdRef.current) {
        setResults(outcome.outcome === "ok" ? outcome.results.filter((result) => isLoincTerm(result.code)) : []);
        setUnavailable(outcome.outcome === "unavailable");
        setSearching(false);
      }
    }, 300);
    return () => clearTimeout(timer);
  }, [query, searchLoincCodesWithStatus]);

  const pick = (coding: IValueSet) => {
    searchIdRef.current += 1;
    setQuery("");
    setResults([]);
    setSearching(false);
    setUnavailable(false);
    onSelect(coding);
  };

  return (
    <div className="space-y-1">
      <Input
        value={query}
        disabled={disabled}
        placeholder={placeholder}
        onChange={(e) => setQuery(e.target.value)}
      />
      {searching && (
        <div className="text-sm text-muted-foreground">Searching…</div>
      )}
      {/* A LOOKUP THAT FAILED IS NOT A CODE THAT DOES NOT EXIST, and this screen used to say the
          second when the first happened -- the search swallowed its own failure and returned an
          empty list, which rendered as "No LOINC codes found".

          THE CONSEQUENCE IS CLINICAL, not cosmetic. A practitioner told the code does not exist
          records free text instead, and the result is filed uncoded: nothing can match it to the
          order, trend it, or compare it to a reference range afterwards. Worse, they may conclude
          the test itself is not one this system knows about.

          The two messages are therefore separate states, and the failure says what to do next. */}
      {!searching && unavailable && (
        <div className="text-sm text-secondary">
          The code service could not be reached, so we cannot say whether a code exists for
          "{query.trim()}". Try again, or enter the name as free text.
        </div>
      )}
      {!searching &&
        !unavailable &&
        query.trim().length >= MIN_SEARCH_CHARS &&
        results.length === 0 && (
          <div className="text-sm text-muted-foreground">
            No LOINC codes found for "{query.trim()}".
          </div>
        )}
      {!searching && results.length > 0 && (
        <ul className="max-h-48 overflow-y-auto rounded-md border bg-white">
          {results.map((result) => (
            <li key={result.code}>
              <button
                type="button"
                className="flex w-full items-start justify-between gap-3 border-b px-3 py-2 text-left text-sm last:border-b-0 hover:bg-muted"
                onClick={() => pick(result)}
              >
                {/* The whole name, wrapped: its end (specimen, method) is what tells two concepts apart. */}
                <span className="min-w-0 break-words">{result.display}</span>
                <span className="shrink-0 text-xs text-muted-foreground">
                  LOINC {result.code}
                </span>
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default LoincCodeSearch;