import { useEffect, useRef, useState } from 'react';
import type { KeyboardEvent, ReactNode } from 'react';
import { toast } from 'sonner';
import { FieldHistoryLabel } from './FieldHistoryLabel';
import { useFieldHistory, useFieldHistoryScope } from './FieldHistoryProvider';
import { isEmptyFieldValue } from '../../utils/fieldHistory/isEmptyFieldValue';
import { isRecordChanged, RELOAD_DISCARDS_MESSAGE } from '../../utils/recordChanged';
import { isSaveRetired, isSaveTimedOut } from '../../utils/saveOperation';
import { onViewerChange } from '../../utils/writeThroughHold';
import { Input } from '../ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '../ui/select';

export type EditableFieldEditorType = 'text' | 'email' | 'tel' | 'date' | 'select';

export interface EditableFieldOption {
    value: string;
    label: string;
}

/** The opening a Reload record was asked for. */
export interface ReloadOwner {
    signal: AbortSignal;
    belongs: () => boolean;
}

export interface EditableFieldProps<T = string> {
    label: string;
    /** Read-only display (rich node, like `<Field value>`). */
    value: ReactNode;
    /** Raw value used to prepopulate the editor -- may differ from the formatted read display. */
    editValue: T;
    /** History drilldown path, forwarded to `FieldHistoryLabel`. */
    path?: string;
    /** Defaults to whether an `onSave` was supplied. */
    editable?: boolean;
    /** `opening`: the `snapshot` as it was when this edit opened - the baseline the save checks against. */
    onSave?: (next: T, opening?: unknown) => Promise<void>;
    /**
     * The record this field is shown from. Captured when an edit opens and handed to `onSave`, so a save can
     * tell whether what it edits changed since; a later refresh of this prop never changes the draft.
     */
    snapshot?: unknown;
    /**
     * The record an edit belongs to. Defaults to the history scope's record. When it changes while an edit is open -
     * or the person signed in changes - the edit closes and its draft and baseline are dropped, so a draft opened on
     * one record is never saved onto another.
     */
    owner?: string;
    /**
     * Reload record, after a save was refused (changed elsewhere, out of date, or unconfirmed): reads the record as
     * it is now and shows it. The edit then closes on that value, and opens again from it. `owner` is the opening
     * that asked: cancelled or reopened, its `signal` aborts and `belongs()` turns false, so the reload's read is not
     * sent or shown for it.
     */
    onReload?: (owner: ReloadOwner) => Promise<void>;
    /** Built-in single-value editor (T = string). */
    editorType?: EditableFieldEditorType;
    /** For `editorType="select"`. */
    options?: EditableFieldOption[];
    placeholder?: string;
    /** Custom multi-part editor override -- receives the working draft + a setter; skips the built-in editor. */
    renderEditor?: (draft: T, setDraft: (value: T) => void, disabled: boolean) => ReactNode;
    /** Optional caption shown while editing (e.g. "Patient will receive notice of change"). Omit for no caption. */
    editHint?: ReactNode;
    /** Read-state layout parity with `<Field>`. */
    variant?: 'default' | 'stacked';
    /**
 * - OPT-IN, AND THE OPT-IN IS THE DESIGN.
 *
 * A blank field cannot say whether anybody ever asked, and for a receptionist doing intake those are
 * different jobs: *we never asked* is a gap to close, *they declined* is settled and asking again is
 * worse than useless. This lets a field record which.
 *
 * **Supplied per field, never switched on for everything.** `EditableField` is shared across ~25
 * surfaces and most of them edit things that cannot decline to answer - an organization's name has no
 * opinion. Absent this prop the component is exactly what it was.
 *
 * The RECORD state lives outside: pass the current `reason` and persist through `onRecord`. This
 * component owns the control, not the vocabulary.
 */
    absence?: {
        reason?: string;
        /** The choices, already labelled for a person - `undefined` clears the record. */
        options: ReadonlyArray<{ value: string; label: string }>;
        onRecord: (reason: string | undefined, opening?: unknown) => Promise<void>;
    };
}

/**
 * The editable sibling of `<Field>`: same label/history composition (`FieldHistoryLabel`) and the
 * same read-state row layout, but the value can be clicked/keyboard-activated into an inline
 * editor (ported from `PatientProfileCard/EditableField`) with Save/Cancel. Card-agnostic --
 * layout comes entirely from utility classes, not `ahr-patient-profile-card__*`.
 */
export function EditableField<T = string>({
    label,
    value,
    editValue,
    path,
    editable,
    onSave,
    editorType = 'text',
    options,
    placeholder,
    renderEditor,
    editHint,
    variant = 'default',
    absence,
    snapshot,
    owner,
    onReload,
}: EditableFieldProps<T>): JSX.Element {
    const canEdit = editable ?? Boolean(onSave);
    const [editing, setEditing] = useState(false);
    const [draft, setDraft] = useState<T>(editValue);
    const [saving, setSaving] = useState(false);
    const scope = useFieldHistoryScope();
    const { refresh } = useFieldHistory();
    // While history shows, a save is followed into it rather than waiting for a reload; the follow
    // ends with this field or when it shows another record.
    // A save still in flight when the field leaves or shows another record must not start one: the
    // generation it began under is compared once it lands.
    const stopFollowing = useRef<(() => void) | undefined>(undefined);
    const recordGeneration = useRef(0);
    const followSave = (savedUnder: number) => {
        if (savedUnder !== recordGeneration.current) return;
        stopFollowing.current?.();
        stopFollowing.current = scope?.id ? refresh?.(scope.resourceType, scope.id, path) : undefined;
    };
    useEffect(() => () => {
        recordGeneration.current++;
        stopFollowing.current?.();
    }, [scope?.resourceType, scope?.id]);

    // WHOSE OPENING THIS IS. The draft and its baseline belong to the record (and the person signed in) the edit
    // was opened for; another record on the same field instance, or another person, closes it.
    const ownerKey = owner ?? (scope?.id ? `${scope.resourceType}/${scope.id}` : undefined);
    // Null while nothing is open; otherwise the owner the opening was made for (which may itself be unknown, for a
    // field outside any record's history scope).
    const openedFor = useRef<{ owner: string | undefined } | null>(null);
    // Each opening (and each close) is a new generation; a Reload record belongs to the one that asked for it.
    const generation = useRef(0);
    const reloadFor = useRef<AbortController>();
    const endOpening = () => {
        generation.current += 1;
        reloadFor.current?.abort();
        reloadFor.current = undefined;
        setReloading(false);
    };
    const closeOpening = () => {
        endOpening();
        openedFor.current = null;
        opened.current = undefined;
        setRefused(undefined);
        setEditing(false);
    };
    const closeRef = useRef(closeOpening);
    closeRef.current = closeOpening;
    useEffect(() => {
        if (openedFor.current && openedFor.current.owner !== ownerKey) closeRef.current();
    }, [ownerKey]);
    useEffect(() => onViewerChange(() => closeRef.current()), []);

    // The baseline this edit is checked against, and what a refused save said. `stale`: this opening can save
    // nothing more (someone else changed it, the page is out of date, or the result is unknown) - only Reload record.
    const opened = useRef<unknown>(undefined);
    const [refused, setRefused] = useState<{ message: string; stale: boolean }>();
    const [reloading, setReloading] = useState(false);

    const startEdit = () => {
        if (!canEdit) return;
        endOpening();
        openedFor.current = { owner: ownerKey };
        opened.current = snapshot;
        setRefused(undefined);
        setDraft(editValue);
        setEditing(true);
    };

    const cancel = () => {
        endOpening();
        openedFor.current = null;
        opened.current = undefined;
        setEditing(false);
        setRefused(undefined);
        setDraft(editValue);
    };

    // Someone else saved first, the page is out of date, or the result is unknown: said plainly, and nothing more is
    // saved from this opening. Nothing is merged over another person's change, and Save is not offered again.
    const refusedBy = (error: unknown): boolean => {
        // A save that no longer belongs to this field (another patient, another person signed in) says nothing here.
        if (isSaveRetired(error)) return true;
        if (isSaveTimedOut(error)) {
            setRefused({ message: error.message, stale: error.mayHaveSaved });
            return true;
        }
        if (!isRecordChanged(error)) return false;
        setRefused({ message: error.message, stale: true });
        return true;
    };

    /**
     * What is saved now, read fresh and shown; this edit closes on it (the person was told it discards theirs). Only
     * for the opening that asked: cancelled or reopened meanwhile, nothing of it is sent, shown, closed or said.
     */
    const reload = async () => {
        const mine = generation.current;
        const controller = new AbortController();
        reloadFor.current = controller;
        const belongs = () => generation.current === mine;
        setReloading(true);
        try {
            await onReload?.({ signal: controller.signal, belongs });
            if (belongs()) closeOpening();
        } catch (error) {
            if (!belongs() || isSaveRetired(error)) return;
            setRefused({ message: 'The record could not be read. Try Reload record again, or Cancel.', stale: true });
        } finally {
            if (belongs()) setReloading(false);
        }
    };

    const save = async () => {
        if (!onSave) return;
        // An opening that was refused saves nothing more; one made for another record (or before it was closed) is never saved.
        if (refused?.stale) return;
        if (!openedFor.current || openedFor.current.owner !== ownerKey) {
            closeOpening();
            return;
        }
        setSaving(true);
        const savedUnder = recordGeneration.current;
        try {
            await onSave(draft, opened.current);
            setRefused(undefined);
            setEditing(false);
            followSave(savedUnder);
        } catch (error) {
            if (refusedBy(error)) return;
            console.error(`Failed to update ${label}:`, error);
            toast.error(`Could not update ${label.toLowerCase()}. Please try again.`);
        } finally {
            setSaving(false);
        }
    };

    /**
 * Shares `saving` with Save, so the two cannot race - recording an absence and saving a value both
 * PUT the same resource, and a receptionist clicking one while the other is in flight would produce
 * whichever landed second.
 */
    const recordAbsence = async (reason: string | undefined) => {
        if (!absence) return;
        // An opening that was refused saves nothing more; one made for another record (or before it was closed) is never saved.
        if (refused?.stale) return;
        if (!openedFor.current || openedFor.current.owner !== ownerKey) {
            closeOpening();
            return;
        }
        setSaving(true);
        const savedUnder = recordGeneration.current;
        try {
            await absence.onRecord(reason, opened.current);
            setRefused(undefined);
            setEditing(false);
            followSave(savedUnder);
        } catch (error) {
            if (refusedBy(error)) return;
            console.error(`Failed to record ${label}:`, error);
            toast.error(`Could not update ${label.toLowerCase()}. Please try again.`);
        } finally {
            setSaving(false);
        }
    };

    const handleValueKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            startEdit();
        }
    };

    const labelClassName = variant === 'stacked' ? 'text-xs font-medium' : 'text-sm font-medium';

    if (editing) {
        return (
            <div className="flex flex-col gap-2 px-4 py-3">
                <FieldHistoryLabel label={label} path={path} className={labelClassName} />
                <div className="space-y-2">
                    {refused ? (
                        <div role="alert" className="rounded-md border border-border p-2 text-sm">
                            <p>{refused.message}</p>
                            {refused.stale ? <p className="text-xs text-muted-foreground">{RELOAD_DISCARDS_MESSAGE}</p> : null}
                        </div>
                    ) : null}
                    {renderEditor ? (
                        renderEditor(draft, setDraft, saving)
                    ) : editorType === 'select' ? (
                        <Select
                            value={draft as unknown as string}
                            onValueChange={(next) => setDraft(next as unknown as T)}
                            disabled={saving}
                        >
                            <SelectTrigger className="h-9 w-full bg-white text-sm">
                                <SelectValue placeholder={placeholder ?? 'Select…'} />
                            </SelectTrigger>
                            <SelectContent>
                                {(options ?? []).map((option) => (
                                    <SelectItem key={option.value} value={option.value}>
                                        {option.label}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    ) : (
                        <Input
                            type={editorType}
                            value={draft as unknown as string}
                            onChange={(event) => setDraft(event.target.value as unknown as T)}
                            placeholder={placeholder}
                            disabled={saving}
                            autoFocus
                            className="h-9 text-sm"
                        />
                    )}

                    <div className="flex items-center gap-2">
                        {refused?.stale ? (
                            <button
                                type="button"
                                className="btn btn-blue-sm"
                                onClick={() => void reload()}
                                disabled={reloading}
                            >
                                {reloading ? 'Reloading…' : 'Reload record'}
                            </button>
                        ) : (
                            <button
                                type="button"
                                className="btn btn-green-sm"
                                onClick={save}
                                disabled={saving}
                            >
                                {saving ? 'Saving…' : 'Save'}
                            </button>
                        )}
                        <button
                            type="button"
                            className="btn btn-red-ghost-sm"
                            onClick={cancel}
                            disabled={saving}
                        >
                            Cancel
                        </button>
                    </div>

                    {absence ? (
                        // BELOW Save/Cancel, deliberately. Entering a value is the ordinary act and stays
                        // first; recording that there is nothing to enter is the exception and reads as one.
                        <div className="flex flex-wrap items-center gap-2 border-t border-dashed pt-2">
                            <span className="text-xs text-muted-foreground">Nothing to enter?</span>
                            {absence.options.map((option) => (
                                <button
                                    key={option.value}
                                    type="button"
                                    // `btn-blue-tonal-sm` and `btn-ghost-sm` were invented here and do
                                    // not exist - `tailwindClassesResolve` caught it, and unstyled is the
                                    // one failure mode a screenshot would not obviously show as a bug.
                                    // These two are real: see the `.btn-*` set in `index.css`.
                                    className={
                                        absence.reason === option.value
                                            ? 'btn btn-blue-sm'
                                            : 'btn btn-blue-ghost-sm'
                                    }
                                    aria-pressed={absence.reason === option.value}
                                    disabled={saving || refused?.stale}
                                    onClick={() => void recordAbsence(option.value)}
                                >
                                    {option.label}
                                </button>
                            ))}
                            {absence.reason ? (
                                // Clearing must always be reachable. A recorded absence is a statement
                                // about a person, and a receptionist who records the wrong one needs a way
                                // back that is not "type a value you do not have".
                                <button
                                    type="button"
                                    className="btn btn-red-ghost-sm"
                                    disabled={saving || refused?.stale}
                                    onClick={() => void recordAbsence(undefined)}
                                >
                                    Clear
                                </button>
                            ) : null}
                        </div>
                    ) : null}

                    {editHint ? (
                        <div className="text-xs italic text-muted-foreground">{editHint}</div>
                    ) : null}
                </div>
            </div>
        );
    }

    const display = isEmptyFieldValue(value) ? (
        <span className="text-muted-foreground">—</span>
    ) : (
        value
    );

    const valueInteractionProps = canEdit
        ? {
              onClick: startEdit,
              role: 'button' as const,
              tabIndex: 0,
              title: 'Click to edit',
              onKeyDown: handleValueKeyDown,
          }
        : {};

    if (variant === 'stacked') {
        return (
            <div className="flex flex-col gap-1 px-4 py-3">
                <FieldHistoryLabel label={label} path={path} className="text-xs font-medium" />
                <div
                    className={`text-sm${canEdit ? ' cursor-pointer rounded hover:bg-muted' : ''}`}
                    {...valueInteractionProps}
                >
                    {display}
                </div>
            </div>
        );
    }

    return (
        <div className="flex items-center justify-between gap-4 px-4 py-3">
            <FieldHistoryLabel label={label} path={path} className="text-sm font-medium" />
            <div
                className={`text-sm text-right${canEdit ? ' cursor-pointer rounded hover:bg-muted' : ''}`}
                {...valueInteractionProps}
            >
                {display}
            </div>
        </div>
    );
}

export default EditableField;