import React, { useMemo } from 'react';
import type { Location } from 'fhir/r4';
import { DoorOpen } from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../components/ui/dialog';
import { useFhirLocations } from '../../../hooks/useFhirLocations';
import { onlyRooms, onlySites, getRoomSiteId } from '../../../utils/roomLocation';
import { EmptyState } from '../../../components/ui/empty-state';

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  patientName: string;
  onPick: (room: { id: string; name?: string }) => void;
}

// The rooms of this practice, each with its site, for rooming one patient.
export const RoomPickerDialog: React.FC<Props> = ({ open, onOpenChange, patientName, onPick }) => {
  const { locationsList } = useFhirLocations();
  const rooms = useMemo(() => onlyRooms(locationsList), [locationsList]);
  const sites = useMemo(() => onlySites(locationsList), [locationsList]);
  const siteName = (room: Location): string | undefined => {
    const siteId = getRoomSiteId(room);
    return siteId ? sites.find((s) => s.id === siteId)?.name : undefined;
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-sm">
        <DialogHeader>
          <DialogTitle>Room {patientName}</DialogTitle>
        </DialogHeader>
        {rooms.length === 0 ? (
          <EmptyState size="compact" title="No rooms configured — set them up under Organization → Locations." />
        ) : (
          <div className="space-y-1.5 max-h-80 overflow-y-auto">
            {rooms.map((room) => (
              <button
                key={room.id ?? room.name}
                type="button"
                onClick={() => room.id && onPick({ id: room.id, name: room.name })}
                className="w-full flex items-center justify-between gap-2 rounded-md border border-line px-3 py-2 text-sm text-left hover:border-primary hover:bg-blue-soft"
              >
                <span className="flex items-center gap-2 font-medium text-ink-strong">
                  <DoorOpen className="w-4 h-4 text-faint" />
                  {room.name ?? 'Unnamed room'}
                </span>
                {siteName(room) && <span className="text-xs text-faint">{siteName(room)}</span>}
              </button>
            ))}
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
};

export default RoomPickerDialog;