import React, { useState, useEffect, useCallback } from 'react';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '../components/ui/dialog';
import { DismissibleAlert } from '../components/ui/dismissible-alert';
import { useForm, FormProvider } from 'react-hook-form';
import { FamilyMemberHistory } from 'fhir/r4';
import {
    useFamilyMemberHistoryServiceContext,
    usePatientServiceContext
} from '../services';
import { FhirFamilyMemberHistory } from '../components';
import { useFhirFamilyMemberHistoryTargetedBroadcast } from '../hooks';
import { describeWriteFailure } from '../utils/fetchFailureMessage';

interface FamilyMemberHistoryModalProps {
    isOpen: boolean;
    onClose: () => void;
    familyMemberHistory?: FamilyMemberHistory;
    onSuccess?: (familyMemberHistory: FamilyMemberHistory) => void;
    onError?: (error: string) => void;
    title?: string;
}

export const FamilyMemberHistoryModal: React.FC<FamilyMemberHistoryModalProps> = ({
                                                                                      isOpen,
                                                                                      onClose,
                                                                                      familyMemberHistory,
                                                                                      onSuccess,
                                                                                      onError,
                                                                                      title
                                                                                  }) => {
    const { patientState } = usePatientServiceContext();
    const {
        transformToFhirFamilyMemberHistory,
        transformFromFhirFamilyMemberHistory,
        createFamilyMemberHistory,
        updateFamilyMemberHistory
    } = useFamilyMemberHistoryServiceContext();

    const [submitting, setSubmitting] = useState(false);
    const [success, setSuccess] = useState<string | undefined>();
    const [error, setError] = useState<string | undefined>();

    const isNew = !familyMemberHistory;
    const modalTitle = title || `${isNew ? 'Create' : 'Edit'} Family Member History`;

    const methods = useForm({
        defaultValues: {
            name: '',
            relationship: null,
            gender: '',
            bornDate: '',
            ageType: '',
            ageAge: null,
            bornType: '',
            deceasedBoolean: false,
            deceasedDate: '',
            deceasedAge: null,
            deceasedType: '',
            reasonCode: [],
            note: [],
            condition: []
        }
    });

    const { handleSubmit, reset } = methods;

    const init = useCallback((familyMemberHistory: FamilyMemberHistory) => {
        reset(transformFromFhirFamilyMemberHistory(familyMemberHistory));
    }, [transformFromFhirFamilyMemberHistory, reset]);

    useFhirFamilyMemberHistoryTargetedBroadcast({
        familyMemberHistory,
        isOpen,
        onUpdate: init,
        onDelete: onClose
    });

    useEffect(() => {
        if (familyMemberHistory) {
            init(familyMemberHistory);
        }
    }, [familyMemberHistory, init]);

    const onSubmit = async (data: any) => {
        if (!patientState) {
            const errorMsg = 'Patient information is missing. Please try again.';
            setError(errorMsg);
            onError?.(errorMsg);
            return;
        }

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

        try {
            let result: FamilyMemberHistory;

            if (isNew) {
                result = await createFamilyMemberHistory(transformToFhirFamilyMemberHistory(data, patientState));
            } else {
                result = await updateFamilyMemberHistory({
                    id: familyMemberHistory?.id,
                    ...transformToFhirFamilyMemberHistory(data, patientState)
                });
            }

            const successMsg = `Family member history ${isNew ? 'created' : 'updated'} successfully.`;
            setSuccess(successMsg);
            onSuccess?.(result);

            setTimeout(() => {
                setSuccess(undefined);
                onClose();
            }, 1500);
        } catch (err: any) {
            console.error(`Error ${isNew ? 'creating' : 'updating'} family member history:`, err);
            const errorMsg = describeWriteFailure(err, `Failed to ${isNew ? 'create' : 'update'} family member history`);
            setError(errorMsg);
            onError?.(errorMsg);
        } finally {
            setSubmitting(false);
        }
    };

    if (!isOpen) return null;

    return (
        <Dialog open onOpenChange={(next) => { if (!next) onClose(); }}>
            <DialogContent className="sm:max-w-[900px]">
                <DialogHeader>
                    <DialogTitle>{modalTitle}</DialogTitle>
                </DialogHeader>

                <FormProvider {...methods}>
                    <form>
                        {success && (
                            <DismissibleAlert status="success"
                                              onDismiss={() => setSuccess(undefined)}
                                              className="mb-4">
                                {success}
                            </DismissibleAlert>
                        )}

                        {error && (
                            <DismissibleAlert status="error"
                                              onDismiss={() => setError(undefined)}
                                              className="mb-4">
                                {error}
                            </DismissibleAlert>
                        )}

                        <div className="pb-4">
                            <FhirFamilyMemberHistory elevated={false}
                                                     disabled={submitting}
                                                     enableInlineActions={false}/>
                        </div>
                    </form>
                </FormProvider>

                <DialogFooter>
                    <button type="button"
                            className="btn btn-green"
                            disabled={submitting}
                            onClick={handleSubmit(onSubmit)}>
                        {submitting ? 'Saving…' : isNew ? 'Create' : 'Update'}
                    </button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};