import type { Observation } from 'fhir/r4';
import type { EarlierSave } from '../../hooks/useObservationOperation';

const readingOf = (observation: Observation): string => {
    const name = observation.code?.text ?? observation.code?.coding?.find((coding) => coding.display)?.display;
    const quantity = observation.valueQuantity;
    const value = quantity?.value !== undefined ? [quantity.value, quantity.unit].filter((part) => part !== undefined).join(' ') : observation.valueString;
    return [name, value].filter(Boolean).join(': ');
};

const SAYS: Record<EarlierSave['kind'], string> = {
    checking: 'Checking an earlier save of a reading…',
    pending: 'An earlier save of a reading was not finished. Finish it as it was entered, or enter a new reading instead.',
    unconfirmed: 'This save could not be confirmed. Check it before entering another reading.',
    unavailable: 'Earlier saves made in this tab could not be read, so one may still be unconfirmed. Check the list before entering another reading.',
};
const NOT_FOUND = 'This save could not be found. Check the list before entering another reading.';

/**
 * An earlier save of this editor that was never confirmed, shown before anything new can be saved. Finishing sends what
 * the server admitted for it, never what the form now holds; a new reading is only ever a deliberate choice.
 */
export const EarlierSaveNotice = ({ earlier, onCheck, onFinish, onStartNew }: {
    earlier?: EarlierSave;
    onCheck: () => void;
    onFinish: () => void;
    onStartNew: () => void;
}) => {
    if (!earlier) return null;
    if (earlier.kind === 'checking') {
        return <div role="status" className="mb-4 rounded-md border border-border bg-white p-2 text-sm">{SAYS.checking}</div>;
    }
    const notFound = earlier.kind === 'unconfirmed' && earlier.notFound;
    const shown = earlier.kind === 'pending' && earlier.observation ? readingOf(earlier.observation) : undefined;
    return (
        <div role="alert" className="sticky top-0 z-[1] mb-4 rounded-md border border-border bg-white p-2 text-sm">
            <p>{notFound ? NOT_FOUND : SAYS[earlier.kind]}</p>
            {shown ? <p className="text-xs text-muted-foreground">{shown}</p> : null}
            {earlier.kind === 'pending' && earlier.withheld ? (
                <p className="text-xs text-muted-foreground">What it holds cannot be shown to you now.</p>
            ) : null}
            <div className="mt-2 flex flex-wrap gap-2">
                {earlier.kind === 'pending' ? (
                    <button type="button" className="btn btn-blue-sm" onClick={onFinish}>Finish this save</button>
                ) : null}
                {earlier.kind === 'unconfirmed' && earlier.operationId && !notFound ? (
                    <button type="button" className="btn btn-blue-sm" onClick={onCheck}>Check this save</button>
                ) : null}
                <button type="button" className="btn btn-blue-ghost-sm" onClick={onStartNew}>Enter a new reading instead</button>
            </div>
        </div>
    );
};