import { useState } from "react";
import { AlertCircle, ChevronLeft } from "lucide-react";
import { Alert, AlertDescription } from "../../../components/ui/alert.tsx";
import { Button } from "../../../components/ui/button.tsx";
import { Input } from "../../../components/ui/input.tsx";
import { priorityWord } from "../../../components/ui/row-meta.tsx";
import type { DiagnosticOrderQueueRow, ImagingSchedule } from "../../../hooks/useDiagnosticOrderQueue.ts";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import { SEP, bookedAt } from "./ImagingWorklist.tsx";
import { Fact } from "./QueueOrderDialogs.tsx";
import { bodyPartWords, modalityWords } from "./orderableRadiology.ts";
import { useScheduleDetails } from "./scheduleDetails.ts";
import ArchiveConfirmModal from "../../../components/ArchiveConfirmModal/ArchiveConfirmModal";
import type { ArchiveReason } from "../../../utils/archivedResource";
import "./ImagingWorklist.css";

/**
 * Scheduling a study on its own page, as imaging.html draws it. Only a confirmed save returns to the
 * worklist with the row moved; a refusal stays here with the reason. No device connection exists yet,
 * so upload is the only image path named. The department may cancel a study it has not yet performed.
 */
type ScheduleProps = {
  row?: DiagnosticOrderQueueRow;
  onBack: () => void;
  onSchedule: (orderId: string, schedule: ImagingSchedule) => Promise<void>;
  onCancel?: (orderId: string, reason: ArchiveReason, note?: string) => Promise<void>;
};

// The study's details and the rooms are read only once a study is being booked, not whenever the worklist is on screen.
const ScheduleStudyPage = (props: ScheduleProps) =>
  props.row?.orderId ? <ScheduleStudyForm {...props} row={props.row} /> : null;

const ScheduleStudyForm = ({ row, onBack, onSchedule, onCancel }: ScheduleProps & { row: DiagnosticOrderQueueRow }) => {
  const [cancelOpen, setCancelOpen] = useState(false);
  const [cancelling, setCancelling] = useState(false);
  const [cancelError, setCancelError] = useState<string>();
  const [at, setAt] = useState("");
  const [busy, setBusy] = useState(false);
  const [failure, setFailure] = useState<string>();

  const orderId = row.orderId as string;
  // One read for this order: the modality, body part and side from its own code, and the practice's rooms.
  const details = useScheduleDetails(orderId);
  const orderable = details.terminology;
  const roomsLoading = details.rooms.status === "loading";
  const roomsError = details.rooms.status === "failed" ? details.rooms.reason : undefined;
  const rooms = details.rooms.status === "read" || details.rooms.status === "incomplete" ? details.rooms.list : [];
  // A room chosen belongs to the read it was chosen from; another viewer, order or reading starts unchosen.
  const [choice, setChoice] = useState<{ scope: string; roomId: string }>();
  const roomId = choice?.scope === details.scope && rooms.some((each) => each.id === choice.roomId) ? choice.roomId : "";
  const unread = details.terminology.status === "failed" || details.rooms.status === "failed";
  const modality = orderable.status === "read" ? orderable.parts.dicomModality : row.modality;
  const fromOrder = (words: (parts: Parameters<typeof modalityWords>[0]) => string | undefined) =>
    orderable.status === "loading" ? "Reading the order's code..."
      : orderable.status === "failed" ? `Could not be read from the order: ${orderable.reason}`
      : orderable.status === "read" ? words(orderable.parts) ?? "Not given by the order"
      : "Not given by the order";

  const submit = async () => {
    if (busy) return;
    setBusy(true);
    setFailure(undefined);
    try {
      await onSchedule(orderId, {
        ...(at ? { at: new Date(at).toISOString() } : {}),
        ...(roomId ? { roomId } : {}),
        ...(modality ? { modality } : {}),
      });
      onBack();
    } catch (reason) {
      setFailure(relayServerFailure(reason, "Could not schedule this study. It may have moved on already."));
    } finally {
      setBusy(false);
    }
  };

  const cancel = async (reason: ArchiveReason, note?: string) => {
    if (!onCancel) return;
    setCancelling(true);
    setCancelError(undefined);
    try {
      await onCancel(orderId, reason, note);
      setCancelOpen(false);
      onBack();
    } catch (refusal) {
      setCancelError(relayServerFailure(refusal, "Could not cancel this study. It may have moved on already."));
    } finally {
      setCancelling(false);
    }
  };

  const detail = [
    row.orderedBy,
    row.authoredOn ? "ordered " + bookedAt(row.authoredOn) : undefined,
    priorityWord(row.priority),
  ].filter(Boolean).join(SEP);

  return (
    <section className="bench-page schedule-study-page" aria-labelledby="schedule-study-title">
      <div className="bench-head">
        <Button className="btn btn-blue-ghost schedule-study-back" disabled={busy} onClick={onBack}>
          <ChevronLeft className="h-4 w-4" aria-hidden="true" /> Back to the worklist
        </Button>
        <h1 id="schedule-study-title" className="ak-page-title">Schedule a study</h1>
        <p className="ak-page-title__sub">{[row.test, row.patientDisplay, detail].filter(Boolean).join(SEP)}</p>
      </div>

      <div className="ak-page-body">
        <section className="ak-card ak-card--panel" aria-labelledby="schedule-study-facts">
          <h2 id="schedule-study-facts" className="ak-caption">The study</h2>
          <div className="schedule-study-grid">
            <dl className="ak-facts ak-facts--fields schedule-study-facts">
              <Fact term="Accession" hint="Appears on the console, the images and the report.">
                {row.accession ?? "Issued when scheduled"}
              </Fact>
              <Fact term="Modality" hint="From the orderable, not chosen here.">
                {orderable.status === "none" && row.modality ? row.modality : fromOrder(modalityWords)}
              </Fact>
              <Fact term="Body part and side">{fromOrder(bodyPartWords)}</Fact>
            </dl>
            <div className="imaging-field">
              <label htmlFor="schedule-room" className="ak-label">Room</label>
              <select id="schedule-room" className="ak-field" value={roomId} disabled={busy || roomsLoading || Boolean(roomsError)}
                onChange={(event) => setChoice({ scope: details.scope, roomId: event.target.value })}>
                <option value="">
                  {roomsLoading ? "Loading rooms..." : rooms.length ? "Not chosen yet"
                    : roomsError ? "Rooms could not be read"
                    : details.rooms.status === "incomplete" ? "No rooms could be read" : "No rooms set up"}
                </option>
                {rooms.map((each) => (
                  <option key={each.id} value={each.id}>{each.name ?? "Unnamed room"}{each.site ? SEP + each.site.name : ""}</option>
                ))}
              </select>
              {roomsError ? (
                <p className="ak-field-error" role="alert">The practice's rooms could not be read: {roomsError}</p>
              ) : details.rooms.status === "incomplete" ? (
                <p className="ak-field-help" role="status">Not every room could be read, so this list may be missing some.</p>
              ) : !roomsLoading && rooms.length === 0 ? (
                <p className="ak-field-help">An administrator adds rooms under Organization, Locations.</p>
              ) : null}
            </div>
            <div className="imaging-field">
              <label htmlFor="schedule-at" className="ak-label">When</label>
              <Input id="schedule-at" type="datetime-local" className="ak-field" value={at} disabled={busy}
                onChange={(event) => setAt(event.target.value)} />
            </div>
            <dl className="ak-facts ak-facts--fields">
              <Fact term="Performed by">Assigned when performed</Fact>
            </dl>
          </div>
        </section>

        <section className="ak-card ak-card--panel" aria-labelledby="schedule-study-images">
          <h2 id="schedule-study-images" className="ak-caption">How the images will reach us</h2>
          <dl className="ak-facts ak-facts--fields">
            <Fact term="Export and upload" hint="Needs nothing installed.">
              Always available
            </Fact>
          </dl>
        </section>

        {unread ? (
          <div className="schedule-study-retry">
            <Button className="btn btn-blue-ghost" disabled={busy} onClick={details.retry}>Read the details again</Button>
          </div>
        ) : null}

        {failure ? (
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>{failure}</AlertDescription>
          </Alert>
        ) : null}

        <div className="schedule-study-actions">
          {onCancel ? (
            <Button className="btn btn-red-ghost schedule-study-cancel" disabled={busy}
              onClick={() => { setCancelError(undefined); setCancelOpen(true); }}>
              Cancel this study
            </Button>
          ) : null}
          <Button className="btn btn-blue" disabled={busy} onClick={() => void submit()}>
            {busy ? "Scheduling..." : "Schedule"}
          </Button>
        </div>
        {onCancel ? (
          <ArchiveConfirmModal
            open={cancelOpen}
            onOpenChange={(open) => { if (!open && !cancelling) setCancelOpen(false); }}
            resourceLabel={row.test ?? "this study"}
            title={`Cancel ${row.test ?? "this study"}?`}
            description="It stays on the patient's record marked Withdrawn and comes off the imaging worklist."
            confirmLabel="Cancel the study"
            submittingLabel="Cancelling..."
            cancelLabel="Keep the study"
            submitting={cancelling}
            error={cancelError}
            onConfirm={(reason, note) => void cancel(reason, note)}
          />
        ) : null}
      </div>
    </section>
  );
};

export default ScheduleStudyPage;