import { useState } from "react";
import { useDirtyGuard } from "../../../../hooks/useDirtyReport";
import { Location } from "fhir/r4";
import { FhirLocationDisplay } from "../../../../components";
import { formatFhirCodeableConcept } from "../../../../utils/fhirCodeableConcept.tsx";
import {
  formatSingleAddress,
  normalizeFhirAddress,
} from "../../../../utils/fhirAddress.tsx";
import {
  onlyRooms,
  onlySites,
  onlyVirtual,
  getRoomSiteId,
} from "../../../../utils/roomLocation";
import {
  useFhirLocationBroadcast,
  useFhirLocationTargetedBroadcast,
  useFhirLocations,
} from "../../../../hooks";
import { mayMissRecentWrite } from "../../../../utils/recentWritesUnresolved";
import {
  useAuthServiceContext,
  useLocationServiceContext,
  useStaffPermissionServiceContext,
} from "../../../../services";
import { ChevronRight, MapPin, Pencil, Trash2, DoorOpen, Plus, Video } from 'lucide-react';
import { Sheet, SheetContent, SheetTitle } from "../../../../components/ui/sheet";
import { Skeleton } from "../../../../components/ui/skeleton.tsx";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
} from "../../../../components/ui/alert-dialog";
import EditLocationPage from "./LocationPage/LocationPage";
import AddLocationForm from "./AddLocationForm";
import { OverlayFooter, OverlayFooterHost } from "../../../../components/ui/overlay-actions";
import DiscardChangesDialog from "../../../../components/DiscardChangesDialog/DiscardChangesDialog";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../../../../components/ui/dialog";
import RoomModal from "../../../../modals/RoomModal";
import { PracticeRoomingSwitch } from "./PracticeRoomingSwitch";
import VirtualLocationModal from "../../../../modals/VirtualLocationModal";

const LocationsPage = () => {
  const { userRole, USER_ROLES, wpOrganization } = useAuthServiceContext();
  const { canManage } = useStaffPermissionServiceContext();
  const { deleteLocation, setLocationsList } = useLocationServiceContext();
  const { loading, error, locationsList, locationsBundle, loadLocations } = useFhirLocations();
  // The list may be missing a location saved moments ago: it is shown, but never as complete or as "none".
  const mayBeIncomplete = !loading && !error && mayMissRecentWrite(locationsBundle);
  const [selectedLocation, setSelectedLocation] = useState<Location | null>(
    null,
  );
  const [locationEditor, setLocationEditor] = useState<{
    resourceId: string;
    location?: Location | null;
    setAsPrimaryAddress?: boolean;
  } | null>(null);
  const [addingLocation, setAddingLocation] = useState<{ makePrimary: boolean } | null>(null);
  const addLocationDirty = useDirtyGuard();
  const [confirmDiscardAdd, setConfirmDiscardAdd] = useState(false);
  const [roomEditor, setRoomEditor] = useState<{ room?: Location } | null>(
    null,
  );
  const [deletingRoom, setDeletingRoom] = useState<Location | undefined>();
  const [deletingRoomBusy, setDeletingRoomBusy] = useState(false);
  const [deleteRoomError, setDeleteRoomError] = useState<
    string | undefined
  >();
  const [virtualEditor, setVirtualEditor] = useState<{
    virtualLocation?: Location;
  } | null>(null);
  const [deletingVirtual, setDeletingVirtual] = useState<Location | undefined>();
  const [deletingVirtualBusy, setDeletingVirtualBusy] = useState(false);
  const [deleteVirtualError, setDeleteVirtualError] = useState<
    string | undefined
  >();

  const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(
    userRole as string,
  );

  // Three DISJOINT buckets, one per section below. `sites` is an allowlist, so a virtual location is
  // excluded from it (and from every booking picker) - which is exactly why `virtualLocations` has to
  // exist: without its own section it would be in no bucket and invisible on the only screen that
  // manages it. Pinned by the "exactly one bucket" test in utils/__tests__/roomLocation.test.ts.
  const rooms = onlyRooms(locationsList);
  const sites = onlySites(locationsList);
  const virtualLocations = onlyVirtual(locationsList);
  // Rooms whose `partOf` is missing or points at a site that no longer exists - grouped under
  // "Unassigned" instead of silently dropped.
  const unassignedRooms = rooms.filter((room) => {
    const siteId = getRoomSiteId(room);
    return !siteId || !sites.some((site) => site.id === siteId);
  });

  const primaryAddress = wpOrganization.current?.address?.[0];
  const primaryAddressDisplay = primaryAddress
    ? formatSingleAddress(primaryAddress)
    : "";
  const normalizedPrimaryAddress = normalizeFhirAddress(primaryAddress);
  const primaryLocation = normalizedPrimaryAddress
    ? locationsList.find(
        (location: Location) =>
          normalizeFhirAddress(location.address) === normalizedPrimaryAddress,
      )
    : undefined;
  const secondaryLocationsList = sites.filter(
    (location: Location) =>
      !normalizedPrimaryAddress ||
      normalizeFhirAddress(location.address) !== normalizedPrimaryAddress,
  );

  useFhirLocationBroadcast();
  useFhirLocationTargetedBroadcast({
    location: selectedLocation || undefined,
    isOpen: !!selectedLocation,
    onUpdate: (updatedLocation) => {
      setSelectedLocation(updatedLocation);
    },
    onDelete: () => {
      setSelectedLocation(null);
    },
  });

  const openLocationEditor = (
    location?: Location | null,
    setAsPrimaryAddress = false,
  ) => {
    setLocationEditor({
      resourceId: location?.id || "new",
      location,
      setAsPrimaryAddress,
    });
  };

  const viewLocation = (location: Location) => {
    if (isAuthorizedToEdit()) {
      openLocationEditor(location);
      return;
    }

    setSelectedLocation(location);
  };

  const editLocation = (event: React.MouseEvent, location: Location) => {
    event.stopPropagation();
    openLocationEditor(location);
  };

  const addLocation = () => {
    addLocationDirty.reset();
    setAddingLocation({ makePrimary: !normalizedPrimaryAddress });
  };

  const closeAddLocation = () => {
    if (addLocationDirty.isDirty()) {
      setConfirmDiscardAdd(true);
      return;
    }
    setAddingLocation(null);
  };

  const editPrimaryLocation = (event?: React.MouseEvent) => {
    event?.stopPropagation();
    openLocationEditor(primaryLocation ?? null, true);
  };

  const handleLocationEditorComplete = () => {
    setLocationEditor(null);
    void loadLocations();
  };

  const isAuthorizedToEdit = () => canManage("organization");

  const openRoomEditor = (room?: Location) => {
    setRoomEditor({ room });
  };

  const handleRoomSaved = (savedRoom: Location) => {
    setLocationsList((currentLocations) => {
      const remainingLocations = currentLocations.filter(
        (currentLocation) => currentLocation.id !== savedRoom.id,
      );

      return [...remainingLocations, savedRoom];
    });
    setRoomEditor(null);
  };

  const handleDeleteRoom = async () => {
    if (!deletingRoom) return;

    setDeletingRoomBusy(true);
    setDeleteRoomError(undefined);

    try {
      await deleteLocation(deletingRoom);
      setLocationsList((currentLocations) =>
        currentLocations.filter(
          (currentLocation) => currentLocation.id !== deletingRoom.id,
        ),
      );
      setDeletingRoom(undefined);
    } catch (err) {
      console.error("Failed to delete room:", err);
      setDeleteRoomError("Failed to delete this room. Please try again.");
    } finally {
      setDeletingRoomBusy(false);
    }
  };

  const handleVirtualSaved = (savedVirtualLocation: Location) => {
    setLocationsList((currentLocations) => {
      const remainingLocations = currentLocations.filter(
        (currentLocation) => currentLocation.id !== savedVirtualLocation.id,
      );

      return [...remainingLocations, savedVirtualLocation];
    });
    setVirtualEditor(null);
  };

  const handleDeleteVirtual = async () => {
    if (!deletingVirtual) return;

    setDeletingVirtualBusy(true);
    setDeleteVirtualError(undefined);

    try {
      await deleteLocation(deletingVirtual);
      setLocationsList((currentLocations) =>
        currentLocations.filter(
          (currentLocation) => currentLocation.id !== deletingVirtual.id,
        ),
      );
      setDeletingVirtual(undefined);
    } catch (err) {
      console.error("Failed to delete the telehealth location:", err);
      setDeleteVirtualError(
        "Failed to delete this telehealth location. Please try again.",
      );
    } finally {
      setDeletingVirtualBusy(false);
    }
  };

  // Compact row shared by the per-site groups and the "Unassigned" group below - name + description on the
  // left, Edit/Delete icon buttons on the right (gated the same as the site cards above), mirroring
  // FeesCatalog's row convention (plain icon buttons, red trash icon, confirm-gated delete).
  const renderRoomRow = (room: Location) => (
    <div
      key={room.id}
      className="flex items-center justify-between gap-3 px-2 py-1.5 text-sm"
    >
      <div className="flex items-center gap-2 min-w-0">
        <DoorOpen
          strokeWidth={1}
          size={20}
          className="text-secondary shrink-0"
        />
        <div className="min-w-0 text-start">
          <p className="truncate font-medium">
            {room.name || "Unnamed Room"}
          </p>
          {room.description && (
            <p className="truncate text-secondary text-xs font-normal">
              {room.description}
            </p>
          )}
        </div>
      </div>
      {isAuthorizedToEdit() && (
        <div className="flex items-center gap-1 shrink-0">
          <button
            type="button"
            className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-accent"
            aria-label="Edit room"
            onClick={() => openRoomEditor(room)}
          >
            <Pencil className="h-4 w-4" />
          </button>
          <button
            type="button"
            className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-accent text-destructive"
            aria-label="Delete room"
            onClick={() => {
              setDeleteRoomError(undefined);
              setDeletingRoom(room);
            }}
          >
            <Trash2 className="h-4 w-4" />
          </button>
        </div>
      )}
    </div>
  );

  return (
    <div>
      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
        <div className="min-w-0">
          <h1 className="ak-page-title">Locations</h1>
          <p className="ak-page-title__sub">
            View the primary organization address and any secondary clinic locations.
          </p>
        </div>
        {!isPatient && isAuthorizedToEdit() && (
          <button type="button" className="btn btn-blue" onClick={addLocation}>
            <Plus />
            Add
          </button>
        )}
      </div>


      <div className="ak-page-body overflow-y-auto thin-scrollbar max-h-[calc(100vh-531px)] md:max-h-[calc(100vh-280px)] lg:max-h-[calc(100vh-398px)]">
        {primaryAddressDisplay ? (
          <div
            // - role and tab stop are CONDITIONAL, because the row itself is: its own handler
            // already no-ops for a viewer who cannot edit. Announcing "button" to a screen reader on a row
            // that does nothing is worse than announcing nothing.
            {...(isAuthorizedToEdit() ? { role: 'button', tabIndex: 0 } : {})}
            onClick={() => isAuthorizedToEdit() && editPrimaryLocation()}
            onKeyDown={(event: React.KeyboardEvent) => {
              if (!isAuthorizedToEdit()) return;
              if (event.key !== 'Enter' && event.key !== ' ') return;
              event.preventDefault();
              editPrimaryLocation();
            }}
            className={`group focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rounded flex gap-3 items-center justify-between p-1 ${isAuthorizedToEdit() ? "cursor-pointer hover:bg-muted" : ""}`}
          >
            <div className="flex gap-3 items-center">
              <MapPin
                strokeWidth={1}
                size={50}
                className="bg-blue-50 group-hover:bg-white text-primary rounded p-2 min-w-[50px]"
              />
              <div className="text-start text-sm">
                <div className="flex items-center gap-2">
                  <p className="font-semibold">
                    {primaryLocation?.name ||
                      wpOrganization.current?.name ||
                      "Primary Organization Location"}
                  </p>
                  <span className="chip">
                    Primary
                  </span>
                </div>
                <span className="text-secondary text-sm font-normal">
                  Address: {primaryAddressDisplay}
                </span>
              </div>
            </div>
            {isAuthorizedToEdit() && (
              <button
                type="button"
                className="btn btn-blue-ghost-sm"
                onClick={(event: React.MouseEvent) =>
                  editPrimaryLocation(event)
                }
              >
                <Pencil />
                Edit
              </button>
            )}
          </div>
        ) : isAuthorizedToEdit() ? (
          <button
            type="button"
            onClick={() => editPrimaryLocation()}
            className="rounded flex gap-3 items-center p-2 mb-3 bg-blue-50 border border-blue-100 cursor-pointer hover:bg-blue-100 text-start w-full"
          >
            <MapPin
              strokeWidth={1}
              size={50}
              className="bg-white text-primary rounded p-2 min-w-[50px]"
            />
            <div className="text-start text-sm">
              <p className="text-primary font-semibold">ADD PRIMARY LOCATION</p>
              <span className="text-secondary text-sm font-normal">
                You must set a primary location first.
              </span>
            </div>
          </button>
        ) : null}

        {mayBeIncomplete && (
          <p className="ak-notice mb-4" role="status" data-testid="locations-may-be-incomplete">
            This list may be missing a location saved in the last few minutes. Reload to check again.
          </p>
        )}

        {loading ? (
          <div className="space-y-2">
            {[...Array(5)].map((_, i) => (
              <div
                key={i}
                className="group rounded flex gap-3 p-2 items-center justify-between"
              >
                <div className="flex gap-3 items-center flex-1">
                  <Skeleton className="h-[45px] w-[50px] rounded" />
                  <div className="flex-1 space-y-2 w-full">
                    <Skeleton className="h-5 w-full" />
                    <Skeleton className="h-5 w-full" />
                  </div>
                </div>
                <Skeleton className="h-[45px] w-[50px] rounded" />
              </div>
            ))}
          </div>
        ) : error ? (
          <div className="flex flex-col items-center font-normal justify-center p-8 text-center space-y-5">
            <MapPin className="h-16 w-16 text-secondary mt-6" />
            <div>
              <h3 className="ak-section-title mb-3">
                Could not load locations
              </h3>
              <p className="text-muted-foreground">Try again later.</p>
            </div>
            {/* Was a hand-rolled Tailwind primary button (bg-primary, own padding and
                hover). `btn btn-blue` is the house treatment for exactly this, so the
                bespoke classes go — the same call as LocationPage's deleteButtonStyle. */}
            <button
              type="button"
              className="btn btn-blue"
              onClick={() => window.location.reload()}
            >
              Retry
            </button>
          </div>
        ) : !loading && secondaryLocationsList.length === 0 && !mayBeIncomplete ? (
          <div className="flex flex-col items-center justify-center p-8 text-center space-y-5">
            <MapPin className="h-16 w-16 text-secondary mt-6" />
            <div>
              <h3 className="ak-section-title mb-3">
                No secondary locations found
              </h3>
              <p className="text-secondary">
                Secondary locations are optional. Add one only when this
                organization has another clinic address.
              </p>
            </div>
          </div>
        ) : (
          secondaryLocationsList.length !== 0 && (
            <div className="grid gap-3">
              {secondaryLocationsList.map((location: Location) => {
                const locationType = formatFhirCodeableConcept(
                  location.type?.[0],
                );
                const physicalType = formatFhirCodeableConcept(
                  location.physicalType,
                );
                const address = location.address
                  ? formatSingleAddress(location.address)
                  : "";

                return (
                  <div
                    key={location.id}
                    role="button"
                    tabIndex={0}
                    onClick={() => viewLocation(location)}
                    onKeyDown={(event: React.KeyboardEvent) => {
                      if (event.key !== 'Enter' && event.key !== ' ') return;
                      event.preventDefault();
                      viewLocation(location);
                    }}
                    className="group rounded hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 flex gap-3 items-center justify-between p-1 cursor-pointer"
                  >
                    <div className="flex gap-3 items-center">
                      <MapPin
                        strokeWidth={1}
                        size={50}
                        className="bg-green-50 group-hover:bg-white text-secondary rounded p-2 min-w-[50px]"
                      />
                      <div className="text-start text-sm">
                        <p className="font-semibold">
                          {location.name || "Unnamed Location"}
                        </p>
                        {locationType && (
                          <span className="text-secondary text-sm font-normal">
                            Type: {locationType} · {""}
                          </span>
                        )}
                        {physicalType && (
                          <span className="text-secondary text-sm font-normal">
                            Physical Type: {physicalType} · {""}
                          </span>
                        )}
                        {address && (
                          <span className="text-secondary text-sm font-normal">
                            Address: {address}
                          </span>
                        )}
                      </div>
                    </div>
                    {/* One control per row: an editor's Edit sits at the right edge, as on the primary row;
                        only a viewer, whose row opens the read-only details, gets the chevron. */}
                    {isAuthorizedToEdit() ? (
                      <button
                        type="button"
                        className="btn btn-blue-ghost-sm"
                        onClick={(event: React.MouseEvent) =>
                          editLocation(event, location)
                        }
                      >
                        <Pencil />
                        Edit
                      </button>
                    ) : (
                      <div className="flex gap-3 text-secondary group-hover:text-foreground transition-colors">
                        <ChevronRight
                          size={30}
                          strokeWidth={1}
                          className="hover:text-primary"
                        />
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )
        )}
      </div>

      {!isPatient && (
        <div className="mt-6 space-y-3">
          {wpOrganization?.current && (
            <PracticeRoomingSwitch organization={wpOrganization.current} locations={locationsList ?? []} canManage={isAuthorizedToEdit()} />
          )}
          <div className="flex items-center justify-between gap-2 px-2">
            <div className="text-start">
              <h2 className="ak-section-title">Rooms</h2>
              <p className="ak-page-title__sub">
                Exam rooms belong to a site and can be assigned during
                scheduling.
              </p>
            </div>
            {isAuthorizedToEdit() && (
              <button
                type="button"
                className="btn btn-blue"
                onClick={() => openRoomEditor()}
              >
                <Plus className="h-4 w-4" />
                Add room
              </button>
            )}
          </div>

          {sites.length === 0 && rooms.length === 0 ? (
            <p className="px-2 text-sm text-secondary">
              Add a location first, then assign rooms to it.
            </p>
          ) : (
            <div className="space-y-4 px-2">
              {sites.map((site) => {
                const siteRooms = rooms.filter(
                  (room) => getRoomSiteId(room) === site.id,
                );

                return (
                  <div key={site.id}>
                    <h3 className="ak-section-title">
                      {site.name || "Unnamed Location"}
                    </h3>
                    {siteRooms.length === 0 ? (
                      <p className="text-secondary text-sm font-normal">
                        No rooms yet.
                      </p>
                    ) : (
                      <div className="mt-1 divide-y rounded border">
                        {siteRooms.map((room) => renderRoomRow(room))}
                      </div>
                    )}
                  </div>
                );
              })}

              {unassignedRooms.length > 0 && (
                <div>
                  <h3 className="ak-section-title">
                    Unassigned
                  </h3>
                  <div className="mt-1 divide-y rounded border">
                    {unassignedRooms.map((room) => renderRoomRow(room))}
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {!isPatient && (
        <div className="mt-6 space-y-3">
          <div className="flex items-center justify-between gap-2 px-2">
            <div className="text-start">
              <h2 className="ak-section-title">Telehealth</h2>
              <p className="ak-page-title__sub">
                A virtual place where visits happen by video. It shares the
                practitioner&apos;s existing schedule, so a video visit and an
                in-person one can never take the same slot.
              </p>
            </div>
            {isAuthorizedToEdit() && virtualLocations.length === 0 && (
              <button
                type="button"
                className="btn btn-blue"
                onClick={() => setVirtualEditor({})}
              >
                <Plus className="h-4 w-4" />
                Add telehealth location
              </button>
            )}
          </div>

          {virtualLocations.length === 0 ? (
            <p className="px-2 text-sm text-secondary">
              Not set up. Add it when this practice offers video visits.
            </p>
          ) : (
            <div className="px-2">
              <div className="divide-y rounded border">
                {virtualLocations.map((virtualLocation) => (
                  <div
                    key={virtualLocation.id}
                    className="flex items-center justify-between gap-3 px-2 py-1.5 text-sm"
                  >
                    <div className="flex items-center gap-2 min-w-0">
                      <Video
                        strokeWidth={1}
                        size={20}
                        className="text-secondary shrink-0"
                      />
                      <div className="min-w-0 text-start">
                        <p className="truncate font-medium">
                          {virtualLocation.name || "Telehealth"}
                        </p>
                        {virtualLocation.description && (
                          <p className="truncate text-secondary text-xs font-normal">
                            {virtualLocation.description}
                          </p>
                        )}
                      </div>
                    </div>
                    {isAuthorizedToEdit() && (
                      <div className="flex items-center gap-1 shrink-0">
                        <button
                          type="button"
                          className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-accent"
                          aria-label="Edit telehealth location"
                          onClick={() => setVirtualEditor({ virtualLocation })}
                        >
                          <Pencil className="h-4 w-4" />
                        </button>
                        <button
                          type="button"
                          className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-accent text-destructive"
                          aria-label="Delete telehealth location"
                          onClick={() => {
                            setDeleteVirtualError(undefined);
                            setDeletingVirtual(virtualLocation);
                          }}
                        >
                          <Trash2 className="h-4 w-4" />
                        </button>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {virtualEditor && (
        <VirtualLocationModal
          isOpen={true}
          onClose={() => setVirtualEditor(null)}
          virtualLocation={virtualEditor.virtualLocation}
          organizationId={wpOrganization.current?.id ?? ""}
          onSaved={handleVirtualSaved}
        />
      )}

      <AlertDialog
        open={Boolean(deletingVirtual)}
        onOpenChange={(open) => {
          if (!open && !deletingVirtualBusy) {
            setDeletingVirtual(undefined);
            setDeleteVirtualError(undefined);
          }
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              Delete “{deletingVirtual?.name || "this telehealth location"}”?
            </AlertDialogTitle>
            <AlertDialogDescription>
              Video visits could no longer be booked at this location. This
              can&apos;t be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          {deleteVirtualError && (
            <p className="text-sm text-destructive">{deleteVirtualError}</p>
          )}
          <AlertDialogFooter>
            <AlertDialogCancel className="btn btn-amber" disabled={deletingVirtualBusy}>
              Keep the location
            </AlertDialogCancel>
            <button
              type="button"
              className="btn btn-red"
              disabled={deletingVirtualBusy}
              onClick={() => void handleDeleteVirtual()}
            >
              {deletingVirtualBusy ? "Deleting…" : "Delete"}
            </button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {roomEditor && (
        <RoomModal
          isOpen={true}
          onClose={() => setRoomEditor(null)}
          room={roomEditor.room}
          sites={sites}
          organizationId={wpOrganization.current?.id ?? ""}
          onSaved={handleRoomSaved}
        />
      )}

      <AlertDialog
        open={Boolean(deletingRoom)}
        onOpenChange={(open) => {
          if (!open && !deletingRoomBusy) {
            setDeletingRoom(undefined);
            setDeleteRoomError(undefined);
          }
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              Delete “{deletingRoom?.name || "this room"}”?
            </AlertDialogTitle>
            <AlertDialogDescription>
              This removes the room. It can no longer be assigned during
              scheduling. This can&apos;t be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          {deleteRoomError && (
            <p className="text-sm text-destructive">{deleteRoomError}</p>
          )}
          <AlertDialogFooter>
            <AlertDialogCancel className="btn btn-amber" disabled={deletingRoomBusy}>
              Keep the room
            </AlertDialogCancel>
            <button
              type="button"
              className="btn btn-red"
              disabled={deletingRoomBusy}
              onClick={() => void handleDeleteRoom()}
            >
              {deletingRoomBusy ? "Deleting…" : "Delete"}
            </button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {locationEditor && (
        <EditLocationPage
          key={`location-${locationEditor.resourceId}`}
          presentation="modal"
          locationId={locationEditor.resourceId}
          initialLocation={locationEditor.location}
          initialSetAsPrimaryAddress={locationEditor.setAsPrimaryAddress}
          onRequestClose={() => setLocationEditor(null)}
          onSaved={handleLocationEditorComplete}
          onDeleted={handleLocationEditorComplete}
        />
      )}

      <Dialog open={addingLocation !== null} onOpenChange={(open) => !open && closeAddLocation()}>
        <DialogContent className="ak-dialog max-w-none flex flex-col gap-0 p-0">
          <OverlayFooterHost>
          <DialogHeader className="ak-overlay__header pb-0">
            <DialogTitle>Add a location</DialogTitle>
            <DialogDescription>A location is a place patients are seen.</DialogDescription>
          </DialogHeader>
          {addingLocation && (
            <div className="ak-overlay__body">
            <AddLocationForm
              makePrimary={addingLocation.makePrimary}
              submitLabel="Add location"
              timezoneHelp="Schedules here run on this clock. Patients see their own."
              onDirtyChange={addLocationDirty.report}
              onSaved={() => {
                addLocationDirty.reset();
                setAddingLocation(null);
                void loadLocations();
              }}
            />
            </div>
          )}
          <OverlayFooter />
          </OverlayFooterHost>
        </DialogContent>
      </Dialog>

      {confirmDiscardAdd && (
        <DiscardChangesDialog
          description="This location has not been added."
          onKeepEditing={() => setConfirmDiscardAdd(false)}
          onDiscard={() => {
            setConfirmDiscardAdd(false);
            addLocationDirty.reset();
            setAddingLocation(null);
          }}
        />
      )}

      {selectedLocation && isPatient && (
        <Sheet
          open={!!selectedLocation}
          onOpenChange={(open) => {
            if (!open) setSelectedLocation(null);
          }}
        >
          <SheetContent className="sm:max-w-[700px] w-4/4 p-0">
            <SheetTitle className="sr-only">Location details</SheetTitle>
            <FhirLocationDisplay
              location={selectedLocation}
              isOpen={true}
              onClose={() => setSelectedLocation(null)}
              asModal={false}
            />
          </SheetContent>
        </Sheet>
      )}

      {/* For non-patient users, show the existing modal */}
      {selectedLocation && !isPatient && (
        <FhirLocationDisplay
          location={selectedLocation}
          isOpen={!!selectedLocation}
          onClose={() => {
            setSelectedLocation(null);
          }}
        />
      )}
    </div>
  );
};

export default LocationsPage;

// import { useNavigate } from 'react-router-dom';
// import { Location } from 'fhir/r4';
// import { AppSpinner, FhirLocationDisplay, ScrollableTab } from '../../../../components';
// import { formatFhirCodeableConcept } from '../../../../utils/fhirCodeableConcept.tsx';
// import { formatSingleAddress } from '../../../../utils/fhirAddress.tsx';
// import { useFhirLocationBroadcast, useFhirLocationTargetedBroadcast, useFhirLocations } from '../../../../hooks';
// import { useAuthServiceContext, useLocationServiceContext } from '../../../../services';

// const LocationsPage = () => {
// // const { userRole, USER_ROLES, wpOrganization } = useAuthServiceContext();
// const { getLocationDisplay } = useLocationServiceContext();
// const { loading, error, clearError, locationsList } = useFhirLocations();
// const [isGuideOpen, setIsGuideOpen] = useState<boolean>(false);
// const [selectedLocation, setSelectedLocation] = useState<Location | null>(null);
// const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);

// const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
// const spacerMargin = '24px';

// useFhirLocationBroadcast();
// useFhirLocationTargetedBroadcast({
// location: selectedLocation || undefined,
// isOpen: showDisplayModal,
// onUpdate: (updatedLocation) => {
// setSelectedLocation(updatedLocation);
// },
// onDelete: () => {
// setShowDisplayModal(false);
// setSelectedLocation(null);
// }
// });

// const viewLocation = (location: Location) => {
// setSelectedLocation(location);
// setShowDisplayModal(true);
// };

// const editLocation = (event: React.MouseEvent, location: Location) => {
// event.stopPropagation();
// navigate(location.id as string, {
// relative: 'path',
// state: {
// location: location
// }
// });
// };

// const addLocation = () => {
// navigate('new', {
// relative: 'path',
// state: {
// location: null
// }
// });
// };

// const isAuthorizedToEdit = () => {
// return userRole && [USER_ROLES.ADMIN].includes(userRole as string);
// };

// const getStatusDisplay = (location: Location): { text: string, color?: string } => {
// if (!location) return { text: 'Unknown' };

// switch (location.status) {
// case 'active':
// return { text: 'Active', color: '#00a32a' };
// case 'suspended':
// return { text: 'Suspended', color: '#e39700' };
// case 'inactive':
// return { text: 'Inactive', color: '#cc1818' };
// default:
// return { text: location.status?.charAt(0).toUpperCase() + location.status?.slice(1) || 'Unknown' };
// }
// };

// return (
// <div>
// {!isPatient && (
// <>
// <FhirGuide isOpen={isGuideOpen}
// onFinish={() => setIsGuideOpen(false)}
// resourceType="Location"/>

// <Flex align="center" justify="space-between">
// <FlexBlock>
// </FlexBlock>
// <FlexItem>
// <Button variant="primary"
// icon={info}
// onClick={() => setIsGuideOpen(true)}>
// Help
// </Button>
// </FlexItem>
// {isAuthorizedToEdit() && (
// <FlexItem>
// <Button variant="primary"
// icon={plus}
// onClick={addLocation}>
// Add
// </Button>
// </FlexItem>
// )}
// </Flex>
// <Spacer margin="8"/>
// </>
// )}

// {error && (
// <>
// <Notice status="error" onRemove={clearError}>
// {error}
// </Notice>

// <Spacer margin={spacerMargin}/>
// </>
// )}

// {!loading && locationsList.length === 0 && (
// <>
// <Notice status="info" isDismissible={false}>
// No locations found.
// </Notice>

// <Spacer margin={spacerMargin}/>
// </>
// )}

// <>
// {loading ? (
// <AppSpinner/>
// ): (
// <ScrollableTab>
// {locationsList.length !== 0 && (
// <ItemGroup isBordered isSeparated isRounded size='large'>
// {secondaryLocationsList.map((location: Location) => {
// const displayTitle = getLocationDisplay(location);
// const { text: statusText, color: statusColor } = getStatusDisplay(location);
// const locationType = formatFhirCodeableConcept(location.type?.[0]);
// const physicalType = formatFhirCodeableConcept(location.physicalType);
// const address = location.address ? formatSingleAddress(location.address): '';

// return (
// <Item key={location.id}
// onClick={() => viewLocation(location)}>
// <Flex>
// <FlexItem>
// <Icon icon={mapMarker}
// size={24}
// style={{
// marginRight: 12,
// color: statusColor
// }}/>
// </FlexItem>
// <FlexBlock>
// <Flex align="center" justify="space-between">
// <FlexItem>
// <Text style={{ fontWeight: 500 }}>
// {location.name || 'Unnamed Location'}
// </Text>
// {locationType && (
// <Text variant="muted" style={{ display: 'block' }}>
// Type: {locationType}
// </Text>
// )}
// {physicalType && (
// <Text variant="muted" style={{ display: 'block' }}>
// Physical Type: {physicalType}
// </Text>
// )}
// {address && (
// <Text variant="muted" style={{ display: 'block' }}>
// Address: {address}
// </Text>
// )}
// </FlexItem>
// {isAuthorizedToEdit() && (
// <FlexItem>
// <Button variant="secondary"
// size="small"
// icon={edit}
// onClick={(event: React.MouseEvent) => editLocation(event, location)}>
// Edit
// </Button>
// </FlexItem>
// )}
// </Flex>
// </FlexBlock>
// </Flex>
// </Item>
// );
// })}
// </ItemGroup>
// )}
// </ScrollableTab>
// )}
// </>

// {selectedLocation && (
// <FhirLocationDisplay location={selectedLocation}
// isOpen={showDisplayModal}
// onClose={() => {
// setShowDisplayModal(false);
// setSelectedLocation(null);
// }}/>
// )}
// </div>
// );
// };

// export default LocationsPage;