import React, { useState, useEffect } from 'react';
import { CustomSelectControl } from "../../../../../components/ui/custom-select-control";
import type { CustomSelectOption } from "../../../../../components/ui/custom-select-control";
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 { Spacer } from '../../../../../components/ui/spacer';
import { TabPanel } from '../../../../../components/ui/tab-panel';
import { useForm, FormProvider, useFieldArray, Controller } from 'react-hook-form';
import { Consent, Reference } from 'fhir/r4';
import { Check, PlusCircle, Trash2 } from 'lucide-react';
import {
    IValueSet,
    useAuthServiceContext,
    useConsentServiceContext, usePatientServiceContext,
    useValueSetServiceContext
} from '../../../../../services';
import {
    AppHeader,
    AppSpinner,
    FhirCode,
    FhirCodeableConcept,
    FhirPeriod,
    FhirReference,
    ProfileLayoutContainer
} from '../../../../../components';
import FhirValueSetSearch from '../../../../../components/FhirValueSetSearch/FhirValueSetSearch.tsx';

const EditConsentPage: React.FC = () => {
    const { consentId } = useParams<{ consentId: string }>();
    const navigate = useNavigate();
    const { state } = useLocation();
    const { currentUser, getUserType } = useAuthServiceContext();
    const { patientState } = usePatientServiceContext();
    const {
        fetchConsent,
        transformToFhirConsent,
        transformFromFhirConsent,
        createConsent,
        updateConsent,
        setConsentsList,
        setShouldReload,
        setLastUpserted,
        setUnsaved
    } = useConsentServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

    const [loading, setLoading] = useState(false);
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [consent, setConsent] = useState<Consent | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);

    // value sets
    const [consentStateCodes, setConsentStateCodes] = useState<IValueSet[]>([]);
    const [consentScope, setConsentScope] = useState<IValueSet[]>([]);
    const [consentCategory, setConsentCategory] = useState<IValueSet[]>([]);
    const [consentPolicy, setConsentPolicy] = useState<IValueSet[]>([]);
    const [consentProvisionType, setConsentProvisionType] = useState<IValueSet[]>([]);
    const [securityRoleType, setSecurityRoleType] = useState<IValueSet[]>([]);
    const [consentAction, setConsentAction] = useState<IValueSet[]>([]);
    const [securityLabels, setSecurityLabels] = useState<IValueSet[]>([]);
    const [purposeOfUse, setPurposeOfUse] = useState<IValueSet[]>([]);
    const [consentDataMeaning, setConsentDataMeaning] = useState<IValueSet[]>([]);


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

    useEffect(() => {
        const loadValueSets = async () => {
            const [
                consentStateCodesValueSet,
                consentScopeValueSet,
                consentCategoryValueSet,
                consentPolicyValueSet,
                consentProvisionTypeValueSet,
                securityRoleTypeValueSet,
                consentActionValueSet,
                securityLabelsValueSet,
                purposeOfUseValueSet,
                consentDataMeaningValueSet,
            ] = await Promise.all([
                fetchValueSet(valueSetUrls.consentStateCodes),
                fetchValueSet(valueSetUrls.consentScope),
                fetchValueSet(valueSetUrls.consentCategory),
                fetchValueSet(valueSetUrls.consentPolicy),
                fetchValueSet(valueSetUrls.consentProvisionType),
                fetchValueSet(valueSetUrls.securityRoleType),
                fetchValueSet(valueSetUrls.consentAction),
                fetchValueSet(valueSetUrls.securityLabels),
                fetchValueSet(valueSetUrls.purposeOfUse),
                fetchValueSet(valueSetUrls.consentDataMeaning),
            ]);

            setConsentStateCodes(consentStateCodesValueSet);
            setConsentScope(consentScopeValueSet);
            setConsentCategory(consentCategoryValueSet);
            setConsentPolicy(consentPolicyValueSet);
            setConsentProvisionType(consentProvisionTypeValueSet);
            setSecurityRoleType(securityRoleTypeValueSet);
            setConsentAction(consentActionValueSet);
            setSecurityLabels(securityLabelsValueSet);
            setPurposeOfUse(purposeOfUseValueSet);
            setConsentDataMeaning(consentDataMeaningValueSet);
        };

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

    const methods = useForm({
        defaultValues: {
            status: '',
            scope: null,
            category: [],
            policyRule: null,
            dateTime: '',
            organization: [],
            sourceAttachment: {
                title: '',
                url: ''
            },
            sourceReference: {
                reference: '',
                display: ''
            },
            sourceType: 'none',
            provision: {
                type: 'permit',
                actor: [],
                action: [],
                purpose: [],
                data: []
            }
        }
    });

    const { watch, control, handleSubmit, getValues, setValue, reset } = methods;

    const actorFieldArray = useFieldArray({ control, name: 'provision.actor' });
    const actionFieldArray = useFieldArray({ control, name: 'provision.action' });
    const purposeFieldArray = useFieldArray({ control, name: 'provision.purpose' });
    const dataFieldArray = useFieldArray({ control, name: 'provision.data' });
    const organizationFieldArray = useFieldArray({ control, name: 'organization' });
    const sourceType = watch('sourceType');

    useEffect(() => {
        const loadConsent = async () => {
            if (isNew || consent) return;

            const { consent: consentState } = state ?? {};

            if (consentState) {
                const formData = transformFromFhirConsent(consentState);

                reset(formData);
                setConsent(consentState);
                return;
            }

            setLoading(true);

            try {
                const fetchedConsent = await fetchConsent(consentId as string);
                const formData = transformFromFhirConsent(fetchedConsent);

                reset(formData);
                setConsent(fetchedConsent);
            } catch (err) {
                console.error('Error loading consent:', err);
                setError('Could not load consent. Try again.');
            } finally {
                setLoading(false);
            }
        };

        loadConsent();
    }, [consentId, fetchConsent, transformFromFhirConsent]);

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

        setSubmitting(true);
        setError(null);

        try {
            let result: Consent;

            if (isNew) {
                result = await createConsent(transformToFhirConsent(data, patientState));

                setConsentsList(prev => [...prev, result]);
                navigate(-1);
            } else {
                result = await updateConsent({
                    id: consent?.id,
                    ...transformToFhirConsent(data, patientState)
                });

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

            // setLastUpserted(result.id);
        } catch (err: any) {
            console.error(`Error ${isNew ? 'creating' : 'updating'} consent:`, err);
            setError(`Failed to ${isNew ? 'create' : 'update'} consent. Please try again.`);
        } finally {
            setSubmitting(false);
            // setShouldReload(true);
            // setUnsaved(false);
        }
    };

    const addActor = () => {
        actorFieldArray.append({
            role: null,
            reference: {
                reference: '',
                display: ''
            }
        });
    };

    const removeActor = (index: number) => {
        actorFieldArray.remove(index);
    };

    const canAddActor = () => {
        return true;
    };

    const addAction = () => {
        actionFieldArray.append({
            system: '',
            code: '',
            display: ''
        });
    };

    const removeAction = (index: number) => {
        actionFieldArray.remove(index);
    };

    const canAddAction = () => {
        return true;
    };

    const addPurpose = () => {
        purposeFieldArray.append({
            system: '',
            code: '',
            display: ''
        });
    };

    const removePurpose = (index: number) => {
        purposeFieldArray.remove(index);
    };

    const canAddPurpose = () => {
        return true;
    };

    const addData = () => {
        dataFieldArray.append({
            meaning: '',
            reference: {
                reference: '',
                display: ''
            }
        });
    };

    const removeData = (index: number) => {
        dataFieldArray.remove(index);
    };

    const canAddData = () => {
        return true;
    };

    const addOrganization = () => {
        organizationFieldArray.append({
            reference: '',
            display: ''
        });
    };

    const removeOrganization = (index: number) => {
        organizationFieldArray.remove(index);
    };

    const canAddOrganization = () => {
        return true;
    };

    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>

                {error && (
                    <>
                        <DismissibleAlert status="error" onDismiss={() => setError(null)}>
                            {error}
                        </DismissibleAlert>

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

                <ProfileLayoutContainer>
                    <Card>
                        <CardBody>
                            {/* status */}
                            <FhirCode label="Consent Status"
                                      context="status"
                                      options={consentStateCodes}
                                      required={true}/>

                            <Spacer margin={spacerMargin}/>

                            {/* scope */}
                            <FhirCodeableConcept label="Which of the four areas this resource covers "
                                                 context="scope"
                                                 options={consentScope}
                                                 required={true}
                                                 disabled={submitting}/>

                            <Spacer margin={spacerMargin}/>

                            {/* category */}
                            <FhirCodeableConcept label="Classification of the consent statement - for indexing/retrieval"
                                                 context="category"
                                                 options={consentCategory}
                                                 multiple={true}
                                                 disabled={submitting}/>

                            <Spacer margin={spacerMargin}/>

                            {/* dateTime */}
                            <Controller key="dateTime"
                                        name="dateTime"
                                        control={control}
                                        render={({ field }) => (
                                            <InputControl
                                                          {...field}
                                                          label="When this Consent was created or indexed"
                                                          type="datetime-local"/>
                                        )}/>

                            <Spacer margin={spacerMargin}/>
                        </CardBody>
                        <CardDivider/>
                        <CardBody>
                            <TabPanel initialTabName="source"
                                      tabs={[
                                          // { name: 'organizations', title: 'Organizations' },
                                          { name: 'source', title: 'Source' },
                                          { name: 'provisions', title: 'Provisions' }
                                      ]}>
                                {(tab) => {
                                    // organizations
                                    if (tab.name === 'organizations') {
                                        return (
                                            <div style={{ paddingTop: '16px' }}>
                                                <Spacer margin={spacerMargin}/>

                                                {organizationFieldArray.fields.length === 0 && (
                                                    <>
                                                        <Spacer margin="8"/>
                                                        <Flex>
                                                            <FlexItem>
                                                                <Heading level={4}>Organizations</Heading>
                                                            </FlexItem>
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                        onClick={addOrganization}
                                                                        disabled={!canAddOrganization() || submitting}>
                                                                    <PlusCircle />
                                                                    Add Organization
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                        <Divider margin="2"/>
                                                        <Spacer margin="8"/>

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

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

                                                {(organizationFieldArray.fields as any[]).map((org: Reference, index: number) => (
                                                    <React.Fragment key={org.id}>
                                                        <Card>
                                                            <CardHeader>
                                                                <Flex align="center" justify="space-between">
                                                                    <FlexItem>
                                                                        <h4>Organization {index + 1}</h4>
                                                                    </FlexItem>
                                                                    <FlexItem>
                                                                        <button type="button"
                                                                                className="btn btn-red-ghost"
                                                                                title="Remove organization"
                                                                                aria-label="Remove organization"
                                                                                onClick={() => removeOrganization(index)}
                                                                                disabled={submitting}>
                                                                            <Trash2 />
                                                                        </button>
                                                                    </FlexItem>
                                                                </Flex>
                                                            </CardHeader>
                                                            <CardBody>
                                                                <FhirReference label="Organization Reference"
                                                                               context={`organization.${index}`}
                                                                               resourceType="Organization"
                                                                               disabled={submitting}/>
                                                            </CardBody>
                                                        </Card>

                                                        <Divider margin="8"/>

                                                        {index === organizationFieldArray.fields.length - 1 && (
                                                            <Flex align="center" justify="center">
                                                                <FlexItem>
                                                                    <button type="button"
                                                                            className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                            onClick={addOrganization}
                                                                            disabled={!canAddOrganization() || submitting}>
                                                                        <PlusCircle />
                                                                        Add Organization
                                                                    </button>
                                                                </FlexItem>
                                                            </Flex>
                                                        )}
                                                    </React.Fragment>
                                                ))}
                                            </div>
                                        );
                                    }

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

                                                {/* sourceType */}
                                                <Controller key="sourceType"
                                                            name="sourceType"
                                                            control={control}
                                                            render={({ field }) => (
                                                                <CustomSelectControl
                                                                                     label="Source Type"
                                                                                     options={[
                                                                                         { name: 'None', key: 'none' },
                                                                                         { name: 'Attachment', key: 'attachment' },
                                                                                         { name: 'Reference', key: 'reference' }
                                                                                     ]}
                                                                                     value={field.value}
                                                                                     onChange={(newValue: { selectedItem: CustomSelectOption }) => {
                                                                                         field.onChange(newValue.selectedItem.key);
                                                                                     }}/>
                                                            )}/>

                                                <Spacer margin={spacerMargin}/>

                                                {sourceType === 'attachment' && (
                                                    <>
                                                        <Controller key="sourceAttachment.title"
                                                                    name="sourceAttachment.title"
                                                                    control={control}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Attachment Title"
                                                                                      placeholder="Title of the attachment"/>
                                                                    )}/>

                                                        <Spacer margin={spacerMargin}/>

                                                        <Controller name="sourceAttachment.url"
                                                                    control={control}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Attachment URL"
                                                                                      placeholder="URL to the attachment"/>
                                                                    )}/>

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

                                                {sourceType === 'reference' && (
                                                    <>
                                                        <FhirReference label="Source Reference"
                                                                       context="sourceReference"
                                                                       resourceType="DocumentReference"
                                                                       disabled={submitting}/>

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

                                                {/* policyRule */}
                                                <FhirCodeableConcept label="Regulation that this consents to"
                                                                     context="policyRule"
                                                                     options={consentPolicy}
                                                                     disabled={submitting}/>

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

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

                                                {/* provision.type */}
                                                <FhirCode label="Provision Type"
                                                          context="provision.type"
                                                          options={consentProvisionType}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* provision.period */}
                                                <FhirPeriod label="Timeframe for this rule"
                                                            context="provision.period"
                                                            disabled={submitting}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* provision.dataPeriod */}
                                                <FhirPeriod label="Timeframe for data controlled by this rule"
                                                            context="provision.dataPeriod"
                                                            disabled={submitting}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* Actors */}
                                                <Heading level={5}>Actors - Who/what controlled by this rule</Heading>
                                                <Divider margin="2"/>
                                                <Spacer margin={spacerMargin}/>

                                                {actorFieldArray.fields.length === 0 && (
                                                    <>
                                                        <Flex>
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                        onClick={addActor}
                                                                        disabled={!canAddActor() || submitting}>
                                                                    <PlusCircle />
                                                                    Add Actor
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>

                                                        <Spacer margin="8"/>

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

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

                                                {(actorFieldArray.fields as any[]).map((actor, index: number) => (
                                                    <React.Fragment key={actor.id}>
                                                        <Card>
                                                            <CardHeader>
                                                                <Flex align="center" justify="space-between">
                                                                    <FlexItem>
                                                                        <h4>Actor {index + 1}</h4>
                                                                    </FlexItem>
                                                                    <FlexItem>
                                                                        <button type="button"
                                                                                className="btn btn-red-ghost"
                                                                                title="Remove actor"
                                                                                aria-label="Remove actor"
                                                                                onClick={() => removeActor(index)}
                                                                                disabled={submitting}>
                                                                            <Trash2 />
                                                                        </button>
                                                                    </FlexItem>
                                                                </Flex>
                                                            </CardHeader>
                                                            <CardBody>
                                                                <FhirCodeableConcept label="How the actor is involved"
                                                                                     context={`provision.actor.${index}.role`}
                                                                                     options={securityRoleType}
                                                                                     disabled={submitting}/>

                                                                <Spacer margin={spacerMargin}/>

                                                                <FhirReference label="Actor Reference"
                                                                               context={`provision.actor.${index}.reference`}
                                                                               resourceType="Practitioner"
                                                                               disabled={submitting}/>
                                                            </CardBody>
                                                        </Card>

                                                        <Divider margin="8"/>
                                                    </React.Fragment>
                                                ))}

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

                                                <Spacer margin={spacerMargin}/>

                                                {/* provision.action */}
                                                <FhirCodeableConcept label="Actions controlled by this rule"
                                                                     context={`provision.action`}
                                                                     options={consentAction}
                                                                     multiple={true}
                                                                     disabled={submitting}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* provision.securityLabel */}
                                                <FhirCodeableConcept label="Security Labels that define affected resources"
                                                                     context={`provision.securityLabel`}
                                                                     options={securityLabels}
                                                                     multiple={true}
                                                                     disabled={submitting}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* provision.purpose */}
                                                <FhirCodeableConcept label="Context of activities covered by this rule"
                                                                     context={`provision.purpose`}
                                                                     options={purposeOfUse}
                                                                     multiple={true}
                                                                     disabled={submitting}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* provision.class */}
                                                <FhirValueSetSearch label="Consent class"
                                                                    context={`provision.class`}
                                                                    valueSetUrl={valueSetUrls.consentContentClass}
                                                                    multiple={true}
                                                                    disabled={submitting}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* provision.code */}
                                                <FhirValueSetSearch label="Consent content codes"
                                                                    context={`provision.code`}
                                                                    valueSetUrl={valueSetUrls.consentContentCode}
                                                                    multiple={true}
                                                                    disabled={submitting}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* Data */}
                                                <Heading level={5}>Data</Heading>
                                                <Divider margin="2"/>
                                                <Spacer margin={spacerMargin}/>

                                                {dataFieldArray.fields.length === 0 && (
                                                    <>
                                                        <Flex>
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                        onClick={addData}
                                                                        disabled={!canAddData() || submitting}>
                                                                    <PlusCircle />
                                                                    Add Data
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>

                                                        <Spacer margin="8"/>

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

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

                                                {(dataFieldArray.fields as any[]).map((data, index: number) => (
                                                    <React.Fragment key={data.id}>
                                                        <Card>
                                                            <CardHeader>
                                                                <Flex align="center" justify="space-between">
                                                                    <FlexItem>
                                                                        <h4>Data {index + 1}</h4>
                                                                    </FlexItem>
                                                                    <FlexItem>
                                                                        <button type="button"
                                                                                className="btn btn-red-ghost"
                                                                                title="Remove data"
                                                                                aria-label="Remove data"
                                                                                onClick={() => removeData(index)}
                                                                                disabled={submitting}>
                                                                            <Trash2 />
                                                                        </button>
                                                                    </FlexItem>
                                                                </Flex>
                                                            </CardHeader>
                                                            <CardBody>
                                                                <FhirCode label="Consent data meaning"
                                                                                     context={`provision.data.${index}.meaning`}
                                                                                     options={consentDataMeaning}
                                                                                     disabled={submitting}/>

                                                                <Spacer margin={spacerMargin}/>

                                                                <FhirReference label="Data Reference"
                                                                               context={`provision.data.${index}.reference`}
                                                                               resourceType="Resource"
                                                                               disabled={submitting}/>
                                                            </CardBody>
                                                        </Card>

                                                        <Divider margin="8"/>
                                                    </React.Fragment>
                                                ))}

                                                {dataFieldArray.fields.length > 0 && (
                                                    <Flex align="center" justify="center">
                                                        <FlexItem>
                                                            <button type="button"
                                                                    className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                    onClick={addData}
                                                                    disabled={!canAddData() || submitting}>
                                                                <PlusCircle />
                                                                Add Data
                                                            </button>
                                                        </FlexItem>
                                                    </Flex>
                                                )}
                                            </div>
                                        );
                                    }
                                }}
                            </TabPanel>
                        </CardBody>
                    </Card>
                </ProfileLayoutContainer>
            </form>
        </FormProvider>
    );
};

export default EditConsentPage;