import React from 'react';
import { Procedure } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FhirCodeDisplay } from '../../utils/fhirCode';
import { FhirPeriodDisplay } from '../../utils/fhirPeriod';
import { FhirRangeDisplay } from '../../utils/fhirRange';
import { FhirAnnotationDisplay } from '../../utils/fhirAnnotation';
import { FhirReferenceDisplay } from '../../utils/fhirReference';
import { formatDateTime } from '../../utils/dateUtils';
import { renderField } from '../../utils/renderField';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
import { Card, CardHeader, CardContent } from '../ui/card';
import { FieldHistoryProvider, FieldHistoryScope } from '../FieldHistory/FieldHistoryProvider';
import { ShowFieldHistoryToggle } from '../FieldHistory/ShowFieldHistoryToggle';
import { PrintRecord } from '../ui/print-record';
import { RecordEditedMarker } from '../FieldHistory/RecordEditedMarker';
import type { ScopedSendRecovery } from '../../hooks/useScopedSendRecovery';
import { CorrectionRequestButton, CorrectionRequestComposer, useCorrectionRequest, type SendCorrectionRequest } from '../CorrectionRequest/CorrectionRequest';
import { FieldGroup, Section } from '../FieldHistory/FieldLayout';

interface FhirProcedureDisplayProps {
    procedure: Procedure;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
    onRequestCorrection?: SendCorrectionRequest;
    correctionError?: string;
    correctionRecovery?: ScopedSendRecovery;
}

export const FhirProcedureDisplay: React.FC<FhirProcedureDisplayProps> = ({
    procedure, isOpen, onClose, title = "Procedure Details",
    onRequestCorrection, correctionError, correctionRecovery,
}) => {
    const renderPerformedValue = () => {
        if (procedure.performedDateTime) {
            return formatDateTime(procedure.performedDateTime);
        }
        if (procedure.performedPeriod) {
            return <FhirPeriodDisplay period={procedure.performedPeriod} />;
        }
        if (procedure.performedString) {
            return procedure.performedString;
        }
        if (procedure.performedRange) {
            return <FhirRangeDisplay range={procedure.performedRange} />;
        }
        return '-';
    };

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

        return (
            <div className="space-y-4">
                {procedure.performer.map((performer, index) => (
                    <Card key={index}>
                        <CardHeader>
                            <h5 className="text-sm font-semibold">Performer {index + 1}</h5>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Role/Function', <FhirCodeableConceptDisplay code={performer.function} />)}
                                    {renderField('Who performed', <FhirReferenceDisplay references={performer.actor} />)}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    const renderFocalDevices = () => {
        if (!procedure.focalDevice || procedure.focalDevice.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No focal devices recorded
                </p>
            );
        }

        return (
            <div className="space-y-4">
                {procedure.focalDevice.map((device, index) => (
                    <Card key={index}>
                        <CardHeader>
                            <h5 className="text-sm font-semibold">Focal Device {index + 1}</h5>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Action Performed', <FhirCodeableConceptDisplay code={device.action} />)}
                                    {renderField('Device', <FhirReferenceDisplay references={device.manipulated} />)}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    // `procedure` is frequently a forced cast over a union of resource types (several callers keep
    // one `selectedItem`/`selected.resource` and multiplex it across many `Fhir*Display` modals,
    // gating only via `isOpen`) -- it can be the wrong resource shape, or undefined, whenever
    // `isOpen` is false. This guard must run before anything below touches `procedure.*` so a
    // non-Procedure/absent value while closed never throws (mirrors the original `if (!isOpen)
    // return null;` that ran before WP's `<Modal>` was ever constructed).
    const correction = useCorrectionRequest(procedure?.id);
    if (!isOpen) return null;

    return (
        <Dialog
            open={isOpen}
            onOpenChange={(next) => {
                if (!next) onClose();
            }}
        >
            <DialogContent className="max-h-[90vh] w-full max-w-3xl overflow-y-auto" data-print-region="true">
                <FieldHistoryProvider>
                    <FieldHistoryScope resourceType="Procedure" id={procedure.id}>
                        <DialogHeader className="flex-row items-center justify-between gap-4 text-left sm:text-left">
                            <div className="flex items-center gap-2">
                                <DialogTitle>{title}</DialogTitle>
                                <RecordEditedMarker resource={procedure} />
                            </div>
                            <ShowFieldHistoryToggle />
            <PrintRecord/>
                            {onRequestCorrection && <CorrectionRequestButton request={correction} />}
                        </DialogHeader>

                        {onRequestCorrection && (
                            <CorrectionRequestComposer request={correction} onSend={onRequestCorrection} error={correctionError} idPrefix="procedure" earlier={correctionRecovery} />
                        )}

                        <FieldGroup>
                            {renderField('Procedure', <FhirCodeableConceptDisplay code={procedure.code} />, 'code.coding[0].display')}
                            {renderField('Category', <FhirCodeableConceptDisplay code={procedure.category} multiple={true} />, 'category.coding[0].display')}
                            {renderField('Status', <FhirCodeDisplay code={procedure.status} />, 'status')}
                            {renderField(
                                'When Performed',
                                renderPerformedValue(),
                                procedure.performedDateTime ? 'performedDateTime' : procedure.performedString ? 'performedString' : undefined,
                            )}
                            {renderField('Body Site', <FhirCodeableConceptDisplay code={procedure.bodySite} multiple={true} />)}
                            {renderField('Outcome', <FhirCodeableConceptDisplay code={procedure.outcome} />, 'outcome.coding[0].display')}
                            {renderField('Follow Up Instructions', <FhirCodeableConceptDisplay code={procedure.followUp} multiple={true} />)}
                            {renderField('Encounter', <FhirReferenceDisplay references={procedure.encounter} />)}
                            {renderField('Location', <FhirReferenceDisplay references={procedure.location} />)}
                        </FieldGroup>

                        <Section title="Reason for Procedure">
                            <FieldGroup>
                                {renderField('Reason Code', <FhirCodeableConceptDisplay code={procedure.reasonCode} multiple={true} />)}
                                {renderField('Reason Reference', <FhirReferenceDisplay references={procedure.reasonReference} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Performers">
                            {renderPerformers()}
                        </Section>

                        <Section title="Complications">
                            <FieldGroup>
                                {renderField('Complication', <FhirCodeableConceptDisplay code={procedure.complication} multiple={true} />)}
                                {renderField('Complication Detail', <FhirReferenceDisplay references={procedure.complicationDetail} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Items Used">
                            <FieldGroup>
                                {renderField('Used Code', <FhirCodeableConceptDisplay code={procedure.usedCode} multiple={true} />)}
                                {renderField('Used Reference', <FhirReferenceDisplay references={procedure.usedReference} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Focal Devices">
                            {renderFocalDevices()}
                        </Section>

                        <Section title="Related Procedures">
                            <FieldGroup>
                                {renderField('Based On', <FhirReferenceDisplay references={procedure.basedOn} />)}
                                {renderField('Part Of', <FhirReferenceDisplay references={procedure.partOf} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Notes">
                            <FieldGroup>
                                {renderField('Additional Notes', <FhirAnnotationDisplay annotation={procedure.note} multiple={true} />)}
                            </FieldGroup>
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirProcedureDisplay;