import React from 'react';
import { AllergyIntolerance } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FhirCodeDisplay } from '../../utils/fhirCode';
import { FhirAgeDisplay } from '../../utils/fhirAge';
import { FhirPeriodDisplay } from '../../utils/fhirPeriod';
import { FhirRangeDisplay } from '../../utils/fhirRange';
import { FhirAnnotationDisplay } from '../../utils/fhirAnnotation';
import { formatDateTime } from '../../utils/dateUtils';
import { renderField } from '../../utils/renderField';
import { FhirReferenceDisplay } from '../../utils/fhirReference';
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';
import { ArchivedNotice } from '../ArchivedNotice/ArchivedNotice';

interface FhirAllergyIntoleranceDisplayProps {
    allergyIntolerance: AllergyIntolerance;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirAllergyIntoleranceDisplay: React.FC<FhirAllergyIntoleranceDisplayProps> = ({
                                                                                                allergyIntolerance,
                                                                                                isOpen,
                                                                                                onClose,
                                                                                                title = "Allergy/Intolerance Details"
                                                                                            }) => {
    const renderOnsetValue = () => {
        if (allergyIntolerance.onsetDateTime) {
            return formatDateTime(allergyIntolerance.onsetDateTime);
        }
        if (allergyIntolerance.onsetAge) {
            return <FhirAgeDisplay age={allergyIntolerance.onsetAge} />;
        }
        if (allergyIntolerance.onsetPeriod) {
            return <FhirPeriodDisplay period={allergyIntolerance.onsetPeriod} />;
        }
        if (allergyIntolerance.onsetRange) {
            return <FhirRangeDisplay range={allergyIntolerance.onsetRange} />;
        }
        if (allergyIntolerance.onsetString) {
            return allergyIntolerance.onsetString;
        }
        return '-';
    };

    const renderCategoryValue = () => {
        if (!allergyIntolerance.category || allergyIntolerance.category.length === 0) {
            return '-';
        }

        return (
            <div>
                {allergyIntolerance.category.map((cat, index) => (
                    <div key={index} style={{ marginBottom: index < allergyIntolerance.category!.length - 1 ? '4px' : '0' }}>
                        <FhirCodeDisplay code={cat} />
                    </div>
                ))}
            </div>
        );
    };

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

        return (
            <div className="space-y-4">
                {allergyIntolerance.reaction.map((reaction, index) => (
                    <Card key={index}>
                        <CardHeader>
                            <h5 className="text-sm font-semibold">Reaction {index + 1}</h5>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Substance', <FhirCodeableConceptDisplay code={reaction.substance} />)}
                                    {renderField('Manifestation', <FhirCodeableConceptDisplay code={reaction.manifestation} multiple={true} />)}
                                    {renderField('Description', reaction.description)}
                                    {renderField('Onset Date', formatDateTime(reaction.onset))}
                                    {renderField('Severity', <FhirCodeDisplay code={reaction.severity} />)}
                                    {renderField('Exposure Route', <FhirCodeableConceptDisplay code={reaction.exposureRoute} />)}
                                    {renderField('Notes', <FhirAnnotationDisplay annotation={reaction.note} multiple={true} />)}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    // `allergyIntolerance` 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
    // `allergyIntolerance.*` so a non-AllergyIntolerance/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="AllergyIntolerance" id={allergyIntolerance.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={allergyIntolerance} />
                            </div>
                            <ShowFieldHistoryToggle />
                        </DialogHeader>
                        <ArchivedNotice resource={allergyIntolerance} />

                        <FieldGroup>
                            {renderField('Allergy or Intolerance', <FhirCodeableConceptDisplay code={allergyIntolerance.code} />, 'code.coding[0].display')}
                            {renderField('Clinical Status', <FhirCodeableConceptDisplay code={allergyIntolerance.clinicalStatus} />, 'clinicalStatus.coding[0].code')}
                            {renderField('Verification Status', <FhirCodeableConceptDisplay code={allergyIntolerance.verificationStatus} />, 'verificationStatus.coding[0].code')}
                            {renderField('Type', <FhirCodeDisplay code={allergyIntolerance.type} />, 'type')}
                            {renderField('Category', renderCategoryValue())}
                            {renderField('Criticality', <FhirCodeDisplay code={allergyIntolerance.criticality} />, 'criticality')}
                            {renderField('Date Recorded', formatDateTime(allergyIntolerance.recordedDate), 'recordedDate')}
                            {renderField('Date of Last Occurrence', formatDateTime(allergyIntolerance.lastOccurrence), 'lastOccurrence')}
                        </FieldGroup>

                        <Section title="Onset Information">
                            <FieldGroup>
                                {renderField('When allergy or intolerance was identified', renderOnsetValue())}
                                {renderField('Encounter', <FhirReferenceDisplay references={allergyIntolerance.encounter} />)}
                            </FieldGroup>
                        </Section>

                        <Section title="Reactions">
                            {renderReactions()}
                        </Section>

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

export default FhirAllergyIntoleranceDisplay;