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 { Alert, AlertDescription } from "../../../../components/ui/alert.tsx";
import { relayServerFailure } from "../../../../utils/fetchFailureMessage";
import type { LabConnection, LabCredentials } from "../../../../hooks/useLabConnections.ts";
import "./DiagnosticsPage.css";

// Write-only: a saved sign-in is never read back, so the boxes always start empty and a save
// replaces whatever was held.

export type CredentialsTarget = { connection: LabConnection } | undefined;

interface Props {
    target: CredentialsTarget;
    onClose: () => void;
    saveCredentials: (id: string, credentials: LabCredentials) => Promise<void>;
    removeCredentials: (id: string) => Promise<void>;
}

const EMPTY: LabCredentials = {
    apiKey: "", username: "", password: "", clientCertificate: "", clientKey: "", sendingFacility: "",
};

const NEEDS_NO_SIGN_IN = new Set(["secure-email", "direct-project"]);

const LabCredentialsDialog = ({ target, onClose, saveCredentials, removeCredentials }: Props) => {
    const [draft, setDraft] = useState<LabCredentials>(EMPTY);
    const [saving, setSaving] = useState(false);
    const [confirmingRemove, setConfirmingRemove] = useState(false);
    const [error, setError] = useState<string>();

    useEffect(() => {
        setDraft(EMPTY);
        setConfirmingRemove(false);
        setError(undefined);
    }, [target]);

    if (!target) return null;

    const { connection } = target;
    const saved = connection.credentialsConfigured === true;
    const needsNone = NEEDS_NO_SIGN_IN.has(connection.connectionType ?? "");
    const mllp = connection.connectionType === "hl7v2-mllp";
    const set = (patch: Partial<LabCredentials>) => setDraft((prev) => ({ ...prev, ...patch }));

    const run = async (act: () => Promise<void>, fallback: string) => {
        setSaving(true);
        setError(undefined);
        try {
            await act();
            onClose();
        } catch (failure) {
            console.error("Error changing a laboratory sign-in:", failure);
            setError(relayServerFailure(failure, fallback));
        } finally {
            setSaving(false);
        }
    };

    const submit = () => {
        const filled = [draft.apiKey, draft.username, draft.password, draft.clientCertificate, draft.clientKey]
            .some((value) => value?.trim());
        if (!filled) {
            setError("Enter the sign-in this laboratory gave you");
            return;
        }
        void run(
            () => saveCredentials(connection.id as string, draft),
            "The sign-in was not saved. Please try again.",
        );
    };

    const remove = () => void run(
        () => removeCredentials(connection.id as string),
        "The sign-in was not removed. Please try again.",
    );

    return (
        <Dialog open onOpenChange={(open) => { if (!open && !saving) onClose(); }}>
            <DialogContent className="diagnostics-editor">
                <DialogHeader>
                    <DialogTitle>Sign-in for {connection.name ?? "this laboratory"}</DialogTitle>
                    <DialogDescription>
                        {saved
                            ? "Credentials are saved and will not be shown again. Enter new credentials to replace them."
                            : "No sign-in is saved for this laboratory yet."}
                    </DialogDescription>
                </DialogHeader>

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

                {needsNone ? (
                    <p className="diagnostics-note">This way of sending needs no sign-in.</p>
                ) : (
                    <div className="diagnostics-form">
                        <div className="diagnostics-field">
                            <Label htmlFor="lab-api-key">Token or API key</Label>
                            <Input
                                id="lab-api-key"
                                type="password"
                                autoComplete="off"
                                value={draft.apiKey ?? ""}
                                onChange={(e) => set({ apiKey: e.target.value })}
                            />
                        </div>
                        <p className="diagnostics-note">
                            If the laboratory gave you a token, that is all it needs. Otherwise enter the
                            username and password it gave you.
                        </p>
                        <div className="diagnostics-field">
                            <Label htmlFor="lab-username">Username</Label>
                            <Input
                                id="lab-username"
                                autoComplete="off"
                                value={draft.username ?? ""}
                                onChange={(e) => set({ username: e.target.value })}
                            />
                        </div>
                        <div className="diagnostics-field">
                            <Label htmlFor="lab-password">Password</Label>
                            <Input
                                id="lab-password"
                                type="password"
                                autoComplete="off"
                                value={draft.password ?? ""}
                                onChange={(e) => set({ password: e.target.value })}
                            />
                        </div>
                        {mllp ? (
                            <>
                                <div className="diagnostics-field">
                                    <Label htmlFor="lab-facility">Sending facility</Label>
                                    <Input
                                        id="lab-facility"
                                        value={draft.sendingFacility ?? ""}
                                        onChange={(e) => set({ sendingFacility: e.target.value })}
                                    />
                                </div>
                                <div className="diagnostics-field">
                                    <Label htmlFor="lab-certificate">Client certificate</Label>
                                    <Textarea
                                        id="lab-certificate"
                                        rows={4}
                                        value={draft.clientCertificate ?? ""}
                                        onChange={(e) => set({ clientCertificate: e.target.value })}
                                    />
                                </div>
                                <div className="diagnostics-field">
                                    <Label htmlFor="lab-key">Client key</Label>
                                    <Textarea
                                        id="lab-key"
                                        rows={4}
                                        value={draft.clientKey ?? ""}
                                        onChange={(e) => set({ clientKey: e.target.value })}
                                    />
                                </div>
                            </>
                        ) : null}
                    </div>
                )}

                <DialogFooter>
                    {saved && !confirmingRemove ? (
                        <Button className="btn btn-red-ghost" disabled={saving} onClick={() => setConfirmingRemove(true)}>
                            Remove the sign-in
                        </Button>
                    ) : null}
                    {saved && confirmingRemove ? (
                        <Button className="btn btn-red" disabled={saving} onClick={remove}>
                            Yes, remove it
                        </Button>
                    ) : null}
                    {needsNone ? null : (
                        <Button className="btn btn-blue" disabled={saving} onClick={submit}>
                            Save
                        </Button>
                    )}
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

export default LabCredentialsDialog;