import { useState } from "react";
import { AlertCircle, CheckCircle2 } 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 { relayServerFailure } from "../../../utils/fetchFailureMessage";
import { useReturnDiagnosticResult } from "../../../hooks/useReturnDiagnosticResult.ts";

interface Props {
    orderId?: string;
    test?: string;
    sender?: string;
    onClose: () => void;
}

// The number is typed from the requisition's letterhead; nothing looks it up.
const FaxResultDialog = ({ orderId, test, sender, onClose }: Props) => {
    const { faxResult } = useReturnDiagnosticResult();
    const [toNumber, setToNumber] = useState("");
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState<string>();
    const [sent, setSent] = useState(false);

    if (!orderId) return null;

    const submit = async () => {
        setBusy(true);
        setError(undefined);
        try {
            await faxResult(orderId, toNumber);
            setSent(true);
        } catch (failure) {
            console.error("Error faxing a result:", failure);
            setError(relayServerFailure(failure, "The result was not sent."));
        } finally {
            setBusy(false);
        }
    };

    return (
        <Dialog open onOpenChange={(open) => { if (!open && !busy) onClose(); }}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Fax the result back</DialogTitle>
                    <DialogDescription>
                        {test ?? "This result"}
                        {sender ? `, ordered by ${sender}` : ""}
                        {". Use the fax number on their requisition."}
                    </DialogDescription>
                </DialogHeader>

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

                {sent ? (
                    <Alert>
                        <CheckCircle2 className="h-4 w-4" />
                        <AlertDescription>Your fax service accepted it for {toNumber}.</AlertDescription>
                    </Alert>
                ) : (
                    <div>
                        <Label htmlFor="result-fax-number">Their fax number</Label>
                        <Input
                            id="result-fax-number"
                            type="tel"
                            value={toNumber}
                            disabled={busy}
                            placeholder="(319) 555-0148"
                            onChange={(event) => setToNumber(event.target.value)}
                        />
                    </div>
                )}

                <DialogFooter>
                    {sent ? (
                        <Button className="btn btn-blue" onClick={onClose}>Done</Button>
                    ) : (
                        <Button
                            className="btn btn-blue"
                            disabled={!toNumber.trim() || busy}
                            onClick={() => void submit()}
                        >
                            {busy ? "Sending…" : "Send the fax"}
                        </Button>
                    )}
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

export default FaxResultDialog;