import { useMemo } from "react";
import { Appointment } from "fhir/r4";
import { CalendarCheck2, CalendarDays, Clock4, HousePlus } from "lucide-react";
import { useAuthServiceContext } from "../../../services";
import { useFhirAppointments } from "../../../hooks";
import { categorizePatientAppointments } from "../../../utils/patientAppointmentCategorization";
import { cancellationExplanation } from "../../../utils/appointmentCancellation";
import { Skeleton } from "../../../components/ui/skeleton";
import {
  formatDateForDisplay,
  formatTimeForDisplay,
  getDaysDifference,
} from "../../../lib/utils";
import {
  getAppointmentPractitionerName,
  getAppointmentSpecialty,
} from "./WorkspaceAppointmentDetail.tsx";

const startMs = (appointment: Appointment) =>
  appointment.start ? new Date(appointment.start).getTime() : 0;

// Cancelled visits are history at the desk: never upcoming, newest first, with the recorded reason.
const cancelledHistory = (appointments: Appointment[]) =>
  appointments
    .filter((appointment) => appointment.status === "cancelled")
    .sort((a, b) => startMs(b) - startMs(a));

// Read-only appointments list for the receptionist workspace modal. Reuses the patient's appointments from context
// (useFhirAppointments) + categorization, but renders plain clickable rows that drill IN PLACE (onOpenAppointment)
// instead of the patient-portal's per-card Sheet/Dialog stack - which broke nested inside the workspace Dialog.
export default function WorkspaceAppointments({
  onOpenAppointment,
}: {
  onOpenAppointment: (appointment: Appointment) => void;
}) {
  const { wpOrganization } = useAuthServiceContext();
  const { loading, error, answered, listIsThisPatients, appointmentsList } =
    useFhirAppointments();
  const { upcoming, past } = useMemo(
    () => categorizePatientAppointments(appointmentsList),
    [appointmentsList],
  );
  const cancelled = useMemo(
    () => cancelledHistory(appointmentsList ?? []),
    [appointmentsList],
  );

  if (error) {
    return (
      <div className="py-8 text-center text-sm text-destructive">
        Could not load appointments. Try again later.
      </div>
    );
  }

  if (loading || !answered || !listIsThisPatients) {
    return (
      <div className="space-y-2 py-2">
        {[...Array(3)].map((_, index) => (
          <Skeleton key={index} className="h-16 w-full rounded-lg" />
        ))}
      </div>
    );
  }

  if (upcoming.length === 0 && past.length === 0 && cancelled.length === 0) {
    return (
      <div className="flex flex-col items-center gap-2 py-10 text-center text-sm text-secondary">
        <CalendarCheck2 size={28} />
        No appointments on file for this patient.
      </div>
    );
  }

  const renderRow = (appointment: Appointment) => (
    <button
      key={appointment.id}
      type="button"
      onClick={() => onOpenAppointment(appointment)}
      className="w-full rounded-lg border p-3 text-left hover:bg-accent"
    >
      <div className="font-medium">
        {getAppointmentPractitionerName(appointment.participant)}
      </div>
      <div className="text-sm text-secondary">
        {getAppointmentSpecialty(appointment)}
      </div>
      <div className="mt-1 flex flex-wrap gap-4 text-xs text-secondary">
        {appointment.start && (
          <>
            {/* A cancelled visit is history: its date stays, but it is not counted down to. */}
            {appointment.status !== "cancelled" && (
              <span className="flex items-center gap-1">
                <CalendarDays size={13} /> {getDaysDifference(appointment.start)}
              </span>
            )}
            <span className="flex items-center gap-1">
              <CalendarDays size={13} />{" "}
              {formatDateForDisplay(appointment.start)}
            </span>
            <span className="flex items-center gap-1">
              <Clock4 size={13} /> {formatTimeForDisplay(appointment.start)}
            </span>
          </>
        )}
        <span className="flex items-center gap-1">
          <HousePlus size={13} /> {wpOrganization.current?.name}
        </span>
      </div>
    </button>
  );

  const renderCancelledRow = (appointment: Appointment) => (
    <div key={appointment.id} className="opacity-75">
      {renderRow(appointment)}
      <p className="mt-1 px-1 text-xs text-secondary">{cancellationExplanation(appointment)}</p>
    </div>
  );

  return (
    <div className="space-y-5 py-2">
      <section>
        <h3 className="ak-section-title mb-3">Upcoming</h3>
        {upcoming.length ? (
          <div className="space-y-2">{upcoming.map(renderRow)}</div>
        ) : (
          <p className="text-sm text-secondary">No upcoming appointments.</p>
        )}
      </section>
      <section>
        <h3 className="ak-section-title mb-3">Past</h3>
        {past.length ? (
          <div className="space-y-2">{past.map(renderRow)}</div>
        ) : (
          <p className="text-sm text-secondary">No past appointments.</p>
        )}
      </section>
      {cancelled.length > 0 && (
        <section>
          <h3 className="ak-section-title mb-3">Cancelled</h3>
          <div className="space-y-2">{cancelled.map(renderCancelledRow)}</div>
        </section>
      )}
    </div>
  );
}