import React, { useEffect, useState } from 'react';
import { DismissibleAlert } from '../../../../components/ui/dismissible-alert';
import { Heading } from '../../../../components/ui/heading';
import { Flex, FlexItem, FlexBlock } from '../../../../components/ui/flex';
import { Spacer } from '../../../../components/ui/spacer';
import { Modal } from '../../../../components/ui/wp-modal-shim';
import { Questionnaire, Patient, Task, Practitioner, Organization } from 'fhir/r4';
import { useForm, FormProvider } from 'react-hook-form';
import {
    useAuthServiceContext,
    useFhirServiceContext,
    useTaskServiceContext,
    useValueSetServiceContext
} from '../../../../services';
import { useFhirTasks } from '../../../../hooks';
import { FhirCode, PatientSearch } from '../../../../components';
import { describeWriteFailure } from '../../../../utils/fetchFailureMessage';

interface QuestionnaireAssignmentModalProps {
    isOpen: boolean;
    onClose: () => void;
    questionnaire: Questionnaire;
    onSuccess?: (task: Task) => void;
}

interface AssignmentFormData {
    patient: Patient | null;
    priority: string;
    dueDate?: string;
    note?: string;
}

const QuestionnaireAssignmentModal: React.FC<QuestionnaireAssignmentModalProps> = ({
                                                                                       isOpen,
                                                                                       onClose,
                                                                                       questionnaire,
                                                                                       onSuccess
                                                                                   }) => {
    const { currentUser, wpOrganization } = useAuthServiceContext();
    const { createTask, transformToFhirTask, setTasksList } = useTaskServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();
    const { createReferenceObject } = useFhirServiceContext();
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState<string | undefined>();
    const [success, setSuccess] = useState<string | undefined>();

    // value sets
    const [requestPriority, setRequestPriority] = useState<IValueSet[]>([]);

    const spacerMargin = '24px';

    useFhirTasks();


    const methods = useForm<AssignmentFormData>({
        defaultValues: {
            patient: null,
            priority: '',
            dueDate: '',
            note: ''
        }
    });

    const { control, handleSubmit, reset, watch } = methods;
    const selectedPatient = watch('patient');


    useEffect(() => {
        const loadValueSets = async () => {
            try {
                const [requestPriorityValueSet] = await Promise.all([fetchValueSet(valueSetUrls.requestPriority)]);

                setRequestPriority(requestPriorityValueSet);
            } catch (error) {
                console.error('Failed to load value sets:', error);
            }
        };

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

    const onSubmit = async (data: AssignmentFormData) => {
        if (!data.patient) {
            setError('Please select a patient.');
            return;
        }

        setSubmitting(true);
        setError(undefined);
        setSuccess(undefined);

        const taskData: Task = {
            status: 'requested',
            intent: 'order',
            priority: data.priority,
            description: `Complete questionnaire: ${questionnaire.title || questionnaire.name}`,
            focus: [{
                referenceType: 'Questionnaire',
                reference: createReferenceObject('Questionnaire', questionnaire.id as string, questionnaire.title || questionnaire.name)
            }],
            authoredOn: new Date().toISOString()
        };

        try {
            const fhirTask = transformToFhirTask(taskData, data.patient, currentUser?.fhir as Practitioner, undefined, wpOrganization.current as Organization);
            const createdTask = await createTask(fhirTask);
            setTasksList(prev => [...prev, createdTask]);

            setSuccess(`Questionnaire "${questionnaire.title || questionnaire.name}" assigned successfully!`);
            onSuccess?.(createdTask);

            setTimeout(() => {
                handleClose();
            }, 1500);
        } catch (err: any) {
            console.error('Error assigning questionnaire:', err);
            setError(describeWriteFailure(err, 'Failed to assign questionnaire'));
        } finally {
            setSubmitting(false);
        }
    };

    const handleClose = () => {
        reset();
        setError(undefined);
        setSuccess(undefined);
        onClose();
    };

    const handlePatientSelected = (patient: Patient | null) => {

    };

    if (!isOpen) return null;

    return (
        <Modal title={`Assign Questionnaire: ${questionnaire.title || questionnaire.name}`}
               onRequestClose={handleClose}
               shouldCloseOnClickOutside={false}
               size="large"
               style={{ height: '50%' }}>
            <FormProvider {...methods}>
                {/* Full height so the column below can pin its buttons to the modal's foot. */}
                <form className="h-full" onSubmit={handleSubmit(onSubmit)}>
                    <Flex direction="column" style={{ height: '100%' }}>
                        <FlexBlock>
                            <Spacer margin={spacerMargin}/>

                            {error && (
                                <>
                                    <DismissibleAlert status="error">
                                        {error}
                                    </DismissibleAlert>
                                    <Spacer margin="16px" />
                                </>
                            )}

                            {success && (
                                <>
                                    <DismissibleAlert status="success">
                                        {success}
                                    </DismissibleAlert>
                                    <Spacer margin="16px" />
                                </>
                            )}

                            <Heading level={4}>
                                Select a patient to assign this questionnaire to:
                            </Heading>
                            <Spacer margin={spacerMargin}/>

                            {/* patient */}
                            <PatientSearch label="Patient"
                                           context="patient"
                                           placeholder="Search for a patient..."
                                           required={true}
                                           disabled={submitting}
                                           onPatientSelected={handlePatientSelected}
                                           showSelectedPatient={true}
                                           selectedPatientStyle="button"
                                           allowClear={true}/>

                            <Spacer margin={spacerMargin}/>

                            {/* priority */}
                            <FhirCode label="Priority"
                                      context="priority"
                                      options={requestPriority}/>

                            <Spacer margin={spacerMargin}/>
                        </FlexBlock>
                        <FlexItem>
                            <Flex justify="end" gap="12px">
                                <FlexItem>
                                    {/* Cancel removed: the Modal's onRequestClose IS `handleClose`,
                                        the same function reference this called. */}
                                    <button
                                        className={`btn btn-green${submitting ? ' btn-busy' : ''}`}
                                        type="submit"
                                        disabled={submitting || !selectedPatient}
                                    >
                                        Assign Questionnaire
                                    </button>
                                </FlexItem>
                            </Flex>
                        </FlexItem>
                    </Flex>
                </form>
            </FormProvider>
        </Modal>
    );
};

export default QuestionnaireAssignmentModal;