import { Clock4, HousePlus, Stethoscope } from "lucide-react";
import { Appointment } from "fhir/r4";
import { useAuthServiceContext } from "../../../services";
import {
  formatDateForDisplay,
  formatTimeForDisplay,
  getDaysDifference,
} from "../../../lib/utils";
import { appointmentSubjectLine } from '../../../utils/appointmentSubject';
import { cancellationExplanation } from '../../../utils/appointmentCancellation';

// Shared appointment display helpers (mirrors the ones inside PatientAppointments, kept local so the workspace
// doesn't depend on that patient-portal component). Exported so the list reuses them.
export const getAppointmentPractitionerName = (
  participants: Appointment["participant"],
): string => {
  if (!participants) return "Unknown Practitioner";
  const practitioner = participants.find(
    (participant) =>
      participant.actor?.reference?.includes("Practitioner") ||
      participant.type?.[0]?.text === "primary performer",
  );
  return practitioner?.actor?.display || "Unknown Practitioner";
};

export const getAppointmentSpecialty = (appointment: Appointment): string =>
  appointment.specialty?.[0]?.text ||
  appointment.serviceCategory?.[0]?.text ||
  "Practitioner";

// WHAT THE VISIT IS FOR, from the one shared helper - see utils/appointmentSubject. The fallback here
// used to name a check-up nobody had booked, on any appointment that carried no type at all.
export const getAppointmentVisitType = (appointment: Appointment): string =>
  appointmentSubjectLine(appointment);

// Read-only appointment detail for the receptionist workspace modal. Renders IN PLACE (no Sheet / nested Dialog),
// so it never nests an overlay inside the workspace Dialog. Cancel / reschedule stay on the Overview's appointment
// dialog (the receptionist's real appointment-management surface); this is the glance-and-go read view.
export default function WorkspaceAppointmentDetail({
  appointment,
}: {
  appointment: Appointment;
}) {
  const { wpOrganization } = useAuthServiceContext();
  const start = appointment.start as string;
  const isBooked = appointment.status === "booked";
  const isCancelled = appointment.status === "cancelled";

  return (
    <div className="space-y-4 py-2">
      <div
        className={`rounded px-3 py-2 text-sm capitalize ${
          isBooked ? "bg-green-soft text-sage-ink" : "bg-accent text-secondary"
        }`}
      >
        {isBooked ? "Booking confirmed" : appointment.status || "—"}
      </div>
      {/* The same explanation its row gives: declined or cancelled, with the recorded reason. */}
      {isCancelled && <p className="text-sm text-secondary">{cancellationExplanation(appointment)}</p>}

      <div className="flex items-center justify-between border-b pb-2">
        <p className="text-xl">{formatDateForDisplay(start)}</p>
        {start && !isCancelled && (
          <span className="rounded bg-accent px-2 py-1 text-xs">
            {getDaysDifference(start)}
          </span>
        )}
      </div>
      <p className="flex items-center gap-2 text-sm text-secondary">
        <Clock4 size={16} /> {formatTimeForDisplay(start)}
      </p>

      <div className="grid gap-3 text-sm sm:grid-cols-2">
        <div>
          <div className="font-medium">Practitioner</div>
          <div className="text-secondary">
            {getAppointmentPractitionerName(appointment.participant)} ·{" "}
            {getAppointmentSpecialty(appointment)}
          </div>
        </div>
        <div>
          <div className="font-medium">Visit type</div>
          <div className="flex items-center gap-1 text-secondary">
            <Stethoscope size={14} /> {getAppointmentVisitType(appointment)}
          </div>
        </div>
        <div>
          <div className="font-medium">Location</div>
          <div className="flex items-center gap-1 text-secondary">
            <HousePlus size={14} /> {wpOrganization.current?.name || "—"}
          </div>
        </div>
        <div>
          <div className="font-medium">Booked on</div>
          <div className="text-secondary">
            {formatDateForDisplay((appointment.created as string) || start)}
          </div>
        </div>
      </div>

      <div className="rounded bg-amber-soft p-2">
        <div className="text-sm text-[var(--amber-ink)]">Practitioner instruction</div>
        <p>
          {(appointment.description as string) || "No instructions provided."}
        </p>
      </div>
    </div>
  );
}