import { useEffect, useState } from "react";
import { AlertCircle } from "lucide-react";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "../../../components/ui/dialog.tsx";
import { Button } from "../../../components/ui/button.tsx";
import { Input } from "../../../components/ui/input.tsx";
import { Label } from "../../../components/ui/label.tsx";
import { Textarea } from "../../../components/ui/textarea.tsx";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/ui/select.tsx";
import { Alert, AlertDescription } from "../../../components/ui/alert.tsx";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import type { Pending } from "./QualityControlStrip.tsx";
import { ActWithdrawn } from "../DiagnosticOrdersPage/ActWithdrawn.tsx";
import { dayAndTime } from "./benchTime.ts";
import "./QualityControlStrip.css";

// A run always names its test; there is no value field because the range lives on the vial.

interface Props {
    pending?: Pending;
    onClose: () => void;
    logRun: (run: {
        orderableId: string;
        lot: string;
        level?: string;
        outcome: "pass" | "fail";
    }) => Promise<void>;
    recordCorrectiveAction: (runId: string, action: string) => Promise<void>;
    /** The caller may no longer make this write: the dialog stays readable and closable, and cannot send. */
    withdrawn?: boolean;
}

export const ControlRunDialog = ({ pending, onClose, logRun, recordCorrectiveAction, withdrawn }: Props) => {
    const [lot, setLot] = useState("");
    const [level, setLevel] = useState("");
    // No outcome until one is chosen, so a run is never saved as passing by default.
    const [outcome, setOutcome] = useState<"pass" | "fail">();
    const [action, setAction] = useState("");
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState<string>();
    const [chosen, setChosen] = useState<string>();

    const opened = pending ? (pending.kind === "run" ? `run:${pending.tests.map((each) => each.orderableId).join(",")}` : `correction:${pending.runId}`) : undefined;
    useEffect(() => {
        setChosen(pending?.kind === "run" && pending.tests.length === 1 ? pending.tests[0].orderableId : undefined);
        setLot("");
        setLevel("");
        setOutcome(undefined);
        setAction("");
        setError(undefined);
    }, [opened]);

    if (!pending) return null;

    const loggingARun = pending.kind === "run";
    const submittable = loggingARun
        ? Boolean(chosen) && lot.trim().length > 0 && outcome !== undefined
        : action.trim().length > 0;
    const testName = pending.kind === "run"
        ? pending.tests.find((each) => each.orderableId === chosen)?.test
        : pending.test;
    const failedAt = pending.kind === "correction" ? dayAndTime(pending.ranAt) : undefined;
    const failure = pending.kind === "correction"
        ? [pending.lot ? `Lot ${pending.lot}` : undefined, failedAt ? `Failed ${failedAt}` : undefined].filter(Boolean).join(" · ")
        : undefined;

    const submit = async () => {
        setBusy(true);
        setError(undefined);
        try {
            if (pending.kind === "run" && outcome) {
                await logRun({ orderableId: chosen as string, lot, level, outcome });
            } else if (pending.kind === "correction") {
                await recordCorrectiveAction(pending.runId, action);
            }
            onClose();
        } catch (err) {
            console.error("Error recording quality control:", err);
            setError(relayServerFailure(err, "Could not record that. Please try again."));
        } finally {
            setBusy(false);
        }
    };

    return (
        <Dialog open onOpenChange={(open) => { if (!open && !busy) onClose(); }}>
            <DialogContent className="bench-dialog">
                <DialogHeader>
                    <DialogTitle>{loggingARun ? "Log a control run" : "Record corrective action"}</DialogTitle>
                </DialogHeader>

                <div className="bench-identity">
                    <strong>{testName ?? (loggingARun ? "Choose the test" : "Test not recorded")}</strong>
                    {failure ? <span>{failure}</span> : null}
                </div>

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

                {loggingARun ? (
                    <div className="qc-fields">
                        <DialogDescription className="sr-only">The lot and outcome of a control run for this test.</DialogDescription>
                        {pending.tests.length > 1 ? (
                            <div className="qc-field qc-field-wide">
                                <Label htmlFor="qc-test">Test</Label>
                                <Select value={chosen ?? ""} onValueChange={setChosen}>
                                    <SelectTrigger id="qc-test">
                                        <SelectValue placeholder="Choose the test" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {pending.tests.map((each) => (
                                            <SelectItem key={each.orderableId} value={each.orderableId}>
                                                {each.test ?? "Test not recorded"}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                        ) : null}
                        <div className="qc-field">
                            <Label htmlFor="qc-lot">Control lot *</Label>
                            <Input id="qc-lot" value={lot} onChange={(event) => setLot(event.target.value)} />
                        </div>
                        <div className="qc-field">
                            <Label htmlFor="qc-level">Level (optional)</Label>
                            <Input id="qc-level" value={level} onChange={(event) => setLevel(event.target.value)} />
                        </div>
                        <div className="qc-field qc-field-wide">
                            <Label htmlFor="qc-outcome">Outcome</Label>
                            <Select value={outcome ?? ""} onValueChange={(value) => setOutcome(value === "fail" ? "fail" : "pass")}>
                                <SelectTrigger id="qc-outcome">
                                    <SelectValue placeholder="Choose outcome" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="pass">Pass</SelectItem>
                                    <SelectItem value="fail">Fail</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>
                    </div>
                ) : (
                    <div className="qc-fields">
                        <div className="qc-field qc-field-wide">
                            <Label htmlFor="qc-action">What was done</Label>
                            <Textarea
                                id="qc-action"
                                value={action}
                                rows={4}
                                placeholder="Describe the corrective action"
                                onChange={(event) => setAction(event.target.value)}
                            />
                        </div>
                        <DialogDescription className="ak-field-help qc-field-wide">
                            This records the action against the failed control run. It does not record a new passing run.
                        </DialogDescription>
                    </div>
                )}
                {withdrawn ? <ActWithdrawn /> : null}

                <DialogFooter>
                    <Button className="btn btn-green" disabled={!submittable || busy || withdrawn} onClick={() => void submit()}>
                        {busy ? "Saving…" : loggingARun ? "Save control run" : "Save corrective action"}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};