import React, { useState, useEffect } from 'react';
import { 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 { Media } from 'fhir/r4';
import { Check, PlusCircle, Trash2 } from 'lucide-react';
import {
    IValueSet,
    useAuthServiceContext,
    useMediaServiceContext, usePatientServiceContext,
    useValueSetServiceContext
} from '../../../../../services';
import { usePhotoUploadService } from '../../../../../services/PhotoUploadService';
import { mediaChangeableHere, mediaRefusalCopy } from '../../../../../services/MediaService';
import {
    AppHeader,
    AppSpinner,
    FhirCode,
    FhirCodeableConcept,
    FhirValueSetSearch,
    ProfileLayoutContainer
} from '../../../../../components';
import FhirAnnotation from '../../../../../components/FhirAnnotation/FhirAnnotation.tsx';

const EditMediaPage: React.FC = () => {
    const navigate = useNavigate();
    const { mediaId } = useParams<{ mediaId: string }>();
    const { wpOrganization } = useAuthServiceContext();
    const { patientState } = usePatientServiceContext();
    const { uploadDocument, getPresignedDownloadUrl } = usePhotoUploadService();
    const {
        fetchMedia,
        transformToFhirMedia,
        transformFromFhirMedia,
        createMedia,
        updateMedia,
        deleteMedia,
        setMediaState,
        setShouldReload,
        setLastUpserted,
        setUnsaved
    } = useMediaServiceContext();
    const { fetchValueSet, valueSetUrls } = useValueSetServiceContext();

    const [loading, setLoading] = useState(false);
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [media, setMedia] = useState<Media | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [previewUrl, setPreviewUrl] = useState<string | null>(null);

    const [statusOptions, setStatusOptions] = useState<IValueSet[]>([]);
    const [typeOptions, setTypeOptions] = useState<IValueSet[]>([]);
    const [modalityOptions, setModalityOptions] = useState<IValueSet[]>([]);
    const [viewOptions, setViewOptions] = useState<IValueSet[]>([]);
    const [bodySiteOptions, setBodySiteOptions] = useState<IValueSet[]>([]);

    const isNew = mediaId === 'new';
    // Another practice's Media, or one whose creator or version cannot be proved, is viewable but not changeable here.
    const readOnly = !isNew && !!media && !mediaChangeableHere(media, wpOrganization?.current?.id);
    const spacerMargin = '24px';

    useEffect(() => {
        const loadValueSets = async () => {
            const [
                statusValueSet,
                typeValueSet,
                modalityValueSet,
                viewValueSet,
                bodySiteValueSet
            ] = await Promise.all([
                fetchValueSet(valueSetUrls.mediaStatus),
                fetchValueSet(valueSetUrls.mediaType),
                fetchValueSet(valueSetUrls.mediaModality),
                fetchValueSet(valueSetUrls.mediaView),
                fetchValueSet(valueSetUrls.bodySite)
            ]);

            setStatusOptions(statusValueSet);
            setTypeOptions(typeValueSet);
            setModalityOptions(modalityValueSet);
            setViewOptions(viewValueSet);
            setBodySiteOptions(bodySiteValueSet);
        };

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

    const methods = useForm({
        defaultValues: {
            identifier: [],
            status: 'preparation',
            type: null,
            modality: null,
            view: null,
            encounter: null,
            createdDateTime: '',
            issued: '',
            operator: null,
            reasonCode: [],
            bodySite: null,
            deviceName: '',
            device: null,
            height: 0,
            width: 0,
            frames: 0,
            duration: 0,
            content: {
                contentType: '',
                url: '',
                size: 0,
                title: ''
            },
            note: [],
            basedOn: [],
            partOf: []
        }
    });

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

    const identifierFieldArray = useFieldArray({
        control,
        name: 'identifier'
    });

    const reasonCodeFieldArray = useFieldArray({
        control,
        name: 'reasonCode'
    });

    const noteFieldArray = useFieldArray({
        control,
        name: 'note'
    });

    const basedOnFieldArray = useFieldArray({
        control,
        name: 'basedOn'
    });

    const partOfFieldArray = useFieldArray({
        control,
        name: 'partOf'
    });

    const contentUrl = watch('content.url');
    const contentType = watch('content.contentType');

    // An image previews only through the link the server signs once its scan is clean, for whoever may read this saved
    // item; a file not saved on it yet, or a link to an image elsewhere, is never loaded.
    useEffect(() => {
        setPreviewUrl(null);
        if (isNew || !mediaId || !contentUrl || !contentType?.startsWith('image/') || /^[a-z][a-z0-9+.-]*:/i.test(contentUrl)) return;
        let current = true;
        getPresignedDownloadUrl(contentUrl, undefined, `Media/${mediaId}`)
            .then((url) => { if (current) setPreviewUrl(url); })
            .catch(() => { if (current) setPreviewUrl(null); });
        return () => { current = false; };
    }, [contentUrl, contentType, isNew, mediaId]);

    useEffect(() => {
        const loadMedia = async () => {
            if (isNew) return;

            setLoading(true);
            try {
                const fetchedMedia = await fetchMedia(mediaId as string);
                setMedia(fetchedMedia);
                setMediaState(fetchedMedia);

                const formData = transformFromFhirMedia(fetchedMedia);
                reset(formData);

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

        loadMedia();
    }, [mediaId, isNew, fetchMedia, transformFromFhirMedia, reset, setMediaState]);

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

        setSubmitting(true);
        setError(null);

        try {
            let result;
            if (isNew) {
                result = await createMedia(transformToFhirMedia(data, patientState));
            } else {
                // The edition the user opened, so a change made since is refused rather than overwritten.
                result = await updateMedia({
                    id: media?.id,
                    ...transformToFhirMedia(data, patientState),
                    meta: { versionId: media?.meta?.versionId },
                });
            }

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

    const addIdentifier = () => {
        identifierFieldArray.append({
            system: '',
            value: ''
        });
    };

    const removeIdentifier = (index: number) => {
        identifierFieldArray.remove(index);
    };

    const addReasonCode = () => {
        reasonCodeFieldArray.append(null);
    };

    const removeReasonCode = (index: number) => {
        reasonCodeFieldArray.remove(index);
    };

    const addNote = () => {
        noteFieldArray.append({
            text: ''
        });
    };

    const removeNote = (index: number) => {
        noteFieldArray.remove(index);
    };

    const addBasedOn = () => {
        basedOnFieldArray.append(null);
    };

    const removeBasedOn = (index: number) => {
        basedOnFieldArray.remove(index);
    };

    const addPartOf = () => {
        partOfFieldArray.append(null);
    };

    const removePartOf = (index: number) => {
        partOfFieldArray.remove(index);
    };

    // The file is uploaded and scanned like any other, then named by key for this patient; its bytes never ride
    // inside the record.
    const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (!file) return;
        try {
            const { key } = await uploadDocument(file, patientState?.id);
            setValue('content.contentType', file.type);
            setValue('content.url', key);
            setValue('content.data', undefined);
            setValue('content.size', file.size);
            setValue('content.title', file.name);
        } catch (err) {
            console.error('Error uploading media:', err);
            setError('Could not upload the file. A PDF, Word document or image can be added here.');
        }
    };

    const handleDeleteMedia = async () => {
        if (!media) return;

        // A refused or unanswered removal stays on this page and says so; only a removal the server confirmed leaves it.
        try {
            await deleteMedia(media);
        } catch (deleteError) {
            console.error('Failed to delete media:', deleteError);
            setShowDeleteModal(false);
            setError(mediaRefusalCopy(deleteError) ?? 'The media could not be removed. Reload it to see whether it is still there.');
            return;
        }
        setShouldReload(true);
        setShowDeleteModal(false);
        navigate(-1);
    };

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

    return (
        <FormProvider {...methods}>
            <form onSubmit={handleSubmit(onSubmit)}>
                <AppHeader showBackButton={true}>
                    {!readOnly && (
                        <button className={`btn btn-green${submitting ? ' btn-busy' : ''}`}
                                disabled={submitting}
                                type="submit">
                            <Check />
                            Save
                        </button>
                    )}
                    {!isNew && !readOnly && (
                        <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}/>
                    </>
                )}

                {readOnly && (
                    <>
                        <p role="status">Added by another practice, or its practice or version cannot be confirmed. You can view it; only the practice that added it can change or remove it.</p>
                        <Spacer margin={spacerMargin}/>
                    </>
                )}

                <fieldset disabled={readOnly} className="m-0 min-w-0 border-0 p-0">
                <ProfileLayoutContainer>
                    <Card>
                        <CardBody>
                            {/* status */}
                            <FhirCode label="Status"
                                      context="status"
                                      options={statusOptions}
                                      required={true}/>

                            <Spacer margin={spacerMargin}/>

                            {/* type */}
                            <FhirCodeableConcept label="Type"
                                                 context="type"
                                                 options={typeOptions}
                                                 disabled={submitting}/>

                            <Spacer margin={spacerMargin}/>

                            {/* modality */}
                            <FhirCodeableConcept label="Modality"
                                                 context="modality"
                                                 options={modalityOptions}
                                                 disabled={submitting}/>

                            <Spacer margin={spacerMargin}/>

                            {/* view */}
                            <FhirCodeableConcept label="View"
                                                 context="view"
                                                 options={viewOptions}
                                                 disabled={submitting}/>

                            <Spacer margin={spacerMargin}/>

                            {/* bodySite */}
                            <FhirCodeableConcept label="Body Site"
                                                 context="bodySite"
                                                 options={bodySiteOptions}
                                                 disabled={submitting}/>

                            <Spacer margin={spacerMargin}/>
                        </CardBody>
                        <CardDivider/>
                        <CardBody>
                            <TabPanel initialTabName="content"
                                      tabs={[
                                          { name: 'content', title: 'Content' },
                                          { name: 'details', title: 'Details' },
                                          { name: 'metadata', title: 'Metadata' },
                                          { name: 'notes', title: 'Notes' }
                                      ]}>
                                {(tab) => {
                                    // content
                                    if (tab.name === 'content') {
                                        return (
                                            <div style={{ paddingTop: '16px' }}>
                                                <Heading level={5}>Media Content</Heading>
                                                <Divider margin="2"/>
                                                <Spacer margin={spacerMargin}/>

                                                {/* File Upload */}
                                                <InputControl
                                                              label="Upload Media"
                                                              type="file"
                                                              onChange={handleFileUpload}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* Content URL */}
                                                <Controller name="content.url"
                                                            control={control}
                                                            render={({ field }) => (
                                                                <InputControl
                                                                              {...field}
                                                                              label="Content URL"
                                                                              placeholder="URL to the media content"/>
                                                            )}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* Content Type */}
                                                <Controller name="content.contentType"
                                                            control={control}
                                                            render={({ field }) => (
                                                                <InputControl
                                                                              {...field}
                                                                              label="Content Type"
                                                                              placeholder="MIME type (e.g., image/jpeg)"/>
                                                            )}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* Content Title */}
                                                <Controller name="content.title"
                                                            control={control}
                                                            render={({ field }) => (
                                                                <InputControl
                                                                              {...field}
                                                                              label="Title"
                                                                              placeholder="Title for the media content"/>
                                                            )}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* Preview */}
                                                {previewUrl && (
                                                    <>
                                                        <Heading level={5}>Preview</Heading>
                                                        <Divider margin="2"/>
                                                        <Spacer margin={spacerMargin}/>
                                                        <div style={{ maxWidth: '100%', textAlign: 'center' }}>
                                                            <img src={previewUrl}
                                                                 alt="Media preview"
                                                                 style={{ maxWidth: '100%', maxHeight: '400px' }}/>
                                                        </div>
                                                        <Spacer margin={spacerMargin}/>
                                                    </>
                                                )}

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

                                                <Flex>
                                                    <FlexItem style={{ flexGrow: 1, marginRight: '8px' }}>
                                                        <Controller name="width"
                                                                    control={control}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Width"
                                                                                      type="number"
                                                                                      min="0"/>
                                                                    )}/>
                                                    </FlexItem>
                                                    <FlexItem style={{ flexGrow: 1 }}>
                                                        <Controller name="height"
                                                                    control={control}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Height"
                                                                                      type="number"
                                                                                      min="0"/>
                                                                    )}/>
                                                    </FlexItem>
                                                </Flex>

                                                <Spacer margin={spacerMargin}/>

                                                <Flex>
                                                    <FlexItem style={{ flexGrow: 1, marginRight: '8px' }}>
                                                        <Controller name="frames"
                                                                    control={control}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Frames"
                                                                                      type="number"
                                                                                      min="0"/>
                                                                    )}/>
                                                    </FlexItem>
                                                    <FlexItem style={{ flexGrow: 1 }}>
                                                        <Controller name="duration"
                                                                    control={control}
                                                                    render={({ field }) => (
                                                                        <InputControl
                                                                                      {...field}
                                                                                      label="Duration (seconds)"
                                                                                      type="number"
                                                                                      min="0"
                                                                                      step="0.1"/>
                                                                    )}/>
                                                    </FlexItem>
                                                </Flex>
                                            </div>
                                        );
                                    }

                                    // details
                                    if (tab.name === 'details') {
                                        return (
                                            <div style={{ paddingTop: '16px' }}>
                                                {/* createdDateTime */}
                                                <Controller name="createdDateTime"
                                                            control={control}
                                                            render={({ field }) => (
                                                                <InputControl
                                                                              {...field}
                                                                              label="Created Date Time"
                                                                              type="datetime-local"/>
                                                            )}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* issued */}
                                                <Controller name="issued"
                                                            control={control}
                                                            render={({ field }) => (
                                                                <InputControl
                                                                              {...field}
                                                                              label="Issued Date Time"
                                                                              type="datetime-local"/>
                                                            )}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* operator */}
                                                <FhirValueSetSearch label="Operator"
                                                                    context="operator"
                                                                    valueSetUrl={valueSetUrls.practitioner}
                                                                    placeholder="Search for practitioners..."
                                                                    multiple={false}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* encounter */}
                                                <FhirValueSetSearch label="Encounter"
                                                                    context="encounter"
                                                                    valueSetUrl={valueSetUrls.encounter}
                                                                    placeholder="Search for encounters..."
                                                                    multiple={false}/>

                                                <Spacer margin={spacerMargin}/>

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

                                                {reasonCodeFieldArray.fields.length === 0 && (
                                                    <>
                                                        <Flex>
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                        onClick={addReasonCode}
                                                                        disabled={submitting}>
                                                                    <PlusCircle />
                                                                    Add Reason Code
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                        <Spacer margin="8"/>

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

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

                                                {reasonCodeFieldArray.fields.map((field, index) => (
                                                    <React.Fragment key={field.id}>
                                                        <Flex align="center">
                                                            <FlexItem style={{ flexGrow: 1 }}>
                                                                <FhirValueSetSearch label={`Reason Code ${index + 1}`}
                                                                                    context={`reasonCode.${index}`}
                                                                                    valueSetUrl={valueSetUrls.clinicalFindings}
                                                                                    placeholder="Search for clinical findings..."
                                                                                    multiple={false}/>
                                                            </FlexItem>
                                                            <FlexItem style={{ marginLeft: '8px', alignSelf: 'flex-end' }}>
                                                                <button type="button"
                                                                        className="btn btn-red-ghost"
                                                                        title="Remove reason code"
                                                                        aria-label="Remove reason code"
                                                                        onClick={() => removeReasonCode(index)}
                                                                        disabled={submitting}>
                                                                    <Trash2 />
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                        <Spacer margin={spacerMargin}/>
                                                    </React.Fragment>
                                                ))}

                                                {reasonCodeFieldArray.fields.length > 0 && (
                                                    <Flex justify="center">
                                                        <FlexItem>
                                                            <button type="button"
                                                                    className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                    onClick={addReasonCode}
                                                                    disabled={submitting}>
                                                                <PlusCircle />
                                                                Add Reason Code
                                                            </button>
                                                        </FlexItem>
                                                    </Flex>
                                                )}
                                            </div>
                                        );
                                    }

                                    // metadata
                                    if (tab.name === 'metadata') {
                                        return (
                                            <div style={{ paddingTop: '16px' }}>
                                                {/* deviceName */}
                                                <Controller name="deviceName"
                                                            control={control}
                                                            render={({ field }) => (
                                                                <InputControl
                                                                              {...field}
                                                                              label="Device Name"
                                                                              placeholder="Name of the device that created the media"/>
                                                            )}/>

                                                <Spacer margin={spacerMargin}/>

                                                {/* device */}
                                                <FhirValueSetSearch label="Device"
                                                                    context="device"
                                                                    valueSetUrl={valueSetUrls.device}
                                                                    placeholder="Search for devices..."
                                                                    multiple={false}/>

                                                <Spacer margin={spacerMargin}/>

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

                                                {identifierFieldArray.fields.length === 0 && (
                                                    <>
                                                        <Flex>
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                        onClick={addIdentifier}
                                                                        disabled={submitting}>
                                                                    <PlusCircle />
                                                                    Add Identifier
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                        <Spacer margin="8"/>

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

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

                                                {identifierFieldArray.fields.map((field, index) => (
                                                    <React.Fragment key={field.id}>
                                                        <Card>
                                                            <CardHeader>
                                                                <Flex align="center" justify="space-between">
                                                                    <FlexItem>
                                                                        <h4>Identifier {index + 1}</h4>
                                                                    </FlexItem>
                                                                    <FlexItem>
                                                                        <button type="button"
                                                                                className="btn btn-red-ghost"
                                                                                title="Remove identifier"
                                                                                aria-label="Remove identifier"
                                                                                onClick={() => removeIdentifier(index)}
                                                                                disabled={submitting}>
                                                                            <Trash2 />
                                                                        </button>
                                                                    </FlexItem>
                                                                </Flex>
                                                            </CardHeader>
                                                            <CardBody>
                                                                <Controller name={`identifier.${index}.system`}
                                                                            control={control}
                                                                            render={({ field }) => (
                                                                                <InputControl
                                                                                              {...field}
                                                                                              label="System"
                                                                                              placeholder="Identifier system"/>
                                                                            )}/>

                                                                <Spacer margin={spacerMargin}/>

                                                                <Controller name={`identifier.${index}.value`}
                                                                            control={control}
                                                                            render={({ field }) => (
                                                                                <InputControl
                                                                                              {...field}
                                                                                              label="Value"
                                                                                              placeholder="Identifier value"/>
                                                                            )}/>
                                                            </CardBody>
                                                        </Card>
                                                        <Spacer margin={spacerMargin}/>
                                                    </React.Fragment>
                                                ))}

                                                {identifierFieldArray.fields.length > 0 && (
                                                    <Flex justify="center">
                                                        <FlexItem>
                                                            <button type="button"
                                                                    className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                    onClick={addIdentifier}
                                                                    disabled={submitting}>
                                                                <PlusCircle />
                                                                Add Identifier
                                                            </button>
                                                        </FlexItem>
                                                    </Flex>
                                                )}

                                                <Spacer margin={spacerMargin}/>

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

                                                {basedOnFieldArray.fields.length === 0 && (
                                                    <>
                                                        <Flex>
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                        onClick={addBasedOn}
                                                                        disabled={submitting}>
                                                                    <PlusCircle />
                                                                    Add Based On
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                        <Spacer margin="8"/>

                                                        <DismissibleAlert status="info">
                                                            No based on references added yet.
                                                        </DismissibleAlert>

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

                                                {basedOnFieldArray.fields.map((field, index) => (
                                                    <React.Fragment key={field.id}>
                                                        <Flex align="center">
                                                            <FlexItem style={{ flexGrow: 1 }}>
                                                                <FhirValueSetSearch label={`Based On ${index + 1}`}
                                                                                    context={`basedOn.${index}`}
                                                                                    valueSetUrl={valueSetUrls.serviceRequest}
                                                                                    placeholder="Search for service requests..."
                                                                                    multiple={false}/>
                                                            </FlexItem>
                                                            <FlexItem style={{ marginLeft: '8px', alignSelf: 'flex-end' }}>
                                                                <button type="button"
                                                                        className="btn btn-red-ghost"
                                                                        title="Remove based on"
                                                                        aria-label="Remove based on"
                                                                        onClick={() => removeBasedOn(index)}
                                                                        disabled={submitting}>
                                                                    <Trash2 />
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                        <Spacer margin={spacerMargin}/>
                                                    </React.Fragment>
                                                ))}

                                                {basedOnFieldArray.fields.length > 0 && (
                                                    <Flex justify="center">
                                                        <FlexItem>
                                                            <button type="button"
                                                                    className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                    onClick={addBasedOn}
                                                                    disabled={submitting}>
                                                                <PlusCircle />
                                                                Add Based On
                                                            </button>
                                                        </FlexItem>
                                                    </Flex>
                                                )}

                                                <Spacer margin={spacerMargin}/>

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

                                                {partOfFieldArray.fields.length === 0 && (
                                                    <>
                                                        <Flex>
                                                            <FlexItem>
                                                                <button type="button"
                                                                        className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                        onClick={addPartOf}
                                                                        disabled={submitting}>
                                                                    <PlusCircle />
                                                                    Add Part Of
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                        <Spacer margin="8"/>

                                                        <DismissibleAlert status="info">
                                                            No part of references added yet.
                                                        </DismissibleAlert>

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

                                                {partOfFieldArray.fields.map((field, index) => (
                                                    <React.Fragment key={field.id}>
                                                        <Flex align="center">
                                                            <FlexItem style={{ flexGrow: 1 }}>
                                                                <FhirValueSetSearch label={`Part Of ${index + 1}`}
                                                                                    context={`partOf.${index}`}
                                                                                    valueSetUrl={valueSetUrls.procedure}
                                                                                    placeholder="Search for procedures..."
                                                                                    multiple={false}/>
                                                            </FlexItem>
                                                            <FlexItem style={{ marginLeft: '8px', alignSelf: 'flex-end' }}>
                                                                <button type="button"
                                                                        className="btn btn-red-ghost"
                                                                        title="Remove part of"
                                                                        aria-label="Remove part of"
                                                                        onClick={() => removePartOf(index)}
                                                                        disabled={submitting}>
                                                                    <Trash2 />
                                                                </button>
                                                            </FlexItem>
                                                        </Flex>
                                                        <Spacer margin={spacerMargin}/>
                                                    </React.Fragment>
                                                ))}

                                                {partOfFieldArray.fields.length > 0 && (
                                                    <Flex justify="center">
                                                        <FlexItem>
                                                            <button type="button"
                                                                    className={`btn btn-blue${submitting ? ' btn-busy' : ''}`}
                                                                    onClick={addPartOf}
                                                                    disabled={submitting}>
                                                                <PlusCircle />
                                                                Add Part Of
                                                            </button>
                                                        </FlexItem>
                                                    </Flex>
                                                )}
                                            </div>
                                        );
                                    }

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

                                                {/* note */}
                                                <FhirAnnotation label="Additional Notes"
                                                                context={`note`}
                                                                disabled={submitting}/>

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

                                    return null;
                                }}
                            </TabPanel>
                        </CardBody>
                    </Card>
                </ProfileLayoutContainer>
                </fieldset>

                {/* Delete Confirmation Modal */}
                {showDeleteModal && (
                    <Modal title="Delete Media"
                           onRequestClose={() => setShowDeleteModal(false)}>
                        <Text>
                            Are you sure you want to delete this media item?
                        </Text>

                        <Flex justify="end" style={{ marginTop: 32 }}>
                            <FlexItem>
                                <button type="button"
                                        className="btn btn-red"
                                        onClick={handleDeleteMedia}>
                                    <Trash2 />
                                    Delete
                                </button>
                            </FlexItem>
                        </Flex>
                    </Modal>
                )}
            </form>
        </FormProvider>
    );
};

export default EditMediaPage;