import type { Patient } from "fhir/r4";
import { ArrowLeft, LoaderCircle } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../../../components/ui/dialog.tsx";
import PatientProfileCard from "../../../components/PatientProfileCard/PatientProfileCard";
import PatientNotes from "../../../components/PatientNotes/PatientNotes.tsx";
import { usePatientServiceContext } from "../../../services";
import { useKeyedRead } from "../../../hooks/useKeyedRead.ts";
import { formatFhirHumanName } from "../../../utils/fhirHumanName.tsx";
import { calculateAge, patientAgeLabel } from "../../../utils/dateUtils.ts";
import { PatientMark } from "./PatientMark.tsx";
import "./ReceptionistPatientWorkspaceDialog.css";

interface DeskPatientQuickViewProps {
  /** The patient this quick view is for. The parent keys the component by it. */
  patientId: string;
  onClose: () => void;
  onBack?: () => void;
  /** What the footer's way out says, such as "Back to appointment". */
  backLabel?: string;
}

// The board's own quick view: internal notes first, then the read-only profile, over the board it was
// opened from. The Patients directory keeps the seven-section workspace.
export default function DeskPatientQuickView({ patientId, onClose, onBack, backLabel }: DeskPatientQuickViewProps) {
  const { fetchPatient } = usePatientServiceContext();
  const read = useKeyedRead<Patient>(patientId, async (id) => {
    const patient = await fetchPatient(id, false, undefined, true);
    if (patient?.id !== id) throw new Error("The patient read answered for another patient.");
    return patient;
  });
  const patient = read.status === "ready" ? read.value : undefined;
  const name = patient ? formatFhirHumanName(patient.name, { emptyText: "Patient" }) : "Patient";
  const age = patient?.birthDate ? patientAgeLabel(calculateAge(patient.birthDate)) : null;

  return (
    <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
      <DialogContent className="ahr-qv ahr-qv--desk w-full">
        <DialogHeader className="ahr-qv__head">
          {patient && <PatientMark name={name} photo={patient.photo?.[0]} />}
          <div className="ahr-qv__heading">
            <DialogTitle className="ahr-qv__title">Patient Quick View</DialogTitle>
            <DialogDescription className="ahr-qv__who">
              {[name, age].filter(Boolean).join(" · ")}
            </DialogDescription>
          </div>
        </DialogHeader>

        {read.status === "failed" ? (
          <div className="ahr-qv__state ahr-qv__state--failed">Failed to load the patient profile.</div>
        ) : !patient ? (
          <div className="ahr-qv__state">
            <LoaderCircle className="animate-spin" size={18} />
            Loading patient…
          </div>
        ) : (
          <div className="ahr-qv__body">
            <section className="ahr-qv__notes" aria-label="Internal notes">
              <h3 className="ak-section-title ahr-qv__section-title">Internal notes</h3>
              <PatientNotes key={patientId} patientId={patientId} variant="desk" />
            </section>
            <div className="ahr-qv__profile">
              <PatientProfileCard patient={patient} showHeader={false} />
            </div>
          </div>
        )}

        {backLabel && onBack && (
          <div className="ahr-qv__foot">
            <button type="button" className="btn btn-blue-ghost-sm" onClick={onBack}>
              <ArrowLeft aria-hidden="true" />
              {backLabel}
            </button>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}