import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { Card, CardBody, CardDivider, CardHeader } from '../../../../components/ui/wp-card';
import { InputControl } from '../../../../components/ui/input-control';
import { Divider } from '../../../../components/ui/divider';
import { DismissibleAlert } from '../../../../components/ui/dismissible-alert';
import { Heading } from '../../../../components/ui/heading';
import { Flex, FlexItem } from '../../../../components/ui/flex';
import { Text } from '../../../../components/ui/text';
import { Spacer } from '../../../../components/ui/spacer';
import { TabPanel } from '../../../../components/ui/tab-panel';
import { Modal } from '../../../../components/ui/wp-modal-shim';
import { useForm, FormProvider, useFieldArray, Controller } from 'react-hook-form';
import { Medication } from 'fhir/r4';
import { Check, PlusCircle, Trash2 } from 'lucide-react';
// - WordPress's ToggleControl, swapped for the ui/* adapter. Same props, same JSX;
// only `__nextHasNoMarginBottom` is dropped, which means nothing outside WordPress.
import { ToggleControl } from '../../../../components/ui/toggle-control';

import {
    AppHeader,
    AppSpinner,
    FhirCode,
    FhirCodeableConcept,
    FhirRatio,
    FhirValueSetSearch,
    ProfileLayoutContainer
} from '../../../../components';
import {
    IValueSet,
    useMedicationServiceContext,
    useValueSetServiceContext
} from '../../../../services';
import { describeWriteFailure } from '../../../../utils/fetchFailureMessage';

const EditMedicationPage: React.FC = () => {
    const { medicationId } = useParams<{ medicationId: string }>();
    const navigate = useNavigate();
    const { state } = useLocation();
    const {
        fetchMedication,
        transformToFhirMedication,
        transformFromFhirMedication,
        createMedication,
        updateMedication,
        deleteMedication,
        setMedicationState,
        setShouldReload,
        setMedicationsList,
        fetchMedicationsWithPolling,
        medicationsBundle
    } = useMedicationServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

    const [loading, setLoading] = useState(false);
    const [submitting, setSubmitting] = useState(false);
    const [success, setSuccess] = useState<string | undefined>();
    const [error, setError] = useState<string | undefined>();
    const [medication, setMedication] = useState<Medication | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);

    // value sets
    const [medicationStatus, setMedicationStatus] = useState<IValueSet[]>([]);
    const [medicationFormCodes, setMedicationFormCodes] = useState<IValueSet[]>([]);

    const isNew = medicationId === 'new';
    const spacerMargin = '24px';

    useEffect(() => {
        const loadValueSets = async () => {
            const [
                medicationStatusValueSet,
                medicationFormCodesValueSet
            ] = await Promise.all([
                fetchValueSet(valueSetUrls.medicationStatus),
                fetchValueSet(valueSetUrls.medicationFormCodes)
            ]);

            setMedicationStatus(medicationStatusValueSet);
            setMedicationFormCodes(medicationFormCodesValueSet);
        };
        loadValueSets();
    }, [fetchValueSet, valueSetUrls]);

    const methods = useForm({
        defaultValues: {
            status: 'active',
            code: null,
            manufacturer: {
                reference: '',
                display: ''
            },
            form: null,
            amount: {
                numerator: {
                    value: '',
                    unit: '',
                    system: 'http://unitsofmeasure.org',
                    code: ''
                },
                denominator: {
                    value: '',
                    unit: '',
                    system: 'http://unitsofmeasure.org',
                    code: ''
                }
            },
            ingredient: [],
            batch: {
                lotNumber: '',
                expirationDate: ''
            },
            note: []
        }
    });

    const { control, handleSubmit, reset } = methods;
    const ingredientFieldArray = useFieldArray({ control, name: 'ingredient' });

    useEffect(() => {
        const loadMedication = async () => {
            if (isNew || medication) return;

            const { medication: medicationState } = state ?? {};

            if (medicationState) {
                const formData = transformFromFhirMedication(medicationState);

                reset(formData);
                setMedication(medicationState);
                return;
            }

            setLoading(true);

            try {
                const fetchedMedication = await fetchMedication(medicationId as string);
                const formData = transformFromFhirMedication(fetchedMedication);

                reset(formData);
                setMedication(fetchedMedication);
            } catch (err) {
                console.error('Error loading medication:', err);
                setError('Could not load medication. Try again.');
            } finally {
                setLoading(false);
            }
        };
        loadMedication();
    }, [medicationId, isNew, fetchMedication, transformFromFhirMedication, reset, setMedicationState]);

    useEffect(() => {
        const loadMedications = async () => {
            try {
                await fetchMedicationsWithPolling();
            } catch (error) {
                console.error('Failed to load medications:', error);
                setError(`Could not load medications. Try again.`);
            }
        };

        if (!medicationsBundle) {
            loadMedications();
        }
    }, [fetchMedicationsWithPolling, medicationsBundle]);

    const onSubmit = async (data: any) => {
        setSubmitting(true);
        setSuccess(undefined);
        setError(undefined);

        try {
            let result: Medication;
            if (isNew) {
                result = await createMedication(transformToFhirMedication(data));

                setMedicationsList(prev => [...prev, result]);
                navigate(-1);
            } else {
                result = await updateMedication({ id: medication?.id, ...transformToFhirMedication(data) });

                setMedicationsList(prev => prev.map(p => p.id === result.id ? result : p));
            }

            setSuccess(`Medication ${isNew ? 'created' : 'updated'} successfully.`);
        } catch (err: any) {
            console.error(`Error ${isNew ? 'creating' : 'updating'} medication:`, err);
            setError(describeWriteFailure(err, `Failed to ${isNew ? 'create' : 'update'} medication`));
        } finally {
            setSubmitting(false);
        }
    };

    const addIngredient = () => {
        ingredientFieldArray.append({
            itemCodeableConcept: null,
            isActive: true,
            strength: {
                numerator: {
                    value: '',
                    unit: '',
                    system: 'http://unitsofmeasure.org',
                    code: ''
                },
                denominator: {
                    value: '',
                    unit: '',
                    system: 'http://unitsofmeasure.org',
                    code: ''
                }
            }
        });
    };

    const removeIngredient = (index: number) => {
        ingredientFieldArray.remove(index);
    };

    const handleDeleteMedication = async () => {
        if (!medication) return;

        try {
            await deleteMedication(medication);

            setMedicationsList(prev => prev.filter(p => p.id !== medication.id));
            navigate(-1);
        } catch (error) {
            console.error('Failed to delete medication:', error);
            // The save path above already reads a refusal correctly; the delete was left behind by
            // that sweep and is the same clinical write.
            setError(describeWriteFailure(error, 'Failed to delete medication'));
        } finally {
            setShouldReload(true);
            setShowDeleteModal(false);
        }
    };

    if (loading) {
        return <AppSpinner/>;
    }

    return (
        <FormProvider {...methods}>
            <form onSubmit={handleSubmit(onSubmit)}>
                <AppHeader showBackButton={true}>
                    <button className={`btn btn-green${submitting ? ' btn-busy' : ''}`}
                            disabled={submitting}
                            type="submit">
                        <Check />
                        Save
                    </button>
                    {!isNew && (
                        <button type="button"
                                className="btn btn-red"
                                onClick={() => setShowDeleteModal(true)}>
                            <Trash2 />
                            Delete
                        </button>
                    )}
                </AppHeader>

                {success && (
                    <>
                        <DismissibleAlert status="success" onDismiss={() => setSuccess(undefined)}>
                            {success}
                        </DismissibleAlert>

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

                {error && (
                    <>
                        <DismissibleAlert status="error" onDismiss={() => setError(undefined)}>
                            <div style={{ whiteSpace: 'pre-line' }}>{error}</div>
                        </DismissibleAlert>

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

                <ProfileLayoutContainer>
                    <Card>
                        <CardBody>
                            {/* status */}
                            <FhirCode label="Status"
                                      context="status"
                                      options={medicationStatus}
                                      disabled={submitting}
                                      required={true}/>

                            <Spacer margin={spacerMargin}/>

                            {/* code */}
                            <FhirValueSetSearch label="Codes that identify this medication"
                                                context="code"
                                                valueSetUrl={valueSetUrls.usCoreMedicationCodes}
                                                placeholder="Search for medications..."
                                                required={true}
                                                multiple={false}/>

                            <Spacer margin={spacerMargin}/>

                            {/* form */}
                            <FhirCodeableConcept label="Form"
                                                 context="form"
                                                 options={medicationFormCodes}
                                                 disabled={submitting}/>

                            <Spacer margin={spacerMargin}/>

                            {/* manufacturer */}
                            {/*<Heading level={5}>Manufacturer</Heading>*/}
                            {/*<Divider margin="2" />*/}
                            {/*<Spacer margin={spacerMargin} />*/}
                            {/*<Controller key="manufacturer.reference"*/}
                            {/*            name="manufacturer.reference"*/}
                            {/*            control={control}*/}
                            {/*            render={({ field }) => (*/}
                            {/*                <InputControl*/}
                            {/*                              {...field}*/}
                            {/*                              label="Manufacturer Reference"*/}
                            {/*                              placeholder="Organization/123"/>*/}
                            {/*            )}/>*/}

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

                            {/*<Controller key="manufacturer.display"*/}
                            {/*            name="manufacturer.display"*/}
                            {/*            control={control}*/}
                            {/*            render={({ field }) => (*/}
                            {/*                <InputControl*/}
                            {/*                              {...field}*/}
                            {/*                              label="Manufacturer Name"*/}
                            {/*                              placeholder="Manufacturer name"/>*/}
                            {/*            )}/>*/}

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

                        <CardDivider/>

                        <CardBody>
                            <TabPanel initialTabName="amount"
                                      tabs={[
                                          { name: 'amount', title: 'Amount' },
                                          { name: 'ingredients', title: 'Ingredients' },
                                          { name: 'batch', title: 'Batch' }
                                      ]}>
                                {(tab) => {
                                    // amount
                                    if (tab.name === 'amount') {
                                        return (
                                            <div style={{ paddingTop: '16px' }}>
                                                <Spacer margin={spacerMargin}/>

                                                {/* amount */}
                                                <FhirRatio label='Amount of drug in package'
                                                           context={`amount`}/>
                                            </div>
                                        );
                                    }

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

                                                {ingredientFieldArray.fields.length === 0 && (
                                                    <>
                                                        <Spacer margin="8" />
                                                        <Flex>
                                                            <FlexItem>
                                                                <Heading level={4}>Medication Ingredients</Heading>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                        onClick={addIngredient}
                                                                        disabled={submitting}>
                                                                    <PlusCircle />
                                                                    Add Ingredient
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                        <Divider margin="2" />
                                                        <Spacer margin="8" />
                                                        <DismissibleAlert status="info">
                                                            No ingredients added yet.
                                                        </DismissibleAlert>
                                                        <Spacer margin={spacerMargin} />
                                                    </>
                                                )}

                                                {(ingredientFieldArray.fields as any[]).map((ingredient, index) => (
                                                    <>
                                                        <Card key={ingredient.id}>
                                                            {ingredientFieldArray.fields.length > 0 && (
                                                                <CardHeader>
                                                                    <Flex align="center" justify="space-between">
                                                                        <FlexItem>
                                                                            <h4>Ingredient {index + 1}</h4>
                                                                        </FlexItem>
                                                                        <FlexItem>
                                                                            <button type="button"
                                                                                    className="btn btn-red-ghost"
                                                                                    title="Remove ingredient"
                                                                                    aria-label="Remove ingredient"
                                                                                    onClick={() => removeIngredient(index)}
                                                                                    disabled={submitting}>
                                                                                <Trash2 />
                                                                            </button>
                                                                        </FlexItem>
                                                                    </Flex>
                                                                </CardHeader>
                                                            )}
                                                            <CardBody>
                                                                {/* itemCodeableConcept */}
                                                                <FhirValueSetSearch label="Ingredient"
                                                                                    context={`ingredient.${index}.itemCodeableConcept`}
                                                                                    valueSetUrl={valueSetUrls.usCoreMedicationCodes}
                                                                                    placeholder="Search for ingredients..."
                                                                                    required={true}
                                                                                    multiple={false}/>

                                                                <Spacer margin={spacerMargin}/>

                                                                {/* isActive */}
                                                                <Controller key={`ingredient.${index}.isActive`}
                                                                            name={`ingredient.${index}.isActive`}
                                                                            control={control}
                                                                            render={({ field }) => (
                                                                                <ToggleControl
                                                                                               label="Active Ingredient"
                                                                                               checked={field.value}
                                                                                               onChange={field.onChange}
                                                                                               disabled={submitting}/>
                                                                            )}/>

                                                                <Spacer margin={spacerMargin}/>

                                                                {/* amount */}
                                                                <FhirRatio label='Quantity of ingredient present'
                                                                           context={`ingredient.${index}.strength`}/>

                                                                <Spacer margin={spacerMargin}/>
                                                            </CardBody>
                                                        </Card>
                                                        <Divider margin="8" />
                                                    </>
                                                ))}

                                                {ingredientFieldArray.fields.length !== 0 && (
                                                    <>
                                                        <Flex align="center" justify="center">
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                        onClick={addIngredient}
                                                                        disabled={submitting}>
                                                                    <PlusCircle />
                                                                    Add Ingredient
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>

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

                                    // batch
                                    if (tab.name === 'batch') {
                                        return (
                                            <div style={{ paddingTop: '16px' }}>
                                                <Heading level={4}>Batch Information</Heading>
                                                <Divider margin="2" />
                                                <Spacer margin={spacerMargin}/>

                                                {/* batch.lotNumber */}
                                                <Controller key="batch.lotNumber"
                                                            name="batch.lotNumber"
                                                            control={control}
                                                            render={({ field }) => (
                                                                <InputControl
                                                                              {...field}
                                                                              label="Lot Number"
                                                                              placeholder="Batch lot number"/>
                                                            )}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* batch.expirationDate */}
                                                <Controller key="batch.expirationDate"
                                                            name="batch.expirationDate"
                                                            control={control}
                                                            render={({ field }) => (
                                                                <InputControl
                                                                              {...field}
                                                                              label="Expiration Date"
                                                                              type="date"/>
                                                            )}/>

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

                {/* Delete Confirmation Modal */}
                {showDeleteModal && (
                    <Modal title="Delete Medication"
                           onRequestClose={() => setShowDeleteModal(false)}>
                        <Text>
                            Are you sure you want to delete this medication record?
                        </Text>
                        <Flex justify="end" style={{ marginTop: 32 }}>
                            <FlexItem>
                                <button type="button"
                                        className="btn btn-red"
                                        onClick={handleDeleteMedication}>
                                    <Trash2 />
                                    Delete
                                </button>
                            </FlexItem>
                        </Flex>
                    </Modal>
                )}
            </form>
        </FormProvider>
    );
};

export default EditMedicationPage;