import { useCallback, useEffect, useRef, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import type { Patient } from "fhir/r4";
import { Plus, Search, UserPlus } from "lucide-react";

import { FRONT_DESK_HOME, FRONT_DESK_APPOINTMENTS, type FrontDeskActionGrants } from "./frontDeskHeaderAction";
import ReceptionistPatientSearchDialog from "../../pages/DashboardPage/ReceptionistHomePage/ReceptionistPatientSearchDialog.tsx";
import ReceptionistRegisterPatientDialog from "../../pages/DashboardPage/ReceptionistHomePage/ReceptionistRegisterPatientDialog.tsx";
import FrontDeskPatientQuickView from "../../pages/DashboardPage/ReceptionistHomePage/FrontDeskPatientQuickView.tsx";

type QuickView = { patientId: string; known?: Patient; fromSearch: boolean };

// Search and Register open over the current page; Book opens on the overview, which owns the board, or over Appointments.
// Each action shows only when the caller is granted it; Book opens over Appointments outside the front desk.
export const FrontDeskHeaderActions = ({ grants, frontDesk }: { grants: FrontDeskActionGrants; frontDesk: boolean }) => {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const [searchOpen, setSearchOpen] = useState(false);
  // A new key starts the search over; choosing a patient keeps it for Back.
  const [searchRun, setSearchRun] = useState(0);
  const [registerOpen, setRegisterOpen] = useState(false);
  const [quickView, setQuickView] = useState<QuickView | undefined>();
  const here = useRef(pathname);
  here.current = pathname;
  // Where Register was opened, so a registration that answers after the desk has moved on opens nothing.
  const registerOpenedOn = useRef<string>();

  // A patient detail belongs to the page it opened over; going elsewhere shows that page, not the old detail.
  useEffect(() => { setQuickView(undefined); }, [pathname]);

  const openSearch = useCallback(() => {
    setQuickView(undefined);
    setSearchRun((run) => run + 1);
    setSearchOpen(true);
  }, []);

  // `/` opens search from anywhere, but never while the receptionist is typing.
  useEffect(() => {
    if (!grants.search) return undefined;
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key !== "/" || event.ctrlKey || event.metaKey || event.altKey) return;
      const target = event.target as HTMLElement | null;
      const tag = target?.tagName;
      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target?.isContentEditable) return;
      event.preventDefault();
      openSearch();
    };

    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [openSearch, grants.search]);

  return (
    <div className="ak-frame-desk-actions" data-testid="front-desk-header-actions">
      {/* A button shaped like a field: the matching lives in the search dialog. */}
      {grants.search && (
        <button
          type="button"
          className="flex min-w-0 flex-1 items-center gap-2 rounded-[7px] border border-[var(--line)] bg-[var(--paper)] px-2.5 py-1.5 text-left text-[12.5px] text-faint"
          onClick={openSearch}
        >
          <Search size={14} className="shrink-0" aria-hidden="true" />
          <span className="truncate lg:hidden">Search</span>
          <span className="hidden truncate lg:inline">Search name, phone, or date of birth</span>
          <kbd className="ml-auto rounded border border-[var(--line)] bg-[var(--surface)] px-[5px] font-[inherit] text-[10.5px] text-faint">
            /
          </kbd>
        </button>
      )}

      {grants.book && (
        <button
          type="button"
          className="btn btn-blue ak-frame-desk-action"
          onClick={() => navigate(!frontDesk || pathname === FRONT_DESK_APPOINTMENTS ? FRONT_DESK_APPOINTMENTS : FRONT_DESK_HOME, { state: { frontDeskAction: "book" } })}
          aria-label="Book"
          title="Book"
        >
          <Plus aria-hidden="true" />
          <span className="hidden lg:inline">Book</span>
        </button>
      )}

      {grants.register && (
        <button
          type="button"
          className="btn btn-blue-ghost ak-frame-desk-action"
          onClick={() => {
            setQuickView(undefined);
            registerOpenedOn.current = pathname;
            setRegisterOpen(true);
          }}
          aria-label="Register"
          title="Register"
        >
          <UserPlus aria-hidden="true" />
          <span className="hidden lg:inline">Register</span>
        </button>
      )}

      <ReceptionistPatientSearchDialog
        key={searchRun}
        open={searchOpen}
        onOpenChange={setSearchOpen}
        onSelectPatient={(patientId) => {
          setSearchOpen(false);
          setQuickView({ patientId, fromSearch: true });
        }}
      />

      <ReceptionistRegisterPatientDialog
        open={registerOpen}
        onOpenChange={setRegisterOpen}
        onRegistered={(patient) => {
          setRegisterOpen(false);
          if (patient.id && registerOpenedOn.current === here.current) {
            setQuickView({ patientId: patient.id, known: patient, fromSearch: false });
          }
        }}
      />

      {quickView && (
        <FrontDeskPatientQuickView
          key={quickView.patientId}
          patientId={quickView.patientId}
          known={quickView.known}
          onClose={() => setQuickView(undefined)}
          onBack={quickView.fromSearch
            ? () => {
              setQuickView(undefined);
              setSearchOpen(true);
            }
            : undefined}
          backLabel={quickView.fromSearch ? "Back to search" : undefined}
        />
      )}
    </div>
  );
};

export default FrontDeskHeaderActions;