import React, { useState, useEffect } from 'react';
import { Card, CardHeader, CardBody, CardDivider } from '../ui/wp-card';
import { Elevation } from '../ui/elevation';
import { InputControl } from '../ui/input-control';
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,
    FhirContactPoint,
    FhirPeriod,
    FhirReference,
    FhirReferenceCollection,
    FhirValueSetSearch
} from '../../components';
import {
    useFhirCareTeamBroadcast,
    useFhirCareTeams,
    useFhirConditions,
    useFhirEncounters, useFhirPractitioners,
    useFhirRelatedPersons
} from '../../hooks';
import { FhirResource } from 'fhir/r4';
import { PlusCircle, Trash2 } from 'lucide-react';

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

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

    const { practitionersList } = useFhirPractitioners();
    const { relatedPersonsList } = useFhirRelatedPersons();
    const { careTeamsList } = useFhirCareTeams();

    return (
        <FhirReferenceCollection label="Who is involved"
                                 references={itemReferenceFieldArray}
                                 context={`participant.${index}.member`}
                                 referenceTypes={[
                                     { name: 'Practitioner', key: 'Practitioner' },
                                     { name: 'RelatedPerson', key: 'RelatedPerson' },
                                     { name: 'Patient', key: 'Patient' },
                                     { name: 'CareTeam', key: 'CareTeam' }
                                 ]}
                                 getReferenceList={(referenceType: string): FhirResource[] => {
                                     switch (referenceType) {
                                         case 'Practitioner':
                                             return practitionersList.map(p => p.practitioner);
                                         case 'RelatedPerson':
                                             return relatedPersonsList;
                                         case 'CareTeam':
                                             return careTeamsList;
                                         default:
                                             return [];
                                     }
                                 }}
                                 required={true}
                                 disabled={disabled}
                                 readonly={readonly}
                                 multiple={false}
                                 enableInlineActions={enableInlineActions}/>
    );
};

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

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

    // value sets
    const [careTeamStatus, setCareTeamStatus] = useState<IValueSet[]>([]);
    const [careTeamCategory, setCareTeamCategory] = useState<IValueSet[]>([]);

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

    useFhirCareTeams();
    useFhirCareTeamBroadcast();
    const { encountersList } = useFhirEncounters();
    const { conditionsList } = useFhirConditions();

    const participantFieldArray = useFieldArray({ control, name: 'participant' });
    const telecomFieldArray = useFieldArray({ control, name: 'telecom' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    careTeamStatusValueSet,
                    careTeamCategoryValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.careTeamStatus),
                    fetchValueSet(valueSetUrls.careTeamCategory)
                ]);

                setCareTeamStatus(careTeamStatusValueSet);
                setCareTeamCategory(careTeamCategoryValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addParticipant = () => {
        participantFieldArray.append({
            role: null,
            member: null,
            onBehalfOf: null
        });
    };

    const removeParticipant = (index: number) => {
        participantFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* name */}
                    <Controller key="name"
                                name="name"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <InputControl
                                                  {...field}
                                                  label="Name"
                                                  help="Name of the team, such as crisis assessment team"
                                                  placeholder="Name of the care team"/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* status */}
                    <FhirCode label="Status"
                              context="status"
                              options={careTeamStatus}
                              required={true}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* category */}
                    {/*<FhirCodeableConcept label="Type of team"*/}
                    {/*                     context="category"*/}
                    {/*                     options={careTeamCategory}*/}
                    {/*                     disabled={submitting}*/}
                    {/*                     multiple={true}/>*/}

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

                    {/* period */}
                    <FhirPeriod label="Time period team covers"
                                context="period"
                                disabled={disabled}
                                readonly={isPatient}/>

                    <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}/>
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="participants"
                          tabs={[
                              { name: 'participants', title: 'Participants' },
                              { name: 'reasons', title: 'Reasons' },
                              { name: 'contact', title: 'Contact' },
                              { name: 'notes', title: 'Notes' }
                          ]}>
                    {(tab) => {
                        // participants
                        if (tab.name === 'participants') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        {participantFieldArray.fields.length === 0 && (
                                            <>
                                                <Flex>
                                                    <FlexItem>
                                                        {!isPatient && (
                                                            <button type="button"
                                                                    className={`btn btn-blue-ghost${disabled ? ' btn-busy' : ''}`}
                                                                    onClick={addParticipant}
                                                                    disabled={disabled}>
                                                                <PlusCircle className="w-4 h-4" />
                                                                Add Participant
                                                            </button>
                                                        )}
                                                    </FlexItem>
                                                </Flex>
                                                <Spacer margin="8"/>

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

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

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

                                                        {/* participant.role */}
                                                        <FhirValueSetSearch label="Type of involvement"
                                                                            context={`participant.${index}.role`}
                                                                            valueSetUrl={valueSetUrls.participantRole}
                                                                            multiple={true}
                                                                            placeholder="Search for roles..."
                                                                            required={true}
                                                                            disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* participant.member */}
                                                        <ParticipantMember index={index}
                                                                           disabled={disabled}
                                                                           readonly={isPatient}
                                                                           enableInlineActions={enableInlineActions}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* participant.period */}
                                                        <FhirPeriod label="Time period of participant"
                                                                    context={`participant.${index}.period`}
                                                                    disabled={disabled}
                                                                    readonly={isPatient}/>

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

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

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

                                        {/* reasonCode */}
                                        <FhirValueSetSearch label="Why the care team exists"
                                                            context="reasonCode"
                                                            valueSetUrl={valueSetUrls.clinicalFindings}
                                                            placeholder="Search for clinical findings..."
                                                            multiple={true}
                                                            required={true}
                                                            disabled={disabled}/>

                                        <Spacer margin={spacerMargin}/>

                                        {/* reasonReference */}
                                        <FhirReference label="Why the care team exists"
                                                       context="reasonReference"
                                                       referenceType="Condition"
                                                       referenceList={conditionsList}
                                                       enableInlineActions={enableInlineActions}
                                                       multiple={true}
                                                       required={false}
                                                       disabled={disabled}/>

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

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

                                        {/* telecom */}
                                        <FhirContactPoint label="A contact detail for the care team (that applies to all members)"
                                                          telecoms={telecomFieldArray}
                                                          disabled={disabled}
                                                          readonly={isPatient}/>

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

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

export default FhirCareTeam;