import React, { useState, useEffect } from 'react';
import { TextareaControl } from "../ui/textarea-control";
import { CustomSelectControl } from "../ui/custom-select-control";
import type { CustomSelectOption } from "../ui/custom-select-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,
    FhirReference,
    FhirReferenceCollection,
    FhirValueSetSearch
} from '../../components';
import {
    useFhirConditions,
    useFhirGoalBroadcast,
    useFhirGoals,
    useFhirMedicationStatements,
    useFhirNutritionOrders,
    useFhirObservations,
    useFhirPractitioners,
    useFhirRelatedPersons,
    useFhirRiskAssessments
} 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 FhirGoalProps {
    elevated?: boolean;
    disabled?: boolean;
    enableInlineActions?: boolean;
}

export const FhirGoal: React.FC<FhirGoalProps> = ({ 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 [goalStatus, setGoalStatus] = useState<IValueSet[]>([]);
    const [goalAchievement, setGoalAchievement] = useState<IValueSet[]>([]);
    const [goalCategory, setGoalCategory] = useState<IValueSet[]>([]);
    const [goalPriority, setGoalPriority] = useState<IValueSet[]>([]);
    const [goalStartEvent, setGoalStartEvent] = useState<IValueSet[]>([]);

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

    useFhirGoals();
    useFhirGoalBroadcast();
    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();
    const { medicationStatementsList } = useFhirMedicationStatements();
    const { nutritionOrdersList } = useFhirNutritionOrders();
    const { riskAssessmentsList } = useFhirRiskAssessments();
    const { practitionersList } = useFhirPractitioners();
    const { relatedPersonsList } = useFhirRelatedPersons();

    const targetFieldArray = useFieldArray({ control, name: 'target' });
    const addressesFieldArray = useFieldArray({ control, name: 'addresses' });
    const expressedByFieldArray = useFieldArray({ control, name: 'expressedBy' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    goalStatusValueSet,
                    goalAchievementValueSet,
                    goalCategoryValueSet,
                    goalPriorityValueSet,
                    goalStartEventValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.goalStatus),
                    fetchValueSet(valueSetUrls.goalAchievement),
                    fetchValueSet(valueSetUrls.goalCategory),
                    fetchValueSet(valueSetUrls.goalPriority),
                    fetchValueSet(valueSetUrls.goalStartEvent)
                ]);

                setGoalStatus(goalStatusValueSet);
                setGoalAchievement(goalAchievementValueSet);
                setGoalCategory(goalCategoryValueSet);
                setGoalPriority(goalPriorityValueSet);
                setGoalStartEvent(goalStartEventValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addTarget = () => {
        targetFieldArray.append({});
    };

    const removeTarget = (index: number) => {
        targetFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* description */}
                    <FhirValueSetSearch label="Description"
                                        context="description"
                                        valueSetUrl={valueSetUrls.clinicalFindings}
                                        multiple={false}
                                        placeholder="Search for goals..."
                                        required={true}
                                        disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* expressedBy */}
                    <FhirReferenceCollection label="Who's responsible for creating Goal?"
                                             references={expressedByFieldArray}
                                             context="expressedBy"
                                             referenceTypes={[
                                                 { name: 'Patient', key: 'Patient' },
                                                 { name: 'Practitioner', key: 'Practitioner' },
                                                 { name: 'RelatedPerson', key: 'RelatedPerson' }
                                             ]}
                                             getReferenceList={(referenceType: string): FhirResource[] => {
                                                 switch (referenceType) {
                                                     case 'Practitioner':
                                                         return practitionersList.map(p => p.practitioner);
                                                     case 'RelatedPerson':
                                                         return relatedPersonsList;
                                                     default:
                                                         return [];
                                                 }
                                             }}
                                             required={true}
                                             disabled={disabled}
                                             readonly={isPatient}
                                             multiple={false}
                                             enableInlineActions={enableInlineActions}/>

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>

                    {/* priority */}
                    <FhirCodeableConcept label="Priority"
                                         context="priority"
                                         options={goalPriority}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* lifecycleStatus */}
                    <FhirCode label="Lifecycle Status"
                              context="lifecycleStatus"
                              options={goalStatus}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* achievementStatus */}
                    <FhirCodeableConcept label="Achievement Status"
                                         context="achievementStatus"
                                         options={goalAchievement}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* startDate */}
                    <Controller key="startDate"
                                name="startDate"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="When goal pursuit begins"
                                                  type="date"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* start */}
                    {/*<TypeSelector label="When goal pursuit begins"*/}
                    {/*              context="start"*/}
                    {/*              options={[*/}
                    {/*                  { name: 'Date', key: 'date' },*/}
                    {/*                  { name: 'Code', key: 'codeableConcept' }*/}
                    {/*              ]}*/}
                    {/*              required={false}*/}
                    {/*              disabled={submitting}/>*/}

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

                    {/*{watch('start') === 'date' && (*/}
                    {/*    <>*/}
                    {/*        /!* startDate *!/*/}
                    {/*        <Controller key="startDate"*/}
                    {/*                    name="startDate"*/}
                    {/*                    control={control}*/}
                    {/*                    render={({ field }) => (*/}
                    {/*                        <InputControl*/}
                    {/*                                      {...field}*/}
                    {/*                                      label="When goal pursuit begins"*/}
                    {/*                                      type="date"*/}
                    {/*                                      disabled={submitting}/>*/}
                    {/*                    )}/>*/}

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

                    {/*{watch('start') === 'codeableConcept' && (*/}
                    {/*    <>*/}
                    {/*        /!* startCodeableConcept *!/*/}
                    {/*        <FhirCodeableConcept label="When goal pursuit begins"*/}
                    {/*                             context="startCodeableConcept"*/}
                    {/*                             options={goalStartEvent}*/}
                    {/*                             disabled={submitting}/>*/}

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

                    {/* statusDate */}
                    <Controller key="statusDate"
                                name="statusDate"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Status Date"
                                                  help="When goal status took effect"
                                                  type="date"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* statusReason */}
                    <Controller key="statusReason"
                                name="statusReason"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <TextareaControl
                                                     label="Status Reason"
                                                     value={field.value}
                                                     onChange={field.onChange}
                                                     placeholder="Reason for current status"
                                                     rows={3}/>
                                )}/>

                    {/* "Who's responsible for creating Goal?" was rendered a SECOND time here, bound to the
                        same expressedBy field array as the one further up this card - so the question was
                        asked twice, both copies showed the same rows, and this one had lost the
                        readonly={isPatient} guard its twin carries. The first render is the one kept. */}
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="addresses"
                          tabs={[
                              // { name: 'targets', title: 'Targets' },
                              { name: 'addresses', title: 'Addresses' },
                              { name: 'outcomes', title: 'Outcomes' },
                              { name: 'notes', title: 'Notes' },
                          ]}>
                    {(tab) => {
                        // targets
                        if (tab.name === 'targets') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {targetFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        <Heading level={5}>Targets</Heading>
                                                    </FlexItem>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addTarget}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Target
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Divider margin="2"/>
                                                <Spacer margin="8"/>

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

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

                                        {targetFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Target {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove target"
                                                                            aria-label="Remove target"
                                                                            onClick={() => removeTarget(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* target.measure */}
                                                        <FhirValueSetSearch label="The parameter whose value is being tracked"
                                                                            context={`target.${index}.measure`}
                                                                            valueSetUrl={valueSetUrls.observationCodes}
                                                                            multiple={false}
                                                                            placeholder="Search for measures..."
                                                                            required={false}
                                                                            disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* target.measureType */}
                                                        <Controller key={`target.${index}.measureType`}
                                                                    name={`target.${index}.measureType`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <CustomSelectControl
                                                                                             label="Measure Type"
                                                                                             options={[
                                                                                                 { name: 'Text', key: 'string' },
                                                                                                 { name: 'Quantity', key: 'quantity' },
                                                                                                 { name: 'Range', key: 'range' },
                                                                                                 // { name: 'Codeable Concept', key: 'codeableConcept' },
                                                                                                 { name: 'Boolean', key: 'boolean' },
                                                                                                 { name: 'Integer', key: 'integer' },
                                                                                                 { name: 'Ratio', key: 'ratio' }
                                                                                             ]}
                                                                                             value={field.value}
                                                                                             onChange={(newValue: { selectedItem: CustomSelectOption }) => {
                                                                                                 field.onChange(newValue.selectedItem.key);
                                                                                             }}/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {watch(`target.${index}.measureType`) === 'string' && (
                                                            <>
                                                                {/* target.detailString */}
                                                                <Controller key={`target.${index}.detailString`}
                                                                            name={`target.${index}.detailString`}
                                                                            control={control}
                                                                            disabled={disabled}
                                                                            render={({ field }) => (
                                                                                <TextareaControl
                                                                                                 label="Detail"
                                                                                                 value={field.value}
                                                                                                 onChange={field.onChange}
                                                                                                 placeholder="The target value to be achieved"
                                                                                                 rows={3}/>
                                                                            )}/>
                                                                <Spacer margin={spacerMargin}/>
                                                            </>
                                                        )}

                                                        {watch(`target.${index}.measureType`) === 'boolean' && (
                                                            <>
                                                                {/* target.detailBoolean */}
                                                                <Controller key={`target.${index}.detailBoolean`}
                                                                            name={`target.${index}.detailBoolean`}
                                                                            control={control}
                                                                            disabled={disabled}
                                                                            render={({ field }) => (
                                                                                <ToggleControl
                                                                                               label="The target value to be achieved"
                                                                                               checked={field.value}
                                                                                               onChange={field.onChange}/>
                                                                            )}/>
                                                                <Spacer margin={spacerMargin}/>
                                                            </>
                                                        )}

                                                        {watch(`target.${index}.measureType`) === 'integer' && (
                                                            <>
                                                                {/* target.detailInteger */}
                                                                <Controller key={`target.${index}.detailInteger`}
                                                                            name={`target.${index}.detailInteger`}
                                                                            control={control}
                                                                            disabled={disabled}
                                                                            render={({ field }) => (
                                                                                <InputControl
                                                                                              {...field}
                                                                                              label="Detail"
                                                                                              help="The target value to be achieved"
                                                                                              type="number"
                                                                                              step="1"/>
                                                                            )}/>
                                                                <Spacer margin={spacerMargin}/>
                                                            </>
                                                        )}

                                                        {/*{watch(`target.${index}.measureType`) === 'codeableConcept' && (*/}
                                                        {/*    <>*/}
                                                        {/*        /!* target.detailCodeableConcept *!/*/}
                                                        {/*        <FhirCodeableConcept label="Detail"*/}
                                                        {/*                             context={`target.${index}.detailCodeableConcept`}*/}
                                                        {/*                             options={outcomeCodeOptions}*/}
                                                        {/*                             disabled={submitting}/>*/}
                                                        {/*        <Spacer margin={spacerMargin}/>*/}
                                                        {/*    </>*/}
                                                        {/*)}*/}

                                                        {/* target.dueType */}
                                                        <Controller key={`target.${index}.dueType`}
                                                                    name={`target.${index}.dueType`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <CustomSelectControl
                                                                                             label="Due Type"
                                                                                             options={[
                                                                                                 { name: 'Date', key: 'date' },
                                                                                                 { name: 'Duration', key: 'duration' }
                                                                                             ]}
                                                                                             value={field.value}
                                                                                             onChange={(newValue: { selectedItem: CustomSelectOption }) => {
                                                                                                 field.onChange(newValue.selectedItem.key);
                                                                                             }}/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {watch(`target.${index}.dueType`) === 'date' && (
                                                            <>
                                                                {/* target.dueDate */}
                                                                <Controller key={`target.${index}.dueDate`}
                                                                            name={`target.${index}.dueDate`}
                                                                            control={control}
                                                                            disabled={disabled}
                                                                            render={({ field }) => (
                                                                                <InputControl
                                                                                              {...field}
                                                                                              label="Reach goal on or before"
                                                                                              type="date"/>
                                                                            )}/>
                                                                <Spacer margin={spacerMargin}/>
                                                            </>
                                                        )}

                                                        {watch(`target.${index}.dueType`) === 'duration' && (
                                                            <>
                                                                <Controller name={`target.${index}.dueDuration.value`}
                                                                            control={control}
                                                                            render={({ field }) => (
                                                                                <InputControl
                                                                                              {...field}
                                                                                              label="Duration Value"
                                                                                              type="number"
                                                                                              step="0.1"/>
                                                                            )}/>
                                                                <Spacer margin={spacerMargin}/>

                                                                <Controller name={`target.${index}.dueDuration.unit`}
                                                                            control={control}
                                                                            disabled={disabled}
                                                                            render={({ field }) => (
                                                                                <CustomSelectControl
                                                                                                     label="Duration Unit"
                                                                                                     options={[
                                                                                                         { name: 'Days', key: 'days' },
                                                                                                         { name: 'Weeks', key: 'weeks' },
                                                                                                         { name: 'Months', key: 'months' },
                                                                                                         { name: 'Years', key: 'years' }
                                                                                                     ]}
                                                                                                     value={field.value}
                                                                                                     onChange={(newValue: { selectedItem: CustomSelectOption }) => {
                                                                                                         field.onChange(newValue.selectedItem.key);
                                                                                                     }}/>
                                                                            )}/>
                                                                <Spacer margin={spacerMargin}/>
                                                            </>
                                                        )}
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

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

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

                                        {/* reasonReference */}
                                        <FhirReferenceCollection label="Issues addressed by this goal"
                                                                 references={addressesFieldArray}
                                                                 context="addresses"
                                                                 referenceTypes={[
                                                                     { name: 'Condition', key: 'Condition' },
                                                                     { name: 'Observation', key: 'Observation' },
                                                                     { name: 'MedicationStatement', key: 'MedicationStatement' },
                                                                     { name: 'NutritionOrder', key: 'NutritionOrder' },
                                                                     { name: 'RiskAssessment', key: 'RiskAssessment' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Condition':
                                                                             return conditionsList;
                                                                         case 'Observation':
                                                                             return observationsList;
                                                                         case 'MedicationStatement':
                                                                             return medicationStatementsList;
                                                                         case 'NutritionOrder':
                                                                             return nutritionOrdersList;
                                                                         case 'RiskAssessment':
                                                                             return riskAssessmentsList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 enableInlineActions={enableInlineActions}/>

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

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

                                        {/* outcomeCode */}
                                        <FhirValueSetSearch label="What result was achieved regarding the goal?"
                                                            context="outcomeCode"
                                                            valueSetUrl={valueSetUrls.clinicalFindings}
                                                            multiple={true}
                                                            placeholder="Search for outcomes..."
                                                            required={false}
                                                            disabled={disabled}/>


                                        <Spacer margin={spacerMargin}/>

                                        {/* outcomeReference */}
                                        <FhirReference label="Observation that resulted from goal"
                                                       context="outcomeReference"
                                                       referenceType="Observation"
                                                       referenceList={observationsList}
                                                       enableInlineActions={enableInlineActions}
                                                       multiple={true}
                                                       required={false}
                                                       disabled={disabled}/>

                                        <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 about the goal"
                                                        context={`note`}
                                                        disabled={disabled}
                                                        readonly={isPatient}/>

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

export default FhirGoal;