import React, { useMemo, useState } from 'react';
import type { Encounter } from 'fhir/r4';
import { availableActions, type ActionDescriptor, type QueueItem } from './encounterLifecycle';
import { useEncounterActions } from './useEncounterActions';
import { fmtTime, groupQueueByBucket, queueBucketsFor, QueueTaskLine } from './EncounterQueue';
import { BTN_CLASS } from './queueItemDisplay';
import { RoomPickerDialog } from './RoomPickerDialog';
import type { PatientTaskCount } from '../../../utils/patientTaskCount';
import { resolveAppointmentPatientLabel, type PatientNameResolution } from '../../../utils/appointmentParticipants';
import { EmptyState } from '../../../components/ui/empty-state';

interface Props {
  items: QueueItem[];
  loading: boolean;
  taskCountByRowKey?: Record<string, PatientTaskCount>;
  patientNames?: PatientNameResolution;
  onSelect: (item: QueueItem) => void;
  onChanged?: () => void;
  onEnter: (encounter: Encounter, item: QueueItem) => void;
  /** Whether this practice rooms patients. */
  rooming?: boolean;
}

// The rooming day beside its count cards: who is waiting to be roomed and who is in a room, each row
// carrying its own next step, so nothing is opened for the person until they choose a patient.
export const RoomingDayPanel: React.FC<Props> = ({
  items, loading, taskCountByRowKey = {}, patientNames, onSelect, onChanged, onEnter, rooming: roomsInUse = true,
}) => {
  const actions = useEncounterActions({ onChanged, onEnter });
  const [rooming, setRooming] = useState<QueueItem | undefined>();
  const buckets = useMemo(() => queueBucketsFor('support', roomsInUse).filter((b) => b.key === 'to-room' || b.key === 'roomed'), [roomsInUse]);
  const byBucket = useMemo(() => groupQueueByBucket(items, queueBucketsFor('support'), 'support'), [items]);

  if (loading && items.length === 0) return null;
  const nameOf = (item: QueueItem): string =>
    (item.appointment && patientNames ? resolveAppointmentPatientLabel(item.appointment, patientNames) : undefined)
      ?? item.patientName ?? 'Unknown patient';

  const run = (item: QueueItem, a: ActionDescriptor) => {
    switch (a.kind) {
      case 'room': setRooming(item); return;
      case 'mark-ready': actions.markReady(item); return;
      case 'open-chart':
      case 'preview': actions.openChart(item); return;
    }
  };

  return (
    <div className="ak-roomingday bg-surface border border-line rounded-xl p-5 space-y-5">
      {items.length === 0 ? (
        <EmptyState title="No visits at the practice today." />
      ) : buckets.map((bucket) => (
        <section key={bucket.key} aria-labelledby={`rooming-${bucket.key}`}>
          <h2 id={`rooming-${bucket.key}`} className="ak-section-title">{bucket.title}</h2>
          {byBucket[bucket.key].length === 0
            ? <EmptyState size="compact" title={bucket.empty} />
            : (
              <ul className="divide-y divide-line">
                {byBucket[bucket.key].map((item) => {
                  const busy = actions.busyKey === item.key;
                  return (
                    <li key={item.key} className="flex flex-wrap items-start gap-x-4 gap-y-2 py-3">
                      <span className="ak-row__time w-[60px] shrink-0 pt-0.5 tabular-nums">{fmtTime(item.atISO)}</span>
                      <span className="min-w-0 flex-1">
                        <button type="button" className="ak-row__name text-left hover:underline" onClick={() => onSelect(item)}>
                          {nameOf(item)}
                        </button>
                        <span className="ak-row__detail block">
                          {item.reason ?? 'No reason given'}{item.room ? ` · Room ${item.room}` : ''}
                        </span>
                        <QueueTaskLine count={taskCountByRowKey[item.key]} />
                      </span>
                      <span className="flex flex-wrap gap-2 w-full pl-[76px] sm:w-auto sm:pl-0">
                        {availableActions(item.status, 'support', Boolean(item.room), roomsInUse).map((a) => (
                          <button
                            key={a.kind}
                            type="button"
                            disabled={busy}
                            onClick={() => run(item, a)}
                            className={`${BTN_CLASS[a.variant]} ${busy ? 'opacity-60 cursor-wait' : ''}`}
                          >
                            {a.label}
                          </button>
                        ))}
                      </span>
                    </li>
                  );
                })}
              </ul>
            )}
        </section>
      ))}
      <RoomPickerDialog
        open={Boolean(rooming)}
        onOpenChange={(open) => { if (!open) setRooming(undefined); }}
        patientName={rooming ? nameOf(rooming) : 'patient'}
        onPick={(room) => { if (rooming) actions.roomPatient(rooming, room); setRooming(undefined); }}
      />
    </div>
  );
};

export default RoomingDayPanel;