import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { FileText, FlaskConical, ScanLine, Search } from 'lucide-react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
import { describeServerRefusal } from '../../utils/serverRefusalMessage';
import { isShareableReference } from './shareableRecordItem';
import { useShareableRecordItems, type ShareableItem } from './useShareableRecordItems';
import { onViewerChange, viewerEpoch } from '../../utils/writeThroughHold';

const kindIcon = (reference: string) => {
    const type = reference.split('/')[0];
    const Icon = type === 'ImagingStudy' ? ScanLine : type === 'Observation' || type === 'DiagnosticReport' ? FlaskConical : FileText;
    return <Icon aria-hidden="true" className="ahr-call__kind" />;
};

interface Props {
    open: boolean;
    onClose: () => void;
    /** The visit patient; only their items are read. */
    patientId?: string;
    patientName: string;
    onShow: (reference: string) => Promise<void>;
    /** The meeting session this picker was opened in; another session is another opening, even for the same patient. */
    sessionKey?: string;
}

const dayOf = (when?: string) => {
    if (!when) return undefined;
    const at = new Date(when);
    return Number.isNaN(at.getTime()) ? undefined : at.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
};

const matches = (item: ShareableItem, query: string) =>
    [item.title, item.detail, item.source]
        .filter(Boolean)
        .some((text) => (text as string).toLowerCase().includes(query));

/**
 * Only the visit patient's items; choosing one sends its reference, and each participant reads it.
 */
export const ShowFromRecordPicker = ({ open, onClose, patientId, patientName, onShow, sessionKey }: Props) => {
    const { items: all, loading, failed, partial } = useShareableRecordItems(patientId, open, sessionKey);
    const [query, setQuery] = useState('');
    // Each is the state of one opening, and reads as nothing in any other.
    const [pendingIn, setPendingIn] = useState<{ owner: string; reference: string; press: number } | null>(null);
    const [refusalIn, setRefusalIn] = useState<{ owner: string; text: string } | null>(null);

    const hasPatient = Boolean(patientId);

    // The opening a Show was pressed in. A change of viewer, patient or meeting session, or closing, retires it for good
    // from the render that replaces it, even if the same scope returns: a Show still pending then closes nothing, shows
    // no refusal and clears no pending state.
    const [viewer, setViewer] = useState(viewerEpoch);
    useEffect(() => onViewerChange(() => setViewer(viewerEpoch())), []);
    const scope = `${viewer}|${patientId ?? ''}|${open}|${sessionKey ?? ''}`;
    const opening = useRef({ scope, generation: 0 });
    if (opening.current.scope !== scope) opening.current = { scope, generation: opening.current.generation + 1 };
    const owner = `${opening.current.generation}|${scope}`;
    const currentOwner = useRef(owner);
    currentOwner.current = owner;
    const presses = useRef(0);
    const mounted = useRef(true);
    useLayoutEffect(() => {
        mounted.current = true;
        return () => { mounted.current = false; };
    }, []);
    const pending = pendingIn?.owner === owner ? pendingIn.reference : null;
    const refusal = refusalIn?.owner === owner ? refusalIn.text : null;

    const items = useMemo(() => {
        const q = query.trim().toLowerCase();
        return all
            .filter((item) => isShareableReference(item.reference))
            .filter((item) => !q || matches(item, q))
            .sort((a, b) => (b.when ?? '').localeCompare(a.when ?? ''));
    }, [all, query]);

    const show = async (reference: string) => {
        const pressedAs = currentOwner.current;
        const epoch = viewerEpoch();
        const current = () => mounted.current && currentOwner.current === pressedAs && viewerEpoch() === epoch;
        const press = ++presses.current;
        setPendingIn({ owner: pressedAs, reference, press });
        setRefusalIn(null);
        try {
            await onShow(reference);
            if (current()) onClose();
        } catch (failure) {
            if (current()) setRefusalIn({ owner: pressedAs, text: describeServerRefusal(failure, 'That item was not shown. Try again.') });
        } finally {
            if (current()) setPendingIn((now) => (now?.press === press ? null : now));
        }
    };

    return (
        <Dialog open={open} onOpenChange={(next) => { if (!next) onClose(); }}>
            <DialogContent className="ak-dialog ahr-call sm:max-w-lg">
                <DialogHeader>
                    <DialogTitle>Show {patientName} something from their record</DialogTitle>
                    <DialogDescription>
                        Only {patientName}&rsquo;s own record is listed. Nothing else on this computer can be shared.
                    </DialogDescription>
                </DialogHeader>

                <label className="relative block">
                    <span className="sr-only">Find a study, result, plan or document</span>
                    <Search aria-hidden="true" className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-ink-muted" />
                    <input
                        type="search"
                        className="ak-field ak-field--search w-full"
                        placeholder="Find a study, result, plan or document"
                        value={query}
                        onChange={(e) => setQuery(e.target.value)}
                    />
                </label>

                {refusal && <p role="alert" className="ak-field-error">{refusal}</p>}

                {(!hasPatient || loading) && <p className="ak-field-help">Loading the record&hellip;</p>}
                {hasPatient && !loading && failed && (
                    <p role="alert" className="ak-field-error">The record could not be loaded just now.</p>
                )}
                {hasPatient && !loading && partial && (
                    <p role="status" className="ak-field-help">Some of the record could not be loaded, so not everything is listed.</p>
                )}
                {hasPatient && !loading && !failed && items.length === 0 && (
                    <p className="ak-field-help">
                        {/* With part of the record not listed, an empty answer speaks only for what could be read. */}
                        {partial
                            ? (query.trim() ? 'Nothing that could be read matches that.' : 'Nothing that could be read can be shown yet.')
                            : (query.trim() ? 'Nothing in the record matches that.' : 'Nothing in this record can be shown yet.')}
                    </p>
                )}
                {hasPatient && !loading && items.length > 0 && (
                    <div>
                        <p className="ak-caption">Most recent</p>
                        <ul className="m-0 max-h-80 list-none overflow-y-auto p-0">
                            {items.map((item) => (
                                <li key={item.reference} className="ak-row gap-3">
                                    {kindIcon(item.reference)}
                                    <span className="min-w-0 flex-1">
                                        <b className="ak-row__name block">{item.title}</b>
                                        {(item.source || dayOf(item.when)) && <span className="ak-row__detail block">{[item.source, dayOf(item.when)].filter(Boolean).join(' · ')}</span>}
                                        {item.changedHere && <span className="ak-row__detail block" data-testid="picker-changed-here">{item.changedHere}</span>}
                                    </span>
                                    <button
                                        type="button"
                                        className="btn bg-background text-foreground"
                                        disabled={pending !== null}
                                        aria-label={'Show ' + item.title}
                                        onClick={() => { void show(item.reference); }}
                                    >
                                        {pending === item.reference ? 'Showing' : 'Show'}
                                    </button>
                                </li>
                            ))}
                        </ul>
                    </div>
                )}
                <p className="ak-field-help m-0">
                    <b>There is no &ldquo;Entire screen&rdquo; and no &ldquo;Window&rdquo;.</b> This list is built from {patientName}&rsquo;s record, so nothing
                    else on this computer &mdash; another patient&rsquo;s chart, your inbox, your schedule &mdash; can reach their screen.
                </p>
            </DialogContent>
        </Dialog>
    );
};

export default ShowFromRecordPicker;