import React from 'react';
import { FamilyMemberHistory, FamilyMemberHistoryCondition } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { formatDate, formatDateTime } from '../../utils/dateUtils';
import { FhirPeriodDisplay } from '../../utils/fhirPeriod';
import { FhirRangeDisplay } from '../../utils/fhirRange';
import { FhirAgeDisplay } from '../../utils/fhirAge';
import { FhirAnnotationDisplay } from '../../utils/fhirAnnotation';
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';

interface FhirFamilyMemberHistoryDisplayProps {
    familyMemberHistory: FamilyMemberHistory;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirFamilyMemberHistoryDisplay: React.FC<FhirFamilyMemberHistoryDisplayProps> = ({
                                                                                                  familyMemberHistory,
                                                                                                  isOpen,
                                                                                                  onClose,
                                                                                                  title = "Family Member History Details"
                                                                                              }) => {
    const renderBornValue = () => {
        if (familyMemberHistory.bornDate) {
            return formatDate(familyMemberHistory.bornDate);
        }
        if (familyMemberHistory.bornPeriod) {
            return <FhirPeriodDisplay period={familyMemberHistory.bornPeriod} />;
        }
        return '-';
    };

    const renderAgeValue = () => {
        if (familyMemberHistory.ageAge) {
            return <FhirAgeDisplay age={familyMemberHistory.ageAge} />;
        }
        if (familyMemberHistory.ageRange) {
            return <FhirRangeDisplay range={familyMemberHistory.ageRange} />;
        }
        return '-';
    };

    const renderDeceasedValue = () => {
        if (familyMemberHistory.deceasedBoolean === false) {
            return 'No';
        }
        if (familyMemberHistory.deceasedBoolean === true) {
            if (familyMemberHistory.deceasedAge) {
                return <FhirAgeDisplay age={familyMemberHistory.deceasedAge} />;
            }
            if (familyMemberHistory.deceasedRange) {
                return <FhirRangeDisplay range={familyMemberHistory.deceasedRange} />;
            }
            if (familyMemberHistory.deceasedDate) {
                return formatDate(familyMemberHistory.deceasedDate);
            }
            if (familyMemberHistory.deceasedString) {
                return familyMemberHistory.deceasedString;
            }
            return 'Yes';
        }
        return '-';
    };

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

        return (
            <div className="space-y-4">
                {familyMemberHistory.condition.map((condition, index) => {
                    const renderOnset = (condition: FamilyMemberHistoryCondition) => {
                        if (condition.onsetAge) {
                            return <FhirAgeDisplay age={condition.onsetAge}/>;
                        }

                        if (condition.onsetRange) {
                            return <FhirRangeDisplay range={condition.onsetRange}/>;
                        }

                        if (condition.onsetPeriod) {
                            return <FhirPeriodDisplay period={condition.onsetPeriod}/>;
                        }

                        if (condition.onsetString) {
                            return condition.onsetString;
                        }

                        return '-';
                    };

                    return (
                        <Card key={index}>
                            <CardHeader>
                                <h5 className="text-sm font-semibold">Condition {index + 1}</h5>
                            </CardHeader>
                            <CardContent>
                                <div className="bg-surface">
                                    <FieldGroup>
                                        {renderField('Condition', <FhirCodeableConceptDisplay code={condition.code}/>)}
                                        {renderField('Outcome', <FhirCodeableConceptDisplay code={condition.outcome}/>)}
                                        {renderField('Contributed to death', condition.contributedToDeath ? 'Yes' : 'No')}
                                        {renderField('Onset', renderOnset(condition))}
                                        {renderField('Notes', <FhirAnnotationDisplay annotation={condition.note} multiple={true}/>)}
                                    </FieldGroup>
                                </div>
                            </CardContent>
                        </Card>
                    );
                })}
            </div>
        );
    };

    // `familyMemberHistory` 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
    // `familyMemberHistory.*` so a non-FamilyMemberHistory/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="FamilyMemberHistory" id={familyMemberHistory.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={familyMemberHistory} />
                            </div>
                            <ShowFieldHistoryToggle />
                        </DialogHeader>

                        <FieldGroup>
                            {renderField('Name', familyMemberHistory.name, 'name')}
                            {renderField('Relationship', <FhirCodeableConceptDisplay code={familyMemberHistory.relationship}/>, 'relationship.coding[0].display')}
                            {renderField('Status', familyMemberHistory.status, 'status')}
                            {renderField('Data Absent Reason', <FhirCodeableConceptDisplay code={familyMemberHistory.dataAbsentReason}/>, 'dataAbsentReason.coding[0].display')}
                            {renderField('Gender', <FhirCodeableConceptDisplay code={familyMemberHistory.sex}/>, 'sex.coding[0].display')}
                            {renderField('Date of Birth', renderBornValue())}
                            {renderField('Age', renderAgeValue())}
                            {familyMemberHistory.estimatedAge && renderField('Age is Estimated', 'Yes', 'estimatedAge')}
                            {renderField('Deceased', renderDeceasedValue())}
                            {renderField('Date', formatDateTime(familyMemberHistory.date), 'date')}
                        </FieldGroup>

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

                        <Section title="Health Conditions">
                            {renderConditions()}
                        </Section>

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

export default FhirFamilyMemberHistoryDisplay;