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,
    FhirReference,
    FhirReferenceCollection,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import {
    useFhirAllergyIntolerances,
    useFhirClinicalImpressionBroadcast,
    useFhirClinicalImpressions,
    useFhirConditions,
    useFhirEncounters,
    useFhirFamilyMemberHistories,
    useFhirObservations,
    useFhirPractitioners,
    useFhirQuestionnaireResponses,
    useFhirRiskAssessments
} from '../../hooks';
import { FhirResource } from 'fhir/r4';
import { PlusCircle, Trash2 } from 'lucide-react';

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

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

    const { conditionsList } = useFhirConditions();
    const { observationsList } = useFhirObservations();

    return (
        <FhirReferenceCollection label="What was found"
                                 references={itemReferenceFieldArray}
                                 context={`finding.${index}.itemReference`}
                                 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={readonly}
                                 multiple={false}
                                 enableInlineActions={enableInlineActions}/>
    );
};

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

    const { observationsList } = useFhirObservations();
    const { questionnaireResponsesList } = useFhirQuestionnaireResponses();
    const { familyMemberHistoriesList } = useFhirFamilyMemberHistories();
    const { riskAssessmentsList } = useFhirRiskAssessments();

    return (
        <FhirReferenceCollection label="Record of a specific investigation"
                                 references={itemReferenceFieldArray}
                                 context={`investigation.${index}.item`}
                                 referenceTypes={[
                                     { name: 'Observation', key: 'Observation' },
                                     { name: 'QuestionnaireResponse', key: 'QuestionnaireResponse' },
                                     { name: 'FamilyMemberHistory', key: 'FamilyMemberHistory' },
                                     { name: 'RiskAssessment', key: 'RiskAssessment' },
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Observation':
                                             return observationsList;
                                         case 'QuestionnaireResponse':
                                             return questionnaireResponsesList;
                                         case 'FamilyMemberHistory':
                                             return familyMemberHistoriesList;
                                         case 'RiskAssessment':
                                             return riskAssessmentsList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={false}
                                 disabled={disabled}
                                 readonly={readonly}
                                 multiple={false}
                                 enableInlineActions={enableInlineActions}/>
    );
};

export const FhirClinicalImpression: React.FC<FhirClinicalImpressionProps> = ({ 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 [clinicalimpressionStatus, setClinicalimpressionStatus] = useState<IValueSet[]>([]);
    const [investigationSets, setInvestigationSets] = useState<IValueSet[]>([]);
    const [clinicalimpressionPrognosis, setClinicalimpressionPrognosis] = useState<IValueSet[]>([]);

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

    const problemFieldArray = useFieldArray({ control, name: 'problem' });
    const findingFieldArray = useFieldArray({ control, name: 'finding' });
    const investigationFieldArray = useFieldArray({ control, name: 'investigation' });

    useFhirClinicalImpressionBroadcast();
    const { clinicalImpressionsList } = useFhirClinicalImpressions();
    const { encountersList } = useFhirEncounters();
    const { conditionsList } = useFhirConditions();
    const { allergyIntolerancesList } = useFhirAllergyIntolerances();
    const { riskAssessmentsList } = useFhirRiskAssessments();
    const { practitionersList } = useFhirPractitioners();

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    clinicalimpressionStatusValueSet,
                    investigationSetsValueSet,
                    clinicalimpressionPrognosisValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.clinicalimpressionStatus),
                    fetchValueSet(valueSetUrls.investigationSets),
                    fetchValueSet(valueSetUrls.clinicalimpressionPrognosis)
                ]);

                setClinicalimpressionStatus(clinicalimpressionStatusValueSet);
                setInvestigationSets(investigationSetsValueSet);
                setClinicalimpressionPrognosis(clinicalimpressionPrognosisValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addFinding = () => {
        findingFieldArray.append({
            itemCodeableConcept: null,
            itemReference: [],
            basis: ''
        });
    };

    const removeFinding = (index: number) => {
        findingFieldArray.remove(index);
    };

    const addInvestigation = () => {
        investigationFieldArray.append({
            code: null,
            item: []
        });
    };

    const removeInvestigation = (index: number) => {
        investigationFieldArray.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={clinicalimpressionStatus}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* assessor

                        Optional because the service stamps the signed-in practitioner when this is left
                        empty. Asking somebody to find themselves in a picker to save their own note is
                        friction, not safety - but the field stays, because a scribe writing on somebody
                        else's behalf has to be able to name the clinician who actually assessed. */}
                    <FhirReference label="The clinician performing the assessment"
                                   context="assessor"
                                   referenceType="Practitioner"
                                   referenceList={practitionersList.map(p => p.practitioner)}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* statusReason */}
                    {/*<FhirCodeableConcept label="Status Reason"*/}
                    {/*                     context="statusReason"*/}
                    {/*                     options={statusReasonOptions}*/}
                    {/*                     disabled={submitting}/>*/}

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

                    {/* code */}
                    {/*<FhirCodeableConcept label="Clinical Impression Type"*/}
                    {/*                     context="code"*/}
                    {/*                     options={clinicalImpressionCodeOptions}*/}
                    {/*                     disabled={submitting}/>*/}

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

                    {/* description */}
                    <Controller key="description"
                                name="description"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <TextareaControl
                                                     label="Why/how the assessment was performed"
                                                     value={field.value}
                                                     onChange={field.onChange}
                                                     placeholder="Description of the clinical impression"
                                                     rows={4}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* date */}
                    <Controller key="date"
                                name="date"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="When the assessment was documented"
                                                  type="datetime-local"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* effectiveType */}
                    <TypeSelector label="Time of assessment"
                                  context="effectiveType"
                                  options={[
                                      { name: 'Date', key: 'dateTime' },
                                      { name: 'Period', key: 'period' }
                                  ]}
                                  required={false}
                                  disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {watch('effectiveType') === 'dateTime' && (
                        <>
                            {/* effective */}
                            <Controller key="effectiveDateTime"
                                        name="effectiveDateTime"
                                        control={control}
                                        disabled={disabled}
                                        render={({ field }) => (
                                            <InputControl
                                                          {...field}
                                                          label="Time of assessment Date"
                                                          type="datetime-local"/>
                                        )}/>

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

                    {watch('effectiveType') === 'period' && (
                        <>
                            {/* effectivePeriod */}
                            <FhirPeriod label="Time of assessment Period"
                                        context="effectivePeriod"
                                        disabled={disabled}
                                        readonly={isPatient}/>

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

                    {/* summary */}
                    <Controller key="summary"
                                name="summary"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <TextareaControl
                                                     label="Summary"
                                                     value={field.value}
                                                     onChange={field.onChange}
                                                     placeholder="Summary of the impression"
                                                     rows={4}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* encounter */}
                    <FhirReference label="Encounter created as part of"
                                   context="encounter"
                                   referenceType="Encounter"
                                   referenceList={encountersList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* previous */}
                    <FhirReference label="Reference to last assessment"
                                   context="previous"
                                   referenceType="ClinicalImpression"
                                   referenceList={clinicalImpressionsList}
                                   enableInlineActions={enableInlineActions}
                                   required={false}
                                   disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="problems"
                          tabs={[
                              { name: 'problems', title: 'Problems' },
                              { name: 'findings', title: 'Findings' },
                              { name: 'investigations', title: 'Investigations' },
                              { name: 'prognosis', title: 'Prognosis' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // problems
                        if (tab.name === 'problems') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        {/* problem */}
                                        <FhirReferenceCollection label="Relevant impressions of patient state"
                                                                 references={problemFieldArray}
                                                                 context="problem"
                                                                 referenceTypes={[
                                                                     { name: 'Condition', key: 'Condition' },
                                                                     { name: 'AllergyIntolerance', key: 'AllergyIntolerance' }
                                                                 ]}
                                                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                                                     switch (referenceType) {
                                                                         case 'Condition':
                                                                             return conditionsList;
                                                                         case 'AllergyIntolerance':
                                                                             return allergyIntolerancesList;
                                                                         default:
                                                                             return [];
                                                                     }
                                                                 }}
                                                                 required={false}
                                                                 disabled={disabled}
                                                                 readonly={isPatient}
                                                                 multiple={true}
                                                                 enableInlineActions={enableInlineActions}/>

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

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

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

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

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

                                        {findingFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Finding {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove finding"
                                                                            aria-label="Remove finding"
                                                                            onClick={() => removeFinding(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* itemCodeableConcept */}
                                                        <FhirValueSetSearch label="What was found"
                                                                            context={`finding.${index}.itemCodeableConcept`}
                                                                            valueSetUrl={valueSetUrls.conditionCode}
                                                                            placeholder="Search for conditions..."
                                                                            multiple={false}
                                                                            disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* itemReference */}
                                                        <FindingItemReferences index={index}
                                                                               disabled={disabled}
                                                                               readonly={isPatient}
                                                                               enableInlineActions={enableInlineActions}/>
                                                        <Spacer margin={spacerMargin}/>

                                                        {/* basis */}
                                                        <Controller key={`finding.${index}.basis`}
                                                                    name={`finding.${index}.basis`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <TextareaControl
                                                                                         label="Basis"
                                                                                         value={field.value}
                                                                                         onChange={field.onChange}
                                                                                         placeholder="Basis for the finding"
                                                                                         rows={3}/>
                                                                    )}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

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

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

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

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

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

                                        {investigationFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Investigation {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove investigation"
                                                                            aria-label="Remove investigation"
                                                                            onClick={() => removeInvestigation(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* code */}
                                                        <FhirCodeableConcept label="Investigation Code"
                                                                             context={`investigation.${index}.code`}
                                                                             options={investigationSets}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* item */}
                                                        <InvestigationItemReferences index={index}
                                                                                     disabled={disabled}
                                                                                     readonly={isPatient}
                                                                                     enableInlineActions={enableInlineActions}/>
                                                        <Spacer margin={spacerMargin}/>
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

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

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

                                        {/* prognosisCodeableConcept */}
                                        <FhirCodeableConcept label="Estimate of likely outcome"
                                                             context="prognosisCodeableConcept"
                                                             options={clinicalimpressionPrognosis}
                                                             multiple={true}
                                                             loading={loading}
                                                             disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* priorPrescription */}
                                        <FhirReference label="RiskAssessment expressing likely outcome"
                                                       context="prognosisReference"
                                                       referenceType="RiskAssessment"
                                                       referenceList={riskAssessmentsList}
                                                       enableInlineActions={enableInlineActions}
                                                       multiple={true}
                                                       required={false}
                                                       disabled={disabled}/>

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

                        // Notes tab
                        if (tab.name === 'notes') {
                            return (
                                // A bare <Disabled> defaults to TRUE, so this tab was inert for every user
                                // including the clinician writing the note. Its four sibling tabs all key off
                                // isPatient, and it passes readonly={isPatient} to its own child - which only
                                // means anything if the wrapper is not unconditionally off.
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

                                        {/* note */}
                                        <FhirAnnotation label="Comments made about the Clinical Impression"
                                                        context={`note`}
                                                        disabled={disabled}
                                                        readonly={isPatient}/>

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

export default FhirClinicalImpression;