import { Patient } from "fhir/r4";
import { ArrowLeft, ExternalLink, LoaderCircle } from "lucide-react";
import PatientProfileCard from "../../../components/PatientProfileCard/PatientProfileCard";
import { Button } from "../../../components/ui/button.tsx";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../../../components/ui/dialog.tsx";
import { formatFhirHumanName } from "../../../utils/fhirHumanName.tsx";

interface ReceptionistPatientQuickViewDialogProps {
  open: boolean;
  patient?: Patient;
  loading: boolean;
  error?: string;
  onOpenChange: (open: boolean) => void;
  onBack: () => void;
  onViewFullProfile: () => void;
}

export default function ReceptionistPatientQuickViewDialog({
  open,
  patient,
  loading,
  error,
  onOpenChange,
  onBack,
  onViewFullProfile,
}: ReceptionistPatientQuickViewDialogProps) {
  const patientName = patient
    ? formatFhirHumanName(patient.name, { emptyText: "Patient" })
    : "Patient";

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="ahr-receptionist-patient-quick-view-dialog">
        <DialogHeader className="ahr-receptionist-patient-quick-view-dialog__header">
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="ahr-receptionist-patient-quick-view-dialog__back"
            onClick={onBack}
          >
            <ArrowLeft size={16} />
            Back
          </Button>

          <div className="ahr-receptionist-patient-quick-view-dialog__heading">
            <DialogTitle>Patient Quick View</DialogTitle>
            <DialogDescription>{patientName}</DialogDescription>
          </div>

          <Button
            type="button"
            variant="link"
            size="sm"
            className="ahr-receptionist-patient-quick-view-dialog__full-profile"
            onClick={onViewFullProfile}
            disabled={!patient}
          >
            View full profile
            <ExternalLink size={14} />
          </Button>
        </DialogHeader>

        <div className="ahr-receptionist-patient-quick-view-dialog__body">
          {loading ? (
            <div className="ahr-receptionist-patient-quick-view-dialog__state">
              <LoaderCircle className="ahr-receptionist-spin" size={18} />
              Loading patient profile…
            </div>
          ) : error ? (
            <div className="ahr-receptionist-patient-quick-view-dialog__error">
              {error}
            </div>
          ) : patient ? (
            <PatientProfileCard patient={patient} />
          ) : (
            <div className="ahr-receptionist-patient-quick-view-dialog__error">
              Patient profile is unavailable.
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}