import { useMemo, useState } from 'react';

import { usePatientServiceContext } from '../../services';
import { usePatientSnapshot } from '../../hooks/usePatientSnapshot';
import { SnapshotChart, Spinner } from './SnapshotChart';

/** Format a Date as a `YYYY-MM-DDTHH:mm` string in the user's LOCAL wall-clock time. */
function toLocalInputValue(d: Date): string {
    const local = new Date(d.getTime() - d.getTimezoneOffset() * 60000);
    return local.toISOString().slice(0, 16);
}

/**
 * Route-level, READ-ONLY "as of {date}" chart reconstruction.
 *
 * Reads the patient from context, holds an `asOfLocal` picker value, and renders whatever
 * `usePatientSnapshot` reconstructs for that instant via the presentational `SnapshotChart`. The
 * hook is self-driving (re-runs on patient/asOf change) - this view never calls a `run()` and
 * never puts the hook result in an effect. There are ZERO create/edit/archive/delete affordances
 * anywhere in this component.
 */
export function PatientSnapshot() {
    const { patientState } = usePatientServiceContext();

    const nowLocal = useMemo(() => toLocalInputValue(new Date()), []);
    const [asOfLocal, setAsOfLocal] = useState<string>(() => toLocalInputValue(new Date()));

    const asOfIso = useMemo(() => {
        if (!asOfLocal) return undefined;
        const d = new Date(asOfLocal);
        return Number.isNaN(d.getTime()) ? undefined : d.toISOString();
    }, [asOfLocal]);

    const formattedAsOf = useMemo(() => {
        if (!asOfLocal) return '';
        const d = new Date(asOfLocal);
        return Number.isNaN(d.getTime()) ? '' : d.toLocaleString();
    }, [asOfLocal]);

    const { results, running } = usePatientSnapshot(patientState, asOfIso);

    if (!patientState) {
        return (
            <div className="p-4 text-sm text-muted-foreground">
                No patient is loaded. Open a patient to view their historical record.
            </div>
        );
    }

    return (
        <div className="p-4">
            {/* Persistent, non-dismissible read-only banner. */}
            <div className="mb-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                <p className="font-medium">
                    Historical view — showing this record as of {formattedAsOf || 'an invalid date'}.
                    Read-only.
                </p>
                <p className="mt-1 text-amber-ink">
                    Very recent times may lag 1–2 minutes behind the live record.
                </p>
            </div>

            {/* Native date/time picker (no @wordpress DateTimePicker). */}
            <div className="mb-4 flex flex-wrap items-center gap-2">
                <label htmlFor="snapshot-as-of" className="text-sm font-medium text-foreground">
                    Show record as of:
                </label>
                <input
                    id="snapshot-as-of"
                    type="datetime-local"
                    value={asOfLocal}
                    max={nowLocal}
                    onChange={(e) => setAsOfLocal(e.target.value)}
                    className="rounded-md border px-2 py-1 text-sm"
                />
                {running && (
                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                        <Spinner className="h-3.5 w-3.5" />
                        Reconstructing…
                    </span>
                )}
            </div>

            {/* Sections + rows (+ read-only detail modals) via the shared presentational chart. */}
            {!asOfIso ? (
                <p className="text-sm text-muted-foreground">
                    Enter a valid date and time to reconstruct the record.
                </p>
            ) : results.length === 0 ? (
                <div className="flex items-center justify-center py-10">
                    <Spinner className="h-6 w-6" />
                </div>
            ) : (
                <SnapshotChart
                    results={results}
                    staffReader
                    emptyLabel={`as of ${formattedAsOf}`}
                    discloseTruncatedTypes
                />
            )}
        </div>
    );
}

export default PatientSnapshot;