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 {
    FhirAnnotation,
    FhirCode,
    FhirCodeableConcept,
    FhirPeriod,
    FhirRange,
    FhirReference,
    FhirReferenceCollection,
    TypeSelector
} from '../../components';
import {
    useFhirConditions,
    useFhirDevices,
    useFhirEncounters,
    useFhirObservations,
    useFhirPractitioners,
    useFhirRiskAssessmentBroadcast,
    useFhirRiskAssessments
} from '../../hooks';
import { FhirResource } from 'fhir/r4';
import { PlusCircle, Trash2 } from 'lucide-react';

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

export const FhirRiskAssessment: React.FC<FhirRiskAssessmentProps> = ({ 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 [observationStatus, setObservationStatus] = useState<IValueSet[]>([]);
    const [riskProbability, setRiskProbability] = useState<IValueSet[]>([]);

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

    useFhirRiskAssessments();
    useFhirRiskAssessmentBroadcast();
    const { encountersList } = useFhirEncounters();
    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();
    const { practitionersList } = useFhirPractitioners();
    const { devicesList } = useFhirDevices();

    const reasonReferenceFieldArray = useFieldArray({ control, name: 'reasonReference' });
    const predictionFieldArray = useFieldArray({ control, name: 'prediction' });
    const performerFieldArray = useFieldArray({ control, name: 'performer' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    observationStatusValueSet,
                    riskProbabilityValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.observationStatus),
                    fetchValueSet(valueSetUrls.riskProbability)
                ]);

                setObservationStatus(observationStatusValueSet);
                setRiskProbability(riskProbabilityValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addPrediction = () => {
        predictionFieldArray.append({
            outcome: '',
            probability: '',
            probabilityDecimal: undefined,
            probabilityRange: null,
            qualitativeRisk: null,
            when: '',
            whenPeriod: null,
            whenRange: null,
            rationale: ''
        });
    };

    const removePrediction = (index: number) => {
        predictionFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* status */}
                    <FhirCode label="Status"
                              context="status"
                              options={observationStatus}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* code */}
                    {/*<FhirCodeableConcept label="Risk Assessment Type"*/}
                    {/*                     context="code"*/}
                    {/*                     options={riskAssessmentCodeOptions}*/}
                    {/*                     disabled={submitting}/>*/}

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

                    {/* method */}
                    {/*<FhirCodeableConcept label="Method"*/}
                    {/*                     context="method"*/}
                    {/*                     options={riskAssessmentMethodOptions}*/}
                    {/*                     disabled={submitting}/>*/}

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

                    {/* performer */}
                    <FhirReferenceCollection label="Who did assessment?"
                                             references={performerFieldArray}
                                             context="performer"
                                             referenceTypes={[
                                                 { name: 'Practitioner', key: 'Practitioner' },
                                                 { name: 'Device', key: 'Device' }
                                             ]}
                                             getReferenceList={(referenceType: string): FhirResource[] => {
                                                 switch (referenceType) {
                                                     case 'Practitioner':
                                                         return practitionersList.map(p => p.practitioner);
                                                     case 'Device':
                                                         return devicesList;
                                                     default:
                                                         return [];
                                                 }
                                             }}
                                             required={true}
                                             multiple={false}
                                             disabled={disabled}
                                             readonly={isPatient}
                                             enableInlineActions={enableInlineActions}/>

                    <Spacer margin={spacerMargin}/>

                    {/* occurrence */}
                    <TypeSelector label="When was assessment made?"
                                  context="occurrence"
                                  options={[
                                      { name: 'Date', key: 'dateTime' },
                                      { name: 'Period', key: 'period' }
                                  ]}
                                  required={false}
                                  disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {watch('occurrence') === 'dateTime' && (
                        <>
                            {/* occurrenceDateTime */}
                            <Controller key="occurrenceDateTime"
                                        name="occurrenceDateTime"
                                        control={control}
                                        disabled={disabled}
                                        render={({ field }) => (
                                            <InputControl
                                                          {...field}
                                                          label="Assessment date"
                                                          type="datetime-local"/>
                                        )}/>

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

                    {watch('occurrence') === 'period' && (
                        <>
                            {/* occurrencePeriod */}
                            <FhirPeriod label="Assessment Period"
                                        context="occurrencePeriod"
                                        disabled={disabled}
                                        readonly={isPatient}/>

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

                    {/* condition */}
                    <FhirReference label="Condition assessed"
                                   context="condition"
                                   referenceType="Condition"
                                   referenceList={conditionsList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* mitigation */}
                    <Controller key="mitigation"
                                name="mitigation"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <TextareaControl
                                                     label="Mitigation"
                                                     value={field.value}
                                                     onChange={field.onChange}
                                                     placeholder="How to reduce risk"
                                                     rows={3}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* encounter */}
                    <FhirReference label="Where was assessment performed?"
                                   context="encounter"
                                   referenceType="Encounter"
                                   referenceList={encountersList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="predictions"
                          tabs={[
                              { name: 'predictions', title: 'Predictions' },
                              { name: 'reason', title: 'Reason' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // predictions
                        if (tab.name === 'predictions') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {predictionFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>Predictions</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button
                                                                type="button"
                                                                className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                onClick={addPrediction}
                                                                disabled={disabled}
                                                            >
                                                                <PlusCircle />
                                                                Add Prediction
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

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

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

                                        {predictionFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Prediction {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button
                                                                        type="button"
                                                                        className="btn btn-red-ghost"
                                                                        title="Remove prediction"
                                                                        aria-label="Remove prediction"
                                                                        onClick={() => removePrediction(index)}
                                                                        disabled={disabled}
                                                                    >
                                                                        <Trash2 />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/*<Heading level={6}>Outcome</Heading>*/}
                                                        {/*<Spacer margin="8"/>*/}

                                                        {/* prediction.outcome */}
                                                        {/*<FhirCodeableConcept label="Possible outcome for the subject"*/}
                                                        {/*                     context={`prediction.${index}.outcome`}*/}
                                                        {/*                     options={outcomeOptions}*/}
                                                        {/*                     disabled={submitting}/>*/}
                                                        {/*<Spacer margin={spacerMargin}/>*/}

                                                        <Heading level={6}>Probability</Heading>
                                                        <Spacer margin="8"/>

                                                        {/* probabilityType */}
                                                        <TypeSelector label="Likelihood of specified outcome (%)"
                                                                      context={`prediction.${index}.probability`}
                                                                      options={[
                                                                          { name: 'Decimal', key: 'decimal' },
                                                                          { name: 'Range', key: 'range' }
                                                                      ]}
                                                                      required={false}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {watch(`prediction.${index}.probability`) === 'decimal' && (
                                                            <>
                                                                {/* prediction.probabilityDecimal */}
                                                                <Controller key={`prediction.${index}.probabilityDecimal`}
                                                                            name={`prediction.${index}.probabilityDecimal`}
                                                                            control={control}
                                                                            disabled={disabled}
                                                                            render={({ field }) => (
                                                                                <InputControl
                                                                                              {...field}
                                                                                              label="Probability (%)"
                                                                                              help="Likelihood of specified outcome"
                                                                                              type="number"/>
                                                                            )}/>
                                                                <Spacer margin={spacerMargin}/>
                                                            </>
                                                        )}

                                                        {watch(`prediction.${index}.probability`) === 'range' && (
                                                            <>
                                                                {/* prediction.probabilityRange */}
                                                                <FhirRange label="Probability Range (%)"
                                                                           context={`prediction.${index}.probabilityRange`}
                                                                           disabled={disabled}
                                                                           readonly={isPatient}/>
                                                                <Spacer margin={spacerMargin}/>
                                                            </>
                                                        )}

                                                        {/* prediction.qualitativeRisk */}
                                                        <FhirCodeableConcept label="Likelihood of specified outcome as a qualitative value"
                                                                             context={`prediction.${index}.qualitativeRisk`}
                                                                             options={riskProbability}
                                                                             loading={loading}
                                                                             disabled={disabled}/>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* prediction.relativeRisk */}
                                                        <Controller key={`prediction.${index}.relativeRisk`}
                                                                    name={`prediction.${index}.relativeRisk`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Relative Risk (%)"
                                                                                      help="Relative likelihood"
                                                                                      type="number"/>
                                                                    )}/>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* when */}
                                                        <TypeSelector label="Timeframe or age range"
                                                                      context={`prediction.${index}.when`}
                                                                      options={[
                                                                          { name: 'Period', key: 'period' },
                                                                          { name: 'Range', key: 'range' }
                                                                      ]}
                                                                      required={false}
                                                                      disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {watch(`prediction.${index}.when`) === 'period' && (
                                                            <>
                                                                {/* prediction.whenPeriod */}
                                                                <FhirPeriod label="When Period"
                                                                            context={`prediction.${index}.whenPeriod`}
                                                                            disabled={disabled}
                                                                            readonly={isPatient}/>
                                                                <Spacer margin={spacerMargin}/>
                                                            </>
                                                        )}

                                                        {watch(`prediction.${index}.when`) === 'range' && (
                                                            <>
                                                                <FhirRange label="When Range"
                                                                           context={`prediction.${index}.whenRange`}
                                                                           disabled={disabled}
                                                                           readonly={isPatient}/>
                                                                <Spacer margin={spacerMargin}/>
                                                            </>
                                                        )}

                                                        {/* rationale */}
                                                        <Controller key={`prediction.${index}.rationale`}
                                                                    name={`prediction.${index}.rationale`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <TextareaControl
                                                                                         label="Rationale"
                                                                                         {...field}
                                                                                         placeholder="Explanation of prediction"
                                                                                         rows={3}/>
                                                                    )}/>

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

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

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

                                        {/* reasonReference */}
                                        <FhirReferenceCollection label="Why the assessment was necessary?"
                                                                 references={reasonReferenceFieldArray}
                                                                 context="reasonReference"
                                                                 referenceTypes={[
                                                                     { name: 'Condition', key: 'Condition' },
                                                                     { name: 'Observation', key: 'Observation' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Condition':
                                                                             return conditionsList;
                                                                         case 'Observation':
                                                                             return observationsList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

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

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

                                        {/* note */}
                                        <FhirAnnotation label="Comments on the risk assessment"
                                                        context={`note`}
                                                        disabled={disabled}
                                                        readonly={isPatient}/>

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

export default FhirRiskAssessment;