import { useCallback, useEffect, useState } from "react";
import { AlertCircle, Loader2, Plus, ScanEye, Trash2 } 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 { Alert, AlertDescription } from "../../../../components/ui/alert.tsx";
import { EmptyState } from "../../../../components/ui/empty-state.tsx";
import { relayServerFailure } from "../../../../utils/fetchFailureMessage";
import { useImagingReadHandoff, type ImagingReader } from "../../../../hooks/useImagingReadHandoff.ts";
import "./DiagnosticsPage.css";

// The Akashic practices this one sends studies to be read. A reader is found by its NPI; removing one
// switches the connection off on the server, so studies already sent keep their history. The list is
// a search that lags a write, so each change is applied from what the write returned.

const ImagingReaders = () => {
    const { listReaders, addReader, removeReader } = useImagingReadHandoff();

    const [readers, setReaders] = useState<ImagingReader[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string>();
    const [adding, setAdding] = useState(false);
    const [npi, setNpi] = useState("");
    const [saving, setSaving] = useState(false);
    const [addError, setAddError] = useState<string>();
    const [removing, setRemoving] = useState<string>();

    const reload = useCallback(async () => {
        setLoading(true);
        setError(undefined);
        try {
            setReaders(await listReaders());
        } catch (failure) {
            setError(relayServerFailure(failure, "The reading practices could not be loaded."));
        } finally {
            setLoading(false);
        }
    }, [listReaders]);

    useEffect(() => {
        void reload();
    }, [reload]);

    const open = () => {
        setNpi("");
        setAddError(undefined);
        setAdding(true);
    };

    const submit = async () => {
        if (!/^\d{10}$/.test(npi.trim())) {
            setAddError("Enter the reading practice's ten-digit NPI.");
            return;
        }
        setSaving(true);
        setAddError(undefined);
        try {
            const added = await addReader(npi.trim());
            setReaders((current) => [...current.filter((each) => each.readerId !== added.readerId), added]);
            setAdding(false);
        } catch (failure) {
            setAddError(relayServerFailure(failure, "That practice could not be added. Please try again."));
        } finally {
            setSaving(false);
        }
    };

    const remove = async (reader: ImagingReader) => {
        setRemoving(reader.readerId);
        setError(undefined);
        try {
            await removeReader(reader.readerId);
            setReaders((current) => current.filter((each) => each.readerId !== reader.readerId));
        } catch (failure) {
            setError(relayServerFailure(failure, "That practice could not be removed. Please try again."));
        } finally {
            setRemoving(undefined);
        }
    };

    if (loading && readers.length === 0 && !error) {
        return (
            <p className="diagnostics-note diagnostics-loading">
                <Loader2 className="h-4 w-4 animate-spin" />
                Loading the reading practices…
            </p>
        );
    }

    return (
        <div className="diagnostics-catalogue">
            {error ? (
                <Alert variant="destructive">
                    <AlertCircle className="h-4 w-4" />
                    <AlertDescription>{error}</AlertDescription>
                    <Button className="btn btn-blue-ghost diagnostics-retry" onClick={() => void reload()}>
                        Try again
                    </Button>
                </Alert>
            ) : null}

            <section className="ak-card ak-card--panel diagnostics-panel">
                <h2 className="ak-section-title">Reading practices</h2>
                <p className="ak-body">
                    A reading practice sees a study only when the patient has authorized it, and accepts or
                    declines each one.
                </p>

                {readers.length === 0 ? (
                    <EmptyState
                        icon={ScanEye}
                        title="No reading practices yet"
                        description="Add an Akashic practice that reads your imaging studies so you can send performed studies to them."
                        size="compact"
                    />
                ) : (
                    <ul className="diagnostics-list">
                        {readers.map((reader) => (
                            <li className="diagnostics-row" key={reader.readerId}>
                                <div className="diagnostics-row-lead">
                                    <span className="diagnostics-name">{reader.reader ?? "Unnamed practice"}</span>
                                </div>
                                <div className="diagnostics-row-actions">
                                    <Button
                                        className="btn btn-blue-ghost"
                                        disabled={removing === reader.readerId}
                                        onClick={() => void remove(reader)}
                                    >
                                        <Trash2 className="h-4 w-4" />
                                        Remove
                                    </Button>
                                </div>
                            </li>
                        ))}
                    </ul>
                )}

                <div className="diagnostics-setup__footer">
                    <Button className="btn btn-blue-ghost" onClick={open}>
                        <Plus className="h-4 w-4" />
                        Add a reading practice
                    </Button>
                </div>
            </section>

            {adding ? (
                <Dialog open onOpenChange={(next) => { if (!next && !saving) setAdding(false); }}>
                    <DialogContent className="diagnostics-editor">
                        <DialogHeader>
                            <DialogTitle>Add a reading practice</DialogTitle>
                            <DialogDescription>
                                Another practice on Akashic that this practice sends studies to be read.
                            </DialogDescription>
                        </DialogHeader>

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

                        <div className="diagnostics-form">
                            <div className="diagnostics-field">
                                <Label htmlFor="reader-npi">Their NPI</Label>
                                <Input
                                    id="reader-npi"
                                    value={npi}
                                    onChange={(e) => setNpi(e.target.value)}
                                    placeholder="1548273901"
                                    inputMode="numeric"
                                />
                                <p className="diagnostics-note">
                                    Ten digits. The practice must be on Akashic with this NPI in its profile.
                                </p>
                            </div>
                        </div>

                        <DialogFooter>
                            <Button className="btn btn-blue" disabled={saving} onClick={() => void submit()}>
                                Add reading practice
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            ) : null}
        </div>
    );
};

export default ImagingReaders;