import React from 'react';
import { ImmunizationRecommendation } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
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 FhirImmunizationRecommendationDisplayProps {
    immunizationRecommendation: ImmunizationRecommendation;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirImmunizationRecommendationDisplay: React.FC<FhirImmunizationRecommendationDisplayProps> = ({
                                                                                                                immunizationRecommendation,
                                                                                                                isOpen,
                                                                                                                onClose,
                                                                                                                title = "Immunization Recommendation Details"
                                                                                                            }) => {
    const renderDoseNumberValue = (recommendation: any) => {
        if (recommendation.doseNumberPositiveInt) {
            return recommendation.doseNumberPositiveInt.toString();
        }
        if (recommendation.doseNumberString) {
            return recommendation.doseNumberString;
        }
        return '-';
    };

    const renderSeriesDosesValue = (recommendation: any) => {
        if (recommendation.seriesDosesPositiveInt) {
            return recommendation.seriesDosesPositiveInt.toString();
        }
        if (recommendation.seriesDosesString) {
            return recommendation.seriesDosesString;
        }
        return '-';
    };

    // Nested one level inside `renderRecommendations()` -- each `recommendation[]` entry embeds its
    // own `dateCriterion[]`. Kept as its own function (rather than inlined) so the doubly-nested
    // Card-in-Card structure stays readable: a "Date Criterion" card renders inside a "Recommendation"
    // card's CardContent.
    const renderDateCriteria = (dateCriteria: any[] | undefined) => {
        if (!dateCriteria || dateCriteria.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No date criteria recorded
                </p>
            );
        }

        return (
            <div className="space-y-4">
                {dateCriteria.map((criterion, index) => (
                    <Card key={index} className="border-0 ak-card-flat">
                        <CardHeader>
                            <h6 className="text-sm font-semibold">Date Criterion {index + 1}</h6>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Type of date', <FhirCodeableConceptDisplay code={criterion.code} />)}
                                    {renderField('Recommended date', formatDateTime(criterion.value))}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    const renderRecommendations = () => {
        if (!immunizationRecommendation.recommendation || immunizationRecommendation.recommendation.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No recommendations recorded
                </p>
            );
        }

        return (
            <div className="space-y-4">
                {immunizationRecommendation.recommendation.map((recommendation, index) => (
                    <Card key={index} className="bg-muted/30">
                        <CardHeader>
                            <h5 className="text-sm font-semibold">Recommendation {index + 1}</h5>
                        </CardHeader>
                        <CardContent className="space-y-5">
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Vaccine recommendation status', <FhirCodeableConceptDisplay code={recommendation.forecastStatus} />)}
                                    {renderField('Vaccine recommendation status reason', <FhirCodeableConceptDisplay code={recommendation.forecastReason} multiple={true} />)}
                                    {renderField('Vaccine or vaccine group recommendation applies to', <FhirCodeableConceptDisplay code={recommendation.vaccineCode} multiple={true} />)}
                                    {renderField('Disease to be immunized against', <FhirCodeableConceptDisplay code={recommendation.targetDisease} />)}
                                    {renderField('Vaccine which is contraindicated to fulfill the recommendation', <FhirCodeableConceptDisplay code={recommendation.contraindicatedVaccineCode} multiple={true} />)}
                                    {renderField('Description', recommendation.description || '')}
                                    {renderField('Name of vaccination series', recommendation.series)}
                                    {renderField('Recommended dose number within series', renderDoseNumberValue(recommendation))}
                                    {renderField('Recommended number of doses for immunity', renderSeriesDosesValue(recommendation))}
                                    {renderField('Past immunizations supporting recommendation', <FhirReferenceDisplay references={recommendation.supportingImmunization}/>)}
                                    {renderField('Supporting patient information', <FhirReferenceDisplay references={recommendation.supportingPatientInformation}/>)}
                                </FieldGroup>
                            </div>

                            <div>
                                <h6 className="mb-3 text-sm font-semibold">Dates governing proposed immunization</h6>
                                {renderDateCriteria(recommendation.dateCriterion)}
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

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

                        <FieldGroup>
                            {renderField('Date recommendation(s) created', formatDateTime(immunizationRecommendation.date), 'date')}
                            {renderField('Patient', <FhirReferenceDisplay references={immunizationRecommendation.patient} />)}
                            {renderField('Authority', <FhirReferenceDisplay references={immunizationRecommendation.authority} />)}
                        </FieldGroup>

                        <Section title="Recommendations">
                            {renderRecommendations()}
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirImmunizationRecommendationDisplay;