import React, { useEffect, useRef, useState } from 'react';
import { Attachment, DocumentReference, Reference } from 'fhir/r4';
import { usePhotoUploadService } from '../../services/PhotoUploadService';
import { HttpError } from '../../services/HttpService';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FhirCodeDisplay } from '../../utils/fhirCode';
import { FhirPeriodDisplay } from '../../utils/fhirPeriod';
import { FhirReferenceDisplay } from '../../utils/fhirReference';
import { formatDate } from '../../utils/dateUtils';
import { renderField } from '../../utils/renderField';
import { formatFileSize } from '../../utils/formatFileSize';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
import { DismissibleAlert } from '../ui/dismissible-alert';
import './FhirDocumentReferenceDisplay.css';
import { Card, CardHeader, CardContent } from '../ui/card';
import { Button } from '../ui/button';
import { FileText, ExternalLink } from 'lucide-react';
import { FieldHistoryProvider, FieldHistoryScope } from '../FieldHistory/FieldHistoryProvider';
import { ShowFieldHistoryToggle } from '../FieldHistory/ShowFieldHistoryToggle';
import { RecordEditedMarker } from '../FieldHistory/RecordEditedMarker';
import { FieldGroup, Section } from '../FieldHistory/FieldLayout';
import { patientConceptWords, patientFileType, patientRecordStatus, patientReferenceWords, patientReviewStatus } from './patientDocumentWords';
import { ArchivedNotice } from '../ArchivedNotice/ArchivedNotice';
import { isArchived } from '../../utils/archivedResource';
import { PRE_SCAN_FILE_WORDS, SCAN_HOLD_WORDS, scanHoldOf, type ScanHold } from '../../utils/uploadScanHold';
import { isSaveRetired, useSaveScope } from '../../utils/saveOperation';
import { viewerEpoch, writeThroughViewer } from '../../utils/writeThroughHold';

/**
 * AN ATTACHMENT HELD AS AN OBJECT KEY IS NOT A LINK, and this used to render it as one.
 *
 * MEASURED 2026-09-07 on a patient's insurance card photograph: the dialog printed
 * `users/<patient>/personal/insurance_cards/<uuid>.png` as an anchor, to a path that does not exist on
 * this host. There was no Open and no Download, because both of those are drawn only when the
 * attachment carries INLINE base64 - and a card photograph deliberately does not, so that every reader
 * gets the full-resolution original rather than a 500px thumbnail. So the one document in the record
 * that exists to be READ was the one nobody could open.
 *
 * An absolute URL is left exactly as it was: that is somebody else's document somewhere else, and
 * presigning a key we do not own is not a thing to attempt. A failure to presign says so rather than
 * offering a control that cannot work.
 */
// `carrier` names the record holding the file, which the server then reads by its id rather than waiting for a search.
// Each link or notice belongs to the viewer, key and carrier it was answered for, in this mounted opening: once any of
// them moves on, the old request is cancelled and nothing it answers is shown or opened. The viewer epoch is part of it,
// so a viewer who leaves and comes back is a new owner, never the old one again.
export const StoredAttachmentActions: React.FC<{ attachment: Attachment; carrier?: string }> = ({ attachment, carrier }) => {
    const { getPresignedDownloadUrl } = usePhotoUploadService();
    const key = attachment.url;
    const ownerNow = () => [viewerEpoch(), writeThroughViewer() ?? '', key ?? '', carrier ?? ''].join('|');
    const owner = ownerNow();
    const onScreen = useRef(owner);
    onScreen.current = owner;
    const [answer, setAnswer] = useState<{ owner: string; href?: string; failed?: 'refused' | 'failed' | ScanHold }>();
    // Drawn again on every retirement, so a viewer who changed with nothing yet answered is read afresh.
    const [, redraw] = useState(0);
    const lives = useSaveScope(owner, () => {
        setAnswer(undefined);
        redraw((n) => n + 1);
    });
    const href = answer?.owner === owner ? answer.href : undefined;
    const failed = answer?.owner === owner ? answer.failed : undefined;

    useEffect(() => {
        if (!key) return;
        const life = lives.start();
        getPresignedDownloadUrl(key, life.transport, carrier)
            .then((url) => {
                life.admit();
                setAnswer({ owner, href: url });
            })
            // A REFUSAL IS NOT A FAILURE. "Try again later" on a 403 sends a reader back to the same
            // button for the rest of the afternoon; the file is not theirs to open and no amount of
            // waiting changes that. Measured reading a patient's insurance card from the staff portal.
            .catch((error: unknown) => {
                if (isSaveRetired(error) || !life.belongs()) return;
                const status = error instanceof HttpError ? error.status : undefined;
                setAnswer({ owner, failed: scanHoldOf(error) ?? (status === 403 || status === 404 ? 'refused' : 'failed') });
            });
        return () => life.retire();
        // eslint-disable-next-line react-hooks/exhaustive-deps -- a new owner is a new read; the scope retires the old one
    }, [owner]);

    if (failed) {
        return (
            <p className="text-sm text-muted-foreground">
                {failed === 'refused'
                    ? 'This file is not yours to open. Ask the practice that holds it.'
                    : failed === 'failed' ? 'This file could not be opened. Try again later.' : SCAN_HOLD_WORDS[failed]}
            </p>
        );
    }

    // A link opens only while its owner is still the one on screen, checked again at the click itself.
    const open = () => {
        if (href && onScreen.current === owner && ownerNow() === owner) window.open(href, '_blank');
    };

    return (
        <Button variant="outline" size="sm" disabled={!href} onClick={open}>
            <ExternalLink className="mr-2 h-4 w-4" />
            {href ? 'Open' : 'Opening...'}
        </Button>
    );
};

interface FhirDocumentReferenceDisplayProps {
    documentReference: DocumentReference;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
    /**
     * Offered as an Edit control beside the history toggle. OPTIONAL, so a surface that only reads
     * documents stays exactly as it was - and a caller that has nowhere to send an edit does not draw
     * a control that goes nowhere.
     */
    onEdit?: () => void;
    /**
     * Offered as a Delete control beside Edit. OPTIONAL for the same reason `onEdit` is, and the
     * caller owns the confirm: this component reads a document, it does not decide what removing
     * one means.
     */
    onDelete?: () => void;
    onReview?: () => void;
    /** The patient is reading a document their care team reviewed, which is why Edit and Delete are absent. */
    reviewedForPatient?: boolean;
    /** A patient or their helper is reading, so coded fields are named in plain words. */
    forPatient?: boolean;
}

// The records a document links to, as a patient reads them: one line each, in plain words, never an id.
const PatientReferences = ({ references }: { references?: Reference[] }) => (
    <div className="flex flex-col gap-1">
        {(references ?? []).map((reference, index) => <span key={index}>{patientReferenceWords(reference)}</span>)}
    </div>
);

export const FhirDocumentReferenceDisplay: React.FC<FhirDocumentReferenceDisplayProps> = ({
      documentReference,
      isOpen,
      onClose,
      title,
      onEdit,
      onDelete,
      onReview,
      reviewedForPatient,
      forPatient = false
  }) => {
    // An archived document is read-only: no Edit or Delete, here as on its edit page; the server refuses both.
    const archived = isArchived(documentReference);
    const renderDescriptionValue = () => {
        if (!documentReference.description) {
            return '-';
        }
        return (
            <div className="max-h-[120px] overflow-y-auto whitespace-pre-wrap break-words rounded bg-muted/50 p-2 text-sm">
                {documentReference.description}
            </div>
        );
    };

    const renderContent = () => {
        if (!documentReference.content || documentReference.content.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No content recorded
                </p>
            );
        }

        return (
            <div className="flex flex-col gap-4">
                {documentReference.content.map((content, index) => (
                    <Card key={index}>
                        <CardHeader>
                            {/* A patient reads "File"; staff keep the record's own structure. */}
                            <h5 className="text-sm font-semibold">
                                {forPatient
                                    ? (documentReference.content.length > 1 ? `File ${index + 1}` : 'File')
                                    : `Content ${index + 1}`}
                            </h5>
                        </CardHeader>
                        <CardContent>
                            <div className="mb-6">
                                {!forPatient && <h6 className="mb-3 text-sm font-semibold">Document Attachment</h6>}

                                {content.attachment ? (
                                    <Card className="bg-muted/30 border-0 ak-card-flat">
                                        <CardContent>
                                            {/* The name keeps a readable width; when the actions do not fit beside it they wrap below it. */}
                                            <div className="flex flex-wrap items-center justify-between gap-3">
                                                <div className="flex min-w-0 flex-[1_1_14rem] items-center gap-4" data-slot="attachment-name">
                                                    <FileText className="h-6 w-6 shrink-0" />
                                                    <div className="min-w-0">
                                                        <p className="font-semibold [overflow-wrap:anywhere]">
                                                            {content.attachment.title || 'Untitled Document'}
                                                        </p>
                                                        <div className="mt-1">
                                                            <p className="text-sm text-muted-foreground">
                                                                {forPatient ? patientFileType(content.attachment.contentType) : content.attachment.contentType || 'Unknown type'}
                                                                {content.attachment.size ? ` • ${formatFileSize(content.attachment.size)}` : null}
                                                            </p>
                                                        </div>
                                                        {content.attachment.creation && (
                                                            <div className="mt-1">
                                                                <p className="text-sm text-muted-foreground">
                                                                    Created: {formatDate(content.attachment.creation)}
                                                                </p>
                                                            </div>
                                                        )}
                                                    </div>
                                                </div>
                                            </div>

                                            {/* Only an uploaded file's key opens, through the scan-checked link. Bytes put inside the record, or a
                                                link to a file elsewhere, were never scanned and stay closed. */}
                                            {content.attachment.url && !/^[a-z][a-z0-9+.-]*:/i.test(content.attachment.url) ? (
                                                <div className="mt-3">
                                                    <StoredAttachmentActions attachment={content.attachment}
                                                        carrier={documentReference.id ? `DocumentReference/${documentReference.id}` : undefined} />
                                                </div>
                                            ) : (content.attachment.data || content.attachment.url) ? (
                                                <p role="note" className="mt-3 text-sm text-muted-foreground">{PRE_SCAN_FILE_WORDS}</p>
                                            ) : null}
                                        </CardContent>
                                    </Card>
                                ) : (
                                    <p className="text-sm italic text-muted-foreground">
                                        No attachment
                                    </p>
                                )}
                            </div>

                            <div>
                                <h6 className="mb-3 text-sm font-semibold">Format</h6>
                                <div className="bg-surface">
                                    <FieldGroup>
                                        {forPatient
                                            // `format` is a Coding; a patient reads what was recorded, or that nothing was.
                                            ? renderField('Format', content.format?.display || content.format?.code || 'Format not specified')
                                            : renderField('Format', <FhirCodeableConceptDisplay code={content.format} emptyText="-" />)}
                                    </FieldGroup>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    const renderRelatesTo = () => {
        if (!documentReference.relatesTo || documentReference.relatesTo.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No related documents recorded
                </p>
            );
        }

        return (
            <div className="flex flex-col gap-4">
                {documentReference.relatesTo.map((relatesTo, index) => (
                    <Card key={index}>
                        <CardHeader>
                            <h5 className="text-sm font-semibold">
                                {forPatient
                                    ? (documentReference.relatesTo!.length > 1 ? `Related document ${index + 1}` : 'Related document')
                                    : `Related Document ${index + 1}`}
                            </h5>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField(forPatient ? 'How it relates' : 'Relationship Type', <FhirCodeDisplay code={relatesTo.code} />)}
                                    {forPatient
                                        ? renderField('Document', <PatientReferences references={[relatesTo.target]} />)
                                        : renderField('Target of the relationship', <FhirReferenceDisplay references={relatesTo.target} />)}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    // No reader is shown the credentials placeholder for a coded field nobody filled in.
    const notRecorded = forPatient ? 'Not recorded' : '-';

    // Callers keep this display mounted closed, often with no document selected yet.
    if (!isOpen) return null;

    // What a patient or helper reads about where a document came from: only what it records, in plain words. An
    // empty field is left out rather than named, since its technical name ("Main clinical acts documented",
    // "Kind of facility where patient was seen") is all it would say. Staff keep every field and its technical label.
    const context = documentReference.context;
    const hasRefs = (references?: unknown[]) => (references?.length ?? 0) > 0;
    const eventWords = patientConceptWords(context?.event);
    const facilityWords = patientConceptWords(context?.facilityType ? [context.facilityType] : undefined);
    const specialtyWords = patientConceptWords(context?.practiceSetting ? [context.practiceSetting] : undefined);
    const hasPeriod = Boolean(context?.period?.start || context?.period?.end);
    const hasAbout = hasRefs(documentReference.author) || hasRefs(context?.encounter) || hasRefs(context?.related)
        || Boolean(eventWords || facilityWords || specialtyWords) || hasPeriod;

    return (
        <Dialog
            open={isOpen}
            onOpenChange={(next) => {
                if (!next) onClose();
            }}
        >
            <DialogContent className="doc-ref-details max-h-[90vh] w-full max-w-3xl overflow-y-auto">
                <FieldHistoryProvider>
                    <FieldHistoryScope resourceType="DocumentReference" id={documentReference.id}>
                        {/* pr-12: the dialog's close control sits top-4 right-4 and is 44px square on the patient
                            door, so a header running to the content edge put Delete under it and pressing
                            Delete closed the dialog. flex-wrap lets the controls drop a line rather than
                            push back into that space. */}
                        <DialogHeader className="flex-row flex-wrap items-center justify-between gap-4 pr-12 text-left sm:text-left">
                            <div className="flex items-center gap-2">
                                <DialogTitle>{title ?? (forPatient ? 'Document details' : 'Document Reference Details')}</DialogTitle>
                                <RecordEditedMarker resource={documentReference} />
                            </div>
                            {/* At phone width four controls outrun the dialog, so they wrap rather than run under its edge. */}
                            <div className="flex min-w-0 flex-wrap items-center gap-2">
                                <ShowFieldHistoryToggle />
                                {/* WHERE A DOCUMENT GETS ITS CONTEXT. Everything this dialog shows was
                                    readable and nothing was changeable, so "Encounters: No references
                                    recorded" was a statement with no way to answer it - and the picker
                                    that sets one existed only on the dialog that CREATES a document,
                                    which is no use at all for a document a patient uploaded. */}
                                {onEdit && !archived && (
                                    <button type="button" className="btn btn-blue-ghost-sm" onClick={onEdit}>
                                        Edit
                                    </button>
                                )}
                                {/* THE OTHER HALF OF "EDIT DETAILS OR DELETE". The route and the client
                                    method for removing a document have both existed for months and
                                    nothing anywhere called them, so a document uploaded to the wrong
                                    patient could be corrected in every particular except its existence.

                                    THE THREE REMOVE CONTROLS ON THE EDIT FORM ARE NOT THIS. They take
                                    away the file, a content block or the encounter link, and leave the
                                    document in the record - so a reader who found them and stopped
                                    looking emptied a document instead of removing it.

                                    Optional for the same reason `onEdit` is: a surface that only reads
                                    documents draws no control, rather than one that goes nowhere. */}
                                {onDelete && !archived && (
                                    // It opens the archive confirmation; nothing is deleted.
                                    <button type="button" className="btn btn-red-ghost-sm" onClick={onDelete}>
                                        Archive
                                    </button>
                                )}
                                {onReview && (
                                    <button type="button" className="btn btn-blue-ghost-sm" onClick={onReview}>
                                        Mark reviewed
                                    </button>
                                )}
                            </div>
                        </DialogHeader>
                        <ArchivedNotice resource={documentReference} />

                        {reviewedForPatient && (
                            <DismissibleAlert status="info">
                                Your care team has reviewed this document, so it can no longer be changed or removed.
                            </DismissibleAlert>
                        )}

                        <FieldGroup>
                            {forPatient ? (
                                <>
                                    {renderField('Record status', patientRecordStatus(documentReference.status), 'status')}
                                    {renderField('Review', patientReviewStatus(documentReference.docStatus), 'docStatus')}
                                </>
                            ) : (
                                <>
                                    {renderField('Status', <FhirCodeDisplay code={documentReference.status} />, 'status')}
                                    {renderField('Document Status', <FhirCodeDisplay code={documentReference.docStatus} />, 'docStatus')}
                                </>
                            )}
                            {forPatient
                                ? renderField('Type', <FhirCodeableConceptDisplay code={documentReference.type} emptyText="Type not specified" />, 'type.coding[0].display')
                                : renderField('Document Type', <FhirCodeableConceptDisplay code={documentReference.type} emptyText="-" />, 'type.coding[0].display')}
                            {forPatient
                                ? renderField('Category', patientConceptWords(documentReference.category))
                                : renderField('Document Category', <FhirCodeableConceptDisplay code={documentReference.category} multiple={true} emptyText="-" />)}
                            {renderField('Document Date', formatDate(documentReference.date), 'date')}
                            {renderField('Description', renderDescriptionValue(), 'description')}
                            {forPatient
                                ? renderField('Security labels', patientConceptWords(documentReference.securityLabel))
                                : renderField('Document security-tags', <FhirCodeableConceptDisplay code={documentReference.securityLabel} multiple={true} emptyText="-" />)}
                        </FieldGroup>

                        <Section title={forPatient ? 'Files' : 'Content'}>
                            {renderContent()}
                        </Section>

                        {forPatient ? (
                            <>
                                {hasAbout && (
                                    <Section title="About this document">
                                        <FieldGroup>
                                            {hasRefs(documentReference.author) && renderField('Created by', <PatientReferences references={documentReference.author} />)}
                                            {hasRefs(context?.encounter) && renderField('Visits', <PatientReferences references={context?.encounter} />)}
                                            {hasRefs(context?.related) && renderField('Related to', <PatientReferences references={context?.related} />)}
                                            {eventWords && renderField('What it records', eventWords)}
                                            {facilityWords && renderField('Where it was created', facilityWords, 'context.facilityType.coding[0].display')}
                                            {specialtyWords && renderField('Specialty', specialtyWords, 'context.practiceSetting.coding[0].display')}
                                            {hasPeriod && renderField('Dates of care', <FhirPeriodDisplay period={context?.period} />)}
                                        </FieldGroup>
                                    </Section>
                                )}
                                {hasRefs(documentReference.relatesTo) && (
                                    <Section title="Related documents">
                                        {renderRelatesTo()}
                                    </Section>
                                )}
                            </>
                        ) : (
                        <>
                        <Section title="Authors">
                            <FieldGroup>
                                {renderField('Who and/or what authored the document', <FhirReferenceDisplay references={documentReference.author} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Related Documents">
                            {renderRelatesTo()}
                        </Section>

                        <Section title="Context">
                            <FieldGroup>
                                {renderField('Encounters', <FhirReferenceDisplay references={documentReference.context?.encounter} />)}
                                {/* WHAT THE DOCUMENT IS ABOUT, when that is a resource rather than a visit - the plan a
                                    photograph of an insurance card was filed beside. Without it the card reads as a loose
                                    file in a list, which is the thing filing it beside the Coverage was meant to prevent. */}
                                {renderField('Related to', <FhirReferenceDisplay references={documentReference.context?.related} />)}
                                {renderField('Main clinical acts documented', <FhirCodeableConceptDisplay code={documentReference.context?.event} multiple={true} emptyText={notRecorded} />)}
                                {renderField('Kind of facility where patient was seen', <FhirCodeableConceptDisplay code={documentReference.context?.facilityType} emptyText={notRecorded} />, 'context.facilityType.coding[0].display')}
                                {renderField('Additional details about where the content was created (e.g. clinical specialty)', <FhirCodeableConceptDisplay code={documentReference.context?.practiceSetting} emptyText={notRecorded} />, 'context.practiceSetting.coding[0].display')}
                                {renderField('Time of service that is being documented', <FhirPeriodDisplay period={documentReference.context?.period} />)}
                            </FieldGroup>
                        </Section>
                        </>
                        )}
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirDocumentReferenceDisplay;