import React from 'react';
import { EpisodeOfCare } from 'fhir/r4';
import { FhirCodeableConceptDisplay } from '../../utils/fhirCodeableConcept';
import { FhirCodeDisplay } from '../../utils/fhirCode';
import { FhirPeriodDisplay } from '../../utils/fhirPeriod';
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 FhirEpisodeOfCareDisplayProps {
    episodeOfCare: EpisodeOfCare;
    isOpen: boolean;
    onClose: () => void;
    title?: string;
}

export const FhirEpisodeOfCareDisplay: React.FC<FhirEpisodeOfCareDisplayProps> = ({
                                                                                      episodeOfCare,
                                                                                      isOpen,
                                                                                      onClose,
                                                                                      title = "Episode of Care Details"
                                                                                  }) => {
    const renderDiagnoses = () => {
        if (!episodeOfCare.diagnosis || episodeOfCare.diagnosis.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No diagnoses recorded
                </p>
            );
        }

        return (
            <div className="flex flex-col gap-4">
                {episodeOfCare.diagnosis.map((diagnosis, index) => (
                    <Card key={index}>
                        <CardHeader>
                            <h5 className="text-sm font-semibold">Diagnosis {index + 1}</h5>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Conditions/problems/diagnoses this episode of care is for', <FhirReferenceDisplay references={diagnosis.condition} />)}
                                    {renderField('Role that this diagnosis has within the episode of care (e.g. admission, billing, discharge …)', <FhirCodeableConceptDisplay code={diagnosis.role} />)}
                                    {renderField('Ranking of the diagnosis (for each role type)', diagnosis.rank?.toString())}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

    const renderStatusHistory = () => {
        if (!episodeOfCare.statusHistory || episodeOfCare.statusHistory.length === 0) {
            return (
                <p className="text-sm italic text-muted-foreground">
                    No status history recorded
                </p>
            );
        }

        return (
            <div className="flex flex-col gap-4">
                {episodeOfCare.statusHistory.map((statusHistory, index) => (
                    <Card key={index}>
                        <CardHeader>
                            <h5 className="text-sm font-semibold">Status History {index + 1}</h5>
                        </CardHeader>
                        <CardContent>
                            <div className="bg-surface">
                                <FieldGroup>
                                    {renderField('Status', <FhirCodeDisplay code={statusHistory.status} />)}
                                    {renderField('Duration the EpisodeOfCare was in the specified status', <FhirPeriodDisplay period={statusHistory.period} />)}
                                </FieldGroup>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        );
    };

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

                        <FieldGroup>
                            {renderField('Status', <FhirCodeDisplay code={episodeOfCare.status} />, 'status')}
                            {renderField('Type/class - e.g. specialist referral, disease management', <FhirCodeableConceptDisplay code={episodeOfCare.type} multiple={true} />)}
                            {renderField('Interval during responsibility is assumed', <FhirPeriodDisplay period={episodeOfCare.period} />)}
                            {renderField('Care manager/care coordinator for the patient', <FhirReferenceDisplay references={episodeOfCare.careManager} />)}
                            {renderField('Other practitioners facilitating this episode of care', <FhirReferenceDisplay references={episodeOfCare.team} />)}
                            {renderField('Patient', <FhirReferenceDisplay references={episodeOfCare.patient} />)}
                            {renderField('Organization that assumes care', <FhirReferenceDisplay references={episodeOfCare.managingOrganization} />)}
                        </FieldGroup>

                        <Section title="Diagnosis">
                            {renderDiagnoses()}
                        </Section>

                        <Section title="Status History">
                            {renderStatusHistory()}
                        </Section>
                    </FieldHistoryScope>
                </FieldHistoryProvider>
            </DialogContent>
        </Dialog>
    );
};

export default FhirEpisodeOfCareDisplay;