import { useEffect, useState } from "react";
import { AlertCircle, Loader2 } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../../components/ui/dialog.tsx";
import { Alert, AlertDescription } from "../../../components/ui/alert.tsx";
import { Button } from "../../../components/ui/button.tsx";
import { Input } from "../../../components/ui/input.tsx";
import { Label } from "../../../components/ui/label.tsx";
import { priorityLabel } from "../../../utils/fhirStatusVocabulary.ts";
import { ToggleGroupControl, ToggleGroupControlOption } from "../../../components/ui/toggle-group-control.tsx";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import type { DiagnosticOrderQueueRow, OutsideRead, ReadElsewhere } from "../../../hooks/useDiagnosticOrderQueue.ts";
import { useImagingReadHandoff, type ImagingReader } from "../../../hooks/useImagingReadHandoff.ts";
import { SEP } from "./ImagingWorklist.tsx";
import "./RecordRefusalDialog.css";

// SENDING A STUDY TO ANOTHER PRACTICE TO BE READ. On Akashic, the images stay where they are, the reader
// is let in to this one study, and its report comes back to this order. Off Akashic, nothing is sent by
// Akashic at all: staff record where it is going and how, get it there themselves, and record later what
// the reader said.

const METHODS: { value: OutsideRead["method"]; label: string }[] = [
  { value: "disc", label: "A disc" },
  { value: "courier", label: "Courier" },
  { value: "their-portal", label: "Their own upload portal" },
  { value: "other", label: "Another way (say in the note)" },
];

const SendForReadingDialog = ({
  row,
  readers,
  onClose,
  onSent,
  onSentOutside,
}: {
  row?: DiagnosticOrderQueueRow;
  readers: ImagingReader[];
  onClose: () => void;
  onSent: (orderId: string, route: ReadElsewhere) => void;
  onSentOutside?: (orderId: string, outside: OutsideRead) => void;
}) => {
  const { sendForReading, sendForOutsideRead } = useImagingReadHandoff();
  const [where, setWhere] = useState<"akashic" | "outside">(readers.length ? "akashic" : "outside");
  const [readerId, setReaderId] = useState("");
  const [outside, setOutside] = useState({ reader: "", contact: "", method: "" as OutsideRead["method"] | "", note: "" });
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string>();

  useEffect(() => {
    setReaderId(readers[0]?.readerId ?? "");
    setWhere(readers.length ? "akashic" : "outside");
    setError(undefined);
  }, [row, readers]);

  if (!row?.orderId) return null;

  const chosen = readers.find((each) => each.readerId === readerId);
  const name = chosen?.reader ?? "the reader";
  const instances = row.images?.instances ?? 0;
  const outsideName = outside.reader.trim();
  const outsideReady = Boolean(outsideName && outside.method);

  const submit = async () => {
    setBusy(true);
    setError(undefined);
    try {
      if (where === "outside") {
        const response = await sendForOutsideRead(row.orderId as string, {
          reader: outsideName,
          method: outside.method as OutsideRead["method"],
          ...(outside.contact.trim() ? { contact: outside.contact.trim() } : {}),
          ...(outside.note.trim() ? { note: outside.note.trim() } : {}),
        });
        if (response?.outsideRead?.sentAt) onSentOutside?.(row.orderId as string, response.outsideRead);
      } else {
        const response = await sendForReading(row.orderId as string, readerId);
        // The row changes only on what the server recorded.
        if (response?.route?.sentAt) onSent(row.orderId as string, response.route);
      }
      onClose();
    } catch (failure) {
      console.error("Error sending the study to be read:", failure);
      setError(relayServerFailure(failure, "The study could not be sent. Please try again."));
    } finally {
      setBusy(false);
    }
  };

  return (
    <Dialog open onOpenChange={(open) => { if (!open && !busy) onClose(); }}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Send out to be read</DialogTitle>
          <DialogDescription>
            {[row.accession, row.test ?? "This study", row.patientDisplay].filter(Boolean).join(SEP)}
          </DialogDescription>
        </DialogHeader>

        {error && (
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

        <div className="refusal-form">
          {readers.length > 0 && (
            <ToggleGroupControl label="The reading practice is" value={where} disabled={busy} isBlock className="whitespace-nowrap"
              onChange={(value) => setWhere(value === "outside" ? "outside" : "akashic")}>
              <ToggleGroupControlOption value="akashic" label="On Akashic" />
              <ToggleGroupControlOption value="outside" label="Not on Akashic" />
            </ToggleGroupControl>
          )}

          {where === "akashic" ? (
            <>
              <div className="refusal-field">
                <Label htmlFor="read-reader">Who reads it</Label>
                <select
                  id="read-reader"
                  className="refusal-select"
                  value={readerId}
                  disabled={busy}
                  onChange={(e) => setReaderId(e.target.value)}
                >
                  {readers.map((each) => (
                    <option key={each.readerId} value={each.readerId}>{each.reader ?? "Connected practice"}</option>
                  ))}
                </select>
              </div>

              <div className="refusal-field">
                <Label>What is being sent</Label>
                <p className="ak-field-help">
                  {instances === 1 ? "1 image" : instances + " images"}, and the reason it was ordered. The images stay
                  here; {name} is let in to this study only.
                </p>
              </div>
            </>
          ) : (
            <>
              <p className="ak-field-help">
                Akashic does not send the images to a practice that is not on Akashic. Get the study to them the way
                you choose below, with the requisition; then record here what they say once it arrives. Their report
                comes back to this order.
              </p>
              <div className="refusal-field">
                <Label htmlFor="outside-reader">Reading practice *</Label>
                <Input id="outside-reader" value={outside.reader} disabled={busy}
                  onChange={(e) => setOutside({ ...outside, reader: e.target.value })} />
              </div>
              <div className="refusal-field">
                <Label htmlFor="outside-contact">Their fax, phone or address</Label>
                <Input id="outside-contact" value={outside.contact} disabled={busy}
                  onChange={(e) => setOutside({ ...outside, contact: e.target.value })} />
              </div>
              <div className="refusal-field">
                <Label htmlFor="outside-method">How the study reaches them *</Label>
                <select id="outside-method" className="refusal-select" value={outside.method} disabled={busy}
                  onChange={(e) => setOutside({ ...outside, method: e.target.value as OutsideRead["method"] })}>
                  <option value="">Choose…</option>
                  {METHODS.map((each) => <option key={each.value} value={each.value}>{each.label}</option>)}
                </select>
              </div>
              <div className="refusal-field">
                <Label htmlFor="outside-note">Note (optional)</Label>
                <Input id="outside-note" value={outside.note} disabled={busy}
                  onChange={(e) => setOutside({ ...outside, note: e.target.value })} />
              </div>
            </>
          )}
          {/* The reader works from the order, so what it asks travels with the study either way. */}
          <div className="refusal-field">
            <Label>How soon</Label>
            <p className="ak-field-help">{priorityLabel(row.priority) ?? "Not stated on the order"}</p>
          </div>
          <div className="refusal-field">
            <Label>The clinical question</Label>
            <p className="ak-field-help">{row.question?.trim() || "Not recorded on the order"}</p>
          </div>
        </div>

        <DialogFooter>
          {where === "akashic" ? (
            <Button className="btn btn-blue" disabled={busy || !readerId} onClick={() => void submit()}>
              {busy ? <><Loader2 className="h-4 w-4 animate-spin" /> Sending…</> : "Send to " + name}
            </Button>
          ) : (
            <Button className="btn btn-blue" disabled={busy || !outsideReady} onClick={() => void submit()}>
              {busy ? <><Loader2 className="h-4 w-4 animate-spin" /> Saving…</> : "Record as going to " + (outsideName || "the reader")}
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default SendForReadingDialog;