import { Appointment } from "fhir/r4";
import { statusLabel } from "../../../../../utils/fhirStatusVocabulary";
import { bookingReasonOf, pastAppointmentBand } from '../../../../../utils/pastAppointmentBand';
import {
  useAppointmentServiceContext,
  useAuthServiceContext,
  usePatientServiceContext,
} from "../../../../../services";
import {
  useFhirAppointmentBroadcast,
  useFhirAppointments,
  useFhirAppointmentTargetedBroadcast,
  useFhirPractitioners,
  useFhirTasks,
} from "../../../../../hooks";
import {
  Clock4,
  House,
  Video,
  X,
} from "lucide-react";
import { Button } from "../../../../../components/ui/button";
import { EmptyState } from "../../../../../components/ui/empty-state";
import { VisitInvitationPanel } from "../../../../../components/VisitInvitation/VisitInvitationPanel.tsx";
import type { VisitSheetAudience } from "../../../../../utils/visitInvitationWords";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "../../../../../components/ui/dialog";
import { Skeleton } from "../../../../../components/ui/skeleton";
import { useCallback, useMemo, useState } from "react";
import { categorizePatientAppointments, isAppointmentHappeningNow } from "../../../../../utils/patientAppointmentCategorization";
import { getAppointmentLocationName } from "../../../../../utils/appointmentLocation";
import {
  appointmentTaskSummary,
  tasksByAppointmentId,
} from "../../../../../utils/appointmentTasks.ts";
import AppointmentTaskList from "../../../../../components/appointments/AppointmentTaskList.tsx";
// ONE implementation of Cancel and Directions, shared with the home's appointment dialog.
import PatientAppointmentActions from "../../../../../components/appointments/PatientAppointmentActions.tsx";
import {
  appointmentLocationId,
  formatLocationAddress,
} from "../../../../../utils/appointmentDirections.ts";
import { isVirtualLocation } from "../../../../../utils/roomLocation";
import { isOrglessPatientsHost } from "../../../../../utils/hostedMount";
import { VideoVisitJoinNotice } from "../../../../../components/appointments/VideoVisitJoinNotice";
import { useFhirLocations } from "../../../../../hooks";
import ReceptionistBookAppointment from "../../../ReceptionistHomePage/ReceptionistBookAppointment";
import { appointmentSubjectLine } from '../../../../../utils/appointmentSubject';
import { appointmentPatientId, resolveAppointmentPractitionerLabel } from '../../../../../utils/appointmentParticipants.ts';
import RecordAuthorizationDialog from '../../../../../components/RecordAuthorizationDialog/RecordAuthorizationDialog.tsx';
import {
  isAwaitingPractice,
  AWAITING_PRACTICE_LABEL,
  AWAITING_PRACTICE_SENTENCE,
} from '../../../../../utils/appointmentAwaitingPractice';
import { DECLINED_BY_PRACTICE_LABEL } from '../../../../../utils/appointmentCancellation';
import { useBookAppointmentDialog } from "../../../../../components/BookAppointmentDialog/BookAppointmentDialogProvider.tsx";
import { PracticeMark } from "../../../MyProvidersPage/OrgListCard.tsx";
import { InboxAvatar } from "../../../MessagesPage/InboxRow.tsx";
import { usePhotoUrl } from "../../../../../hooks/usePhotoUrl.ts";
import { getFhirPhotoUrl } from "../../../../../utils/fhirPhoto";
import { viewerZoneLabelFor } from "../../../../../utils/practiceTimezone";
import { useAppointmentPractices } from "../../../../../hooks/useAppointmentPractices";
import { useAppointmentSites } from "../../../../../hooks/useAppointmentSites";
import { appointmentPracticeId } from "../../../../../utils/appointmentPractice";
import {
  appointmentDetailDate,
  appointmentDetailTime,
  appointmentRelativeDay,
  appointmentRowWhen,
  appointmentShortDate,
} from "../../../../../utils/appointmentWhen";
import "./PatientAppointments.css";

const NOT_RECORDED = "Practitioner not recorded";
const NO_APPOINTMENTS: Appointment[] = [];

// Their photograph or their initials; never the stock silhouette, which is nobody's face.
const PractitionerMark = ({ name, photo }: { name: string; photo?: import("fhir/r4").Attachment }) => {
  const { url, loading } = usePhotoUrl(photo, "practitioner");
  const real = photo && !loading && url !== getFhirPhotoUrl(null, "practitioner") ? url : undefined;
  return (
    <span className="ahr-appt-docpic">
      <InboxAvatar label={name} imageUrl={real} />
    </span>
  );
};

// `isRoot` marks the patient's own page; the list and panel read the viewer instead.
const PatientAppointments = (_props: { isRoot?: boolean }) => {
  const { userRole, USER_ROLES, actingAs } = useAuthServiceContext();

  // Mounted as the staff chart and as the patient's own list: gate on the viewer, never on `isRoot`.
  const viewerIsPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
  // Whom the visit sheet speaks to: a helper reads somebody else's record, the patient their own, staff the chart.
  const sheetAudience: VisitSheetAudience = actingAs || userRole === USER_ROLES.RELATED_PERSON
    ? { kind: "helper", subjectName: actingAs?.subjectName }
    : viewerIsPatient ? { kind: "self" } : { kind: "staff" };
  // Booking is practice-bound; the org-less patients address has no practice, so it offers none.
  const offersBooking = !isOrglessPatientsHost();
  const { setAppointmentsList } = useAppointmentServiceContext();
  const { loading, error, answered, listIsThisPatients, loadAppointments, appointmentsList } = useFhirAppointments();
  // The patient whose chart this is - only once the list on screen is theirs, so a booking never starts
  // on the previous chart's patient while this one loads.
  const { patientState } = usePatientServiceContext();
  const chartPatient = listIsThisPatients ? patientState : undefined;
  // Loaded once here rather than per open panel.
  const { locationsList } = useFhirLocations();
  const { practitionersList } = useFhirPractitioners();
  const { tasksList } = useFhirTasks();
  const { openBookAppointment } = useBookAppointmentDialog();
  const [showBookingModal, setShowBookingModal] = useState(false);
  // An id resolved against the current list, so a list that no longer holds it closes the panel.
  const [selectedId, setSelectedId] = useState<string | undefined>();

  // A cached list may be another chart's: nothing is shown or called empty until this patient's answers.
  const shownAppointments = useMemo(
    () => (listIsThisPatients ? appointmentsList ?? [] : []),
    [appointmentsList, listIsThisPatients],
  );

  // A patient's own bookings at other practices bring their sites; a staff chart reads only its own.
  const practiceIdOf = useCallback(
    (appointment: Appointment) => appointmentPracticeId(appointment, practitionersList ?? [], locationsList ?? []),
    [practitionersList, locationsList],
  );
  const sites = useAppointmentSites(viewerIsPatient ? shownAppointments : NO_APPOINTMENTS, locationsList ?? [], practiceIdOf);

  const practiceOf = useAppointmentPractices(shownAppointments, practitionersList ?? [], sites, {
    readPatientPractices: viewerIsPatient,
  });

  const categorizedAppointments = useMemo(
    () => categorizePatientAppointments(shownAppointments),
    [shownAppointments],
  );

  const selectedAppointment = selectedId
    ? shownAppointments.find((appointment) => appointment.id === selectedId)
    : undefined;

  // One pass over the whole list, from the resolver the home's card and the front desk read.
  const tasksByAppointment = useMemo(
    () => tasksByAppointmentId(tasksList ?? [], shownAppointments),
    [tasksList, shownAppointments],
  );

  // The patient's own page opens the frame's one booking dialog, which also refuses a proxy who may
  // not book. The staff chart has no frame dialog, so it keeps its own.
  const openBooking = () => {
    if (viewerIsPatient) openBookAppointment();
    else setShowBookingModal(true);
  };

  useFhirAppointmentBroadcast({
    onCreate: (createdAppointment) => {
      setAppointmentsList((currentAppointments) => {
        const appointmentExists = currentAppointments.some(
          (appointment) => appointment.id === createdAppointment.id,
        );

        return appointmentExists
          ? currentAppointments.map((appointment) =>
              appointment.id === createdAppointment.id
                ? createdAppointment
                : appointment,
            )
          : [...currentAppointments, createdAppointment];
      });
    },
    onUpdate: (updatedAppointment) => {
      setAppointmentsList((currentAppointments) => {
        const appointmentExists = currentAppointments.some(
          (appointment) => appointment.id === updatedAppointment.id,
        );

        return appointmentExists
          ? currentAppointments.map((appointment) =>
              appointment.id === updatedAppointment.id
                ? updatedAppointment
                : appointment,
            )
          : [...currentAppointments, updatedAppointment];
      });
    },
    onDelete: (deletedAppointment) => {
      setAppointmentsList((currentAppointments) =>
        currentAppointments.filter(
          (appointment) => appointment.id !== deletedAppointment.id,
        ),
      );
    },
  });

  useFhirAppointmentTargetedBroadcast({
    appointment: selectedAppointment,
    isOpen: Boolean(selectedAppointment),
    onUpdate: (updatedAppointment) => {
      setAppointmentsList((currentAppointments) =>
        currentAppointments.map((appointment) =>
          appointment.id === updatedAppointment.id ? updatedAppointment : appointment,
        ),
      );
    },
    onDelete: () => setSelectedId(undefined),
  });

  // Resolved live from the practitioner list, never the name copied into the booking.
  const getPractitionerName = (appointment: Appointment): string =>
    resolveAppointmentPractitionerLabel(appointment, practitionersList ?? [], "").trim() || NOT_RECORDED;

  const getPractitionerPhoto = (appointment: Appointment) => {
    const reference = appointment.participant
      ?.map((participant) => participant.actor?.reference)
      .find((ref) => ref?.startsWith("Practitioner/"));
    const id = reference?.split("/")[1];
    return id ? practitionersList?.find((item) => item.practitioner.id === id)?.practitioner.photo?.[0] : undefined;
  };

  // What the visit is for, from the one shared helper.
  const getAppointmentType = (appointment: Appointment): string =>
    appointmentSubjectLine(appointment);

  // The appointment's own Location, falling back to its own practice for one that names none.
  const getLocationName = (appointment: Appointment): string =>
    getAppointmentLocationName(appointment, practiceOf(appointment).organization?.name);

  // One answer for the glyph and the join sentence; the building when the Location is not loaded.
  const isVideoVisit = (appointment: Appointment): boolean => {
    const locationId = appointmentLocationId(appointment);
    const location = locationId
      ? sites.find((candidate) => candidate.id === locationId)
      : undefined;

    return Boolean(location && isVirtualLocation(location));
  };

  const LocationGlyph = ({ appointment }: { appointment: Appointment }) =>
    isVideoVisit(appointment) ? (
      <Video className="ahr-appt-glyph" aria-hidden="true" />
    ) : (
      <House className="ahr-appt-glyph" aria-hidden="true" />
    );

  // `undefined` for a place with no usable address, never "": a street with no city is not an address.
  const getLocationAddress = (appointment: Appointment): string | undefined => {
    const locationId = appointmentLocationId(appointment);
    if (!locationId) return undefined;
    return formatLocationAddress(
      sites.find((candidate) => candidate.id === locationId),
    );
  };

  // The row says where, as the deck draws it: "Video visit", else the street address, else the place.
  const getRowWhere = (appointment: Appointment): string =>
    isVideoVisit(appointment)
      ? "Video visit"
      : getLocationAddress(appointment) || getLocationName(appointment);

  const zoneLabelFor = (appointment: Appointment) =>
    appointment.start ? viewerZoneLabelFor(new Date(appointment.start), practiceOf(appointment).zone) : null;

  const hasAppointments =
    categorizedAppointments.upcoming.length > 0 ||
    categorizedAppointments.past.length > 0 ||
    categorizedAppointments.notConfirmed.length > 0;

  const open = (appointment: Appointment) => setSelectedId(appointment.id);

  const AppointmentRow = ({ appointment, upcoming }: { appointment: Appointment; upcoming: boolean }) => {
    const practitionerName = getPractitionerName(appointment);
    const { organization } = practiceOf(appointment);
    const organizationName = organization?.name?.trim() || "";
    const summary = upcoming
      ? appointmentTaskSummary(appointment.id ? tasksByAppointment.get(appointment.id) : undefined)
      : undefined;
    const happening = upcoming && isAppointmentHappeningNow(appointment);
    const relative = happening ? "Happening now" : appointmentRelativeDay(appointment.start);
    return (
      <div
        role="button"
        tabIndex={0}
        data-testid="patient-appointment-row"
        className={[
          "ahr-appt focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
          upcoming && "ahr-appt--up ak-card ak-card--edge",
          upcoming && (isAwaitingPractice(appointment) ? "ak-card--open" : "ak-card--done"),
        ].filter(Boolean).join(" ")}
        onClick={() => open(appointment)}
        onKeyDown={(event: React.KeyboardEvent) => {
          if (event.key !== 'Enter' && event.key !== ' ') return;
          event.preventDefault();
          open(appointment);
        }}
      >
        <span className="ahr-appt-who">
          <b className="ahr-appt-when">{appointmentRowWhen(appointment.start, zoneLabelFor(appointment))}</b>
          <span className="ahr-appt-facts">
            {organization && organizationName && (
              <span className="ahr-appt-org">
                <PracticeMark organization={organization} size="sm" />
                {organizationName}
              </span>
            )}
            <span className={practitionerName === NOT_RECORDED ? "ahr-appt-prac ahr-appt-prac--unres" : "ahr-appt-prac"}>
              {practitionerName}
            </span>
            <span className="ahr-appt-where">
              <LocationGlyph appointment={appointment} />
              <span className="ahr-appt-where-text">{getRowWhere(appointment)}</span>
            </span>
          </span>
          {/* The row says the practice has not agreed yet; a patient reads it without opening it. */}
          {upcoming && isAwaitingPractice(appointment) && (
            <span className="ahr-appt-note ahr-appt-note--open">{AWAITING_PRACTICE_LABEL}</span>
          )}
          {/* Absent means no tasks were assigned, a different fact from all complete. */}
          {summary && (
            <span className={`ahr-appt-note ${summary.done === summary.total ? "" : "ahr-appt-note--open"}`}>
              {summary.sentence}
            </span>
          )}
        </span>
        <span className={`ahr-appt-rel ${happening ? "ahr-appt-rel--now" : ""}`}>{relative}</span>
      </div>
    );
  };

  const detail = selectedAppointment && (() => {
    const appointment = selectedAppointment;
    const upcoming = categorizedAppointments.upcoming.some((candidate) => candidate.id === appointment.id);
    const held = upcoming && isAwaitingPractice(appointment);
    const address = getLocationAddress(appointment);
    const booked = appointmentShortDate(appointment.created);
    const practitionerName = getPractitionerName(appointment);
    const { organization } = practiceOf(appointment);
    const organizationName = organization?.name?.trim() || "";
    const reason = bookingReasonOf(appointment);
    const instruction = (appointment.description as string | undefined)?.trim();
    const tasks = appointment.id ? tasksByAppointment.get(appointment.id) ?? [] : [];
    return (
      <div className="ahr-appt-sheet" key={appointment.id} data-testid="patient-appointment-detail">
        <div
          className={`ahr-appt-status ${held ? "ahr-appt-status--held" : upcoming ? "" : "ahr-appt-status--past"}`}
        >
          <span>{upcoming
            ? held
              ? AWAITING_PRACTICE_SENTENCE
              : appointment.status === "booked"
                ? "Booking Confirmed"
                // The shared words for a status, never the code; an unmapped one says nothing specific.
                : statusLabel(appointment.status) ?? "Upcoming appointment"
            : pastAppointmentBand(appointment.status)}</span>
          <DialogClose className="ahr-appt-close focus-visible:outline-2 focus-visible:outline-offset-2" aria-label="Close appointment details">
            <X aria-hidden="true" />
          </DialogClose>
        </div>
        <div className="ahr-appt-head">
          <div className="ahr-appt-head-d">
            <b className={upcoming ? "" : "ahr-appt-head-past"}>{appointmentDetailDate(appointment.start)}</b>
            {upcoming && (
              <span className={`ahr-appt-rel ${isAppointmentHappeningNow(appointment) ? "ahr-appt-rel--now" : ""}`}>
                {isAppointmentHappeningNow(appointment) ? "Happening now" : appointmentRelativeDay(appointment.start)}
              </span>
            )}
          </div>
          <div className="ahr-appt-head-t">
            <Clock4 className="ahr-appt-glyph" aria-hidden="true" />
            {appointmentDetailTime(appointment.start, zoneLabelFor(appointment))}
          </div>
        </div>
        <div className="ahr-appt-body">
          <div className="ahr-appt-party-list">
            {organization && organizationName && (
              <span className="ahr-appt-party">
                <PracticeMark organization={organization} size="sm" />
                <b>{organizationName}</b>
              </span>
            )}
            <span className="ahr-appt-party">
              {practitionerName === NOT_RECORDED ? null : (
                <PractitionerMark name={practitionerName} photo={getPractitionerPhoto(appointment)} />
              )}
              <b className={practitionerName === NOT_RECORDED ? "ahr-appt-prac--unres" : ""}>{practitionerName}</b>
            </span>
          </div>
          <div className="ahr-appt-pair">
            <div className="ahr-appt-fld">
              <span className="ahr-appt-flab">Location</span>
              <span className="ahr-appt-val">
                <LocationGlyph appointment={appointment} />
                <span>{getLocationName(appointment)}</span>
              </span>
              {address && <span className="ahr-appt-addr">{address}</span>}
            </div>
            {/* `created`, never the visit's own date; omitted when the booking carries none. */}
            {booked && (
              <div className="ahr-appt-fld">
                <span className="ahr-appt-flab">Booked On</span>
                <span className="ahr-appt-val">{booked}</span>
              </div>
            )}
          </div>
          {/* The patient's panel shows the reason for booking, not a visit type or an instruction;
              the staff chart keeps both. */}
          {!viewerIsPatient && (
            <div className="ahr-appt-fld">
              <span className="ahr-appt-flab">Visit Type</span>
              <span className="ahr-appt-val">{getAppointmentType(appointment)}</span>
            </div>
          )}
          {upcoming && (
            <VideoVisitJoinNotice
              isVideoVisit={isVideoVisit(appointment)}
              start={appointment.start as string | undefined}
            />
          )}
          {reason && (
            <div className="ahr-appt-instr">
              <span className="ahr-appt-icap">Reason for booking</span>
              <span className="ahr-appt-ival">{reason}</span>
            </div>
          )}
          {!viewerIsPatient && instruction && (
            <div className="ahr-appt-instr">
              <span className="ahr-appt-icap">Practitioner instruction</span>
              <span className="ahr-appt-ival">{instruction}</span>
            </div>
          )}
          {upcoming && tasks.length > 0 && (
            <div className="ahr-appt-tasks">
              <AppointmentTaskList tasks={tasks} onNavigate={() => setSelectedId(undefined)} />
            </div>
          )}
          {upcoming && (
            <div className="ahr-appt-acts">
              <PatientAppointmentActions
                appointment={appointment}
                locations={sites}
                onClose={() => setSelectedId(undefined)}
                canceller={viewerIsPatient ? "patient" : "practice"}
              />
            </div>
          )}
        </div>
        {/* The patient's own side of the two-party agreement; nothing to agree on a visit already had. */}
        {upcoming && appointment.id && (
          <div className="ahr-appt-extra">
            <VisitInvitationPanel appointmentId={appointment.id} audience={sheetAudience} />
          </div>
        )}
        {/* The same component the calendar mounts, shown where the clinician looks. */}
        {!viewerIsPatient && appointmentPatientId(appointment) && (
          <div className="ahr-appt-extra">
            <h3 className="ahr-appt-extra-title">Authorization to Treat</h3>
            <RecordAuthorizationDialog
              patientId={appointmentPatientId(appointment) as string}
            />
          </div>
        )}
      </div>
    );
  })();

  const sections = (
    <>
      <p className="ahr-appts-sec">Upcoming Appointments</p>
      {/* A declined request is an answer, said once and only while the time it asked for is ahead. */}
      {categorizedAppointments.notConfirmed.length > 0 && (
        <div className="ahr-appts-list ak-card-list" data-testid="patient-appointments-not-confirmed">
          {categorizedAppointments.notConfirmed.map((appointment) => (
            <div key={appointment.id} className="ahr-appt ahr-appt--up ak-card ak-card--edge ak-card--open">
              <span className="ahr-appt-who">
                <b className="ahr-appt-when">Not confirmed</b>
                {/* Joined, so a slot-less request drops its empty parts instead of printing dashes. */}
                <span className="ahr-appt-facts">
                  <span className="ahr-appt-prac-plain">
                    {[
                      getPractitionerName(appointment),
                      appointmentRowWhen(appointment.start, zoneLabelFor(appointment)),
                    ].filter(Boolean).join(" · ")}
                  </span>
                </span>
                <span className="ahr-appt-note">{DECLINED_BY_PRACTICE_LABEL}.</span>
              </span>
            </div>
          ))}
        </div>
      )}
      {categorizedAppointments.upcoming.length === 0 ? (
        <EmptyState
          className="ak-card"
          title="No upcoming appointments yet"
          description={viewerIsPatient
            ? (offersBooking ? 'Book an appointment to get started with your care.' : undefined)
            : 'Book one to get this patient seen again.'}
          data-testid="patient-appointments-upcoming-empty"
          action={offersBooking && (
            <Button onClick={openBooking} className="btn btn-blue">
              Book Appointment
            </Button>
          )}
        />
      ) : (
        <div className="ahr-appts-list ak-card-list">
          {categorizedAppointments.upcoming.map((appointment) => (
            <AppointmentRow key={appointment.id} appointment={appointment} upcoming />
          ))}
        </div>
      )}
      <p className="ahr-appts-sec">Past Appointments</p>
      {categorizedAppointments.past.length === 0 ? (
        <EmptyState
          className="ak-card"
          title="No past appointments yet"
          data-testid="patient-appointments-past-empty"
          action={offersBooking && (
            <Button onClick={openBooking} className="btn btn-blue">
              Book Appointment
            </Button>
          )}
        />
      ) : (
        <div className="ahr-appts-list ahr-appts-list--past">
          {categorizedAppointments.past.map((appointment) => (
            <AppointmentRow key={appointment.id} appointment={appointment} upcoming={false} />
          ))}
        </div>
      )}
    </>
  );

  return (
    <div className="ahr-appts">
      <div className="ahr-appts-head">
        <div>
          <h1 className="ahr-view-title">Appointments</h1>
          {/* Kept although the deck draws none; Spencer, 2026-09-05, asked for these lines back. */}
          <p className="ak-page-title__sub">
            Manage your bookings, view your upcoming visits, and review past
            appointments.
          </p>
        </div>
        {/* No page-level Book button: booking happens from the header's Schedule appointment, and the
            empty states keep their own. */}
      </div>

      {error ? (
        <div className="ak-notice ak-notice--error grid justify-items-start gap-2" role="alert" data-testid="patient-appointments-failed">
          <p><b>Unable to load appointments</b></p>
          <p>Your appointments could not be read. Nothing has changed.</p>
          <Button className="btn btn-blue" onClick={() => void loadAppointments()} disabled={loading}>
            Try again
          </Button>
        </div>
      ) : loading || !answered ? (
        <div data-testid="patient-appointments-loading" aria-busy="true">
          {["Upcoming Appointments", "Past Appointments"].map((title) => (
            <div key={title}>
              <p className="ahr-appts-sec">{title}</p>
              <div className="ahr-appts-list">
                {Array.from({ length: 2 }).map((_, i) => (
                  <div key={i} className="ahr-appt">
                    <span className="ahr-appt-who">
                      <Skeleton className="h-5 w-48" />
                      <Skeleton className="mt-2 h-4 w-full" />
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      ) : !hasAppointments ? (
        /* The one place the both-scopes sentence is true; its siblings are narrower on purpose. */
        <EmptyState
          className="ak-card"
          title="No appointments yet"
          description={viewerIsPatient
            ? (offersBooking ? "No appointments yet. Book an appointment." : undefined)
            : 'This patient has no upcoming or past appointments. Book one to get their care started.'}
          data-testid="patient-appointments-none-empty"
          action={offersBooking && (
            <Button onClick={openBooking} className="btn btn-blue">
              Book Appointment
            </Button>
          )}
        />
      ) : (
        sections
      )}

      <Dialog open={Boolean(selectedAppointment)} onOpenChange={(next) => { if (!next) setSelectedId(undefined); }}>
        <DialogContent className="ahr-appt-dialog w-[448px] p-0" showCloseButton={false}>
          <DialogTitle className="sr-only">Appointment details</DialogTitle>
          <DialogDescription className="sr-only">
            When and where this appointment is, and what you can do about it.
          </DialogDescription>
          {detail}
        </DialogContent>
      </Dialog>

      {/* The staff chart's own booking dialog, mounted once outside the branches so it survives a
          list re-render. The patient's page uses the frame's dialog instead.
          It is the STAFF form on the chart's patient (deck practitioner#s-appointments "Booking":
          patient picked, practitioner "you"). Walked 2026-09-30: this mounted the patient's own
          self-booking screen - "call 911", "Find my service" - in front of a practitioner. */}
      {!viewerIsPatient && (
        <Dialog open={showBookingModal} onOpenChange={setShowBookingModal}>
          <DialogContent className="ahr-desk-booking-dialog">
            <DialogTitle className="sr-only">Book Appointment</DialogTitle>
            <DialogDescription className="sr-only">
              Select a visit service, then confirm the practitioner, date, and time.
            </DialogDescription>
            {showBookingModal && (
              <ReceptionistBookAppointment
                initialPatient={chartPatient}
                onBooked={() => setShowBookingModal(false)}
              />
            )}
          </DialogContent>
        </Dialog>
      )}
    </div>
  );
};
export default PatientAppointments;