import { Fragment } from 'react';
import { History, Loader2 } from 'lucide-react';
import { useFieldHistory } from './FieldHistoryProvider';
import { formatDateTime } from '../../utils/dateUtils';
import type { RecordCreation } from '../../utils/fieldHistory/recordCreation';

// One sentence per distinct answer, so a view of several records created together reads once.
const describeCreations = (creations: RecordCreation[]): string => {
    const sentences = creations.map((creation) => {
        if (creation.who) {
            return creation.whenIso
                ? `Created by ${creation.who} on ${formatDateTime(creation.whenIso)}.`
                : `Created by ${creation.who}.`;
        }
        return creation.unreadable ? 'We could not read who created it.' : 'No record names who created it.';
    });
    const distinct = Array.from(new Set(sentences));
    return distinct.length > 0 ? ` ${distinct.join(' ')}` : '';
};

/**
 * Activates/deactivates the field-history feature for the enclosing `FieldHistoryProvider`.
 * Activating fetches `_history`+`Provenance` for every currently-registered resource (Task 4,
 * bounded concurrency) before flipping active -- the button shows a spinner and disables itself
 * for that window so it can't be double-clicked mid-fetch. Deactivating is instant (no fetch).
 *
 * A utility action, so the shared small blue ghost; it reads as pressed while history shows.
 */
export function ShowFieldHistoryToggle() {
    const { isActive, loading, nothingEverEdited, creations, historyUnavailable, historyRefused, historyComplete, verifiedOnly, shownFields, activate, deactivate } =
        useFieldHistory();
    // Only once every read succeeded and every value on screen is bound; otherwise the claim is unproven.
    const changedOutOfView = isActive && !loading && historyComplete && !nothingEverEdited
        && shownFields.count > 0 && shownFields.changed === 0;

    return (
        <Fragment>
        <button
            type="button"
            data-print-hidden="true"
            className="btn btn-blue-ghost-sm"
            disabled={loading}
            aria-pressed={isActive}
            onClick={isActive ? deactivate : activate}
        >
            {loading ? (
                <Loader2 className="size-4 animate-spin" aria-hidden="true" />
            ) : (
                <History className="size-4" aria-hidden="true" />
            )}
            {isActive ? 'Hide field history' : 'Show field history'}
        </button>
        {isActive && nothingEverEdited && (
            <span className="ak-status-line" data-testid="field-history-nothing-edited">
                Nothing here has been edited yet.{describeCreations(creations ?? [])}
            </span>
        )}
        {changedOutOfView && (
            <span className="ak-status-line" data-testid="field-history-changed-out-of-view">
                This record has been updated, but there are no changes to the fields shown here.
            </span>
        )}
        {isActive && !loading && verifiedOnly && (
            <span className="ak-status-line" data-testid="field-history-verified-only">
                Showing only changes your practice made that the record can confirm. A field with no
                history here does not mean nothing changed.
            </span>
        )}
        {isActive && historyUnavailable && (
            <span className="ak-status-line ak-status-line--error" data-testid="field-history-unavailable">
                {historyRefused
                    ? 'Your access to this patient does not include its edit history.'
                    : <>We could not read this record&apos;s history just now.</>}
            </span>
        )}
        </Fragment>
    );
}

export default ShowFieldHistoryToggle;