import { useState } from "react";
import { Loader2 } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../../components/ui/dialog";
import { Button } from "../../../components/ui/button";
import { useReferralWorkbenchService } from "../../../services/ReferralWorkbenchService";
import { stillOpen, type ReferralRequestScope } from "../../../utils/referralRequestScope";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import type { ReferralQueueRow, ReferralWithdrawalReason } from "../../../hooks/useReferralQueue";
import "./referralDialog.css";

// - WITHDRAW A REFERRAL PLACED IN ERROR, as referrals.html#s-withdraw-referral draws the confirmation.
//
// The sender corrects an error without claiming the other practice accepted or booked anything. The server
// records who and why, stops any pending Akashic delivery or claim and keeps the order. What it cannot do -
// and what this screen must never promise - is recall a copy already in another practice's hands, so the
// warning tells the sender to contact them.

export const WITHDRAWAL_REASON_LABELS: Record<ReferralWithdrawalReason, string> = {
  "wrong-practice": "Wrong practice",
  "placed-in-error": "Placed in error",
  other: "Other",
};

const WithdrawReferralDialog = ({
  row,
  onOpenChange,
  onWithdrawn,
  scope,
}: {
  row: ReferralQueueRow | null;
  onOpenChange: (open: boolean) => void;
  onWithdrawn: () => void;
  /** The opening this dialog belongs to: its requests are admitted by it, and nothing is shown once it retires. */
  scope?: ReferralRequestScope;
}) => {
  const { withdrawReferral } = useReferralWorkbenchService();
  const [reason, setReason] = useState<ReferralWithdrawalReason>("wrong-practice");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | undefined>();

  const close = (open: boolean) => {
    if (busy) return;
    if (!open) {
      setError(undefined);
      setReason("wrong-practice");
    }
    onOpenChange(open);
  };

  const confirm = async () => {
    if (!row?.orderId) return;
    setBusy(true);
    setError(undefined);
    try {
      await withdrawReferral(row.orderId, reason, scope);
      if (!stillOpen(scope)) return;
      setBusy(false);
      onWithdrawn();
      close(false);
    } catch (failure) {
      setBusy(false);
      if (!stillOpen(scope)) return;
      setError(relayServerFailure(failure, "The referral could not be withdrawn. Nothing was changed."));
    }
  };

  const practice = row?.performerDisplay ?? "the receiving practice";

  return (
    <Dialog open={Boolean(row)} onOpenChange={close}>
      <DialogContent className="ak-dialog referral-rfdlg referral-withdraw max-w-none gap-0 p-0">
        <DialogHeader className="ak-overlay__header">
          <DialogTitle>Withdraw this referral?</DialogTitle>
          <DialogDescription className="ak-overlay__description">
            {row?.patientDisplay ?? "This patient"} · {practice}
          </DialogDescription>
        </DialogHeader>
        <div className="ak-overlay__body space-y-3">
          <p className="referral-withdraw__warning">
            This stops pending Akashic delivery and claim. If the receiving practice already has a copy,
            withdrawing here cannot erase it. Contact them directly.
          </p>
          <div>
            <label className="ak-label block" htmlFor="referral-withdraw-reason">Reason</label>
            <select
              id="referral-withdraw-reason"
              className="mt-1 w-full rounded border border-border p-2 text-sm"
              value={reason}
              disabled={busy}
              onChange={(event) => setReason(event.target.value as ReferralWithdrawalReason)}
            >
              {(Object.keys(WITHDRAWAL_REASON_LABELS) as ReferralWithdrawalReason[]).map((code) => (
                <option key={code} value={code}>{WITHDRAWAL_REASON_LABELS[code]}</option>
              ))}
            </select>
          </div>
          {error && (
            <p className="ak-notice ak-notice--error ak-notice--sm" role="alert">{error}</p>
          )}
        </div>
        <DialogFooter className="ak-overlay__footer">
          <Button type="button" className="btn btn-blue-ghost" disabled={busy} onClick={() => close(false)}>
            Keep referral
          </Button>
          <Button type="button" className="btn btn-red" disabled={busy} onClick={() => { void confirm(); }}>
            {busy && <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />}
            Withdraw referral
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default WithdrawReferralDialog;