import { useState } from "react";
import { Appointment, AppointmentParticipant, Organization } from "fhir/r4";
import { toast } from "sonner";
import "./PatientBookAppointment.css";
import {
  useAppointmentServiceContext,
  useAuthServiceContext,
  useFhirServiceContext,
  usePatientServiceContext,
} from "../../../../../services";
import { formatFhirHumanName } from "../../../../../utils/fhirHumanName.tsx";
import {
  getCampaignCtaAttribution,
  clearCampaignCtaAttribution,
} from "../../../../../utils/campaignCtaAttribution";
import { Button } from "../../../../../components/ui/button";
import {
  buildPreferredAvailabilityExtension,
  describePreferredAvailability,
  PREFERRED_DAY_OPTIONS,
  PREFERRED_TIME_OF_DAY_OPTIONS,
} from "../../../../../utils/appointmentAvailabilityPreference";
import {
  CheckingYourBooking,
  isBookingRetired,
  isBookingUnconfirmed,
  useBookingOperation,
} from "../../../../../components/booking/CheckingYourBooking";
import { BOOKING_STORAGE_UNAVAILABLE, BookingStorageUnavailableError, type BookingOperationEntry } from "../../../../../utils/booking/bookingOperation";

interface PatientTimeWindowRequestProps {
  onSuccess?: (message: string, appointment?: Appointment) => void;
  onClose?: () => void;
  /** The practice being asked, when it is not the portal's own. */
  bookingOrganization?: Organization;
}

// Slot-less appointment request for orgs on request-only + `time-window`. The patient gives a reason
// and their general availability (preferred days + times of day) with NO practitioner or slot; the
// receptionist offers concrete options and places the actual appointment.
const PatientTimeWindowRequest = ({
  onSuccess,
  onClose,
  bookingOrganization,
}: PatientTimeWindowRequestProps) => {
  const { wpOrganization } = useAuthServiceContext();
  const practice = bookingOrganization ?? wpOrganization.current ?? undefined;
  const { patientState } = usePatientServiceContext();
  const { createReferenceObject } = useFhirServiceContext();
  const { createAppointment } = useAppointmentServiceContext();

  const [reason, setReason] = useState("");
  const [selectedDays, setSelectedDays] = useState<string[]>([]);
  const [selectedTimes, setSelectedTimes] = useState<string[]>([]);
  const [submitting, setSubmitting] = useState(false);
  const [sent, setSent] = useState<string | null>(null);
  const booking = useBookingOperation({
    opening: "time-window-request",
    practice: practice?.id,
    patient: patientState?.id,
  });
  const requestedMessage =
    "Your request has been submitted. The practice will reach out with appointment options.";
  booking.onBooked((appointment) => onSuccess?.(requestedMessage, appointment));

  const toggle = (
    list: string[],
    setList: (next: string[]) => void,
    code: string,
  ) => {
    setList(
      list.includes(code) ? list.filter((c) => c !== code) : [...list, code],
    );
  };

  const canSubmit =
    Boolean(reason.trim()) &&
    selectedDays.length > 0 &&
    selectedTimes.length > 0 &&
    !submitting;

  const handleSubmit = async () => {
    if (!canSubmit) return;
    if (!patientState?.id) {
      toast.error("We could not find your patient record. Please try again.", {
        position: "top-right",
      });
      return;
    }

    setSubmitting(true);
    let operation: BookingOperationEntry | undefined;
    try {
      // Kept before anything is sent; a device that cannot keep it does not send.
      operation = await booking.begin();
      const sending = operation;
      const participants: AppointmentParticipant[] = [
        {
          actor: createReferenceObject(
            "Patient",
            patientState.id as string,
            formatFhirHumanName(patientState.name),
          ),
          status: "accepted",
          required: "required",
        },
      ];

      // No practitioner, no slot - a pure request. The server (request-only + time-window) forces
      // `proposed` and accepts the slot-less appointment; the receptionist places the real time.
      const payload: Appointment = {
        resourceType: "Appointment",
        status: "proposed",
        created: new Date().toISOString(),
        participant: participants,
        reasonCode: [{ text: reason.trim() }],
        extension: [
          buildPreferredAvailabilityExtension(selectedDays, selectedTimes),
        ],
      };

      // S4e-2, Task 12 - this is the request-only + time-window variant of the SAME patient
      // self-booking screen (PatientBookAppointment.tsx renders this in place of the slot-based flow
      // for that org mode), so it carries the stashed CTA attribution exactly like the slot-based
      // path does. getCampaignCtaAttribution() never throws; clearCampaignCtaAttribution() fires only
      // after this POST has actually succeeded (consume-once - a failed/retried request must still
      // attribute).
      const cta = getCampaignCtaAttribution();
      const result = await booking.send(sending, (operationId) =>
        createAppointment(payload, cta, undefined, bookingOrganization?.id, operationId));
      // Settled for a view no longer shown: it is not announced, attributed or confirmed here.
      if (result.kind === "retired") return;
      const created = result.appointment;
      clearCampaignCtaAttribution();

      const message = requestedMessage;
      onSuccess?.(message, created);
      toast.success(message, { position: "top-right" });
      // Stays open on what was sent, as the slot-based path does; closing is the patient's Done.
      setSent(describePreferredAvailability(selectedDays, selectedTimes));
    } catch (error) {
      // Its outcome is unknown: the check below stands in for the form until it is known.
      if (isBookingUnconfirmed(error) || isBookingRetired(error)) return;
      console.error("Failed to submit appointment request:", error);
      if (error instanceof BookingStorageUnavailableError) {
        toast.error(BOOKING_STORAGE_UNAVAILABLE, { position: "top-right" });
        return;
      }
      toast.error(
        "Could not submit your appointment request. Try again.",
        { position: "top-right" },
      );
    } finally {
      await booking.abandonIfUnsent(operation);
      setSubmitting(false);
    }
  };

  const organizationName = practice?.name || "the practice";

  if (booking.recovery) {
    return (
      <div className="py-2" data-booking-state="checking">
        <CheckingYourBooking control={booking} onDone={onClose} bookedMessage={requestedMessage} />
      </div>
    );
  }

  if (sent !== null) {
    return (
      <div className="py-2" data-booking-state="requested">
        <div className="self-booking-head">
          <p className="ahr-overlay-title pb-1 px-2">Request sent</p>
        </div>
        <div className="self-booking-sent">
          <span className="self-booking-sent-mark" aria-hidden="true">◷</span>
          <h3 className="self-booking-done-title">
            Your request has been submitted. The practice will reach out with appointment options.
          </h3>
          <p className="self-booking-done-sub">{sent}</p>
        </div>
        <div className="flex justify-end gap-2 px-2 pt-2">
          <button type="button" onClick={() => onClose?.()} className="btn btn-blue">
            Done
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="py-2">
      {/* The same header as the booking steps: the title, the practice, the emergency line. */}
      <div className="self-booking-head">
        <p className="ahr-overlay-title pb-1 px-2">Request an appointment</p>
        {practice?.name && (
          <p className="self-booking-practice px-2">{practice.name}</p>
        )}
        <p className="ahr-field-help px-2 pb-2">
          If emergency, call 911 or go to nearest emergency room.
        </p>
      </div>
      <div className="space-y-4 p-2">
        <div className="self-booking-note">
          <p>
            Tell {organizationName} when you are generally available and why you
            would like to be seen. The practice will follow up with appointment
            options that fit.
          </p>
        </div>

        <div className="w-full">
          <label htmlFor="time-window-reason" className="self-booking-q">
            Reason for booking? <span className="text-destructive">*</span>
          </label>
          <textarea
            id="time-window-reason"
            value={reason}
            onChange={(e) => setReason(e.target.value)}
            rows={3}
            placeholder="Briefly describe the reason for your visit"
            className="w-full rounded-[2px] border border-border bg-surface px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
          />
        </div>

        {/* A GROUP, NOT A LABEL. These are toggle buttons, not a form control, and a <label> over them
            promises an association a screen reader cannot follow - it announces nothing and clicking it
            focuses nothing. `role="group"` + `aria-labelledby` is the primitive that actually names a set
            of controls, so "Preferred days" is announced when the reader enters the buttons. */}
        <div role="group" aria-labelledby="preferred-days-label">
          <p id="preferred-days-label" className="self-booking-q">
            Preferred days <span className="text-destructive">*</span>
          </p>
          <div className="flex flex-wrap gap-2">
            {PREFERRED_DAY_OPTIONS.map((opt) => {
              const selected = selectedDays.includes(opt.code);
              return (
                <button
                  type="button"
                  key={opt.code}
                  aria-pressed={selected}
                  onClick={() => toggle(selectedDays, setSelectedDays, opt.code)}
                  className={selected ? "self-booking-chip self-booking-chip--on" : "self-booking-chip"}
                >
                  {opt.label}
                </button>
              );
            })}
          </div>
        </div>

        <div role="group" aria-labelledby="preferred-times-label">
          <p id="preferred-times-label" className="self-booking-q">
            Preferred times of day <span className="text-destructive">*</span>
          </p>
          <div className="flex flex-wrap gap-2">
            {PREFERRED_TIME_OF_DAY_OPTIONS.map((opt) => {
              const selected = selectedTimes.includes(opt.code);
              return (
                <button
                  type="button"
                  key={opt.code}
                  aria-pressed={selected}
                  onClick={() =>
                    toggle(selectedTimes, setSelectedTimes, opt.code)
                  }
                  className={selected ? "self-booking-chip self-booking-chip--on" : "self-booking-chip"}
                >
                  {opt.label}
                </button>
              );
            })}
          </div>
        </div>

        <div className="flex justify-end gap-2 pt-2">
          <Button
            type="button"
            variant="outline"
            onClick={() => onClose?.()}
            disabled={submitting}
            className="rounded cursor-pointer"
          >
            Cancel
          </Button>
          {/* Green: sending the request is the submit (Spencer, 2026-08-28, on Confirm Booking). */}
          <button
            type="button"
            onClick={handleSubmit}
            disabled={!canSubmit}
            className="btn btn-green"
          >
            {submitting ? "Sending..." : "Send request"}
          </button>
        </div>
      </div>
    </div>
  );
};

export default PatientTimeWindowRequest;