import React from 'react';
import { AdverseEvent } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FhirCodeDisplay } from '../../utils/fhirCode';
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 { RecordEditedMarker } from '../FieldHistory/RecordEditedMarker';
import { FieldGroup, Section } from '../FieldHistory/FieldLayout';

interface FhirAdverseEventDisplayProps {
    adverseEvent: AdverseEvent;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirAdverseEventDisplay: React.FC<FhirAdverseEventDisplayProps> = ({
                                                                                    adverseEvent,
                                                                                    isOpen,
                                                                                    onClose,
                                                                                    title = "Adverse Event Details"
                                                                                }) => {
    // Doubly-nested: each `suspectEntity[]` entry (outer/"secondary" tier) embeds its own
    // `causality[]` (inner/"tertiary" tier). The outer tier gets `bg-muted/30` and the inner tier
    // `border-0 shadow-none` -- the same tinted-outer/flat-inner approximation already established
    // for the other doubly-nested Card-in-Card structure in this wave (see
    // FhirImmunizationRecommendationDisplay's recommendation/dateCriterion nesting).
    const renderSuspectEntities = () => {
        if (!adverseEvent.suspectEntity || adverseEvent.suspectEntity.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No suspect entities recorded
                </p>
            );
        }

        return (
            <div className="space-y-4">
                {adverseEvent.suspectEntity.map((entity, index) => (
                    <Card key={index} className="bg-muted/30">
                        <CardHeader>
                            <h5 className="text-sm font-semibold">Suspect Entity {index + 1}</h5>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Instance', <FhirReferenceDisplay references={entity.instance} />)}
                                </FieldGroup>
                            </div>

                            {entity.causality && entity.causality.length > 0 ? (
                                <div className="space-y-4">
                                    <h6 className="text-sm font-semibold">Causality Assessments</h6>
                                    {entity.causality.map((causality, causalityIndex) => (
                                        <Card key={causalityIndex} className="border-0 ak-card-flat">
                                            <CardHeader>
                                                <h6 className="text-sm font-semibold">Assessment {causalityIndex + 1}</h6>
                                            </CardHeader>
                                            <CardContent>
                                                <div className="bg-surface">
                                                    <FieldGroup>
                                                        {renderField('Assessment', <FhirCodeableConceptDisplay code={causality.assessment} />)}
                                                        {renderField('Product Relatedness', causality.productRelatedness)}
                                                        {renderField('Author', <FhirReferenceDisplay references={causality.author} />)}
                                                        {renderField('Method', <FhirCodeableConceptDisplay code={causality.method} />)}
                                                    </FieldGroup>
                                                </div>
                                            </CardContent>
                                        </Card>
                                    ))}
                                </div>
                            ) : (
                                <p className="text-sm italic text-muted-foreground">
                                    No causality assessments recorded
                                </p>
                            )}
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    // `adverseEvent` 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
    // `adverseEvent.*` so a non-AdverseEvent/absent value while closed never throws (mirrors the
    // original `if (!isOpen) return null;` that ran before WP's `<Modal>` was ever constructed).
    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">
                <FieldHistoryProvider>
                    <FieldHistoryScope resourceType="AdverseEvent" id={adverseEvent.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={adverseEvent} />
                            </div>
                            <ShowFieldHistoryToggle />
                        </DialogHeader>

                        <FieldGroup>
                            {renderField('Type of Event', <FhirCodeableConceptDisplay code={adverseEvent.event} />, 'event.coding[0].display')}
                            {renderField('Category', <FhirCodeableConceptDisplay code={adverseEvent.category} multiple={true} />)}
                            {renderField('Actuality', <FhirCodeDisplay code={adverseEvent.actuality} />, 'actuality')}
                            {renderField('Encounter', <FhirReferenceDisplay references={adverseEvent.encounter} />)}
                            {renderField('Location', <FhirReferenceDisplay references={adverseEvent.location} />)}
                            {renderField('Resulting Condition', <FhirReferenceDisplay references={adverseEvent.resultingCondition} />)}
                        </FieldGroup>

                        <Section title="Timeline">
                            <FieldGroup>
                                {renderField('When Event Occurred', formatDateTime(adverseEvent.date), 'date')}
                                {renderField('When Event was Detected', formatDateTime(adverseEvent.detected), 'detected')}
                                {renderField('When Event was Recorded', formatDateTime(adverseEvent.recordedDate), 'recordedDate')}
                            </FieldGroup>
                        </Section>

                        <Section title="Severity & Outcome">
                            <FieldGroup>
                                {renderField('Seriousness', <FhirCodeableConceptDisplay code={adverseEvent.seriousness} />, 'seriousness.coding[0].display')}
                                {renderField('Severity', <FhirCodeableConceptDisplay code={adverseEvent.severity} />, 'severity.coding[0].display')}
                                {renderField('Outcome', <FhirCodeableConceptDisplay code={adverseEvent.outcome} />, 'outcome.coding[0].display')}
                            </FieldGroup>
                        </Section>

                        <Section title="Suspect Entities">
                            {renderSuspectEntities()}
                        </Section>

                        <Section title="Contributors">
                            <FieldGroup>
                                {renderField('Who was Involved', <FhirReferenceDisplay references={adverseEvent.contributor} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Subject Medical History">
                            <FieldGroup>
                                {renderField('Relevant Medical History', <FhirReferenceDisplay references={adverseEvent.subjectMedicalHistory} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Study Information">
                            <FieldGroup>
                                {renderField('Study', <FhirReferenceDisplay references={adverseEvent.study} />)}
                            </FieldGroup>
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirAdverseEventDisplay;