import { useEffect, useState } from "react";
import { AlertCircle, Loader2 } from "lucide-react";
import { useAuthServiceContext } from "../../../../services/AuthService.tsx";
import { useOrganizationServiceContext } from "../../../../services/OrganizationService.tsx";
import { Checkbox } from "../../../../components/ui/checkbox.tsx";
import { Label } from "../../../../components/ui/label.tsx";
import { useOwnedSettingSave } from "../../../../hooks/useOwnedSettingSave";
import {
    DIAGNOSTICS_FIELDS,
    type DiagnosticsDeclaration,
    type DiagnosticsField,
    hasDeclaredDiagnostics,
    readDiagnosticsDeclaration,
} from "../../../../utils/organizationDiagnostics";
import "./DiagnosticsPage.css";

type Answers = Record<DiagnosticsField, boolean>;

const seed = (declaration: DiagnosticsDeclaration): Answers =>
    Object.fromEntries(DIAGNOSTICS_FIELDS.map((field) => [field, declaration[field] === true])) as Answers;

const DiagnosticsSettingsTab = ({ onSaved, onManage }: {
    onSaved?: () => void;
    onManage?: (tab: "laboratories" | "catalogue") => void;
}) => {
    const { currentOrganization, setWpOrganization } = useAuthServiceContext();
    const { updateDiagnosticsSettings, fetchOrganizationAsCaller } = useOrganizationServiceContext();

    const declaration = readDiagnosticsDeclaration(currentOrganization ?? undefined);
    const neverAsked = !hasDeclaredDiagnostics(declaration);

    // Saves and their recovery belong to this practice as opened here; the answer is what the practice stored.
    const { state, save: saveSetting, check, owner, ownsOpening } = useOwnedSettingSave(currentOrganization?.id, {
        read: (id, transport) => fetchOrganizationAsCaller(id, undefined, id, transport),
        publish: setWpOrganization,
    });
    const [draft, setDraft] = useState(() => ({
        owner, answers: seed(declaration), dirty: false, editedSinceSave: false, seeded: state.stored,
    }));
    const owned = ownsOpening();
    const answers = owned && draft.owner === owner ? draft.answers : seed(declaration);
    const saving = state.status === "saving";
    const held = state.status === "unconfirmed" || state.status === "checking";
    const stored = owned && state.stored ? readDiagnosticsDeclaration(state.stored) : undefined;

    useEffect(() => {
        if (!ownsOpening()) return;
        setDraft((was) => {
            if (was.owner !== owner) return {
                owner, answers: seed(readDiagnosticsDeclaration(state.stored ?? currentOrganization ?? undefined)),
                dirty: false, editedSinceSave: false, seeded: state.stored,
            };
            // A confirmed read seeds a fresh owner's draft, never choices they have already edited.
            if (state.stored && !was.dirty && was.seeded !== state.stored) return {
                ...was, answers: seed(readDiagnosticsDeclaration(state.stored)), seeded: state.stored,
            };
            return was;
        });
    }, [owner, ownsOpening, state.stored, currentOrganization]);

    const choice = (field: DiagnosticsField, label: string) => (
        <div className="diagnostics-choice">
            <Checkbox
                id={"diagnostics-" + field}
                checked={answers[field]}
                disabled={!owned || draft.owner !== owner}
                onCheckedChange={(checked) => {
                    if (!ownsOpening()) return;
                    setDraft((current) => current.owner === owner ? {
                        ...current, answers: { ...current.answers, [field]: checked === true },
                        dirty: true, editedSinceSave: true,
                    } : current);
                }}
            />
            <Label htmlFor={"diagnostics-" + field}>{label}</Label>
        </div>
    );

    const save = async () => {
        if (!ownsOpening() || draft.owner !== owner) return;
        // Who the laboratory accepts orders from only means something while it performs tests, so
        // those two are left as they were rather than answered by turning the laboratory off.
        const { acceptsOwnOrders, acceptsOutsideOrders, ...rest } = answers;
        const sent: DiagnosticsDeclaration = answers.laboratory ? { ...rest, acceptsOwnOrders, acceptsOutsideOrders } : rest;
        setDraft((current) => current.owner === owner ? { ...current, editedSinceSave: false } : current);
        await saveSetting((transport) => updateDiagnosticsSettings(sent, transport), {
            onSaved: () => onSaved?.(),
            refusal: "Could not save that. Please try again.",
        });
    };

    return (
        <div className="diagnostics-setup">
            <section className="ak-card ak-card--panel">
                <h2 className="ak-section-title">How does your practice handle laboratory work?</h2>
                <div className="diagnostics-setup__lede">
                    <p className="ak-body">
                        Choose everything your practice does. Collecting a specimen and performing the test are
                        separate.
                    </p>
                </div>
                {neverAsked ? (
                    <p className="ak-field-help">
                        Nothing can be added to the test catalogue until the practice performs tests or has
                        imaging on site.
                    </p>
                ) : null}

                {owned && state.message ? (
                    <div className="ak-notice ak-notice--error" role="alert">
                        <AlertCircle className="h-4 w-4" aria-hidden="true" />
                        <span>{state.message}</span>
                        {state.status === "unconfirmed" ? (
                            <button type="button" className="btn btn-blue-ghost" onClick={() => void check()}>Check again</button>
                        ) : null}
                    </div>
                ) : null}
                {stored ? (
                    <p className="ak-field-help" role="status">
                        We could not confirm the last save. Stored now: {storedSummary(stored)}.
                    </p>
                ) : null}

                {choice("ordersExternal", "We order tests from external laboratories")}
                {choice("collectsSpecimens", "We collect specimens at our practice")}
                {choice("laboratory", "We perform tests in our own laboratory")}

                {answers.laboratory ? (
                    <div className="diagnostics-setup__inset">
                        <div className="diagnostics-setup__inset-head">
                            <h3 className="ak-section-title">Orders our laboratory accepts</h3>
                        </div>
                        {choice("acceptsOwnOrders", "From our own practitioners")}
                        {choice("acceptsOutsideOrders", "From other practices")}
                        <div className="diagnostics-setup__inset-note">
                            <p className="ak-field-help">
                                Outside practices do not need an Akashic account to send a requisition.
                            </p>
                        </div>
                    </div>
                ) : null}

                <hr className="ak-rule"/>
                <div>
                    <h3 className="ak-section-title">Imaging</h3>
                    {choice("imaging", "We have imaging equipment on site")}
                </div>

                <div className="diagnostics-setup__footer">
                    <button type="button" className="btn btn-green" disabled={!owned || draft.owner !== owner || saving || held} onClick={() => void save()}>
                        {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                        Save practice setup
                    </button>
                </div>
                <p className="ak-status-line" role="status">{owned && draft.owner === owner && state.status === "saved" && !draft.editedSinceSave ? "Practice setup saved." : owned && state.status === "checking" ? "Checking what is stored." : ""}</p>
            </section>

            <section className="ak-card ak-card--panel">
                <h2 className="ak-section-title">Next, configure the work you do</h2>
                <div className="diagnostics-setup__row">
                    <div>
                        <p className="ak-card__title">External laboratories</p>
                        <p className="ak-body">Connections, practice accounts and each laboratory&rsquo;s order codes.</p>
                    </div>
                    <button type="button" className="btn btn-blue-ghost" onClick={() => onManage?.("laboratories")}>
                        Manage laboratories
                    </button>
                </div>
                <hr className="ak-rule"/>
                <div className="diagnostics-setup__row">
                    <div>
                        <p className="ak-card__title">Our test catalogue</p>
                        <p className="ak-body">
                            Tests we perform, specimen requirements, entry questions and expected results.
                        </p>
                    </div>
                    <button type="button" className="btn btn-blue-ghost" onClick={() => onManage?.("catalogue")}>
                        Manage tests
                    </button>
                </div>
                <hr className="ak-rule"/>
            </section>
        </div>
    );
};

const STORED_LABELS: Record<DiagnosticsField, string> = {
    ordersExternal: "orders from external laboratories",
    collectsSpecimens: "collects specimens",
    laboratory: "performs tests",
    acceptsOwnOrders: "accepts its own orders",
    acceptsOutsideOrders: "accepts outside orders",
    imaging: "imaging on site",
};

const storedSummary = (declaration: DiagnosticsDeclaration): string => {
    const yes = DIAGNOSTICS_FIELDS.filter((field) => declaration[field] === true).map((field) => STORED_LABELS[field]);
    return yes.length ? yes.join(", ") : "nothing declared";
};

export default DiagnosticsSettingsTab;