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 { 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,
    useValueSetServiceContext
} from '../../services';
import {
    FhirAnnotation,
    FhirCode,
    FhirCodeableConcept,
    FhirDosage,
    FhirQuantity,
    FhirReference,
    FhirReferenceCollection,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import {
    useFhirDetectedIssues,
    useFhirDevices,
    useFhirEncounters,
    useFhirEpisodesOfCare,
    useFhirLocations,
    useFhirMedicationDispenseBroadcast,
    useFhirMedicationDispenses,
    useFhirMedicationRequests,
    useFhirPractitioners,
    useFhirProcedures,
    useFhirRelatedPersons
} from '../../hooks';
import { FhirResource } from 'fhir/r4';
import { PlusCircle, Trash2 } from 'lucide-react';
// - WordPress's ToggleControl, swapped for the ui/* adapter. Same props, same JSX;
// only `__nextHasNoMarginBottom` is dropped, which means nothing outside WordPress.
import { ToggleControl } from '../ui/toggle-control';

interface FhirMedicationDispenseProps {
    elevated?: boolean;
    disabled?: boolean;
    enableInlineActions?: boolean;
}

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

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

    return (
        <FhirReferenceCollection label="Individual who was performing"
                                 references={itemReferenceFieldArray}
                                 context={`performer.${index}.actor`}
                                 referenceTypes={[
                                     { name: 'Practitioner', key: 'Practitioner' },
                                     { name: 'Patient', key: 'Patient' },
                                     { name: 'Device', key: 'Device' },
                                     { name: 'RelatedPerson', key: 'RelatedPerson' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Practitioner':
                                             return practitionersList.map(p => p.practitioner);
                                         case 'RelatedPerson':
                                             return relatedPersonsList;
                                         case 'Device':
                                             return devicesList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={true}
                                 disabled={disabled}
                                 readonly={readonly}
                                 multiple={false}
                                 enableInlineActions={enableInlineActions}/>
    );
};

export  const FhirMedicationDispense: React.FC<FhirMedicationDispenseProps> = ({ elevated = true, disabled = false, enableInlineActions = true }) => {
    const { control, watch } = useFormContext();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

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

    // value sets
    const [medicationdispenseStatus, setMedicationdispenseStatus] = useState<IValueSet[]>([]);
    const [medicationdispenseStatusReason, setMedicationdispenseStatusReason] = useState<IValueSet[]>([]);
    const [medicationdispenseCategory, setMedicationdispenseCategory] = useState<IValueSet[]>([]);
    const [medicationdispensePerformerFunction, setMedicationdispensePerformerFunction] = useState<IValueSet[]>([]);
    const [actPharmacySupplyType, setActPharmacySupplyType] = useState<IValueSet[]>([]);
    const [actSubstanceAdminSubstitutionCode, setActSubstanceAdminSubstitutionCode] = useState<IValueSet[]>([]);
    const [substanceAdminSubstitutionReason, setSubstanceAdminSubstitutionReason] = useState<IValueSet[]>([]);

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

    useFhirMedicationDispenses();
    useFhirMedicationDispenseBroadcast();
    const { locationsList } = useFhirLocations();
    const { encountersList } = useFhirEncounters();
    const { episodesOfCareList } = useFhirEpisodesOfCare();
    const { proceduresList } = useFhirProcedures();
    const { detectedIssuesList } = useFhirDetectedIssues();
    const { medicationRequestsList } = useFhirMedicationRequests();
    const { practitionersList } = useFhirPractitioners();

    const medicationType = watch('medicationType');
    const wasSubstituted = watch('substitution.wasSubstituted');
    const performerFieldArray = useFieldArray({ control, name: 'performer' });
    const contextFieldArray = useFieldArray({ control, name: 'context' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    medicationdispenseStatusValueSet,
                    medicationdispenseStatusReasonValueSet,
                    medicationdispenseCategoryValueSet,
                    medicationdispensePerformerFunctionValueSet,
                    actPharmacySupplyTypeValueSet,
                    actSubstanceAdminSubstitutionCodeValueSet,
                    substanceAdminSubstitutionReasonValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.medicationdispenseStatus),
                    fetchValueSet(valueSetUrls.medicationdispenseStatusReason),
                    fetchValueSet(valueSetUrls.medicationdispenseCategory),
                    fetchValueSet(valueSetUrls.medicationdispensePerformerFunction),
                    fetchValueSet(valueSetUrls.actPharmacySupplyType),
                    fetchValueSet(valueSetUrls.actSubstanceAdminSubstitutionCode),
                    fetchValueSet(valueSetUrls.substanceAdminSubstitutionReason)
                ]);

                setMedicationdispenseStatus(medicationdispenseStatusValueSet);
                setMedicationdispenseStatusReason(medicationdispenseStatusReasonValueSet);
                setMedicationdispenseCategory(medicationdispenseCategoryValueSet);
                setMedicationdispensePerformerFunction(medicationdispensePerformerFunctionValueSet);
                setActPharmacySupplyType(actPharmacySupplyTypeValueSet);
                setActSubstanceAdminSubstitutionCode(actSubstanceAdminSubstitutionCodeValueSet);
                setSubstanceAdminSubstitutionReason(substanceAdminSubstitutionReasonValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addPerformer = () => {
        performerFieldArray.append({ function: null, actor: null });
    };

    const removePerformer = (index: number) => {
        performerFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    <Spacer margin={spacerMargin}/>

                    {/* medicationCodeableConcept */}
                    <FhirValueSetSearch label="What medication was supplied"
                                        context="medicationCodeableConcept"
                                        valueSetUrl={valueSetUrls.medicationCodes}
                                        placeholder="Search for medications..."
                                        required={true}
                                        multiple={false}
                                        disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {medicationType === 'codeableConcept' && (
                        <>

                        </>
                    )}

                    {medicationType === 'reference' && (
                        <>
                            {/* medicationReference */}
                        </>
                    )}

                    {/* status */}
                    <FhirCode label="Status"
                              context="status"
                              options={medicationdispenseStatus}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* statusReason */}
                    <TypeSelector label="Why a dispense was not performed"
                                  context="statusReason"
                                  options={[
                                      { name: 'Code', key: 'codeableConcept' },
                                      { name: 'Detected Issue', key: 'reference' }
                                  ]}
                                  required={false}
                                  disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {watch('statusReason') === 'codeableConcept' && (
                        <>
                            {/* statusReasonCodeableConcept */}
                            <FhirCodeableConcept label="Reason for current status"
                                                 context="statusReasonCodeableConcept"
                                                 options={medicationdispenseStatusReason}
                                                 loading={loading}
                                                 disabled={disabled}/>

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

                    {watch('statusReason') === 'reference' && (
                        <>
                            {/* statusReasonReference */}
                            <FhirReference label="Detected Issue"
                                           context="statusReasonReference"
                                           referenceType="DetectedIssue"
                                           referenceList={detectedIssuesList}
                                           enableInlineActions={enableInlineActions}
                                           required={false}
                                           disabled={disabled}/>

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

                    {/* category */}
                    <FhirCodeableConcept label="Type of medication dispense"
                                         context="category"
                                         options={medicationdispenseCategory}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* type */}
                    <FhirCodeableConcept label="Trial fill, partial fill, emergency fill, etc."
                                         context="type"
                                         options={actPharmacySupplyType}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* authorizingPrescription */}
                    <FhirReference label="Medication order that authorizes the dispense"
                                   context="authorizingPrescription"
                                   referenceType="MedicationRequest"
                                   referenceList={medicationRequestsList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* location */}
                    <FhirReference label="Where the dispense occurred"
                                   context="location"
                                   referenceType="Location"
                                   referenceList={locationsList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* destination */}
                    <FhirReference label="Where the medication was sent"
                                   context="destination"
                                   referenceType="Location"
                                   referenceList={locationsList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* whenPrepared */}
                    <Controller key="whenPrepared"
                                name="whenPrepared"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="When product was packaged and reviewed"
                                                  type="datetime-local"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* whenHandedOver */}
                    <Controller key="whenHandedOver"
                                name="whenHandedOver"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="When product was given out"
                                                  type="datetime-local"/>
                                )}/>
                    <Spacer margin={spacerMargin}/>

                    {/* detectedIssue */}
                    <FhirReference label="Clinical issue with action"
                                   context="detectedIssue"
                                   referenceType="DetectedIssue"
                                   referenceList={detectedIssuesList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* partOf */}
                    <FhirReference label="Event that dispense is part of"
                                   context="partOf"
                                   referenceType="Procedure"
                                   referenceList={proceduresList}
                                   enableInlineActions={enableInlineActions}
                                   multiple={true}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* context */}
                    <FhirReferenceCollection label="Encounter / Episode associated with event"
                                             references={contextFieldArray}
                                             context="context"
                                             referenceTypes={[
                                                 { name: 'Encounter', key: 'Encounter' },
                                                 { name: 'EpisodeOfCare', key: 'EpisodeOfCare' }
                                             ]}
                                             getReferenceList={(referenceType: string): FhirResource[] => {
                                                 switch (referenceType) {
                                                     case 'Encounter':
                                                         return encountersList;
                                                     case 'EpisodeOfCare':
                                                         return episodesOfCareList;
                                                     default:
                                                         return [];
                                                 }
                                             }}
                                             required={false}
                                             disabled={disabled}
                                             readonly={isPatient}
                                             multiple={false}
                                             enableInlineActions={enableInlineActions}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="quantities"
                          tabs={[
                              { name: 'quantities', title: 'Quantities' },
                              { name: 'dosage', title: 'Dosage Instructions' },
                              { name: 'substitution', title: 'Substitution' },
                              { name: 'performers', title: 'Performers' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // quantities
                        if (tab.name === 'quantities') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* quantity */}
                                        <FhirQuantity label="Amount dispensed"
                                                      context="quantity"
                                                      isSimpleQuantity={true}
                                                      disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* daysSupply */}
                                        <FhirQuantity label="Amount of medication expressed as a timing amount"
                                                      context="daysSupply"
                                                      isSimpleQuantity={true}
                                                      disabled={disabled}/>

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

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

                                        {/* dosage */}
                                        <FhirDosage label="How the medication is to be used by the patient or administered by the caregiver"
                                                    context={`dosageInstruction`}
                                                    disabled={disabled}
                                                    readonly={isPatient}/>

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

                        // substitution
                        if (tab.name === 'substitution') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>
                                        <Heading level={5}>Substitution Information</Heading>
                                        <Divider margin="2"/>
                                        <Spacer margin={spacerMargin}/>

                                        {/* wasSubstituted */}
                                        <Controller key="substitution.wasSubstituted"
                                                    name="substitution.wasSubstituted"
                                                    control={control}
                                                    disabled={disabled}
                                                    render={({ field }) => (
                                                        <ToggleControl
                                                                       label="Was Substituted"
                                                                       checked={field.value}
                                                                       onChange={field.onChange}/>
                                                    )}/>

                                        <Spacer margin={spacerMargin}/>

                                        {wasSubstituted && (
                                            <>
                                                {/* substitution.type */}
                                                <FhirCodeableConcept label="Code signifying whether a different drug was dispensed from what was prescribed"
                                                                     context="substitution.type"
                                                                     options={actSubstanceAdminSubstitutionCode}
                                                                     loading={loading}
                                                                     disabled={disabled}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* substitution.reason */}
                                                <FhirCodeableConcept label="Why was substitution made"
                                                                     context="substitution.reason"
                                                                     options={substanceAdminSubstitutionReason}
                                                                     multiple={true}
                                                                     loading={loading}
                                                                     disabled={disabled}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* substitution.responsibleParty */}
                                                <FhirReference label="Who is responsible for the substitution"
                                                               context="substitution.responsibleParty"
                                                               referenceType="Practitioner"
                                                               referenceList={practitionersList.map(item => item.practitioner)}
                                                               enableInlineActions={enableInlineActions}
                                                               multiple={true}
                                                               required={false}
                                                               disabled={disabled}/>

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

                        // performers
                        if (tab.name === 'performers') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        {/* The operands were the wrong way round - the JSX was the LEFT one,
                                            so the whole expression collapsed to a boolean and React rendered
                                            nothing. There was no Add Performer button and no empty state on
                                            this tab at all, which reads as a tab that simply has no content
                                            rather than one that is broken. */}
                                        {performerFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button
                                                                type="button"
                                                                className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                onClick={addPerformer}
                                                                disabled={disabled}
                                                            >
                                                                <PlusCircle />
                                                                Add Performer
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Spacer margin="8"/>

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

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

                                        {performerFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Performer {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button
                                                                        type="button"
                                                                        className="btn btn-red-ghost"
                                                                        title="Remove performer"
                                                                        aria-label="Remove performer"
                                                                        onClick={() => removePerformer(index)}
                                                                        disabled={disabled}
                                                                    >
                                                                        <Trash2 />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* performer.function */}
                                                        <FhirCodeableConcept label="Who performed the dispense and what they did"
                                                                             context={`performer.${index}.function`}
                                                                             options={medicationdispensePerformerFunction}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* performer.actor */}
                                                        <PerformerActorReferences index={index}
                                                                                  disabled={disabled}
                                                                                  readonly={isPatient}
                                                                                  enableInlineActions={enableInlineActions}/>

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

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

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

                                        {/* note */}
                                        <FhirAnnotation label="Information about the dispense"
                                                        context={`note`}
                                                        disabled={disabled}
                                                        readonly={isPatient}/>

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

                        return null;
                    }}
                </TabPanel>
            </CardBody>
        </Card>
    );
};

export default FhirMedicationDispense;