import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
} from "../../../components/ui/dialog.tsx";
import { Button } from "../../../components/ui/button.tsx";
import { useStaffPermissionServiceContext } from "../../../services";
import type { BenchRow } from "../../../hooks/useBench.ts";
import { dayAndTime } from "./benchTime.ts";

interface Props {
    row?: BenchRow;
    onClose: () => void;
    /** Absent when this caller may not do it; the act is then not offered. */
    onEnterResult?: (row: BenchRow) => void;
    onRecordRefusal?: (row: BenchRow) => void;
}

// A tube another laboratory is running: where it went, and the two answers that can come back.
export const OrderDetailsDialog = ({ row, onClose, onEnterResult, onRecordRefusal }: Props) => {
    const { canManage, permissionsSettled } = useStaffPermissionServiceContext();
    const mayWork = permissionsSettled && canManage("diagnostics");
    if (!row) return null;

    const collected = dayAndTime(row.collectedAt);
    const detail = [row.accession, collected ? `Collected ${collected}` : undefined].filter(Boolean).join(" · ");

    return (
        <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
            <DialogContent className="bench-dialog">
                <DialogHeader>
                    <DialogTitle>Order details</DialogTitle>
                </DialogHeader>

                <div className="bench-identity">
                    <strong>{`${row.patientDisplay ?? "Patient not recorded"} · ${row.test ?? "Test not recorded"}`}</strong>
                    {detail ? <span>{detail}</span> : null}
                </div>

                <DialogDescription className="sr-only">Where this order was sent, and what can come back.</DialogDescription>

                <dl className="ak-facts">
                    <div className="ak-facts__item">
                        <dt>Status</dt>
                        <dd>Sent to lab</dd>
                    </div>
                    <div className="ak-facts__item">
                        <dt>Performing laboratory</dt>
                        <dd>{row.sentOut?.laboratory ?? "Not named on the send-out"}</dd>
                    </div>
                </dl>

                {mayWork && (onEnterResult || onRecordRefusal) ? (
                    <div className="bench-actions">
                        {onEnterResult ? (
                            <Button className="btn btn-blue-ghost" onClick={() => { if (permissionsSettled && canManage("diagnostics")) onEnterResult(row); }}>
                                Enter result
                            </Button>
                        ) : null}
                        {onRecordRefusal ? (
                            <Button className="btn btn-red-ghost" onClick={() => { if (permissionsSettled && canManage("diagnostics")) onRecordRefusal(row); }}>
                                Record order refusal
                            </Button>
                        ) : null}
                    </div>
                ) : null}
            </DialogContent>
        </Dialog>
    );
};