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 {
    FhirCode,
    FhirCodeableConcept,
    FhirPeriod,
    FhirValueSetSearch,
    TypeSelector
} from '../../components';
import { useFhirDetectedIssueBroadcast, useFhirDetectedIssues } from '../../hooks';
import { PlusCircle, Trash2 } from 'lucide-react';

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

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

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

    // value sets
    const [observationStatus, setObservationStatus] = useState<IValueSet[]>([]);
    const [detectedissueCategory, setDetectedissueCategory] = useState<IValueSet[]>([]);
    const [detectedissueSeverity, setDetectedissueSeverity] = useState<IValueSet[]>([]);
    const [detectedissueMitigationAction, setDetectedissueMitigationAction] = useState<IValueSet[]>([]);

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

    useFhirDetectedIssues();
    useFhirDetectedIssueBroadcast();

    const evidenceFieldArray = useFieldArray({ control, name: 'evidence' });
    const mitigationFieldArray = useFieldArray({ control, name: 'mitigation' });

    useEffect(() => {
        const loadValueSets = async () => {
            setLoading(true);
            try {
                const [
                    observationStatusValueSet,
                    detectedissueCategoryValueSet,
                    detectedissueSeverityValueSet,
                    detectedissueMitigationActionValueSet
                ] = await Promise.all([
                    fetchValueSet(valueSetUrls.observationStatus),
                    fetchValueSet(valueSetUrls.detectedissueCategory),
                    fetchValueSet(valueSetUrls.detectedissueSeverity),
                    fetchValueSet(valueSetUrls.detectedissueMitigationAction)
                ]);

                setObservationStatus(observationStatusValueSet);
                setDetectedissueCategory(detectedissueCategoryValueSet);
                setDetectedissueSeverity(detectedissueSeverityValueSet);
                setDetectedissueMitigationAction(detectedissueMitigationActionValueSet);
            } catch (err) {
                console.error('Error loading value sets:', err);
            } finally {
                setLoading(false);
            }
        };

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

    const addEvidence = () => {
        evidenceFieldArray.append({
            detailType: 'reference',
            code: [],
            detail: []
        });
    };

    const removeEvidence = (index: number) => {
        evidenceFieldArray.remove(index);
    };

    const addMitigation = () => {
        mitigationFieldArray.append({
            action: null,
            date: '',
            author: null
        });
    };

    const removeMitigation = (index: number) => {
        mitigationFieldArray.remove(index);
    };

    return (
        <Card style={elevated ? { boxShadow: 'none' } : {}}>
            {elevated && <Elevation value={5}/>}
            <CardHeader>
                <Heading level={5}>Details</Heading>
            </CardHeader>
            <Disabled isDisabled={isPatient}>
                <CardBody>
                    {/* code */}
                    <FhirCodeableConcept label="Issue Category, e.g. drug-drug, duplicate therapy, etc."
                                         context="code"
                                         options={detectedissueCategory}
                                         loading={loading}
                                         disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

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

                    <Spacer margin={spacerMargin}/>

                    {/* severity */}
                    <FhirCode label="Severity"
                              context="severity"
                              options={detectedissueSeverity}
                              required={false}
                              loading={loading}
                              disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

                    {/* detail */}
                    <Controller key="detail"
                                name="detail"
                                control={control}
                                disabled={disabled}
                                render={({ field }) => (
                                    <TextareaControl
                                                     label="Description and context"
                                                     value={field.value}
                                                     onChange={field.onChange}
                                                     placeholder="Additional details about the issue"
                                                     rows={4}/>
                                )}/>

                    <Spacer margin={spacerMargin}/>

                    {/* identifiedType */}
                    <TypeSelector label="When identified"
                                  context="identifiedType"
                                  options={[
                                      { name: 'Date', key: 'dateTime' },
                                      { name: 'Period', key: 'period' }
                                  ]}
                                  required={false}
                                  disabled={disabled}/>

                    <Spacer margin={spacerMargin}/>

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

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

                    {watch('identifiedType') === 'period' && (
                        <>
                            {/* identifiedPeriod */}
                            <FhirPeriod label="When identified period"
                                        context="identifiedPeriod"
                                        disabled={disabled}
                                        readonly={isPatient}/>

                            <Spacer margin={spacerMargin}/>
                        </>
                    )}
                </CardBody>
            </Disabled>
            <CardDivider/>
            <CardBody>
                <TabPanel initialTabName="evidence"
                          tabs={[
                              { name: 'evidence', title: 'Evidence' },
                              { name: 'mitigation', title: 'Mitigation' }
                          ]}>
                    {(tab) => {
                        // evidence
                        if (tab.name === 'evidence') {
                            return (
                                <Disabled isDisabled={isPatient}>
                                    <div style={{ paddingTop: '16px' }}>
                                        <Spacer margin={spacerMargin}/>

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

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

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

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

                                                        {/* code */}
                                                        <FhirValueSetSearch label="Manifestation"
                                                                            context={`evidence.${index}.code`}
                                                                            valueSetUrl={valueSetUrls.manifestationOrSymptom}
                                                                            multiple={true}
                                                                            placeholder="Search for symptoms..."
                                                                            required={false}
                                                                            disabled={disabled}/>

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

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

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

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

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

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

                                        {mitigationFieldArray.fields.map((field, index) => (
                                            <React.Fragment key={field.id}>
                                                <Card>
                                                    <CardHeader>
                                                        <Flex align="center" justify="space-between">
                                                            <FlexItem>
                                                                <h4>Mitigation {index + 1}</h4>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                {!isPatient && (
                                                                    <button type="button"
                                                                            className="btn btn-red-ghost"
                                                                            title="Remove mitigation"
                                                                            aria-label="Remove mitigation"
                                                                            onClick={() => removeMitigation(index)}
                                                                            disabled={disabled}>
                                                                        <Trash2 className="w-4 h-4" />
                                                                    </button>
                                                                )}
                                                            </FlexItem>
                                                        </Flex>
                                                    </CardHeader>
                                                    <CardBody>
                                                        {/* action */}
                                                        <FhirCodeableConcept label="What mitigation?"
                                                                             context={`mitigation.${index}.action`}
                                                                             options={detectedissueMitigationAction}
                                                                             loading={loading}
                                                                             disabled={disabled}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* date */}
                                                        <Controller key={`mitigation.${index}.date`}
                                                                    name={`mitigation.${index}.date`}
                                                                    control={control}
                                                                    disabled={disabled}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Date"
                                                                                      type="datetime-local"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        {/* author */}
                                                        {/*<FhirValueSetSearch label="Author"*/}
                                                        {/*                    context={`mitigation.${index}.author`}*/}
                                                        {/*                    valueSetUrl={valueSetUrls.practitioner}*/}
                                                        {/*                    placeholder="Search for practitioners..."*/}
                                                        {/*                    multiple={false}/>*/}
                                                    </CardBody>
                                                </Card>
                                                <Spacer margin={spacerMargin}/>
                                            </React.Fragment>
                                        ))}

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

export default FhirDetectedIssue;