import React, { useState, useEffect } from 'react';
import { Card, CardHeader, CardBody, CardDivider } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { InputControl } from '../ui/input-control';
import { Divider } from '../ui/divider';
import { DismissibleAlert } from '../ui/dismissible-alert';
import { Heading } from '../ui/heading';
import { Flex, FlexItem } from '../ui/flex';
import { Text } from '../ui/text';
import { Spacer } from '../ui/spacer';
import { TabPanel } from '../ui/tab-panel';
import { Disabled } from '../ui/disabled';
import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
import {
    IValueSet,
    useAuthServiceContext,
    usePatientServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirCode,
    FhirCodeableConcept,
    FhirPeriod,
    FhirReference,
    FhirReferenceCollection,
    FhirValueSetSearch
} from '../../components';
import {
    useFhirAppointments,
    useFhirConditions,
    useFhirEncounterBroadcast,
    useFhirEncounters,
    useFhirEpisodesOfCare,
    useFhirImmunizationRecommendations,
    useFhirLocations,
    useFhirObservations,
    useFhirPractitioners,
    useFhirProcedures,
    useFhirRelatedPersons
} from '../../hooks';
import { Encounter, FhirResource } from 'fhir/r4';
import { ExternalLink, PlusCircle, Trash2 } from 'lucide-react';
import { useNavigate, useParams } from 'react-router-dom';

interface FhirEncounterProps {
    encounter?: Encounter | undefined;
    isNew?: boolean;
    elevated?: boolean;
    disabled?: boolean;
    enableInlineActions?: boolean;
}

const DiagnosisCondition: React.FC<{ index: number; disabled: boolean; readonly: boolean; enableInlineActions: boolean; }> = ({ index, disabled, readonly = false, enableInlineActions = true }) => {
    const { control } = useFormContext();
    const itemReferenceFieldArray = useFieldArray({ control, name: `diagnosis.${index}.condition` });

    const { conditionsList } = useFhirConditions();
    const { proceduresList } = useFhirProcedures();

    return (
        <FhirReferenceCollection label="The diagnosis or procedure relevant to the encounter"
                                 references={itemReferenceFieldArray}
                                 context={`diagnosis.${index}.condition`}
                                 referenceTypes={[
                                     { name: 'Condition', key: 'Condition' },
                                     { name: 'Procedure', key: 'Procedure' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Condition':
                                             return conditionsList;
                                         case 'Procedure':
                                             return proceduresList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={true}
                                 disabled={disabled}
                                 readonly={readonly}
                                 enableInlineCreation={false}
                                 multiple={false}
                                 onInlineCreate={(referenceType) => {
                                     console.log(`Create new ${referenceType}`);
                                 }}/>
    );
};

const ParticipantIndividual: React.FC<{ index: number; disabled: boolean; readonly: boolean; enableInlineActions: boolean; }> = ({ index, disabled, readonly = false, enableInlineActions = true }) => {
    const { control } = useFormContext();
    const itemReferenceFieldArray = useFieldArray({ control, name: `participant.${index}.individual` });

    const { practitionersList } = useFhirPractitioners();
    const { relatedPersonsList } = useFhirRelatedPersons();

    return (
        <FhirReferenceCollection label="List of participants involved in the encounter"
                                 references={itemReferenceFieldArray}
                                 context={`participant.${index}.individual`}
                                 referenceTypes={[
                                     { name: 'Practitioner', key: 'Practitioner' },
                                     { name: 'RelatedPerson', key: 'RelatedPerson' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Practitioner':
                                             return practitionersList.map(p => p.practitioner);
                                         case 'RelatedPerson':
                                             return relatedPersonsList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={false}
                                 disabled={disabled}
                                 readonly={readonly}
                                 enableInlineCreation={false}
                                 multiple={false}
                                 onInlineCreate={(referenceType) => {
                                     console.log(`Create new ${referenceType}`);
                                 }}/>
    );
};

export const FhirEncounter: React.FC<FhirEncounterProps> = ({ encounter, isNew, elevated = true, disabled = false, enableInlineActions = true }) => {
    const { id } = useParams<{ id: string; encounterId: string; appointmentId: string; }>();
    const navigate = useNavigate();
    const { control } = useFormContext();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const { encounterState, setEncounterState } = usePatientServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

    const [loading, setLoading] = useState(false);

    // value sets
    const [encounterStatus, setEncounterStatus] = useState<IValueSet[]>([]);
    const [actEncounterCode, setActEncounterCode] = useState<IValueSet[]>([]);
    const [usCoreEncounterType, setUsCoreEncounterType] = useState<IValueSet[]>([]);
    const [serviceType, setServiceType] = useState<IValueSet[]>([]);
    const [actPriority, setActPriority] = useState<IValueSet[]>([]);
    const [encounterParticipantType, setEncounterParticipantType] = useState<IValueSet[]>([]);
    const [diagnosisRole, setDiagnosisRole] = useState<IValueSet[]>([]);
    const [encounterAdmitSource, setEncounterAdmitSource] = useState<IValueSet[]>([]);
    const [reAdmissionIndicator, setReAdmissionIndicator] = useState<IValueSet[]>([]);
    const [encounterDiet, setEncounterDiet] = useState<IValueSet[]>([]);
    const [encounterSpecialCourtesy, setEncounterSpecialCourtesy] = useState<IValueSet[]>([]);
    const [encounterSpecialArrangements, setEncounterSpecialArrangements] = useState<IValueSet[]>([]);
    const [encounterDischargeDisposition, setEncounterDischargeDisposition] = useState<IValueSet[]>([]);
    const [encounterLocationStatus, setEncounterLocationStatus] = useState<IValueSet[]>([]);
    const [locationPhysicalType, setLocationPhysicalType] = useState<IValueSet[]>([]);
    const [interpreterRequired, setInterpreterRequired] = useState<IValueSet[]>([]);

    const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
    const spacerMargin = '24px';

    useFhirEncounterBroadcast();
    const { encountersList } = useFhirEncounters();
    const { episodesOfCareList } = useFhirEpisodesOfCare();
    const { conditionsList } = useFhirConditions();
    const { proceduresList } = useFhirProcedures();
    const { observationsList } = useFhirObservations();
    const { immunizationRecommendationsList } = useFhirImmunizationRecommendations();
    const { locationsList } = useFhirLocations();
    const { appointmentsList } = useFhirAppointments();

    const statusHistoryFieldArray = useFieldArray({ control, name: 'statusHistory' });
    const classHistoryFieldArray = useFieldArray({ control, name: 'classHistory' });
    const participantFieldArray = useFieldArray({ control, name: 'participant' });
    const reasonReferenceFieldArray = useFieldArray({ control, name: 'reasonReference' });
    const diagnosisFieldArray = useFieldArray({ control, name: 'diagnosis' });
    const locationFieldArray = useFieldArray({ control, name: 'location' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    encounterStatusValueSet,
                    actEncounterCodeValueSet,
                    usCoreEncounterTypeValueSet,
                    serviceTypeValueSet,
                    actPriorityValueSet,
                    encounterParticipantTypeValueSet,
                    diagnosisRoleValueSet,
                    encounterAdmitSourceValueSet,
                    reAdmissionIndicatorValueSet,
                    encounterDietValueSet,
                    encounterSpecialCourtesyValueSet,
                    encounterSpecialArrangementsValueSet,
                    encounterDischargeDispositionValueSet,
                    encounterLocationStatusValueSet,
                    locationPhysicalTypeValueSet,
                    interpreterRequiredValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.encounterStatus),
                    fetchValueSet(valueSetUrls.actEncounterCode),
                    fetchValueSet(valueSetUrls.usCoreEncounterType),
                    fetchValueSet(valueSetUrls.serviceType),
                    fetchValueSet(valueSetUrls.actPriority),
                    fetchValueSet(valueSetUrls.encounterParticipantType),
                    fetchValueSet(valueSetUrls.diagnosisRole),
                    fetchValueSet(valueSetUrls.encounterAdmitSource),
                    fetchValueSet(valueSetUrls.reAdmissionIndicator),
                    fetchValueSet(valueSetUrls.encounterDiet),
                    fetchValueSet(valueSetUrls.encounterSpecialCourtesy),
                    fetchValueSet(valueSetUrls.encounterSpecialArrangements),
                    fetchValueSet(valueSetUrls.encounterDischargeDisposition),
                    fetchValueSet(valueSetUrls.encounterLocationStatus),
                    fetchValueSet(valueSetUrls.locationPhysicalType),
                    fetchValueSet(valueSetUrls.interpreterRequired)
                ]);

                setEncounterStatus(encounterStatusValueSet);
                setActEncounterCode(actEncounterCodeValueSet);
                setUsCoreEncounterType(usCoreEncounterTypeValueSet);
                setServiceType(serviceTypeValueSet);
                setActPriority(actPriorityValueSet);
                setEncounterParticipantType(encounterParticipantTypeValueSet);
                setDiagnosisRole(diagnosisRoleValueSet);
                setEncounterAdmitSource(encounterAdmitSourceValueSet);
                setReAdmissionIndicator(reAdmissionIndicatorValueSet);
                setEncounterDiet(encounterDietValueSet);
                setEncounterSpecialCourtesy(encounterSpecialCourtesyValueSet);
                setEncounterSpecialArrangements(encounterSpecialArrangementsValueSet);
                setEncounterDischargeDisposition(encounterDischargeDispositionValueSet);
                setEncounterLocationStatus(encounterLocationStatusValueSet);
                setLocationPhysicalType(locationPhysicalTypeValueSet);
                setInterpreterRequired(interpreterRequiredValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

        loadValueSets();
    }, [fetchValueSet, valueSetUrls]);

    const addStatusHistory = () => {
        statusHistoryFieldArray.append({
            status: '',
        });
    };

    const removeStatusHistory = (index: number) => {
        statusHistoryFieldArray.remove(index);
    };

    const addClassHistory = () => {
        classHistoryFieldArray.append({
            class: null
        });
    };

    const removeClassHistory = (index: number) => {
        classHistoryFieldArray.remove(index);
    };

    const addParticipant = () => {
        participantFieldArray.append({
            type: [],
            individual: null
        });
    };

    const removeParticipant = (index: number) => {
        participantFieldArray.remove(index);
    };

    const addDiagnosis = () => {
        diagnosisFieldArray.append({
            condition: null,
            use: null,
            rank: null
        });
    };

    const removeDiagnosis = (index: number) => {
        diagnosisFieldArray.remove(index);
    };

    const addLocation = () => {
        locationFieldArray.append({
            location: null,
            status: '',
            physicalType: null
        });
    };

    const removeLocation = (index: number) => {
        locationFieldArray.remove(index);
    };

    // (design-pass finding B37) - THIS BUTTON NEVER CONSULTED STATUS.
    //
    // The render condition below is `!isNew && encounter && !isPatient && id && !encounterState` - status
    // is absent from it, so the button appeared identically on `planned`, `in-progress` and `finished`
    // encounters. On a finished one it invited appending clinical data to a CLOSED encounter, presented as
    // routine, under the copy "Clinical data added will be linked to this encounter".
    //
    // SPENCER RULED (b), 2026-08-12: amending a closed encounter STAYS - late addenda are real clinical
    // practice - but it must NAME what it does and CONFIRM first. It is not hidden, and it is not silent.
    //
    // Deliberately NOT a status write: this is pure client-side navigation (it was traced as such on the
    // card). Nothing here reopens the encounter; `reopen` in useEncounterActions is the separate,
    // deliberate action that does, and it rebuilds `period` precisely because this one must not.
    const isFinishedEncounter = encounter?.status === 'finished';

    const startEncounter = () => {
        if (!encounter) return;

        if (isFinishedEncounter) {
            const proceed = window.confirm(
                'This visit is already finished.\n\n'
                + 'Anything you add will be recorded against a closed encounter, and that is visible in the '
                + 'record as a later addition.\n\nAdd to this finished visit?',
            );
            if (!proceed) return;
        }

        setEncounterState(encounter);

        navigate(`/dashboard/encounters/${encounter.id}/patients/${id}/management/encounters/${encounter.id}`);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Flex justify="space-between">
                    <FlexItem>
                        <Heading level={5}>Details</Heading>
                    </FlexItem>
                    <FlexItem>
                        {!isNew && encounter && !isPatient && id && !encounterState && (
                            // <Button variant="primary"
                            // icon={check}
                            // isBusy={submitting}
                            // disabled={submitting}
                            // onClick={() => startEncounter()}>
                            // Continue in Encounter
                            // </Button>
                            <Flex direction="column" gap={2}>
                                <button type="button" className="btn btn-blue" onClick={() => startEncounter()}>
                                    <ExternalLink className="w-4 h-4" />
                                    {/* Card 247 (B37) — the label names what actually happens. "Continue in
                                        Encounter" is true of an open visit and a euphemism on a closed one. */}
                                    {isFinishedEncounter ? 'Add to finished visit' : 'Continue in Encounter'}
                                </button>
                                <Text variant="muted" style={{ fontSize: '12px', textAlign: 'center' }}>
                                    {isFinishedEncounter
                                        ? 'This visit is finished — anything you add is recorded as a later addition'
                                        : 'Clinical data added will be linked to this encounter'}
                                </Text>
                            </Flex>
                        )}
                    </FlexItem>
                </Flex>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* status */}
                    <FhirCode label="Status"
                              context="status"
                              options={encounterStatus}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* class */}
                    <FhirCodeableConcept label="Classification of patient encounter"
                                         context="class"
                                         options={actEncounterCode}
                                         required={true}
                                         loading={loading}
                                         disabled={disabled}/>
                    <Spacer margin={spacerMargin}/>

                    {/* type */}
                    <FhirCodeableConcept label="Specific type of encounter"
                                         context="type"
                                         options={usCoreEncounterType}
                                         required={true}
                                         multiple={true}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* serviceType */}
                    <FhirValueSetSearch label="Specific type of service"
                                        context="serviceType"
                                        valueSetUrl={valueSetUrls.serviceType}
                                        placeholder="Search for services..."
                                        multiple={false}
                                        disabled={disabled}/>
                    <Spacer margin={spacerMargin}/>

                    {/* priority */}
                    <FhirCodeableConcept label="Priority"
                                         context="priority"
                                         options={actPriority}
                                         loading={loading}
                                         disabled={disabled}/>
                    <Spacer margin={spacerMargin}/>

                    {/* interpreterRequired */}
                    <FhirCodeableConcept label="Interpreter Required"
                                         context="interpreterRequired"
                                         options={interpreterRequired}
                                         loading={loading}
                                         disabled={disabled}/>
                    <Spacer margin={spacerMargin}/>

                    {/* appointment */}
                    <FhirReference label="The appointment that scheduled this encounter"
                                   context="appointment"
                                   referenceType="Appointment"
                                   referenceList={appointmentsList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* partOf */}
                    <FhirReference label="Another Encounter this encounter is part of"
                                   context="partOf"
                                   referenceType="Encounter"
                                   referenceList={encountersList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* episodeOfCare */}
                    <FhirReference label="Episode(s) of care that this encounter should be recorded against"
                                   context="episodeOfCare"
                                   referenceType="EpisodeOfCare"
                                   referenceList={episodesOfCareList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* period */}
                    <FhirPeriod label="The start and end time of the encounter"
                                context="period"
                                type="dateTime"
                                disabled={disabled}
                                readonly={isPatient}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="reason"
                          tabs={[
                              { name: 'reason', title: 'Reason' },
                              { name: 'participants', title: 'Participants' },
                              { name: 'diagnosis', title: 'Diagnosis' },
                              { name: 'locations', title: 'Locations' },
                              { name: 'hospitalization', title: 'Hospitalization' },
                              { name: 'statusHistory', title: 'Status History' },
                              { name: 'classHistory', title: 'Class History' },
                          ]}>
                    {(tab) => {
                        // reason
                        if (tab.name === 'reason') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* reasonCode */}
                                        <FhirValueSetSearch label="Reason the encounter takes place"
                                                            context="reasonCode"
                                                            valueSetUrl={valueSetUrls.encounterReason}
                                                            placeholder="Search for reasons..."
                                                            multiple={true}
                                                            disabled={disabled}/>
                                        <Spacer margin={spacerMargin}/>

                                        {/* reasonReference */}
                                        <FhirReferenceCollection label="Reason the encounter takes place (reference)"
                                                                 references={reasonReferenceFieldArray}
                                                                 context="reasonReference"
                                                                 referenceTypes={[
                                                                     { name: 'Condition', key: 'Condition' },
                                                                     { name: 'Procedure', key: 'Procedure' },
                                                                     { name: 'Observation', key: 'Observation' },
                                                                     { name: 'ImmunizationRecommendation', key: 'ImmunizationRecommendation' },
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Condition':
                                                                             return conditionsList;
                                                                         case 'Procedure':
                                                                             return proceduresList;
                                                                         case 'Observation':
                                                                             return observationsList;
                                                                         case 'ImmunizationRecommendation':
                                                                             return immunizationRecommendationsList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 multiple={true}
                                                                 required={false}
                                                                 readonly={isPatient}
                                                                 disabled={disabled}
                                                                 enableInlineActions={enableInlineActions}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // participants
                        if (tab.name === 'participants') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {participantFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>Participants</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        <button type="button"
                                                                className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                onClick={addParticipant}
                                                                disabled={disabled}>
                                                            <PlusCircle className="w-4 h-4" />
                                                            Add Participant
                                                        </button>
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

                                                <DismissibleAlert status="info">
                                                    No participants added yet.
                                                </DismissibleAlert>

                                                <Spacer margin={spacerMargin}/>
                                            </>
                                        )}

                                        {participantFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Participant {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove participant"
                                                                            aria-label="Remove participant"
                                                                            onClick={() => removeParticipant(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* individual */}
                                                        <ParticipantIndividual index={index}
                                                                               disabled={disabled}
                                                                               readonly={isPatient}
                                                                               enableInlineActions={enableInlineActions}/>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* type */}
                                                        <FhirCodeableConcept label="Role of participant in encounter"
                                                                             context={`participant.${index}.type`}
                                                                             options={encounterParticipantType}
                                                                             disabled={disabled}
                                                                             loading={loading}
                                                                             multiple={true}/>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* period */}
                                                        <FhirPeriod label="Period of time during the encounter that the participant participated"
                                                                    context={`participant.${index}.period`}
                                                                    disabled={disabled}
                                                                    readonly={isPatient}/>
                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

                                        {!isPatient && participantFieldArray.fields.length > 0 && (
                                            <Flex justify="center">
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addParticipant}
                                                            disabled={disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Participant
                                                    </button>
                                                </FlexItem>
                                            </Flex>
                                        )}
                                    </div>
                                </Disabled>
                            );
                        }

                        // diagnosis
                        if (tab.name === 'diagnosis') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {diagnosisFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>The list of diagnosis relevant to this encounter</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addDiagnosis}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Diagnosis
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

                                                <DismissibleAlert status="info">
                                                    No diagnoses added yet.
                                                </DismissibleAlert>
                                                <Spacer margin={spacerMargin}/>
                                            </>
                                        )}

                                        {diagnosisFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Diagnosis {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove diagnosis"
                                                                            aria-label="Remove diagnosis"
                                                                            onClick={() => removeDiagnosis(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* diagnosis.condition */}
                                                        <DiagnosisCondition index={index}
                                                                            disabled={disabled}
                                                                            readonly={isPatient}
                                                                            enableInlineActions={enableInlineActions}/>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* diagnosis.use */}
                                                        <FhirCodeableConcept label="Role that this diagnosis has within the encounter (e.g. admission, billing, discharge …)"
                                                                             context={`diagnosis.${index}.use`}
                                                                             options={diagnosisRole}
                                                                             loading={loading}
                                                                             disabled={disabled}/>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* diagnosis.rank */}
                                                        <Controller key={`diagnosis.${index}.rank`}
                                                                    name={`diagnosis.${index}.rank`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Ranking of the diagnosis (for each role type)"
                                                                                      type="number"
                                                                                      min="1"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

                                        {!isPatient && diagnosisFieldArray.fields.length > 0 && (
                                            <Flex justify="center">
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addDiagnosis}
                                                            disabled={disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Diagnosis
                                                    </button>

                                                </FlexItem>
                                            </Flex>
                                        )}
                                    </div>
                                </Disabled>
                            );
                        }

                        // locations
                        if (tab.name === 'locations') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {locationFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>List of locations where the patient has been</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addLocation}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Location
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

                                                <DismissibleAlert status="info">
                                                    No locations added yet.
                                                </DismissibleAlert>

                                                <Spacer margin={spacerMargin}/>
                                            </>
                                        )}

                                        {locationFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Location {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove location"
                                                                            aria-label="Remove location"
                                                                            onClick={() => removeLocation(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* location */}
                                                        <FhirReference label="Location the encounter takes place"
                                                                       context={`location.${index}.location`}
                                                                       referenceType="Location"
                                                                       referenceList={locationsList}
                                                                       enableInlineActions={enableInlineActions}
                                                                       required={true}
                                                                       disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* status */}
                                                        <FhirCode label="Status"
                                                                  context={`location.${index}.status`}
                                                                  options={encounterLocationStatus}
                                                                  loading={loading}
                                                                  disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* physicalType */}
                                                        <FhirCodeableConcept label="The physical type of the location (usually the level in the location hierachy - bed room ward etc.)"
                                                                             context={`location.${index}.physicalType`}
                                                                             options={locationPhysicalType}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* period */}
                                                        <FhirPeriod label="Time period during which the patient was present at the location"
                                                                    context={`location.${index}.period`}
                                                                    disabled={disabled}
                                                                    readonly={isPatient}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

                                        {!isPatient && locationFieldArray.fields.length > 0 && (
                                            <Flex justify="center">
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addLocation}
                                                            disabled={disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Location
                                                    </button>
                                                </FlexItem>
                                            </Flex>
                                        )}
                                    </div>
                                </Disabled>
                            );
                        }

                        // hospitalization
                        if (tab.name === 'hospitalization') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* origin */}
                                        <FhirReference label="The location/organization from which the patient came before admission"
                                                       context="hospitalization.origin"
                                                       referenceType="Location"
                                                       referenceList={locationsList}
                                                       enableInlineActions={enableInlineActions}
                                                       disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* admitSource */}
                                        <FhirCodeableConcept label="From where patient was admitted (physician referral, transfer)"
                                                             context="hospitalization.admitSource"
                                                             options={encounterAdmitSource}
                                                             loading={loading}
                                                             disabled={disabled}/>
                                        <Spacer margin={spacerMargin}/>

                                        {/* reAdmission */}
                                        <FhirCodeableConcept label="The type of hospital re-admission that has occurred (if any). If the value is absent, then this is not identified as a readmission"
                                                             context="hospitalization.reAdmission"
                                                             options={reAdmissionIndicator}
                                                             loading={loading}
                                                             disabled={disabled}/>
                                        <Spacer margin={spacerMargin}/>

                                        {/* dietPreference */}
                                        <FhirCodeableConcept label="Diet preferences reported by the patient"
                                                             context="hospitalization.dietPreference"
                                                             options={encounterDiet}
                                                             multiple={true}
                                                             loading={loading}
                                                             disabled={disabled}/>
                                        <Spacer margin={spacerMargin}/>

                                        {/* specialCourtesy */}
                                        <FhirCodeableConcept label="Special courtesies (VIP, board member)"
                                                             context="hospitalization.specialCourtesy"
                                                             options={encounterSpecialCourtesy}
                                                             multiple={true}
                                                             loading={loading}
                                                             disabled={disabled}/>
                                        <Spacer margin={spacerMargin}/>

                                        {/* specialArrangement */}
                                        <FhirCodeableConcept label="Wheelchair, translator, stretcher, etc."
                                                             context="hospitalization.specialArrangement"
                                                             options={encounterSpecialArrangements}
                                                             multiple={true}
                                                             loading={loading}
                                                             disabled={disabled}/>
                                        <Spacer margin={spacerMargin}/>

                                        {/* destination */}
                                        <FhirReference label="Location/organization to which the patient is discharged"
                                                       context="hospitalization.destination"
                                                       referenceType="Location"
                                                       referenceList={locationsList}
                                                       enableInlineActions={enableInlineActions}
                                                       disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* dischargeDisposition */}
                                        <FhirCodeableConcept label="Category or kind of location after discharge"
                                                             context="hospitalization.dischargeDisposition"
                                                             options={encounterDischargeDisposition}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>
                                    </div>
                                </Disabled>
                            );
                        }

                        // statusHistory
                        if (tab.name === 'statusHistory') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {statusHistoryFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>List of past encounter statuses</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addStatusHistory}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Status History
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

                                                <DismissibleAlert status="info">
                                                    No status history added yet.
                                                </DismissibleAlert>
                                                <Spacer margin={spacerMargin}/>
                                            </>
                                        )}

                                        {statusHistoryFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Status History {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove status history"
                                                                            aria-label="Remove status history"
                                                                            onClick={() => removeStatusHistory(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* status */}
                                                        <FhirCode label="Status"
                                                                  context={`statusHistory.${index}.status`}
                                                                  options={encounterStatus}
                                                                  required={true}
                                                                  loading={loading}
                                                                  disabled={disabled}/>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* period */}
                                                        <FhirPeriod label="The time that the episode was in the specified status"
                                                                    context={`statusHistory.${index}.period`}
                                                                    disabled={disabled}
                                                                    readonly={isPatient}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

                                        {!isPatient && statusHistoryFieldArray.fields.length > 0 && (
                                            <Flex justify="center">
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addStatusHistory}
                                                            disabled={disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Status History
                                                    </button>
                                                </FlexItem>
                                            </Flex>
                                        )}
                                    </div>
                                </Disabled>
                            );
                        }

                        // classHistory
                        if (tab.name === 'classHistory') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {classHistoryFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>List of past encounter classes</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addClassHistory}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Class History
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

                                                <DismissibleAlert status="info">
                                                    No class history added yet.
                                                </DismissibleAlert>

                                                <Spacer margin={spacerMargin}/>
                                            </>
                                        )}

                                        {classHistoryFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Class History {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove class history"
                                                                            aria-label="Remove class history"
                                                                            onClick={() => removeClassHistory(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* class */}
                                                        <FhirCodeableConcept label="Class"
                                                                             context={`classHistory.${index}.class`}
                                                                             options={actEncounterCode}
                                                                             required={true}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* period */}
                                                        <FhirPeriod label="The time that the episode was in the specified class"
                                                                    context={`classHistory.${index}.period`}
                                                                    disabled={disabled}
                                                                    readonly={isPatient}/>

                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

                                        {!isPatient && classHistoryFieldArray.fields.length > 0 && (
                                            <Flex justify="center">
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addClassHistory}
                                                            disabled={disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Class History
                                                    </button>
                                                </FlexItem>
                                            </Flex>
                                        )}
                                    </div>
                                </Disabled>
                            );
                        }
                    }}
                </TabPanel>
            </CardBody>
        </Card>
    );
};

export default FhirEncounter;