import React, { useState, useEffect } from 'react';
import { TextareaControl } from "../ui/textarea-control";
import { Card, CardBody, CardHeader, 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 { Controller, useFormContext, useFieldArray } from 'react-hook-form';
import {
    IValueSet,
    useAuthServiceContext,
    useValueSetServiceContext
} from '../../services';
import {
    FhirAge,
    FhirAnnotation,
    FhirCode,
    FhirCodeableConcept,
    FhirPeriod,
    FhirRange,
    FhirReference,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import { PlusCircle, Trash2 } from 'lucide-react';
import { useFhirEncounters } from '../../hooks';

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

export const FhirAllergyIntolerance: React.FC<FhirAllergyIntoleranceProps> = ({ elevated = true, disabled = false, enableInlineActions = true }) => {
    const { watch, control } = useFormContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const isPatientRole = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);

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

    // value sets
    const [allergyIntoleranceClinical, setAllergyIntoleranceClinical] = useState<IValueSet[]>([]);
    const [allergyIntoleranceVerification, setAllergyIntoleranceVerification] = useState<IValueSet[]>([]);
    const [allergyIntoleranceType, setAllergyIntoleranceType] = useState<IValueSet[]>([]);
    const [allergyIntoleranceCategory, setAllergyIntoleranceCategory] = useState<IValueSet[]>([]);
    const [allergyIntoleranceCriticality, setAllergyIntoleranceCriticality] = useState<IValueSet[]>([]);
    const [reactionEventSeverity, setReactionEventSeverity] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    const { encountersList } = useFhirEncounters();

    const reactionFieldArray = useFieldArray({ control, name: 'reaction' });
    const onsetType = watch('onsetType');

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    allergyIntoleranceClinicalValueSet,
                    allergyIntoleranceVerificationValueSet,
                    allergyIntoleranceTypeValueSet,
                    allergyIntoleranceCategoryValueSet,
                    allergyIntoleranceCriticalityValueSet,
                    reactionEventSeverityValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.allergyIntoleranceClinical),
                    fetchValueSet(valueSetUrls.allergyIntoleranceVerification),
                    fetchValueSet(valueSetUrls.allergyIntoleranceType),
                    fetchValueSet(valueSetUrls.allergyIntoleranceCategory),
                    fetchValueSet(valueSetUrls.allergyIntoleranceCriticality),
                    fetchValueSet(valueSetUrls.reactionEventSeverity)
                ]);

                setAllergyIntoleranceClinical(allergyIntoleranceClinicalValueSet);
                setAllergyIntoleranceVerification(allergyIntoleranceVerificationValueSet);
                setAllergyIntoleranceType(allergyIntoleranceTypeValueSet);
                setAllergyIntoleranceCategory(allergyIntoleranceCategoryValueSet);
                setAllergyIntoleranceCriticality(allergyIntoleranceCriticalityValueSet);
                setReactionEventSeverity(reactionEventSeverityValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const canAddReaction = () => {
        return true;
    };

    const addReaction = () => {
        reactionFieldArray.append({
            substance: null,
            manifestation: [],
            description: '',
            onset: '',
            severity: '',
            exposureRoute: null,
            note: []
        });
    };

    const removeReaction = (index: number) => {
        reactionFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <CardBody>
                {/* code */}
                <FhirValueSetSearch label="Allergy or Intolerance"
                                    context="code"
                                    valueSetUrl={valueSetUrls.usCoreAllergyIntoleranceCode}
                                    multiple={false}
                                    placeholder="Search for allergies or intolerances..."
                                    required={true}/>

                <Spacer margin={spacerMargin}/>

                {/* clinicalStatus */}
                <FhirCodeableConcept label="Clinical Status"
                                     context="clinicalStatus"
                                     options={allergyIntoleranceClinical}
                                     disabled={disabled}
                                     loading={loading}
                                     required={true}/>

                <Spacer margin={spacerMargin}/>

                {/* verificationStatus */}
                <FhirCodeableConcept label="Verification Status"
                                     context="verificationStatus"
                                     options={allergyIntoleranceVerification}
                                     loading={loading}
                                     disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* type */}
                <FhirCode label="Type"
                          context="type"
                          options={allergyIntoleranceType}
                          loading={loading}
                          disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {/* category */}
                <FhirCode label="Category"
                          context="category"
                          options={allergyIntoleranceCategory}
                          multiple={true}
                          loading={loading}
                          disabled={disabled}/>

                <Spacer margin={spacerMargin} />

                {/* criticality */}
                <FhirCode label="Criticality"
                          context="criticality"
                          options={allergyIntoleranceCriticality}
                          loading={loading}
                          disabled={disabled}/>

                <Spacer margin={spacerMargin} />

                {/* recordedDate */}
                <Controller key="recordedDate"
                            name="recordedDate"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <InputControl
                                              {...field}
                                              label="Date Recorded"
                                              type="datetime-local"/>
                            )}/>

                <Spacer margin={spacerMargin}/>


                {/* lastOccurrence */}
                <Controller key="lastOccurrence"
                            name="lastOccurrence"
                            control={control}
                            disabled={disabled}
                            render={({ field }) => (
                                <InputControl
                                              {...field}
                                              label="Date of Last Occurrence"
                                              type="datetime-local"/>
                            )}/>

                <Spacer margin={spacerMargin}/>

                {/* onsetType */}
                <TypeSelector label="When allergy or intolerance was identified"
                              context="onsetType"
                              options={[
                                  { name: 'Date', key: 'dateTime' },
                                  { name: 'Age', key: 'age' },
                                  { name: 'Period', key: 'period' },
                                  { name: 'Range', key: 'range' },
                                  { name: 'String', key: 'string' }
                              ]}
                              required={false}
                              disabled={disabled}/>

                <Spacer margin={spacerMargin}/>

                {onsetType === 'dateTime' && (
                    <>
                        {/* onsetDateTime */}
                        <Controller key="onsetDateTime"
                                    name="onsetDateTime"
                                    control={control}
                                    disabled={disabled}
                                    render={({ field }) => (
                                        <InputControl
                                                      {...field}
                                                      label="Onset Date"
                                                      type="datetime-local"/>
                                    )}/>

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

                {onsetType === 'age' && (
                    <>
                        {/* onsetAge */}
                        <FhirAge context={`onsetAge`} disabled={disabled}/>

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

                {onsetType === 'period' && (
                    <>
                        {/* onsetPeriod */}
                        <FhirPeriod label="Onset Period"
                                    context="onsetPeriod"
                                    disabled={disabled}/>

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

                {onsetType === 'range' && (
                    <>
                        {/* onsetRange */}
                        <FhirRange label="Onset Range"
                                   context="onsetRange"
                                   disabled={disabled}/>

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

                {onsetType === 'string' && (
                    <>
                        {/* onsetString */}
                        <Controller key="onsetString"
                                    name="onsetString"
                                    control={control}
                                    disabled={disabled}
                                    render={({ field }) => (
                                        <TextareaControl
                                                         value={field.value}
                                                         onChange={field.onChange}
                                                         label="Onset Description"
                                                         placeholder="Describe when the condition began"
                                                         rows={3}/>
                                    )}/>

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

                {/* encounter */}
                {!isPatientRole && <>
                    <FhirReference label="Encounter when the allergy or intolerance was asserted"
                                   context="encounter"
                                   referenceType="Encounter"
                                   referenceList={encountersList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>
                </>}
            </CardBody>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="reactions"
                          tabs={[
                              { name: 'reactions', title: 'Reactions' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // reactions
                        if (tab.name === 'reactions') {
                            return (
                                <div style={{ paddingTop: '16px' }}>
                                    <Spacer margin={spacerMargin}/>

                                    {reactionFieldArray.fields.length === 0 && (
                                        <>
                                            <Spacer margin="8"/>
                                            <Flex>
                                                <FlexItem>
                                                    <Heading level={4}>Reactions to this allergy or intolerance</Heading>
                                                </FlexItem>
                                                <FlexItem>
                                                    <button type="button"
                                                            className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                            onClick={addReaction}
                                                            disabled={!canAddReaction() || disabled}>
                                                        <PlusCircle className="w-4 h-4" />
                                                        Add Reaction
                                                    </button>
                                                </FlexItem>
                                            </Flex>
                                            <Divider margin="2"/>
                                            <Spacer margin="8"/>

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

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

                                    {reactionFieldArray.fields.map((reaction, index) => (
                                        <React.Fragment key={reaction.id}>
                                            <Card>
                                                {reactionFieldArray.fields.length > 0 && (
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Reaction {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className="btn btn-red-ghost"
                                                                        title="Remove reaction"
                                                                        aria-label="Remove reaction"
                                                                        onClick={() => removeReaction(index)}
                                                                        disabled={disabled}>
                                                                    <Trash2 className="w-4 h-4" />
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                )}

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

                                                    {/* substance */}
                                                    <FhirValueSetSearch label="Specific substance or pharmaceutical product considered to be responsible for event"
                                                                        context={`reaction.${index}.substance`}
                                                                        multiple={false}
                                                                        valueSetUrl={valueSetUrls.substanceCode}
                                                                        placeholder="Search for substances..."
                                                                        disabled={disabled}/>

                                                    <Spacer margin={spacerMargin}/>

                                                    {/* manifestation */}
                                                    <Heading level={5}>Manifestation</Heading>
                                                    <Divider margin="2"/>
                                                    <Spacer margin={spacerMargin}/>

                                                    {/* manifestation */}
                                                    <FhirValueSetSearch label='Clinical symptoms/signs associated with the Event'
                                                                        context={`reaction.${index}.manifestation`}
                                                                        valueSetUrl={valueSetUrls.clinicalFindings}
                                                                        placeholder="Search for manifestations..."
                                                                        multiple={true}
                                                                        required={true}
                                                                        disabled={disabled}/>

                                                    <Spacer margin={spacerMargin}/>

                                                    {/* description */}
                                                    <Controller key={`reaction.${index}.description`}
                                                                name={`reaction.${index}.description`}
                                                                control={control}
                                                                disabled={disabled}
                                                                render={({ field }) => (
                                                                    <TextareaControl
                                                                                     label="Description"
                                                                                     value={field.value || ''}
                                                                                     onChange={field.onChange}
                                                                                     placeholder="Description of the event as a whole"
                                                                                     rows={3}/>
                                                                )}/>

                                                    <Spacer margin={spacerMargin}/>

                                                    {/* onset */}
                                                    <Controller key={`reaction.${index}.onset`}
                                                                name={`reaction.${index}.onset`}
                                                                control={control}
                                                                disabled={disabled}
                                                                render={({ field }) => (
                                                                    <InputControl
                                                                                  {...field}
                                                                                  label="Date(/time) when manifestations showed"
                                                                                  type="datetime-local"/>
                                                                )}/>

                                                    <Spacer margin={spacerMargin}/>

                                                    {/* severity */}
                                                    <FhirCode label="Severity"
                                                              context={`reaction.${index}.severity`}
                                                              options={reactionEventSeverity}
                                                              loading={loading}
                                                              disabled={disabled}/>

                                                    <Spacer margin={spacerMargin}/>

                                                    {/* exposureRoute */}
                                                    <FhirValueSetSearch label="How the subject was exposed to the substance"
                                                                        context={`reaction.${index}.exposureRoute`}
                                                                        multiple={false}
                                                                        valueSetUrl={valueSetUrls.routeCodes}
                                                                        placeholder="Search for routes..."/>

                                                    <Spacer margin={spacerMargin}/>

                                                    {/* note */}
                                                    <FhirAnnotation label="Text about event not captured in other fields"
                                                                    context={`reaction.${index}.note`}
                                                                    disabled={disabled}/>

                                                    <Spacer margin={spacerMargin}/>
                                                </CardBody>
                                            </Card>

                                            <Divider margin="8"/>
                                        </React.Fragment>
                                    ))}

                                    {reactionFieldArray.fields.length > 0 && (
                                        <Flex align="center" justify="center">
                                            <FlexItem>
                                                <button type="button"
                                                        className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                        onClick={addReaction}
                                                        disabled={!canAddReaction() || disabled}>
                                                    <PlusCircle className="w-4 h-4" />
                                                    Add Reaction
                                                </button>
                                            </FlexItem>
                                        </Flex>
                                    )}
                                </div>
                            );
                        }

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

                                    {/* note */}
                                    <FhirAnnotation label="Additional notes not captured in other fields"
                                                    context={`note`}
                                                    disabled={disabled}/>

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