import { 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 { ToggleGroupControl, ToggleGroupControlOption } from "../../../components/ui/toggle-group-control.tsx";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import type { DiagnosticOrderQueueRow, OutsideRead } from "../../../hooks/useDiagnosticOrderQueue.ts";
import { useImagingReadHandoff } from "../../../hooks/useImagingReadHandoff.ts";
import { SEP } from "./ImagingWorklist.tsx";
import "./RecordRefusalDialog.css";

// WHAT THE OUTSIDE READER SAID ABOUT THE STUDY ARRIVING, recorded once, by a person, apart from the send.
// Sending it was never delivery; this is the only thing that says they have it.

const OutsideReadArrivalDialog = ({
  row,
  onClose,
  onRecorded,
}: {
  row?: DiagnosticOrderQueueRow;
  onClose: () => void;
  onRecorded: (orderId: string, outside: OutsideRead) => void;
}) => {
  const { confirmOutsideRead } = useImagingReadHandoff();
  const [outcome, setOutcome] = useState<"received" | "not-received" | "">("");
  const [note, setNote] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string>();

  if (!row?.orderId || !row.outsideRead) return null;
  const reader = row.outsideRead.reader;

  const submit = async () => {
    setBusy(true);
    setError(undefined);
    try {
      const response = await confirmOutsideRead(row.orderId as string, {
        outcome: outcome as "received" | "not-received",
        ...(note.trim() ? { note: note.trim() } : {}),
      });
      if (response?.outsideRead?.confirmation) onRecorded(row.orderId as string, response.outsideRead);
      onClose();
    } catch (failure) {
      console.error("Error recording what the outside reader said:", failure);
      setError(relayServerFailure(failure, "That could not be saved. Nothing was recorded."));
    } finally {
      setBusy(false);
    }
  };

  return (
    <Dialog open onOpenChange={(open) => { if (!open && !busy) onClose(); }}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Did {reader} get the study?</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">
          <ToggleGroupControl label="What they said" value={outcome} disabled={busy} isBlock className="whitespace-nowrap"
            onChange={(value) => setOutcome(value === "not-received" ? "not-received" : "received")}>
            <ToggleGroupControlOption value="received" label="They have it" />
            <ToggleGroupControlOption value="not-received" label="It did not arrive" />
          </ToggleGroupControl>
          <div className="refusal-field">
            <Label htmlFor="arrival-note">Who you spoke to, or what they said (optional)</Label>
            <Input id="arrival-note" value={note} disabled={busy} onChange={(e) => setNote(e.target.value)} />
          </div>
        </div>

        <DialogFooter>
          <Button className="btn btn-blue" disabled={busy || !outcome} onClick={() => void submit()}>
            {busy ? <><Loader2 className="h-4 w-4 animate-spin" /> Saving…</> : "Save"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default OutsideReadArrivalDialog;