import { useEffect, useMemo, useState, type ChangeEvent } from "react";
import { AlertCircle, Loader2 } 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 { Checkbox } from "../../../../components/ui/checkbox.tsx";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../../components/ui/tabs.tsx";
import { Alert, AlertDescription } from "../../../../components/ui/alert.tsx";
import { relayServerFailure } from "../../../../utils/fetchFailureMessage";
import { useDiagnosticCatalogue } from "../../../../hooks/useDiagnosticCatalogue.ts";
import type { LabConnection, LabTestMappingChange } from "../../../../hooks/useLabConnections.ts";
import {
    applyImport,
    LOINC,
    MAX_IMPORT_BYTES,
    MAX_PAIRING_CHANGES,
    pairingChanges,
    pairingRows,
    parseCsv,
    type ImportOutcome,
    type PairingRow,
} from "./labTestCodes.ts";
import "./DiagnosticsPage.css";
import { EmptyState } from "../../../../components/ui/empty-state";

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

interface Props {
    target: TestCodesTarget;
    onClose: () => void;
    saveTestMappings: (id: string, changes: LabTestMappingChange[]) => Promise<LabConnection | undefined>;
}

const readText = (file: File) => new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result ?? ""));
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
});

const LabTestCodesDialog = ({ target, onClose, saveTestMappings }: Props) =>
    target ? <Pairing connection={target.connection} onClose={onClose} saveTestMappings={saveTestMappings} /> : null;

const Pairing = ({ connection, onClose, saveTestMappings }: {
    connection: LabConnection;
    onClose: () => void;
    saveTestMappings: Props["saveTestMappings"];
}) => {
    const { orderables, loading, error: catalogueError } = useDiagnosticCatalogue();
    const [rows, setRows] = useState<PairingRow[]>([]);
    const [imported, setImported] = useState<ImportOutcome>();
    const [fileError, setFileError] = useState<string>();
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState<string>();
    const [problems, setProblems] = useState<Record<string, string>>({});
    const [saved, setSaved] = useState(false);

    useEffect(() => {
        if (!loading) setRows(pairingRows(orderables, connection.testMappings));
    }, [loading, orderables, connection.testMappings]);

    const changes = useMemo(() => pairingChanges(rows), [rows]);

    const edit = (key: string, patch: Partial<PairingRow>) => {
        setSaved(false);
        setRows((current) => current.map((row) => {
            if (row.key !== key) return row;
            const next = { ...row, ...patch };
            // A changed code is a new pairing, so its review does not carry over.
            return patch.theirCode !== undefined && patch.theirCode.trim() !== row.theirCode.trim()
                ? { ...next, confirm: false }
                : next;
        }));
    };

    const upload = async (event: ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        event.target.value = "";
        setFileError(undefined);
        setImported(undefined);
        if (!file) return;
        if (file.size > MAX_IMPORT_BYTES) {
            setFileError("That file is larger than 1 MB. Split it and import each part.");
            return;
        }
        try {
            const outcome = applyImport(rows, parseCsv(await readText(file)));
            setRows(outcome.rows);
            setImported(outcome);
            setSaved(false);
        } catch (failure) {
            console.error("Error reading a laboratory catalogue file:", failure);
            setFileError("That file could not be read. Save it as CSV and try again.");
        }
    };

    const submit = async () => {
        setSaving(true);
        setError(undefined);
        setProblems({});
        try {
            const next = await saveTestMappings(connection.id as string, changes.map((each) => each.change));
            setRows(pairingRows(orderables, next?.testMappings));
            setImported(undefined);
            setSaved(true);
        } catch (failure) {
            const listed = (failure as { body?: { problems?: { row: number; message: string }[] } })?.body?.problems;
            if (Array.isArray(listed) && listed.length > 0) {
                setProblems(Object.fromEntries(listed.map((each) => [changes[each.row]?.key ?? "", each.message])));
                setError("Some test codes could not be saved, so none were. Each problem is shown on its row.");
            } else {
                setError(relayServerFailure(failure, "The test codes could not be saved. Please try again."));
            }
        } finally {
            setSaving(false);
        }
    };

    const tooMany = changes.length > MAX_PAIRING_CHANGES;

    return (
        <Dialog open onOpenChange={(open) => { if (!open && !saving) onClose(); }}>
            <DialogContent className="diagnostics-editor diagnostics-pairing">
                <DialogHeader>
                    <DialogTitle>{(connection.name ?? "Laboratory") + " \u00b7 catalogue & test codes"}</DialogTitle>
                    <DialogDescription>
                        Match each test to this laboratory's order code. Electronic ordering is available only after someone reviews the match.
                    </DialogDescription>
                </DialogHeader>

                {error ? (
                    <Alert variant="destructive">
                        <AlertCircle className="h-4 w-4" />
                        <AlertDescription>{error}</AlertDescription>
                    </Alert>
                ) : null}
                {saved ? <p className="diagnostics-note" role="status">Test codes saved.</p> : null}

                <Tabs defaultValue="manual">
                    <TabsList>
                        <TabsTrigger value="upload">Upload spreadsheet</TabsTrigger>
                        <TabsTrigger value="manual">Enter manually</TabsTrigger>
                    </TabsList>
                    <TabsContent value="upload" className="diagnostics-field">
                        <Label htmlFor="lab-catalogue-file">Their catalogue, as CSV</Label>
                        <Input id="lab-catalogue-file" type="file" accept=".csv,text/csv" onChange={(e) => void upload(e)} />
                        <p className="diagnostics-note">
                            Three columns: their order code, their test name, LOINC code. A line is matched
                            by its LOINC code only. Nothing is marked reviewed until you tick it.
                        </p>
                        {fileError ? <p className="ak-notice ak-notice--error" role="alert">{fileError}</p> : null}
                        {imported ? <ImportSummary outcome={imported} /> : null}
                    </TabsContent>
                    <TabsContent value="manual">
                        <p className="diagnostics-note">
                            Type their order code beside each test, then tick the ones you have checked.
                        </p>
                    </TabsContent>
                </Tabs>

                {loading ? (
                    <p className="diagnostics-note diagnostics-loading">
                        <Loader2 className="h-4 w-4 animate-spin" />
                        {"Loading your test catalogue\u2026"}
                    </p>
                ) : catalogueError ? (
                    <p className="ak-notice ak-notice--error" role="alert">{catalogueError}</p>
                ) : rows.length === 0 ? (
                    <EmptyState
                        size="compact"
                        title="Your catalogue has no laboratory test with a standard code yet."
                        description="Add one under Our test catalogue first."
                    />
                ) : (
                    <div className="diagnostics-pairings-scroll">
                        <table className="diagnostics-pairings">
                            <thead>
                                <tr>
                                    <th scope="col"><span className="sr-only">Reviewed</span></th>
                                    <th scope="col">Test in Akashic</th>
                                    <th scope="col" className="diagnostics-pairing-standard">Standard code</th>
                                    <th scope="col">Their order code</th>
                                </tr>
                            </thead>
                            <tbody>
                                {rows.map((row) => (
                                    <PairingLine key={row.key} row={row} problem={problems[row.key]} edit={edit} />
                                ))}
                            </tbody>
                        </table>
                    </div>
                )}

                <p className="diagnostics-note">
                    Check specimen requirements, units and order questions before approving a match. A similar
                    name alone is not a match. Clearing a code removes that pairing.
                </p>
                {tooMany ? (
                    <p className="ak-notice ak-notice--error" role="alert">
                        {"Save at most " + MAX_PAIRING_CHANGES + " changes at a time."}
                    </p>
                ) : null}

                <DialogFooter>
                    <Button
                        className="btn btn-blue"
                        disabled={saving || changes.length === 0 || tooMany}
                        onClick={() => void submit()}
                    >
                        Save reviewed mappings
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

const standardCode = (row: PairingRow) => (row.system === LOINC ? "LOINC " : "") + row.code;

const PairingLine = ({ row, problem, edit }: {
    row: PairingRow;
    problem?: string;
    edit: (key: string, patch: Partial<PairingRow>) => void;
}) => {
    // A saved review stays until the code changes; to withdraw it, change or clear the code.
    const keepsReview = Boolean(row.stored?.reviewedAt) && row.stored?.theirCode === row.theirCode.trim();
    return (
        <tr>
            <td>
                <Checkbox
                    aria-label={"Reviewed: " + row.name}
                    checked={row.confirm}
                    disabled={!row.theirCode.trim() || keepsReview}
                    onCheckedChange={(checked) => edit(row.key, { confirm: checked === true })}
                />
            </td>
            <td>
                {row.name}
                <span className="diagnostics-pairing-code">{standardCode(row)}</span>
            </td>
            <td className="diagnostics-pairing-standard">{standardCode(row)}</td>
            <td>
                <Input
                    aria-label={"Their order code for " + row.name}
                    value={row.theirCode}
                    maxLength={64}
                    onChange={(e) => edit(row.key, { theirCode: e.target.value })}
                />
                {problem ? <p className="ak-notice ak-notice--error" role="alert">{problem}</p> : null}
            </td>
        </tr>
    );
};

const ImportSummary = ({ outcome }: { outcome: ImportOutcome }) => (
    <div role="status">
        <p className="diagnostics-note">
            {(outcome.matched === 1 ? "1 test was" : outcome.matched + " tests were")
                + " filled from the file. Review each one and tick it before saving."}
        </p>
        {outcome.unused.length > 0 ? (
            <>
                <p className="diagnostics-note">
                    {outcome.unused.length === 1 ? "1 line was not used:" : outcome.unused.length + " lines were not used:"}
                </p>
                <ul className="diagnostics-unused">
                    {outcome.unused.slice(0, 50).map((each) => (
                        <li key={each.line}>
                            {"Line " + each.line + ": " + [each.theirCode, each.theirName].filter(Boolean).join(" ")
                                + " (" + each.reason + ")"}
                        </li>
                    ))}
                </ul>
                {outcome.unused.length > 50 ? (
                    <p className="diagnostics-note">{"And " + (outcome.unused.length - 50) + " more."}</p>
                ) : null}
            </>
        ) : null}
    </div>
);

export default LabTestCodesDialog;