import React, { useMemo, useState } from 'react';
import type { Encounter, Patient } from 'fhir/r4';
import { MapPin } from 'lucide-react';
import PresenceDot from '../../../components/PresenceDot/PresenceDot';
import { usePatientSnapshot } from '../../../hooks/usePatientSnapshot';
import { SnapshotChart } from '../../../components/PatientSnapshot/SnapshotChart';
import { availableActions, type ActionDescriptor, type QueueItem } from './encounterLifecycle';
import { useEncounterActions } from './useEncounterActions';
import { VitalsForm } from './VitalsForm';
import { RoomPickerDialog } from './RoomPickerDialog';
import { BTN_CLASS, ageSex, ModalityBadge, VisitStatus } from './queueItemDisplay';

interface Props { item: QueueItem; patient?: Patient; onChanged?: () => void; onEnter: (encounter: Encounter, item: QueueItem) => void; rooming?: boolean; }

/**
 * Support-tier equivalent of `EncounterFocusPanel`: a prep view (reason + chart snapshot + a Vitals
 * slot) with a support action bar (Room patient room picker, Mark ready, Open chart). Support staff
 * never document the encounter itself - the body is read-only prep, not a documentation workspace.
 */
export const SupportFocusPanel: React.FC<Props> = ({ item, patient: supplied, onChanged, onEnter, rooming: roomsInUse = true }) => {
  // Only the patient this row names. Until it has loaded, nothing of another patient is shown or captured here.
  const patient = supplied?.id === item.patientId ? supplied : undefined;
  const actions = useEncounterActions({ onChanged, onEnter });
  // Bump on a vitals save so `asOf` advances and the chart snapshot re-fetches - the just-entered
  // vitals then show in place, without waiting for the panel to be reopened.
  const [vitalsTick, setVitalsTick] = useState(0);
  const asOf = useMemo(() => new Date().toISOString(), [item.patientId, vitalsTick]);
  const { results } = usePatientSnapshot(patient, patient ? asOf : undefined);

  const [roomPickerOpen, setRoomPickerOpen] = useState(false);

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

  const selectRoom = (room: { id: string; name?: string }) => {
    actions.roomPatient(item, room);
    setRoomPickerOpen(false);
  };

  const busy = actions.busyKey === item.key;

  return (
    <div className="bg-surface border border-line rounded-xl overflow-hidden">
      {/* header */}
      <div className="p-5 border-b border-line">
        <div className="flex items-center gap-2 flex-wrap mb-2.5">
          <VisitStatus item={item} />
          <ModalityBadge item={item} />
          {item.room && <span className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full bg-sunken text-ink-muted"><MapPin className="w-3.5 h-3.5" />Room {item.room}</span>}
          <span className="inline-flex items-center gap-1.5 text-xs text-ink-muted"><PresenceDot reference={`Patient/${item.patientId}`} showOffline className="mr-0.5" /></span>
        </div>
        <div className="flex items-baseline gap-3 flex-wrap">
          <h1 className="ak-page-title">{item.patientName ?? patient?.name?.[0]?.text ?? 'Unknown patient'}</h1>
          <span className="text-sm text-ink-muted tabular-nums">{ageSex(patient)}</span>
        </div>
        <p className="mt-1">
          <span className="text-xs uppercase tracking-wide text-faint mr-1.5">Reason</span>
          {item.reason ?? 'No reason given'}
        </p>
      </div>

      {/* action bar */}
      <div className="flex gap-2.5 flex-wrap p-4 bg-sunken border-b border-line">
        {availableActions(item.status, 'support', Boolean(item.room), roomsInUse).map((a) => (
          <button key={a.kind} type="button" disabled={busy} onClick={() => run(a)} className={`${BTN_CLASS[a.variant]} ${busy ? 'opacity-60 cursor-wait' : ''}`}>
            {a.label}
          </button>
        ))}
      </div>

      {/* body — read-only prep, not a documentation workspace */}
      <div className="p-5 space-y-4">
        <div>
          <h3 className="text-xs font-bold uppercase tracking-wide text-faint mb-2">Prep</h3>
          {/* 🏷️ Card 644 — level 4: the "Prep" heading above is an h3. */}
          <SnapshotChart results={results} emptyLabel="currently" collapseEmptySections headingLevel={4} staffReader />
        </div>
        <div>
          <h3 className="text-xs font-bold uppercase tracking-wide text-faint mb-2">Vitals</h3>
          {patient ? (
            // One form per selected row: another row - even another appointment for the same patient - starts empty.
            <VitalsForm
              key={item.key}
              rowKey={item.key}
              patient={patient}
              encounter={item.encounter}
              onSaved={() => { setVitalsTick((t) => t + 1); onChanged?.(); }}
            />
          ) : (
            <div className="rounded-lg border border-dashed border-line p-4 text-sm text-faint">
              Vitals open once this patient's record has loaded.
            </div>
          )}
        </div>
      </div>

      {/* room picker */}
      <RoomPickerDialog
        open={roomPickerOpen}
        onOpenChange={setRoomPickerOpen}
        patientName={item.patientName ?? patient?.name?.[0]?.text ?? 'patient'}
        onPick={selectRoom}
      />
    </div>
  );
};

export default SupportFocusPanel;