import { useEffect, useRef, 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 { Label } from "../../../components/ui/label.tsx";
import { Textarea } from "../../../components/ui/textarea.tsx";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import { newOperationId, type HeldLabResult } from "../../../hooks/useHeldLabResults.ts";

// SETTING A LABORATORY RESULT ASIDE: it leaves the list, nothing is filed, and what the laboratory sent is kept. The
// reason is required, because the next person to wonder where it went reads it.

const REASON_MAX = 500;

interface Props {
  item?: HeldLabResult;
  onClose: () => void;
  onDone: () => void;
  dismiss: (id: string, reason: string, operationId: string) => Promise<unknown>;
}

const SetAsideHeldResultDialog = ({ item, onClose, onDone, dismiss }: Props) => {
  const [reason, setReason] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string>();
  const operation = useRef(newOperationId());

  useEffect(() => {
    setReason("");
    setError(undefined);
    operation.current = newOperationId();
  }, [item]);

  const said = reason.trim();
  const setAside = async () => {
    if (!item || !said || said.length > REASON_MAX) return;
    setBusy(true);
    setError(undefined);
    try {
      await dismiss(item.id, said, operation.current);
      onDone();
    } catch (failure) {
      setError(relayServerFailure(failure, "This was not confirmed as set aside. Try again; a repeat is recognised."));
    } finally {
      setBusy(false);
    }
  };

  return (
    <Dialog open={Boolean(item)} onOpenChange={(open) => { if (!open) onClose(); }}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Set this laboratory result aside</DialogTitle>
          <DialogDescription>Nothing is filed and it leaves this list. What the laboratory sent is kept.</DialogDescription>
        </DialogHeader>
        <Label htmlFor="held-lab-result-reason">Why</Label>
        <Textarea
          id="held-lab-result-reason"
          value={reason}
          maxLength={REASON_MAX}
          onChange={(event) => setReason(event.target.value)}
          placeholder="For example: not a patient of this practice"
        />
        {error ? <Alert variant="destructive"><AlertCircle className="size-4" /><AlertDescription>{error}</AlertDescription></Alert> : null}
        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={busy}>Cancel</Button>
          <Button variant="destructive" onClick={setAside} disabled={!said || busy}>
            {busy ? <Loader2 className="size-4 animate-spin" aria-hidden /> : null}
            Set aside
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default SetAsideHeldResultDialog;