import React, { useState, useEffect } from 'react';
import { TextareaControl } from "../ui/textarea-control";
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 {
    FhirCodeableConcept,
    FhirReferenceCollection
} from '../../components';
import {
    useFhirImmunizationEvaluations,
    useFhirImmunizationRecommendationBroadcast,
    useFhirImmunizationRecommendations,
    useFhirImmunizations
} from '../../hooks';
import { FhirResource } from 'fhir/r4';
import { PlusCircle, Trash2 } from 'lucide-react';

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

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

    const { immunizationsList } = useFhirImmunizations();
    const { immunizationEvaluationsList } = useFhirImmunizationEvaluations();

    return (
        <FhirReferenceCollection label="Past immunizations supporting recommendation"
                                 references={itemReferenceFieldArray}
                                 context={`recommendation.${index}.supportingImmunization`}
                                 referenceTypes={[
                                     { name: 'Immunization', key: 'Immunization' },
                                     { name: 'ImmunizationEvaluation', key: 'ImmunizationEvaluation' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Immunization':
                                             return immunizationsList;
                                         case 'ImmunizationEvaluation':
                                             return immunizationEvaluationsList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={false}
                                 disabled={disabled}
                                 readonly={readonly}
                                 multiple={true}
                                 enableInlineActions={enableInlineActions}/>
    );
};

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

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

    // value sets
    const [vaccineCode, setVaccineCode] = useState<IValueSet[]>([]);
    const [immunizationRecommendationTargetDisease, setImmunizationRecommendationTargetDisease] = useState<IValueSet[]>([]);
    const [immunizationRecommendationStatus, setImmunizationRecommendationStatus] = useState<IValueSet[]>([]);
    const [immunizationRecommendationReason, setImmunizationRecommendationReason] = useState<IValueSet[]>([]);
    const [immunizationRecommendationDateCriterion, setImmunizationRecommendationDateCriterion] = useState<IValueSet[]>([]);

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

    useFhirImmunizationRecommendations();
    useFhirImmunizationRecommendationBroadcast();

    const recommendationFieldArray = useFieldArray({ control, name: 'recommendation' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    vaccineCodeValueSet,
                    immunizationRecommendationTargetDiseaseValueSet,
                    immunizationRecommendationStatusValueSet,
                    immunizationRecommendationReasonValueSet,
                    immunizationRecommendationDateCriterionValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.vaccineCode),
                    fetchValueSet(valueSetUrls.immunizationRecommendationTargetDisease),
                    fetchValueSet(valueSetUrls.immunizationRecommendationStatus),
                    fetchValueSet(valueSetUrls.immunizationRecommendationReason),
                    fetchValueSet(valueSetUrls.immunizationRecommendationDateCriterion)
                ]);

                setVaccineCode(vaccineCodeValueSet);
                setImmunizationRecommendationTargetDisease(immunizationRecommendationTargetDiseaseValueSet);
                setImmunizationRecommendationStatus(immunizationRecommendationStatusValueSet);
                setImmunizationRecommendationReason(immunizationRecommendationReasonValueSet);
                setImmunizationRecommendationDateCriterion(immunizationRecommendationDateCriterionValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addRecommendation = () => {
        recommendationFieldArray.append({
            vaccineCode: [],
            targetDisease: null,
            contraindicatedVaccineCode: [],
            forecastStatus: null,
            forecastReason: [],
            dateCriterion: [],
            description: '',
            series: '',
            doseNumberPositiveInt: null,
            doseNumberString: '',
            seriesDosesPositiveInt: null,
            seriesDosesString: '',
            supportingImmunization: [],
            supportingPatientInformation: []
        });
    };

    const removeRecommendation = (index: number) => {
        recommendationFieldArray.remove(index);
    };

    const addDateCriterion = (recommendationIndex: number) => {
        const path = `recommendation.${recommendationIndex}.dateCriterion`;
        const dateCriterion = getValues(path) || [];
        setValue(path, [...dateCriterion, { code: null, value: '' }]);
    };

    const removeDateCriterion = (recommendationIndex: number, criterionIndex: number) => {
        const path = `recommendation.${recommendationIndex}.dateCriterion`;
        const dateCriterion = getValues(path) || [];
        dateCriterion.splice(criterionIndex, 1);
        setValue(path, dateCriterion);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* date */}
                    <Controller key="date"
                                name="date"
                                control={control}
                                rules={{ required: true }}
                                disabled={disabled}
                                render={({ field, fieldState }) => (
                                    <>
                                        <InputControl
                                                      {...field}
                                                      label="Date recommendation(s) created *"
                                                      type="datetime-local"/>

                                        {fieldState.error && (
                                            <DismissibleAlert status="error">
                                                Date is required
                                            </DismissibleAlert>
                                        )}
                                    </>
                                )}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <Spacer margin={spacerMargin}/>
                <Heading level={4}>Recommendations</Heading>
                <Divider margin="2"/>
                <Spacer margin={spacerMargin}/>

                {recommendationFieldArray.fields.length === 0 && (
                    <>
                        <Flex>
                            <FlexItem>
                                {!isPatient && (
                                    <button type="button"
                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                            onClick={addRecommendation}
                                            disabled={disabled}>
                                        <PlusCircle className="w-4 h-4" />
                                        Add Recommendation
                                    </button>
                                )}
                            </FlexItem>
                        </Flex>
                        <Spacer margin="8"/>

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

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

                {recommendationFieldArray.fields.map((field, index) => (
                    <React.Fragment key={field.id}>
                        <Card>
                            <CardHeader>
                                <Flex align="center" justify="space-between">
                                    <FlexItem>
                                        <h4>Recommendation {index + 1}</h4>
                                    </FlexItem>
                                    <FlexItem>
                                        {!isPatient && (
                                            <button type="button"
                                                    className="btn btn-red-ghost"
                                                    title="Remove recommendation"
                                                    aria-label="Remove recommendation"
                                                    onClick={() => removeRecommendation(index)}
                                                    disabled={disabled}>
                                                <Trash2 className="w-4 h-4" />
                                            </button>
                                        )}
                                    </FlexItem>
                                </Flex>
                            </CardHeader>

                            <CardBody>
                                <TabPanel initialTabName="details"
                                          tabs={[
                                              { name: 'details', title: 'Details' },
                                              { name: 'dates', title: 'Dates' },
                                              { name: 'supporting', title: 'Supporting Immunizations' }
                                          ]}>
                                    {(tab) => {
                                        // details
                                        if (tab.name === 'details') {
                                            return (
                                                <Disabled isDisabled={isPatient}>
                                                    <div style={{ paddingTop: '16px' }}>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* recommendation.forecastStatus */}
                                                        <FhirCodeableConcept label="Vaccine recommendation status"
                                                                             context={`recommendation.${index}.forecastStatus`}
                                                                             options={immunizationRecommendationStatus}
                                                                             required={true}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* recommendation.forecastReason */}
                                                        <FhirCodeableConcept label="Vaccine recommendation status reason"
                                                                             context={`recommendation.${index}.forecastReason`}
                                                                             options={immunizationRecommendationReason}
                                                                             multiple={true}
                                                                             required={false}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* recommendation.vaccineCode */}
                                                        <FhirCodeableConcept label="Vaccine or vaccine group recommendation applies to"
                                                                             context={`recommendation.${index}.vaccineCode`}
                                                                             options={vaccineCode}
                                                                             disabled={disabled}
                                                                             loading={loading}
                                                                             multiple={true}
                                                                             required={false}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* recommendation.targetDisease */}
                                                        <FhirCodeableConcept label="Disease to be immunized against"
                                                                             context={`recommendation.${index}.targetDisease`}
                                                                             options={immunizationRecommendationTargetDisease}
                                                                             disabled={disabled}
                                                                             loading={loading}
                                                                             combobox={true}
                                                                             required={true}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* recommendation.contraindicatedVaccineCode */}
                                                        <FhirCodeableConcept label="Vaccine which is contraindicated to fulfill the recommendation"
                                                                             context={`recommendation.${index}.contraindicatedVaccineCode`}
                                                                             options={vaccineCode}
                                                                             disabled={disabled}
                                                                             loading={loading}
                                                                             multiple={true}
                                                                             required={false}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* description */}
                                                        <Controller key={`recommendation.${index}.description`}
                                                                    name={`recommendation.${index}.description`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <TextareaControl
                                                                                         label="Description"
                                                                                         value={field.value}
                                                                                         onChange={field.onChange}
                                                                                         placeholder="Protocol details"
                                                                                         rows={4}/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* series */}
                                                        <Controller key={`recommendation.${index}.series`}
                                                                    name={`recommendation.${index}.series`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Name of vaccination series"
                                                                                      placeholder="Series"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* doseNumberPositiveInt */}
                                                        <Controller key={`recommendation.${index}.doseNumberPositiveInt`}
                                                                    name={`recommendation.${index}.doseNumberPositiveInt`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Recommended dose number within series"
                                                                                      type="number"
                                                                                      min="1"
                                                                                      placeholder="Dose number"
                                                                                      onChange={(value) => field.onChange(parseInt(value) || null)}/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* seriesDosesPositiveInt */}
                                                        <Controller key={`recommendation.${index}.seriesDosesPositiveInt`}
                                                                    name={`recommendation.${index}.seriesDosesPositiveInt`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Recommended number of doses for immunity"
                                                                                      type="number"
                                                                                      min="1"
                                                                                      placeholder="Series doses"
                                                                                      onChange={(value) => field.onChange(parseInt(value) || null)}/>
                                                                    )}/>

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

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

                                                        {(watch(`recommendation.${index}.dateCriterion`) ?? []).length === 0 && (
                                                            <>
                                                                <Flex>
                                                                    <FlexItem>
                                                                        {!isPatient && (
                                                                            <button type="button"
                                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                                    onClick={() => addDateCriterion(index)}
                                                                                    disabled={disabled}>
                                                                                <PlusCircle className="w-4 h-4" />
                                                                                Add Date Criterion
                                                                            </button>
                                                                        )}
                                                                    </FlexItem>
                                                                </Flex>
                                                                <Spacer margin="8"/>

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

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

                                                        {(watch(`recommendation.${index}.dateCriterion`) ?? []).map((_criterion, criterionIndex) => (
                                                            <React.Fragment key={criterionIndex}>
                                                                <Card>
                                                                    <CardHeader>
                                                                        <Flex align="center" justify="space-between">
                                                                            <FlexItem>
                                                                                <h4>Date Criterion {criterionIndex + 1}</h4>
                                                                            </FlexItem>
                                                                            <FlexItem>
                                                                                {!isPatient && (
                                                                                    <button type="button"
                                                                                            className="btn btn-red-ghost"
                                                                                            title="Remove date criterion"
                                                                                            aria-label="Remove date criterion"
                                                                                            onClick={() => removeDateCriterion(index, criterionIndex)}
                                                                                            disabled={disabled}>
                                                                                        <Trash2 className="w-4 h-4" />
                                                                                    </button>
                                                                                )}
                                                                            </FlexItem>
                                                                        </Flex>
                                                                    </CardHeader>
                                                                    <CardBody>
                                                                        {/* code */}
                                                                        <FhirCodeableConcept label="Type of date"
                                                                                             context={`recommendation.${index}.dateCriterion.${criterionIndex}.code`}
                                                                                             options={immunizationRecommendationDateCriterion}
                                                                                             required={true}
                                                                                             loading={loading}
                                                                                             disabled={disabled}/>

                                                                        <Spacer margin={spacerMargin}/>

                                                                        {/* value */}
                                                                        <Controller key={`recommendation.${index}.dateCriterion.${criterionIndex}.value`}
                                                                                    name={`recommendation.${index}.dateCriterion.${criterionIndex}.value`}
                                                                                    control={control}
                                                                                    rules={{ required: true }}
                                                                                    disabled={disabled}
                                                                                    render={({ field, fieldState }) => (
                                                                                        <>
                                                                                            <InputControl
                                                                                                          {...field}
                                                                                                          label="Recommended date"
                                                                                                          type="datetime-local"/>

                                                                                            {fieldState.error && (
                                                                                                <DismissibleAlert status="error">
                                                                                                    Recommended date is required
                                                                                                </DismissibleAlert>
                                                                                            )}
                                                                                        </>
                                                                                    )}/>
                                                                    </CardBody>
                                                                </Card>
                                                                <Spacer margin={spacerMargin}/>
                                                            </React.Fragment>
                                                        ))}

                                                        {!isPatient && (watch(`recommendation.${index}.dateCriterion`) ?? []).length > 0 && (
                                                            <Flex justify="center">
                                                                <FlexItem>
                                                                    <button type="button"
                                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                            onClick={() => addDateCriterion(index)}
                                                                            disabled={disabled}>
                                                                        <PlusCircle className="w-4 h-4" />
                                                                        Add Date Criterion
                                                                    </button>
                                                                </FlexItem>
                                                            </Flex>
                                                        )}
                                                    </div>
                                                </Disabled>
                                            );
                                        }

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

                                                        {/* supportingImmunization */}
                                                        <RecommendationSupportingImmunizationReferences index={index}
                                                                                                        disabled={disabled}
                                                                                                        readonly={isPatient}
                                                                                                        enableInlineActions={enableInlineActions}/>

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

                        <Divider margin="8"/>

                        {!isPatient && index === recommendationFieldArray.fields.length - 1 && (
                            <Flex align="center" justify="center">
                                <FlexItem>
                                    <button type="button"
                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                            onClick={addRecommendation}
                                            disabled={disabled}>
                                        <PlusCircle className="w-4 h-4" />
                                        Add Recommendation
                                    </button>
                                </FlexItem>
                            </Flex>
                        )}
                    </React.Fragment>
                ))}
            </CardBody>
        </Card>
    );
};

export default FhirImmunizationRecommendation;