import { useEffect, useId, useRef, useState } from "react";
import type { KeyboardEvent } from "react";
import { Patient } from "fhir/r4";
import { LoaderCircle, Search } from "lucide-react";
import { usePatientServiceContext, useFhirServiceContext } from "../../../services";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "../../../components/ui/dialog.tsx";
import { formatFhirHumanName } from "../../../utils/fhirHumanName.tsx";
import { isRefusedRead } from "../../../utils/fetchFailureMessage";
import { PatientMark } from "./PatientMark.tsx";
import { patientSearchResultLine } from "./patientSearchResult";
import "./ReceptionistPatientSearchDialog.css";

interface ReceptionistPatientSearchDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSelectPatient: (patientId: string) => void;
}

const MIN_QUERY = 2;

// Every answer carries the query it answers, so a slow reply for "ad" can never stand under "ada".
type SearchAnswer =
  | { query: string; status: "ready"; patients: Patient[]; hiddenInactive: number; hiddenMerged: number }
  | { query: string; status: "failed"; refused: boolean };

const hiddenRecordsNote = (inactive: number, merged: number): string | undefined => {
  if (merged > 0) {
    return merged === 1
      ? "A matching record was found, but it was merged into another account. Search for that account instead."
      : `${merged} matching records were found, but they were merged into other accounts. Search for those accounts instead.`;
  }
  if (inactive > 0) {
    return inactive === 1
      ? "A matching record was found, but it is inactive. Ask an administrator to reactivate it."
      : `${inactive} matching records were found, but they are inactive. Ask an administrator to reactivate them.`;
  }
  return undefined;
};

// The parent remounts it by key to start over; choosing a patient keeps the query for Back.
export default function ReceptionistPatientSearchDialog({
  open,
  onOpenChange,
  onSelectPatient,
}: ReceptionistPatientSearchDialogProps) {
  const { searchPatients } = usePatientServiceContext();
  const { unpackBundle } = useFhirServiceContext();
  const listId = useId();

  const [term, setTerm] = useState("");
  const [attempt, setAttempt] = useState(0);
  const [answer, setAnswer] = useState<SearchAnswer | undefined>();
  const [active, setActive] = useState(0);
  // Escape collapses the list first (the dialog leaves Escape to an expanded combobox); typing opens it again.
  const [collapsed, setCollapsed] = useState(false);
  const latest = useRef(0);
  const searchInput = useRef<HTMLInputElement>(null);

  const query = term.trim();

  useEffect(() => {
    if (query.length < MIN_QUERY) return;
    const ticket = ++latest.current;
    const handle = setTimeout(async () => {
      try {
        const bundle = await searchPatients(query);
        if (ticket !== latest.current) return;
        setAnswer({
          query,
          status: "ready",
          patients: unpackBundle(bundle),
          hiddenInactive: bundle.excludedInactiveCount ?? 0,
          hiddenMerged: bundle.excludedMergedCount ?? 0,
        });
      } catch (error) {
        if (ticket !== latest.current) return;
        console.error("Patient search failed:", error);
        setAnswer({ query, status: "failed", refused: isRefusedRead(error) });
      }
    }, 300);

    return () => {
      clearTimeout(handle);
      // A reply to a query nobody is looking at any more is dropped when it lands.
      if (ticket === latest.current) latest.current++;
    };
  }, [query, attempt, searchPatients, unpackBundle]);

  // Only the answer to what is in the box right now is ever shown.
  const current = query.length >= MIN_QUERY && answer?.query === query ? answer : undefined;
  const patients = current?.status === "ready" ? current.patients : [];

  useEffect(() => setActive(0), [current]);

  const choose = (patient: Patient | undefined) => {
    if (patient?.id) onSelectPatient(patient.id);
  };

  const expanded = patients.length > 0 && !collapsed;

  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Escape" && expanded) {
      setCollapsed(true);
      return;
    }
    if (!expanded) return;
    if (event.key === "ArrowDown") {
      event.preventDefault();
      setActive((index) => Math.min(index + 1, patients.length - 1));
    } else if (event.key === "ArrowUp") {
      event.preventDefault();
      setActive((index) => Math.max(index - 1, 0));
    } else if (event.key === "Enter") {
      event.preventDefault();
      choose(patients[active]);
    }
  };

  const hiddenNote =
    current?.status === "ready" && patients.length === 0
      ? hiddenRecordsNote(current.hiddenInactive, current.hiddenMerged)
      : undefined;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="ahr-psearch"
        showCloseButton={false}
        // The dialog opens straight into its search field.
        onOpenAutoFocus={(event) => {
          event.preventDefault();
          searchInput.current?.focus();
        }}
      >
        <DialogTitle className="ahr-psearch__title">Search patients</DialogTitle>
        {/* The title says it all; the description is for screen readers. */}
        <DialogDescription className="sr-only">
          Search for a patient by name, full phone number or date of birth.
        </DialogDescription>

        <div className="ahr-psearch__body">
          <label className="ak-field ak-field-shell ahr-psearch__field">
            <Search aria-hidden="true" />
            <input
              ref={searchInput}
              value={term}
              onChange={(event) => {
                setTerm(event.target.value);
                setCollapsed(false);
              }}
              onKeyDown={onKeyDown}
              placeholder="Name, full phone number, or date of birth"
              aria-label="Search patients"
              role="combobox"
              aria-expanded={expanded}
              aria-controls={listId}
              aria-activedescendant={expanded ? `${listId}-${active}` : undefined}
            />
          </label>

          {query.length < MIN_QUERY ? (
            <p className="ahr-psearch__hint">Type at least 2 characters to search.</p>
          ) : !current ? (
            <p className="ahr-psearch__hint" role="status">
              <LoaderCircle className="animate-spin" aria-hidden="true" />
              Searching…
            </p>
          ) : current.status === "failed" ? (
            current.refused ? (
              <p className="ahr-psearch__hint ahr-psearch__hint--failed" role="alert">
                You do not have access to search this practice&apos;s patients.
              </p>
            ) : (
              <div className="ahr-psearch__hint ahr-psearch__hint--failed" role="alert">
                <span>The search did not finish, so we cannot say who matches.</span>
                <button
                  type="button"
                  className="btn btn-blue-ghost-sm"
                  onClick={() => {
                    setAnswer(undefined);
                    setAttempt((count) => count + 1);
                  }}
                >
                  Try again
                </button>
              </div>
            )
          ) : patients.length === 0 ? (
            <p className="ahr-psearch__hint" role="status">
              {hiddenNote ?? `No patients match “${query}”.`}
            </p>
          ) : collapsed ? null : (
            <ul className="ahr-psearch__results" id={listId} role="listbox" aria-label="Matching patients">
              {patients.map((patient, index) => {
                const name = formatFhirHumanName(patient.name, { emptyText: "Unnamed patient" });
                return (
                  <li
                    key={patient.id}
                    id={`${listId}-${index}`}
                    role="option"
                    aria-selected={index === active}
                    className="ahr-psearch__row"
                    onMouseEnter={() => setActive(index)}
                    onClick={() => choose(patient)}
                  >
                    <PatientMark name={name} photo={patient.photo?.[0]} />
                    <span className="ahr-psearch__name">{name}</span>
                    <span className="ahr-psearch__sub">{patientSearchResultLine(patient)}</span>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}