import React from 'react';
import { MedicationDispense } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FhirCodeDisplay } from '../../utils/fhirCode';
import { FhirQuantityDisplay } from '../../utils/fhirQuantity';
import { FhirAnnotationDisplay } from '../../utils/fhirAnnotation';
import { FhirDosageDisplay } from '../../utils/fhirDosage';
import { formatDateTime } from '../../utils/dateUtils';
import { FhirReferenceDisplay } from '../../utils/fhirReference';
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 { FieldGroup, Section } from '../FieldHistory/FieldLayout';

interface FhirMedicationDispenseDisplayProps {
    medicationDispense: MedicationDispense;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirMedicationDispenseDisplay: React.FC<FhirMedicationDispenseDisplayProps> = ({
                                                                                                medicationDispense,
                                                                                                isOpen,
                                                                                                onClose,
                                                                                                title = "Medication Dispense Details"
                                                                                            }) => {
    const renderMedicationValue = () => {
        if (medicationDispense.medicationCodeableConcept) {
            return <FhirCodeableConceptDisplay code={medicationDispense.medicationCodeableConcept} />;
        }
        if (medicationDispense.medicationReference) {
            return <FhirReferenceDisplay references={medicationDispense.medicationReference} />;
        }
        return '-';
    };

    const renderStatusReasonValue = () => {
        if (medicationDispense.statusReasonCodeableConcept) {
            return <FhirCodeableConceptDisplay code={medicationDispense.statusReasonCodeableConcept} />;
        }
        if (medicationDispense.statusReasonReference) {
            return <FhirReferenceDisplay references={medicationDispense.statusReasonReference} />;
        }
        return '-';
    };

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

        return (
            <div className="space-y-4">
                {medicationDispense.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('Who performed the dispense and what they did', <FhirCodeableConceptDisplay code={performer.function} />)}
                                    {renderField('Individual who was performing', <FhirReferenceDisplay references={performer.actor} />)}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    const renderSubstitution = () => {
        if (!medicationDispense.substitution) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No substitution information
                </p>
            );
        }

        const substitution = medicationDispense.substitution;

        return (
            <Card>
                <CardHeader>
                    <h5 className="text-sm font-semibold">Substitution Information</h5>
                </CardHeader>
                <CardContent>
                    <div className="bg-surface">
                        <FieldGroup>
                            {renderField('Was Substituted', substitution.wasSubstituted === true ? 'Yes' : 'No', 'substitution.wasSubstituted')}
                            {substitution.wasSubstituted && (
                                <>
                                    {renderField('Code signifying whether a different drug was dispensed from what was prescribed', <FhirCodeableConceptDisplay code={substitution.type} />, 'substitution.type.coding[0].display')}
                                    {renderField('Why was substitution made', <FhirCodeableConceptDisplay code={substitution.reason} multiple={true} />)}
                                    {renderField('Who is responsible for the substitution', <FhirReferenceDisplay references={substitution.responsibleParty} />)}
                                </>
                            )}
                        </FieldGroup>
                    </div>
                </CardContent>
            </Card>
        );
    };

    const renderDosageInstructions = () => {
        if (!medicationDispense.dosageInstruction || medicationDispense.dosageInstruction.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No dosage instructions recorded
                </p>
            );
        }

        return <FhirDosageDisplay dosage={medicationDispense.dosageInstruction} multiple={true} />;
    };

    // `medicationDispense` 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 `medicationDispense.*`
    // so a non-MedicationDispense/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" data-print-region="true">
                <FieldHistoryProvider>
                    <FieldHistoryScope resourceType="MedicationDispense" id={medicationDispense.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={medicationDispense} />
                            </div>
                            <ShowFieldHistoryToggle />
            <PrintRecord/>
                        </DialogHeader>

                        <FieldGroup>
                            {renderField('Medication to be taken', renderMedicationValue(), medicationDispense.medicationCodeableConcept ? 'medicationCodeableConcept.coding[0].display' : undefined)}
                            {renderField('Status', <FhirCodeDisplay code={medicationDispense.status} />, 'status')}
                            {renderField('Why a dispense was not performed', renderStatusReasonValue(), medicationDispense.statusReasonCodeableConcept ? 'statusReasonCodeableConcept.coding[0].display' : undefined)}
                            {renderField('Type of medication dispense', <FhirCodeableConceptDisplay code={medicationDispense.category} />, 'category.coding[0].display')}
                            {renderField('Trial fill, partial fill, emergency fill, etc.', <FhirCodeableConceptDisplay code={medicationDispense.type} />, 'type.coding[0].display')}
                            {renderField('Medication order that authorizes the dispense', <FhirReferenceDisplay references={medicationDispense.authorizingPrescription} />)}
                            {renderField('Where the dispense occurred', <FhirReferenceDisplay references={medicationDispense.location} />)}
                            {renderField('Where the medication was sent', <FhirReferenceDisplay references={medicationDispense.destination} />)}
                            {renderField('When product was packaged and reviewed', formatDateTime(medicationDispense.whenPrepared), 'whenPrepared')}
                            {renderField('When product was given out', formatDateTime(medicationDispense.whenHandedOver), 'whenHandedOver')}
                            {renderField('Clinical issue with action', <FhirReferenceDisplay references={medicationDispense.detectedIssue} />)}
                            {renderField('Event that dispense is part of', <FhirReferenceDisplay references={medicationDispense.partOf} />)}
                            {renderField('Encounter / Episode associated with event', <FhirReferenceDisplay references={medicationDispense.context} />)}
                        </FieldGroup>

                        <Section title="Quantities">
                            <FieldGroup>
                                {renderField('Amount dispensed', <FhirQuantityDisplay quantity={medicationDispense.quantity} />, 'quantity.value')}
                                {renderField('Amount of medication expressed as a timing amount', <FhirQuantityDisplay quantity={medicationDispense.daysSupply} />, 'daysSupply.value')}
                            </FieldGroup>
                        </Section>

                        <Section title="Dosage Instructions">
                            {renderDosageInstructions()}
                        </Section>

                        <Section title="Substitution">
                            {renderSubstitution()}
                        </Section>

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

                        <Section title="Notes">
                            <FieldGroup>
                                {renderField('Information about the dispense', <FhirAnnotationDisplay annotation={medicationDispense.note} multiple={true} />)}
                            </FieldGroup>
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirMedicationDispenseDisplay;