import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { UploadCloud, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
import { AppHeader, AppSpinner, ScrollableTab } from '../../../components';
import InvitePatientsPanel from './InvitePatientsPanel.tsx';
import {
    usePatientImportService,
    type ColumnMapping, type DryRunResult, type ImportDecision, type CommitResult, type PlannedImportRow,
    type ImportOperationSummary, type ImportStatus,
} from '../../../services/PatientImportService.tsx';
import {
    commitReadiness, rowsNeedingDecision, reRunWarning, commitOutcomeSummary, fieldLabel,
    choiceFits, decisionList, matchChoices, reviewCounts,
    ANSWERS_PER_STEP, canContinue, canReviewAgain, narrowToRows, remainingWork, stillQueued, withRevisions,
    type ImportStep,
} from './patientImportWizard';
import { onViewerChange, viewerEpoch } from '../../../utils/writeThroughHold';
import { mayHaveBeenWritten, relayServerFailure } from '../../../utils/fetchFailureMessage';
import { importButtonLabel } from './importButtonLabel';

// - bringing a practice's existing patients in.
//
// THE REVIEW STEP IS THE FEATURE, NOT A CONFIRMATION SCREEN. Patient identity in Akashic is GLOBAL,
// so an import that just writes rows silently creates duplicates of people who already exist - usually
// as patients of another practice - and those duplicates stay invisible until the patient turns up
// somewhere else with half a history. This page exists to put that reconciliation in front of a human
// while it is still cheap.
//
// ZERO WordPress: Radix `ui/*` + Tailwind + lucide only. No Cancel button - Back navigates steps.

const STEP_LABELS: Array<[ImportStep, string]> = [
    ['upload', 'Choose a file'],
    ['mapping', 'Match the columns'],
    ['review', 'Review'],
    ['done', 'Done'],
];

/** Thrown by a request whose opening has moved on; its caller publishes nothing. */
class ImportRetired extends Error {}

/** A commit answered by our own refusal wrote nothing new; anything else may have been made. */
const refusedBy = (error: unknown): { status: number; code?: string; batchId?: string } | undefined => {
    const failure = error as { status?: unknown; body?: { code?: unknown; batchId?: unknown } } | null;
    if (typeof failure?.status !== 'number' || failure.status >= 500 || mayHaveBeenWritten(error)) return undefined;
    const code = typeof failure.body?.code === 'string' ? failure.body.code : undefined;
    const batchId = typeof failure.body?.batchId === 'string' ? failure.body.batchId : undefined;
    return { status: failure.status, code, batchId };
};

const PatientImportPage: React.FC = () => {
    const { requestUploadPolicy, uploadFile, dryRun, commit, getStatus, listOperations } = usePatientImportService();

    const [step, setStep] = useState<ImportStep>('upload');
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const [batchId, setBatchId] = useState<string | null>(null);
    const [result, setResult] = useState<DryRunResult | undefined>();
    const [mapping, setMapping] = useState<ColumnMapping>({});
    const [decisions, setDecisions] = useState<Map<number, ImportDecision>>(new Map());
    const [outcome, setOutcome] = useState<CommitResult | null>(null);
    // Earlier imports of this practice, read from the server; nothing about them is kept in the browser.
    const [operations, setOperations] = useState<ImportOperationSummary[] | null>(null);
    const [listFailed, setListFailed] = useState(false);
    const [olderAfter, setOlderAfter] = useState<string | undefined>();
    const [olderFailed, setOlderFailed] = useState(false);
    // Answers a step has not recorded yet, held in memory only and sent again with the next continue.
    const [queued, setQueued] = useState<{ batchId: string; answers: ImportDecision[] } | null>(null);
    const [status, setStatus] = useState<ImportStatus | null>(null);
    const [unconfirmed, setUnconfirmed] = useState(false);
    // A review resumed from an import already under way: its answers name the revision of each row.
    const [revisions, setRevisions] = useState<Map<number, number> | null>(null);

    // Every upload, preview and commit belongs to this opening, this viewer (whose practice it includes) and the
    // batch and mapping it began on. A later one, a new viewer or leaving the page retires it before it is sent
    // or published; a commit already sent may still have been made, and retiring it undoes nothing.
    const opening = useRef<object | undefined>({});
    const generation = useRef(0);
    const inFlight = useRef<AbortController | undefined>(undefined);
    const working = useRef(false);
    const retire = () => { generation.current += 1; inFlight.current?.abort(); inFlight.current = undefined; };
    const begin = () => {
        retire();
        const controller = new AbortController();
        inFlight.current = controller;
        const owner = { opening: opening.current, generation: generation.current, viewer: viewerEpoch() };
        const current = () => owner.opening !== undefined && opening.current === owner.opening
            && generation.current === owner.generation && viewerEpoch() === owner.viewer;
        const admit = () => { if (!current()) throw new ImportRetired(); };
        return { current, transport: { admit, signal: controller.signal } };
    };
    // Read on opening and again for each new viewer; an answer for a retired opening or viewer is dropped.
    const loadOperations = useRef<() => void>(() => {});
    loadOperations.current = () => {
        const op = begin();
        setListFailed(false);
        setOlderFailed(false);
        listOperations(undefined, op.transport).then((page) => {
            if (op.current()) { setOperations(page.operations); setOlderAfter(page.next); }
        }, () => {
            // A refused or failed list is said, never shown as no earlier imports.
            if (op.current()) { setOperations(null); setOlderAfter(undefined); setListFailed(true); }
        });
    };
    // One older page per press, under the same fence; a failed page is said and can be asked for again.
    const loadOlder = useCallback(() => {
        const after = olderAfter;
        if (!after || working.current) return;
        const op = begin();
        setOlderFailed(false);
        listOperations(after, op.transport).then((page) => {
            if (!op.current()) return;
            setOperations((shown) => {
                const known = new Set((shown ?? []).map((item) => item.batchId));
                return [...(shown ?? []), ...page.operations.filter((item) => !known.has(item.batchId))];
            });
            setOlderAfter(page.next);
        }, () => {
            if (op.current()) setOlderFailed(true);
        });
    }, [olderAfter, listOperations]);
    useEffect(() => {
        opening.current = {};
        const stop = onViewerChange(() => {
            retire();
            working.current = false;
            setBusy(false); setStep('upload'); setError(null); setBatchId(null); setResult(undefined);
            setMapping({}); setDecisions(new Map()); setOutcome(null);
            setOperations(null); setListFailed(false); setStatus(null); setUnconfirmed(false); setRevisions(null);
            setOlderAfter(undefined); setOlderFailed(false); setQueued(null);
            loadOperations.current();
        });
        loadOperations.current();
        return () => { stop(); retire(); opening.current = undefined; };
    }, []);

    const readiness = useMemo(() => commitReadiness(result, decisions), [result, decisions]);
    const counts = useMemo(() => (result ? reviewCounts(result, decisions) : { creates: 0, links: 0, skips: 0 }), [result, decisions]);
    const matches = useMemo(() => (result ? rowsNeedingDecision(result) : []), [result]);
    const reRun = useMemo(() => (result ? reRunWarning(result.summary) : undefined), [result]);

    const handleFile = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        // Cleared BEFORE the guard, so re-picking the SAME file after an error still fires `onChange`.
        // Without this a practice who picks a bad file has to pick a different one to try again.
        event.target.value = '';
        if (!file || working.current) return;

        const op = begin();
        working.current = true;
        setBusy(true);
        setError(null);
        // A new file is a new review: nothing chosen for the last one carries over.
        setBatchId(null);
        setResult(undefined);
        setDecisions(new Map());
        setOutcome(null);
        setStatus(null);
        setUnconfirmed(false);
        setRevisions(null);

        try {
            const policy = await requestUploadPolicy(op.transport);
            const sent = await uploadFile(policy, file, op.transport);
            if (!op.current()) return;

            // THREE OUTCOMES, AND THE THIRD IS NOT A FAILURE. A FormData POST is a CORS-simple
            // request, so a missing bucket rule withholds the RESPONSE while S3 stores the object
            // anyway. Telling the practice it failed would send them round the loop uploading their
            // whole patient list again. We do not know - so we go and look.
            if (sent === 'failed') {
                setError('That file could not be uploaded. Please check the file and try again.');
                return;
            }

            setBatchId(policy.batchId);
            const plan = await dryRun(policy.batchId, undefined, op.transport);
            if (!op.current()) return;
            setResult(plan);
            setMapping(plan.mapping);
            setStep('mapping');
        } catch (uploadError) {
            if (!op.current()) return;
            setError(uploadError instanceof Error ? uploadError.message : 'That file could not be read.');
        } finally {
            if (op.current()) { working.current = false; setBusy(false); }
        }
    }, [requestUploadPolicy, uploadFile, dryRun]);

    /** Re-plans under the mapping the practice just confirmed. Still writes nothing. */
    const replan = useCallback(async (next: ColumnMapping) => {
        if (!batchId || working.current) return;
        const op = begin();
        working.current = true;
        setBusy(true);
        setError(null);
        setDecisions(new Map());
        try {
            const plan = await dryRun(batchId, next, op.transport);
            if (!op.current()) return;
            setResult(plan);
            // Decisions are cleared: they were made against the previous plan's candidates, and a row
            // number now means something else. Carrying them forward would attach a human's answer to a
            // row they never looked at.
            setDecisions(new Map());
            setStep('review');
        } catch (planError) {
            if (!op.current()) return;
            setError(planError instanceof Error ? planError.message : 'That file could not be read.');
        } finally {
            if (op.current()) { working.current = false; setBusy(false); }
        }
    }, [batchId, dryRun]);

    /** Reads one import's state and does nothing else. */
    const checkStatus = useCallback(async (target: string) => {
        if (working.current) return;
        const op = begin();
        working.current = true;
        setBusy(true);
        setError(null);
        try {
            const read = await getStatus(target, op.transport);
            if (!op.current()) return;
            setBatchId(target);
            setStatus(read);
            setUnconfirmed(false);
            setStep('status');
        } catch (statusError) {
            if (!op.current()) return;
            setError(relayServerFailure(statusError, 'That import could not be read.'));
        } finally {
            if (op.current()) { working.current = false; setBusy(false); }
        }
    }, [getStatus]);

    // One bounded step per press. Answers it did not record stay queued for the next explicit continue; a
    // repeat continues the same operation and never starts another or writes a row twice.
    const runStep = async (op: ReturnType<typeof begin>, target: string, first: ColumnMapping | undefined, answers: ImportDecision[]) => {
        setQueued(answers.length ? { batchId: target, answers } : null);
        const answer = await commit(target, first, answers.slice(0, ANSWERS_PER_STEP), op.transport);
        if (op.current()) {
            const left = stillQueued(answers, answer);
            setQueued(left.length ? { batchId: target, answers: left } : null);
        }
        return answer;
    };

    // A sent commit with no answer may have been made: the page says so and offers a check, never a resend.
    const settleFailure = (commitError: unknown, onRefused: () => void): string | undefined => {
        const refused = refusedBy(commitError);
        if (!refused) {
            setError(null);
            setStatus(null);
            setUnconfirmed(true);
            setStep('status');
            return undefined;
        }
        // A refusal recorded nothing: its answers are not sent again, and the rows are reviewed afresh.
        setQueued(null);
        if (refused.code === 'IMPORT_ALREADY_RUNNING' && refused.batchId) return refused.batchId;
        setError(relayServerFailure(commitError, 'The import could not be completed.'));
        onRefused();
        return undefined;
    };

    const handleCommit = useCallback(async () => {
        if (!batchId || !result || !readiness.ready || working.current) return;
        const op = begin();
        working.current = true;
        setStep('committing');
        setError(null);
        let elsewhere: string | undefined;
        try {
            const chosen = decisionList(result, decisions);
            const answers = revisions ? withRevisions(chosen, revisions) : chosen;
            const committed = await runStep(op, batchId, revisions ? undefined : mapping, answers);
            if (!op.current()) return;
            setOutcome(committed);
            setRevisions(null);
            setStep('done');
        } catch (commitError) {
            if (!op.current()) return;
            elsewhere = settleFailure(commitError, () => setStep('review'));
        } finally {
            if (op.current()) working.current = false;
        }
        // The same file is already being imported: that import is opened, read only.
        if (elsewhere && op.current()) void checkStatus(elsewhere);
    }, [batchId, result, mapping, decisions, revisions, readiness.ready, commit, checkStatus]);

    /** An explicit continue of an import already under way, under the mapping it began with. */
    const continueOperation = useCallback(async (target: string) => {
        if (working.current) return;
        const op = begin();
        working.current = true;
        setBusy(true);
        setError(null);
        try {
            const answer = await runStep(op, target, undefined, queued?.batchId === target ? queued.answers : []);
            if (!op.current()) return;
            setOutcome(answer);
            setStep('done');
        } catch (continueError) {
            if (!op.current()) return;
            settleFailure(continueError, () => setStep('status'));
        } finally {
            if (op.current()) { working.current = false; setBusy(false); }
        }
    }, [commit, queued]);

    /** Shows again only the rows still waiting on an answer, from the upload while it is still here. */
    const reviewAgain = useCallback(async (read: ImportStatus) => {
        if (working.current || !canReviewAgain(read)) return;
        const op = begin();
        working.current = true;
        setBusy(true);
        setError(null);
        try {
            const plan = await dryRun(read.batchId, read.mapping, op.transport);
            if (!op.current()) return;
            setBatchId(read.batchId);
            setResult(narrowToRows(plan, new Set(read.undecided)));
            setMapping(plan.mapping);
            setDecisions(new Map());
            setRevisions(new Map(read.rows.map((row) => [row.rowNumber, row.revision])));
            setStep('review');
        } catch (planError) {
            if (!op.current()) return;
            setError(relayServerFailure(planError, 'The rows could not be shown again.'));
        } finally {
            if (op.current()) { working.current = false; setBusy(false); }
        }
    }, [dryRun]);

    const decide = (rowNumber: number, action: ImportDecision['action'], patientId?: string) => {
        setDecisions((current) => new Map(current).set(rowNumber, action === 'link' ? { rowNumber, action, patientId } : { rowNumber, action }));
    };

    // A changed mapping is a different plan: the preview it replaces is retired and its choices go with it.
    // Never while a commit is out: it was sent, may have been made, and settles where it was sent.
    const changeMapping = (next: ColumnMapping) => {
        if (working.current) return;
        retire();
        setDecisions(new Map());
        setMapping(next);
    };

    return (
        <div className="h-full">
            <AppHeader showBackButton={true} />
            <ScrollableTab>
                <div className="mx-auto w-full max-w-5xl px-4 py-6 pb-32">
                    <h2 className="text-2xl font-semibold text-ink-strong">Import your patients</h2>
                    <p className="mt-1 text-sm text-muted-foreground">
                        Upload a patient list from your old system. Nothing is created until you review it and import.
                    </p>

                    <ol className="mt-6 flex flex-wrap gap-x-6 gap-y-2 text-sm" aria-label="Import steps">
                        {STEP_LABELS.map(([value, label], index) => {
                            const current = step === value || (step === 'committing' && value === 'review');
                            return (
                                <li
                                    key={value}
                                    aria-current={current ? 'step' : undefined}
                                    className={current ? 'font-semibold text-ink-strong' : 'text-muted-foreground'}
                                >
                                    {index + 1}. {label}
                                </li>
                            );
                        })}
                    </ol>

                    {error && (
                        <p role="alert" className="mt-4 text-sm font-medium text-destructive">{error}</p>
                    )}

                    {/* A real export takes several seconds, on an otherwise empty page. */}
                    {busy && (
                        <AppSpinner message={step === 'upload' ? 'Reading your file…' : 'Checking what will happen…'} />
                    )}

                    {!busy && step === 'upload' && (
                        <UploadStep
                            onFile={handleFile}
                            operations={operations}
                            listFailed={listFailed}
                            hasOlder={Boolean(olderAfter)}
                            olderFailed={olderFailed}
                            onOlder={loadOlder}
                            onCheck={(target) => void checkStatus(target)}
                        />
                    )}

                    {!busy && step === 'status' && (
                        <StatusStep
                            batchId={batchId}
                            status={status}
                            unconfirmed={unconfirmed}
                            waiting={queued && queued.batchId === batchId ? queued.answers.length : 0}
                            onCheck={(target) => void checkStatus(target)}
                            onContinue={(target) => void continueOperation(target)}
                            onReview={(read) => void reviewAgain(read)}
                        />
                    )}

                    {!busy && step === 'mapping' && result && (
                        <MappingStep
                            result={result}
                            mapping={mapping}
                            onChange={changeMapping}
                            onContinue={() => void replan(mapping)}
                        />
                    )}

                    {!busy && (step === 'review' || step === 'committing') && result && (
                        <ReviewStep
                            result={result}
                            matches={matches}
                            decisions={decisions}
                            counts={counts}
                            onDecide={decide}
                            reRun={reRun}
                            blockers={readiness.blockers}
                            ready={readiness.ready}
                            committing={step === 'committing'}
                            onBack={() => { if (!working.current) setStep(revisions ? 'status' : 'mapping'); }}
                            onCommit={() => void handleCommit()}
                        />
                    )}

                    {!busy && step === 'done' && outcome && (
                        <DoneStep
                            outcome={outcome}
                            waiting={queued?.batchId === outcome.batchId ? queued.answers.length : 0}
                            onCheck={(target) => void checkStatus(target)}
                            onContinue={(target) => void continueOperation(target)}
                        />
                    )}
                </div>
            </ScrollableTab>
        </div>
    );
};

const UploadStep: React.FC<{
    onFile: (event: React.ChangeEvent<HTMLInputElement>) => void;
    operations: ImportOperationSummary[] | null;
    listFailed: boolean;
    hasOlder: boolean;
    olderFailed: boolean;
    onOlder: () => void;
    onCheck: (batchId: string) => void;
}> = ({ onFile, operations, listFailed, hasOlder, olderFailed, onOlder, onCheck }) => (
    <div className="mt-6">
        <EarlierImports operations={operations} listFailed={listFailed} hasOlder={hasOlder} olderFailed={olderFailed} onOlder={onOlder} onCheck={onCheck} />
        <label
            htmlFor="patient-import-file"
            className="flex cursor-pointer flex-col items-center justify-center gap-2 rounded border border-dashed px-4 py-10 text-center text-sm text-muted-foreground hover:bg-accent"
        >
            <UploadCloud className="h-6 w-6" />
            <span><span className="font-medium text-foreground">Choose a file</span> to upload</span>
            <span className="text-xs">
                A CSV export from your old system. Include your patient ID column if you have one.
            </span>
            <input
                id="patient-import-file"
                type="file"
                accept=".csv,text/csv"
                className="sr-only"
                onChange={onFile}
            />
        </label>

        {/* ⭐ Said BEFORE they upload, not after they commit. A practice that assumes an import creates
            portal accounts will tell a patient their portal is ready and be wrong.

            AND THE FIRST LINE USED TO PROMISE SOMETHING THE PRODUCT REFUSES. It read "Your staff can
            book and chart these patients straight away", and booking one is refused the moment it is
            tried: the Book button is disabled over "Agreements outstanding - <name> has not answered
            Consent to Treat / HIPAA Authorization / HIPAA Privacy."

            That gate is correct and is the 2026-09-02 ruling working - no booking without an answer
            on record, agreed or declined, either way. So the sentence was the wrong half of the pair:
            a panel whose whole job is to say what an import does NOT do was promising the one thing
            it does not do, on the screen a practice reads before uploading its whole patient list.

            It now says what has to happen instead, and names the door - the same ruling's other half,
            that the front desk can attest all three for somebody who agreed on paper, which is what
            keeps the gate from ever preventing care. */}
        <div className="mt-6 rounded border border-border bg-muted/40 p-4 text-sm">
            <p className="flex items-center gap-2 font-medium text-ink-strong">
                <Info className="h-4 w-4" /> What importing does and does not do
            </p>
            <ul className="mt-2 list-disc space-y-1 pl-5 text-muted-foreground">
                <li>Imported patients <strong>cannot sign in</strong> — they have no account until they are invited and register themselves.</li>
                <li>Importing does <strong>not</strong> create clinical authorization. Each patient still has to authorize your practice to hold their record.</li>
                <li>
                    <strong>You cannot book one until the three agreements have an answer.</strong> The
                    patient can answer them in the portal, or your front desk can record their answer
                    for them at check-in.
                </li>
                <li>Including your old system&rsquo;s patient ID lets you safely upload the same file again.</li>
            </ul>
        </div>
    </div>
);

const MappingStep: React.FC<{
    result: DryRunResult;
    mapping: ColumnMapping;
    onChange: (mapping: ColumnMapping) => void;
    onContinue: () => void;
}> = ({ result, mapping, onChange, onContinue }) => {
    const suggestions = result.inferred?.suggestions ?? [];
    const fields = useMemo(() => {
        const known = Object.keys(mapping);
        const suggested = suggestions.map((s) => s.field);
        return [...new Set([...suggested, ...known, ...Object.keys(FIELD_ORDER_FALLBACK)])];
    }, [mapping, suggestions]);

    const confidenceOf = (field: string) => suggestions.find((s) => s.field === field);

    return (
        <div className="mt-6">
            <h2 className="text-lg font-semibold text-ink-strong">Match your columns to ours</h2>
            <p className="mt-1 text-sm text-muted-foreground">
                We have matched what we could. Check anything marked <em>we guessed this</em>.
            </p>

            {/* 🚨 Two columns of the same kind is a QUESTION, never a guess — home phone and mobile phone
                hold the same values, and getting it wrong is the number the practice rings. */}
            {(result.inferred?.ambiguous ?? []).map((choice) => (
                <p key={choice.field} className="mt-3 flex items-start gap-2 text-sm text-amber-ink">
                    <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                    <span>{choice.reason} ({choice.headers.join(' or ')})</span>
                </p>
            ))}

            {result.validation.errors.map((message) => (
                <p key={message} role="alert" className="mt-3 text-sm font-medium text-destructive">{message}</p>
            ))}
            {result.validation.warnings.map((message) => (
                <p key={message} className="mt-3 text-sm text-amber-ink">{message}</p>
            ))}

            <div className="mt-4 overflow-x-auto rounded border border-border">
                <table className="w-full text-sm">
                    <thead className="sticky top-0 bg-muted/50 text-xs uppercase text-muted-foreground">
                        <tr>
                            <th scope="col" className="px-3 py-2 text-left">Our field</th>
                            <th scope="col" className="px-3 py-2 text-left">Your column</th>
                            <th scope="col" className="hidden px-3 py-2 text-left sm:table-cell">How we matched it</th>
                        </tr>
                    </thead>
                    <tbody>
                        {fields.map((field) => {
                            const suggestion = confidenceOf(field);
                            // Drawn twice: as its own column on a laptop, and under the select on a
                            // phone, where a third column squeezes the select to two letters.
                            const reason = suggestion?.confidence === 'likely'
                                ? <span className="text-amber-700">We guessed this — {suggestion.reason}</span>
                                : suggestion?.reason;
                            return (
                                <tr key={field} className="border-t border-border">
                                    <th scope="row" className="px-3 py-2 text-left font-medium text-ink-strong">
                                        {fieldLabel(field)}
                                    </th>
                                    <td className="px-3 py-2">
                                        <select
                                            aria-label={`Column for ${fieldLabel(field)}`}
                                            className="w-full rounded border border-border bg-background px-2 py-1"
                                            value={mapping[field] ?? ''}
                                            onChange={(event) => onChange({
                                                ...mapping,
                                                [field]: event.target.value || undefined,
                                            })}
                                        >
                                            <option value="">Not imported</option>
                                            {result.columns.map((column) => (
                                                <option key={column} value={column}>{column}</option>
                                            ))}
                                        </select>
                                        {reason
                                            ? <p className="mt-1 text-xs text-muted-foreground sm:hidden">{reason}</p>
                                            : null}
                                    </td>
                                    <td className="hidden px-3 py-2 text-xs text-muted-foreground sm:table-cell">
                                        {reason}
                                    </td>
                                </tr>
                            );
                        })}
                    </tbody>
                </table>
            </div>

            <div className="mt-4 flex justify-end">
                <button type="button" className="btn btn-blue" onClick={onContinue}>
                    Continue
                </button>
            </div>
        </div>
    );
};

const ReviewStep: React.FC<{
    result: DryRunResult;
    matches: PlannedImportRow[];
    decisions: Map<number, ImportDecision>;
    counts: { creates: number; links: number; skips: number };
    onDecide: (rowNumber: number, action: ImportDecision['action'], patientId?: string) => void;
    reRun: string | undefined;
    blockers: string[];
    ready: boolean;
    committing: boolean;
    onBack: () => void;
    onCommit: () => void;
}> = ({ result, matches, decisions, counts, onDecide, reRun, blockers, ready, committing, onBack, onCommit }) => (
    <div className="mt-6">
        <h2 className="text-lg font-semibold text-ink-strong">What will happen</h2>

        <dl className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
            {([
                ['New patients', result.summary.create],
                ['Need your decision', result.summary.match],
                ['Already imported', result.summary.alreadyImported],
                ['Cannot be imported', result.summary.error],
            ] as Array<[string, number]>).map(([label, value]) => (
                <div key={label} className="rounded border border-border p-3">
                    <dt className="text-xs uppercase text-muted-foreground">{label}</dt>
                    <dd className="text-2xl font-semibold text-ink-strong">{value}</dd>
                </div>
            ))}
        </dl>

        {/* 🚨 The sentence that has to be read BEFORE the button, not discovered afterwards. */}
        {reRun && (
            <p className="mt-4 flex items-start gap-2 text-sm text-amber-ink">
                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                <span>{reRun}</span>
            </p>
        )}

        {matches.length > 0 && (
            <section className="mt-6">
                <h3 className="text-base font-semibold text-ink-strong">
                    Is this someone we already have?
                </h3>
                <p className="mt-1 text-sm text-muted-foreground">
                    These people may already exist — often as a patient of another practice. Adding them again
                    creates a second record that nobody can see is a duplicate.
                </p>

                <ul className="mt-3 space-y-3">
                    {matches.map((row) => {
                        const remembered = decisions.get(row.rowNumber);
                        const decision = choiceFits(row, remembered) ? remembered : undefined;
                        const choices = matchChoices(row);
                        return (
                            <li key={row.rowNumber} className="rounded border border-border p-3">
                                <p className="text-sm font-medium text-ink-strong">
                                    Row {row.rowNumber}
                                    {row.sourceId ? <span className="ml-2 text-muted-foreground">({row.sourceId})</span> : null}
                                </p>
                                {/* Said once, however many: who they are, and how many, belong to another practice. */}
                                {choices.hasPrivate && (
                                    <p className="mt-2 text-sm text-muted-foreground" data-testid="private-match-notice">
                                        This row may match someone whose record this import cannot show you. Leave the row out, or
                                        add them as new only if you are sure they are a different person.
                                    </p>
                                )}
                                {!choices.readable && (
                                    <p className="mt-2 text-sm text-muted-foreground" data-testid="unreadable-match-notice">
                                        The possible matches for this row could not be read. Leave it out, then check the file again.
                                    </p>
                                )}
                                <div className="mt-2 flex flex-wrap gap-2">
                                    {choices.visible.map((candidate) => (
                                        <button
                                            key={candidate.patientId}
                                            type="button"
                                            aria-pressed={decision?.action === 'link' && decision.patientId === candidate.patientId}
                                            className={
                                                decision?.action === 'link' && decision.patientId === candidate.patientId
                                                    ? 'btn btn-green-sm'
                                                    : 'btn btn-blue-ghost-sm'
                                            }
                                            onClick={() => onDecide(row.rowNumber, 'link', candidate.patientId)}
                                        >
                                            Same person as {candidate.name ?? candidate.patientId}
                                            {candidate.birthDate ? ` (${candidate.birthDate})` : ''}
                                        </button>
                                    ))}
                                    {choices.readable && (
                                        <button
                                            type="button"
                                            aria-pressed={decision?.action === 'create'}
                                            className={decision?.action === 'create' ? 'btn btn-green-sm' : 'btn btn-blue-ghost-sm'}
                                            onClick={() => onDecide(row.rowNumber, 'create')}
                                        >
                                            Not the same — add as new
                                        </button>
                                    )}
                                    <button
                                        type="button"
                                        aria-pressed={decision?.action === 'skip'}
                                        className={decision?.action === 'skip' ? 'btn btn-green-sm' : 'btn btn-blue-ghost-sm'}
                                        onClick={() => onDecide(row.rowNumber, 'skip')}
                                    >
                                        Leave this row out
                                    </button>
                                </div>
                            </li>
                        );
                    })}
                </ul>
            </section>
        )}

        {result.summary.error > 0 && (
            <section className="mt-6">
                <h3 className="text-base font-semibold text-ink-strong">These rows will be left out</h3>
                <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
                    {result.rows.filter((row) => row.outcome === 'error').map((row) => (
                        <li key={row.rowNumber}>Row {row.rowNumber}: {row.reason}</li>
                    ))}
                </ul>
            </section>
        )}

        {/* 🔴 CARD 413 — THIS LIST NEEDED A HEADING OF ITS OWN, because without one it is adopted by
            whatever heading came before it. Landing under "These rows will be left out" it read as
            three more exclusions: "Imported patients cannot sign in", "Importing does not create
            clinical authorization" and "Nothing here is written until you commit" are standing facts
            about the feature, not reasons a row was dropped.
            ⭐ Structurally it was always a separate list; it just had nothing saying so. */}
        {result.limitations.length > 0 && (
            <section className="mt-6 border-t border-border pt-4">
                <h3 className="text-base font-semibold text-ink-strong">What importing does and does not do</h3>
                <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-muted-foreground">
                    {result.limitations.map((limitation) => <li key={limitation}>{limitation}</li>)}
                </ul>
            </section>
        )}

        {blockers.map((blocker) => (
            <p key={blocker} className="mt-3 text-sm font-medium text-destructive">{blocker}</p>
        ))}

        <div className="mt-6 flex items-center justify-between">
            <button
                type="button"
                className="rounded border px-3 py-1.5 text-sm hover:bg-accent"
                disabled={committing}
                onClick={onBack}
            >
                Back
            </button>
            <button
                type="button"
                className={`btn btn-green ${committing ? 'btn-busy' : ''}`}
                disabled={!ready || committing}
                onClick={onCommit}
            >
                {importButtonLabel(counts.creates, counts.links)}
            </button>
        </div>
    </div>
);

const DoneStep: React.FC<{
    outcome: CommitResult;
    waiting: number;
    onCheck: (batchId: string) => void;
    onContinue: (batchId: string) => void;
}> = ({ outcome, waiting, onCheck, onContinue }) => (
    <div className="mt-6">
        <p className="flex items-center gap-2 text-lg font-semibold text-ink-strong">
            <CheckCircle2 className="h-5 w-5 text-emerald-600" />
            {commitOutcomeSummary(outcome)}
        </p>

        <OutstandingRows result={outcome} />
        {waiting > 0 && (
            <p className="mt-4 text-sm text-muted-foreground" data-testid="import-answers-waiting">
                {waiting} {waiting === 1 ? 'answer is' : 'answers are'} still to be sent; Continue sends them.
            </p>
        )}
        {(remainingWork(outcome) > 0 || outcome.undecided.length > 0 || waiting > 0) && (
            <div className="mt-4 flex flex-wrap gap-2">
                <button type="button" className="btn btn-blue-ghost-sm" onClick={() => onCheck(outcome.batchId)}>
                    Check this import
                </button>
                {(canContinue(outcome) || waiting > 0) && (
                    <button type="button" className="btn btn-green" onClick={() => onContinue(outcome.batchId)}>
                        Continue this import
                    </button>
                )}
            </div>
        )}

        {/* ⛔ Failures are shown, never swallowed. Once they are hidden, "the import succeeded" stops
            being evidence that anybody was actually created. */}
        {outcome.failed.length > 0 && (
            <section className="mt-4">
                <h3 className="text-base font-semibold text-ink-strong">These rows could not be added</h3>
                <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
                    {outcome.failed.map((row) => (
                        <li key={row.rowNumber}>Row {row.rowNumber}: {row.reason}</li>
                    ))}
                </ul>
            </section>
        )}

        {/* Left out by choice, and not answered, are different things, and neither was imported. */}
        {(outcome.skipped ?? []).length > 0 && (
            <section className="mt-4" data-testid="import-left-out">
                <h3 className="text-base font-semibold text-ink-strong">Left out by your choice</h3>
                <p className="mt-2 text-sm text-muted-foreground">{(outcome.skipped ?? []).map((row) => `Row ${row}`).join(', ')}</p>
            </section>
        )}
        {outcome.undecided.length > 0 && (
            <section className="mt-4" data-testid="import-unanswered">
                <h3 className="text-base font-semibold text-ink-strong">Not answered, so not imported</h3>
                <p className="mt-2 text-sm text-muted-foreground">{outcome.undecided.map((row) => `Row ${row}`).join(', ')}</p>
            </section>
        )}
        {/* ⭐ The chart exists; these are the cells we could not read. Shown with the practice's own
            words, because they know what they meant. */}
        {outcome.questions.length > 0 && (
            <section className="mt-4">
                <h3 className="text-base font-semibold text-ink-strong">Worth checking</h3>
                <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
                    {outcome.questions.map((question) => (
                        <li key={`${question.rowNumber}-${question.field}`}>
                            Row {question.rowNumber}: we could not read &ldquo;{question.value}&rdquo; as
                            a {fieldLabel(question.field).toLowerCase()}
                            {question.ambiguous ? ' — it could be read two ways, so we left it blank' : ''}.
                        </li>
                    ))}
                </ul>
            </section>
        )}

        {/* 🚨 CARD 331 — THE IMPORT DOES NOT END HERE, AND IT MUST NOT END IN "INVITE THEM ALL" EITHER.
            Spencer's sequence: import (useful on its own — the front desk can already find, book and
            bill these people) ⇒ "we can invite these patients once your email domain is set up" ⇒
            invite, staged and throttled. ⭐ The panel renders the domain gate as a NEXT STEP rather
            than a failure: a practice that has just imported 2,000 patients and is shown an error has
            been told its import went wrong, which is false. */}
        <InvitePatientsPanel />
    </div>
);

const STATE_LABELS: Record<ImportOperationSummary['state'], string> = {
    registered: 'Uploaded, not started',
    initializing: 'Started',
    sealed: 'Under way',
    settled: 'Finished',
};

/** This practice's imports, so one whose answer was lost can be found again after a reload. */
const EarlierImports: React.FC<{
    operations: ImportOperationSummary[] | null;
    listFailed: boolean;
    hasOlder: boolean;
    olderFailed: boolean;
    onOlder: () => void;
    onCheck: (batchId: string) => void;
}> = ({ operations, listFailed, hasOlder, olderFailed, onOlder, onCheck }) => {
    if (listFailed) {
        return <p role="alert" className="mb-4 text-sm text-destructive">Your earlier imports could not be listed just now.</p>;
    }
    const shown = (operations ?? []).filter((op) => op.state !== 'registered');
    if (!shown.length && !hasOlder) return null;
    return (
        <section className="mb-6" data-testid="earlier-imports">
            <h3 className="text-base font-semibold text-ink-strong">Your recent imports</h3>
            <ul className="mt-2 space-y-2">
                {shown.map((op) => (
                    <li key={op.batchId} className="flex flex-wrap items-center justify-between gap-2 rounded border border-border p-3 text-sm">
                        <span>
                            <span className="font-medium text-ink-strong">{STATE_LABELS[op.state]}</span>
                            <span className="ml-2 text-muted-foreground">
                                {new Date(op.registeredAt).toLocaleString()}{op.rows !== null ? ` · ${op.rows} rows` : ''}
                            </span>
                        </span>
                        <button type="button" className="btn btn-blue-ghost-sm" onClick={() => onCheck(op.batchId)}>
                            Check
                        </button>
                    </li>
                ))}
            </ul>
            {olderFailed && (
                <p role="alert" className="mt-2 text-sm text-destructive">Older imports could not be listed just now.</p>
            )}
            {hasOlder && (
                <button type="button" className="btn btn-blue-ghost-sm mt-2" onClick={onOlder}>
                    Show older imports
                </button>
            )}
        </section>
    );
};

/** Rows not yet done, each kind in its own words; none of them was imported, and none is resent here. */
const OutstandingRows: React.FC<{ result: CommitResult }> = ({ result }) => {
    const groups: Array<[string, string, number[]]> = [
        ['import-unconfirmed', 'Not confirmed yet: these may have been added. Check again before doing anything else.', result.unknown ?? []],
        ['import-unchecked', 'Could not be checked against existing patients this time', result.unavailable ?? []],
        ['import-elsewhere', 'Waiting on another import of the same patient ID', result.pendingElsewhere ?? []],
        ['import-conflict', 'Another record already holds the place for these; ask support', result.conflict ?? []],
        ['import-expired', 'The upload expired before these were added', result.expired ?? []],
        ['import-evidence-owed', 'Added; the record of how they were added is still being saved', result.evidenceOwed ?? []],
    ];
    return (
        <>
            {groups.filter(([, , rows]) => rows.length > 0).map(([testId, label, rows]) => (
                <section key={testId} className="mt-4" data-testid={testId}>
                    <h3 className="text-base font-semibold text-ink-strong">{label}</h3>
                    <p className="mt-2 text-sm text-muted-foreground">{rows.map((row) => `Row ${row}`).join(', ')}</p>
                </section>
            ))}
        </>
    );
};

/** One import as the server holds it. Checking reads; only Continue writes, and only the work already admitted. */
const StatusStep: React.FC<{
    batchId: string | null;
    status: ImportStatus | null;
    unconfirmed: boolean;
    waiting: number;
    onCheck: (batchId: string) => void;
    onContinue: (batchId: string) => void;
    onReview: (status: ImportStatus) => void;
}> = ({ batchId, status, unconfirmed, waiting, onCheck, onContinue, onReview }) => (
    <div className="mt-6">
        {unconfirmed && (
            <p role="alert" className="flex items-start gap-2 text-sm font-medium text-amber-ink" data-testid="import-unconfirmed-answer">
                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                <span>We could not confirm this import. It may have been made. Check what happened before importing anything again.</span>
            </p>
        )}
        {status && (
            <>
                <p className="text-lg font-semibold text-ink-strong">{commitOutcomeSummary({ ...status, questions: [] })}</p>
                <OutstandingRows result={{ ...status, questions: [] }} />
                {status.undecided.length > 0 && (
                    <section className="mt-4" data-testid="import-waiting-answer">
                        <h3 className="text-base font-semibold text-ink-strong">Waiting on your answer</h3>
                        <p className="mt-2 text-sm text-muted-foreground">{status.undecided.map((row) => `Row ${row}`).join(', ')}</p>
                    </section>
                )}
            </>
        )}
        <div className="mt-6 flex flex-wrap gap-2">
            {batchId && (
                <button type="button" className="btn btn-blue-ghost-sm" onClick={() => onCheck(batchId)}>
                    {status ? 'Check again' : 'Check what happened'}
                </button>
            )}
            {status && canReviewAgain(status) && (
                <button type="button" className="btn btn-blue-ghost-sm" onClick={() => onReview(status)}>
                    Answer the remaining rows
                </button>
            )}
            {status && (canContinue(status) || waiting > 0) && (

                <button type="button" className="btn btn-green" onClick={() => onContinue(status.batchId)}>
                    Continue this import
                </button>
            )}
        </div>
    </div>
);

/** The order the mapping table lists fields in when the file suggested nothing for them. */
const FIELD_ORDER_FALLBACK: Record<string, true> = {
    sourceId: true, mrn: true, ssn: true,
    prefix: true, firstname: true, middlename: true, lastname: true, suffix: true,
    birthDate: true, gender: true, maritalStatus: true, language: true, race: true, ethnicity: true,
    phone: true, phoneHome: true, phoneMobile: true, phoneWork: true, email: true,
    addressLine1: true, addressLine2: true, city: true, state: true, postalCode: true, country: true,
    emergencyContactName: true, emergencyContactPhone: true, emergencyContactRelationship: true,
};

export default PatientImportPage;