FormplayerModal.tsx

import React, {
  useRef,
  useEffect,
  useState,
  useCallback,
  useImperativeHandle,
  forwardRef,
} from 'react';
import {
  StyleSheet,
  View,
  Modal,
  TouchableOpacity,
  Text,
  Platform,
  ActivityIndicator,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import CustomAppWebView, {
  CustomAppWebViewHandle,
} from '../components/CustomAppWebView';
import { useScreenShellStyle } from '../hooks/useScreenShellStyle';
import Icon from '@react-native-vector-icons/material-icons';
import {
  resolveFormOperation,
  resolveFormOperationByType,
  setActiveFormplayerModal,
  clearActiveFormplayerModalIfMatches,
} from '../webview/FormulusMessageHandlers';
import {
  FormCompletionResult,
  FormInitData,
} from '../webview/FormulusInterfaceDefinition';

import { databaseService } from '../database';
import colors from '../theme/colors';
import {
  odeSpacing,
  odeTypography,
  odeBorderWidth,
  odeFormplayerHeaderHeight,
} from '../theme/odeDesign';
import { FormSpec, FormService } from '../services';
import { collectLinkedFormIds } from '../utils/collectLinkedFormIds';
import { ExtensionService } from '../services/ExtensionService';
import RNFS from 'react-native-fs';
import { useAppTheme } from '../contexts/AppThemeContext';
import { useConfirmModal } from '../contexts/ConfirmModalContext';
import { geolocationService } from '../services/GeolocationService';
import { persistObservationWithAttachments } from '../services/attachmentStorage';
import { localeSettingsService } from '../services/LocaleSettingsService';
import { formLocaleSettingsService } from '../services/FormLocaleSettingsService';
import { useTranslation } from 'react-i18next';
import { getActiveProfile } from '../profiles/ProfileRuntime';
import { profileActivity } from '../profiles/ProfileActivity';
import { profilePaths } from '../profiles/ProfilePaths';
import { commonAncestor } from '../utils/commonAncestor';

async function buildLinkedFormSpecs(
  schema: unknown,
): Promise<FormInitData['linkedFormSpecs']> {
  const linkedIds = collectLinkedFormIds(schema);
  if (linkedIds.size === 0) return undefined;

  try {
    const formService = await FormService.getInstance();
    const specs: NonNullable<FormInitData['linkedFormSpecs']> = {};
    for (const id of linkedIds) {
      const spec = formService.getFormSpecById(id);
      if (!spec?.schema) continue;
      specs[id] = {
        schema: spec.schema,
        uiSchema: spec.uiSchema ?? {},
      };
    }
    return Object.keys(specs).length > 0 ? specs : undefined;
  } catch (error) {
    console.warn('[FormplayerModal] Failed to load linked form specs:', error);
    return undefined;
  }
}

interface FormplayerModalProps {
  visible: boolean;
  isActive?: boolean;
  onClose: () => void;
}

export interface FormplayerModalHandle {
  initializeForm: (
    formType: FormSpec,
    params: Record<string, unknown> | null,
    observationId: string | null,
    existingObservationData: Record<string, unknown> | null,
    operationId: string | null,
    subObservationMode?: boolean,
    skipFinalize?: boolean,
    skipDraftSelection?: boolean,
  ) => void;
  handleSubmission: (data: {
    formType: string;
    finalData: Record<string, unknown>;
    observationId?: string | null;
  }) => Promise<string>;
  /** Ask the Formplayer WebView to flush a pending root draft to localStorage. */
  flushDraft: () => void;
  /** Resolves only after refresh and draft storage complete; rejects on error/timeout/unmount. */
  flushDraftAsync: () => Promise<void>;
}

const FormplayerModal = forwardRef<FormplayerModalHandle, FormplayerModalProps>(
  ({ visible, isActive = true, onClose }, ref) => {
    const webViewRef = useRef<CustomAppWebViewHandle>(null);
    const [profileId] = useState(() => getActiveProfile().id);
    const flushSequence = useRef(0);
    const pendingFlushes = useRef(
      new Map<
        string,
        {
          resolve: () => void;
          reject: (error: Error) => void;
          timer: ReturnType<typeof setTimeout>;
        }
      >(),
    );
    const handleDraftFlushed = useCallback(
      (messageId: string, error?: string) => {
        const pending = pendingFlushes.current.get(messageId);
        if (!pending) return;
        pendingFlushes.current.delete(messageId);
        clearTimeout(pending.timer);
        if (error) pending.reject(new Error(error));
        else pending.resolve();
      },
      [],
    );
    const flushDraftAsync = useCallback(
      async () =>
        profileActivity.run(
          'Formplayer draft flush',
          () =>
            new Promise<void>((resolve, reject) => {
              if (!webViewRef.current) {
                reject(new Error('Formplayer WebView is unavailable'));
                return;
              }
              const messageId = `draft-flush-${++flushSequence.current}`;
              const timer = setTimeout(
                () =>
                  handleDraftFlushed(
                    messageId,
                    'Formplayer draft flush timed out',
                  ),
                15000,
              );
              pendingFlushes.current.set(messageId, { resolve, reject, timer });
              webViewRef.current.injectJavaScript(`(function() {
        const messageId = ${JSON.stringify(messageId)};
        Promise.resolve().then(function() {
          if (typeof window.__formulusFlushDraft !== 'function') throw new Error('Formplayer draft flush is unavailable');
          const result = window.__formulusFlushDraft();
          if (!result || typeof result.then !== 'function') throw new Error('Acknowledged Formplayer draft flush is unavailable');
          return result;
        }).then(function() {
          window.ReactNativeWebView.postMessage(JSON.stringify({type: '__odeDraftFlushed', messageId: messageId}));
        }, function(error) {
          window.ReactNativeWebView.postMessage(JSON.stringify({type: '__odeDraftFlushed', messageId: messageId, error: String(error)}));
        });
      })(); true;`);
            }),
        ),
      [handleDraftFlushed],
    );
    useEffect(() => {
      const pending = pendingFlushes.current;
      return () => {
        for (const item of pending.values()) {
          clearTimeout(item.timer);
          item.reject(
            new Error('Formplayer unmounted before draft flush completed'),
          );
        }
        pending.clear();
      };
    }, []);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const { showConfirm } = useConfirmModal();
    const { t } = useTranslation();

    // Theme colors & resolved mode from AppThemeContext.
    const { themeColors, resolvedMode } = useAppTheme();
    const shellStyle = useScreenShellStyle();

    // Internal state to track current form and observation data
    const [currentFormType, setCurrentFormType] = useState<string | null>(null);
    const [currentObservationId, setCurrentObservationId] = useState<
      string | null
    >(null);
    const [_currentObservationData, setCurrentObservationData] =
      useState<Record<string, unknown> | null>(null);
    const [_currentParams, setCurrentParams] = useState<Record<
      string,
      unknown
    > | null>(null);
    const [currentOperationId, setCurrentOperationId] = useState<string | null>(
      null,
    );

    // Track if form has been successfully submitted to avoid double resolution
    const [formSubmitted, setFormSubmitted] = useState(false);

    // Sub-observation (embedded child) forms: return JSON only; do not persist as top-level observations.
    // Ref updates synchronously in initializeForm so submit cannot run before flag is set.
    const subObservationModeRef = useRef(false);
    const skipFinalizeRef = useRef(false);

    // Author-configurable display name shown in the native header bar
    const [currentFormDisplayName, setCurrentFormDisplayName] = useState<
      string | null
    >(null);

    // Add state to track closing process and prevent multiple close attempts
    const [isClosing, setIsClosing] = useState(false);
    const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

    // Formplayer is an app-owned build shared by every profile; it is never
    // copied into a profile directory. On iOS the WebView must read both the
    // bundle and this profile's attachments under Documents, so it is granted
    // the common ancestor. Profiles are not a security boundary for app code.
    const formplayerUri =
      Platform.OS === 'android'
        ? 'file:///android_asset/formplayer_dist/index.html'
        : `file://${RNFS.MainBundlePath}/formplayer_dist/index.html`;
    const formplayerReadAccessUrl =
      Platform.OS === 'ios'
        ? `file://${commonAncestor(RNFS.MainBundlePath, RNFS.DocumentDirectoryPath)}`
        : undefined;

    // Create a debounced close handler to prevent multiple rapid close attempts
    const performClose = useCallback(async () => {
      // Prevent multiple close attempts
      if (isClosing || isSubmitting) return;

      setIsClosing(true);
      // Keep the document mounted until a root draft is durably saved. Nested
      // sessions return data only, and successful submits must not recreate drafts.
      if (!formSubmitted && currentFormType && !subObservationModeRef.current) {
        try {
          await flushDraftAsync();
        } catch (error) {
          console.error(
            'Cannot close Formplayer before saving its draft:',
            error,
          );
          setIsClosing(false);
          showConfirm({
            title: t('common.error'),
            message: t('formplayer.saveFailed'),
            buttons: [
              { text: t('common.ok'), variant: 'primary', onPress: () => {} },
            ],
          });
          return;
        }
      }

      // Clear any existing timeout
      if (closeTimeoutRef.current) {
        clearTimeout(closeTimeoutRef.current);
      }

      // Only resolve with cancelled status if form hasn't been successfully submitted AND we have a valid operation
      if (!formSubmitted && currentOperationId) {
        const completionResult: FormCompletionResult = {
          status: 'cancelled',
          formType: currentFormType || 'unknown',
          message: 'Form was closed without submission',
        };

        resolveFormOperation(currentOperationId, completionResult);
        // Clear the operation ID immediately to prevent double resolution
        setCurrentOperationId(null);
      } else if (!formSubmitted && currentFormType) {
        const completionResult: FormCompletionResult = {
          status: 'cancelled',
          formType: currentFormType,
          message: 'Form was closed without submission',
        };

        resolveFormOperationByType(currentFormType, completionResult);
      }

      geolocationService.endObservationSession();
      onClose();

      // Reset closing state after a short delay to prevent rapid re-opening issues
      closeTimeoutRef.current = setTimeout(() => {
        setIsClosing(false);
      }, 500);
    }, [
      isClosing,
      isSubmitting,
      onClose,
      currentOperationId,
      currentFormType,
      formSubmitted,
      flushDraftAsync,
      showConfirm,
      t,
    ]);

    const handleClose = useCallback(() => {
      if (isClosing || isSubmitting) return;

      if (webViewRef.current?.canGoBack?.()) {
        webViewRef.current.goBack();
        return;
      }

      showConfirm({
        title: t('formplayer.closeTitle'),
        message: t('formplayer.closeMessage'),
        buttons: [
          { text: t('common.cancel'), variant: 'tertiary', onPress: () => {} },
          { text: t('common.close'), variant: 'danger', onPress: performClose },
        ],
      });
    }, [isClosing, isSubmitting, performClose, showConfirm, t]);

    // Removed closeFormplayer event listener - now using direct promise-based submission handling

    // Cleanup timeout on unmount
    useEffect(() => {
      return () => {
        if (closeTimeoutRef.current) {
          clearTimeout(closeTimeoutRef.current);
        }
        geolocationService.endObservationSession();
      };
    }, []);

    // Track WebView ready state
    const [webViewReady, setWebViewReady] = useState(false);
    const previousIsActiveRef = useRef(isActive);

    // Handle WebView load complete
    const handleWebViewLoad = () => {
      setWebViewReady(true);
      // WebView is now ready to receive form initialization
    };

    // Initialize a form with the given form type and optional existing data
    const initializeForm = async (
      formType: FormSpec,
      params: Record<string, unknown> | null,
      observationId: string | null,
      existingObservationData: Record<string, unknown> | null,
      operationId: string | null,
      subObservationMode: boolean = false,
      skipFinalize: boolean = false,
      skipDraftSelection: boolean = false,
    ) =>
      profileActivity.run('Formplayer initialize', async () => {
        // Check if WebView is ready, if not log a warning (retry logic will handle it)
        if (!webViewReady) {
          console.warn(
            '[FormplayerModal] WebView not ready yet, form init will be queued by message handler',
          );
        }

        subObservationModeRef.current = subObservationMode;
        skipFinalizeRef.current = skipFinalize;

        // GPS session: skip for sub-observations (data is not persisted with geo).
        if (!subObservationMode) {
          geolocationService.beginObservationSession();
        }

        setCurrentFormType(formType.id);
        setCurrentObservationId(observationId);

        // Resolve display name: ui schema headerTitle > schema title > form spec name
        const uiSchemaObj = formType.uiSchema as
          | Record<string, unknown>
          | undefined;
        const schemaObj = formType.schema as
          | Record<string, unknown>
          | undefined;
        const uiOptions = uiSchemaObj?.options as
          | Record<string, unknown>
          | undefined;
        const displayName =
          (uiOptions?.headerTitle as string) ||
          (schemaObj?.title as string) ||
          formType.name;
        setCurrentFormDisplayName(displayName);
        setCurrentObservationData(existingObservationData);
        setCurrentParams(params);
        setCurrentOperationId(operationId);
        setFormSubmitted(false); // Reset submission flag for new form

        // Forward the custom app's theme colors to the Formplayer WebView so
        // that form UI elements (buttons, inputs, headers) match the branding.
        const isDark = resolvedMode === 'dark';

        const sessionLocale =
          params && typeof params.locale === 'string' ? params.locale : null;
        const resolvedLocale =
          await localeSettingsService.resolveActiveLocale(sessionLocale);

        const sessionFormLocale =
          params && typeof params.formLocale === 'string'
            ? params.formLocale
            : null;
        const savedFormLocale =
          existingObservationData &&
          typeof existingObservationData.formLocale === 'string'
            ? existingObservationData.formLocale
            : null;
        const resolvedFormLocale =
          await formLocaleSettingsService.resolveActiveFormLocale(
            sessionFormLocale,
            savedFormLocale,
          );

        const formParams = {
          theme: 'default',
          darkMode: isDark,
          themeColors, // ← custom app palette forwarded to Formplayer
          ...params,
          locale: resolvedLocale,
          formLocale: resolvedFormLocale,
          profileId,
        };

        // Load extensions for this form
        const customAppPath = profilePaths.app();
        let extensions = undefined;
        try {
          const extensionService = ExtensionService.getInstance();
          const mergedExtensions =
            await extensionService.getCustomAppExtensions(
              customAppPath,
              formType.id,
            );

          // Note: getDynamicChoiceList is provided by formplayer's builtinExtensions.
          // Do NOT add a fallback pointing to queryHelpers.js - that file may not exist
          // in the app bundle, and dynamic import of file:// in WebView often fails.
          if (!mergedExtensions.functions) {
            mergedExtensions.functions = {};
          }

          // Convert to formplayer format
          if (
            mergedExtensions.definitions ||
            mergedExtensions.functions ||
            mergedExtensions.renderers
          ) {
            extensions = {
              definitions: mergedExtensions.definitions,
              functions: Object.entries(mergedExtensions.functions).reduce(
                (acc, [key, func]) => {
                  // Remove leading slash from module path to avoid double-slash in URL
                  const modulePath = (func.module || '').replace(/^\/+/, '');
                  acc[key] = {
                    name: func.name,
                    module: modulePath,
                    export: func.export,
                  };
                  return acc;
                },
                {} as Record<string, unknown>,
              ),
              renderers: Object.entries(mergedExtensions.renderers).reduce(
                (acc, [key, renderer]) => {
                  // Remove leading slash from module path to avoid double-slash in URL
                  const modulePath = (renderer.module || '').replace(
                    /^\/+/,
                    '',
                  );
                  acc[key] = {
                    name: renderer.name,
                    format: renderer.format,
                    module: modulePath,
                    tester: renderer.tester,
                    renderer: renderer.renderer,
                  };
                  return acc;
                },
                {} as Record<string, unknown>,
              ),
              // Base path for loading modules (file:// URL for WebView)
              // Match ExtensionService's profile-local app/forms lookup.
              basePath: `file://${customAppPath}/forms`,
            };
          }
        } catch (error) {
          console.warn('Failed to load extensions:', error);
          // Continue without extensions - not a fatal error
        }

        if (!formType.schema) {
          console.error(
            'FormplayerModal: formType.schema is null/undefined for form:',
            formType.id,
          );
          showConfirm({
            title: t('formplayer.formErrorTitle'),
            message: t('formplayer.noSchemaMessage', { name: formType.name }),
            buttons: [
              { text: t('common.ok'), variant: 'primary', onPress: () => {} },
            ],
          });
          return;
        }

        // Scan custom question types and validators, read their source code
        // Check app/question_types and app/validators (bundle root) and app/forms/question_types, app/forms/validators (legacy)
        let customQuestionTypes = undefined;
        try {
          const qtDirs = [
            `${customAppPath}/question_types`,
            `${customAppPath}/forms/question_types`,
            `${profilePaths.forms()}/question_types`,
          ];

          const validatorDirs = [
            `${customAppPath}/validators`,
            `${customAppPath}/forms/validators`,
            `${profilePaths.forms()}/validators`,
          ];

          const custom_types: Record<string, { source: string }> = {};
          const validators: Record<string, { source: string }> = {};

          // Scan custom question types
          for (const qtDir of qtDirs) {
            const qtDirExists = await RNFS.exists(qtDir);
            if (!qtDirExists) {
              continue;
            }

            const folders = await RNFS.readDir(qtDir);

            for (const folder of folders) {
              if (folder.isDirectory() && !custom_types[folder.name]) {
                // Try renderer.js first, then index.js as fallback
                const rendererPath = `${folder.path}/renderer.js`;
                const indexPath = `${folder.path}/index.js`;
                const hasRenderer = await RNFS.exists(rendererPath);
                const hasIndex = !hasRenderer && (await RNFS.exists(indexPath));
                const jsPath = hasRenderer
                  ? rendererPath
                  : hasIndex
                    ? indexPath
                    : null;

                if (jsPath) {
                  // Read the source code so the WebView can evaluate it directly
                  const source = await RNFS.readFile(jsPath, 'utf8');
                  custom_types[folder.name] = { source };
                } else {
                  console.warn(
                    `[FormplayerModal] Skipping "${folder.name}": no renderer.js or index.js found`,
                  );
                }
              }
            }
          }

          // Scan custom validators
          for (const validatorDir of validatorDirs) {
            const validatorDirExists = await RNFS.exists(validatorDir);
            if (!validatorDirExists) {
              continue;
            }

            const folders = await RNFS.readDir(validatorDir);

            for (const folder of folders) {
              if (folder.isDirectory() && !validators[folder.name]) {
                // Validators use index.js (standard convention)
                const indexPath = `${folder.path}/index.js`;
                const hasIndex = await RNFS.exists(indexPath);

                if (hasIndex) {
                  // Read the source code so the WebView can evaluate it directly
                  const source = await RNFS.readFile(indexPath, 'utf8');
                  validators[folder.name] = { source };
                } else {
                  console.warn(
                    `[FormplayerModal] Skipping validator "${folder.name}": no index.js found`,
                  );
                }
              }
            }
          }

          // Build manifest with both question types and validators
          if (
            Object.keys(custom_types).length > 0 ||
            Object.keys(validators).length > 0
          ) {
            customQuestionTypes = {
              custom_types:
                Object.keys(custom_types).length > 0 ? custom_types : undefined,
              validators:
                Object.keys(validators).length > 0 ? validators : undefined,
            };
          } else {
            console.warn(
              '[FormplayerModal] No custom question types or validators found in any path',
            );
          }
        } catch (error) {
          console.warn(
            'Failed to scan custom question types and validators:',
            error,
          );
        }

        const formInitData = {
          formType: formType.id,
          observationId: observationId,
          params: formParams,
          savedData: existingObservationData || {},
          formSchema: formType.schema,
          uiSchema: formType.uiSchema ?? {},
          extensions,
          customQuestionTypes,
          subObservationMode,
          skipFinalize,
          skipDraftSelection,
          linkedFormSpecs: await buildLinkedFormSpecs(formType.schema),
        } as FormInitData;

        if (!webViewRef.current) {
          console.warn(
            'FormplayerModal: WebView ref is not available when trying to initialize form',
          );
          return;
        }

        try {
          await webViewRef.current.sendFormInit(formInitData);
        } catch (error) {
          console.error(
            'FormplayerModal: Error sending form init data:',
            error,
          );
          showConfirm({
            title: t('common.error'),
            message: t('formplayer.initFailed'),
            buttons: [
              { text: t('common.ok'), variant: 'primary', onPress: () => {} },
            ],
          });
        }
      });

    // Handle form submission directly (called by WebView message handler)
    const handleSubmission = useCallback(
      async (data: {
        formType: string;
        finalData: Record<string, unknown>;
        observationId?: string | null;
      }): Promise<string> =>
        profileActivity.run('Formplayer submit', async () => {
          const {
            formType,
            finalData,
            observationId: observationIdFromBridge,
          } = data;
          const effectiveObservationId =
            observationIdFromBridge ?? currentObservationId;

          // Set submitting state
          setIsSubmitting(true);

          try {
            const subObservationMode = subObservationModeRef.current;
            const localRepo = subObservationMode
              ? null
              : databaseService.getLocalRepo();
            if (!subObservationMode && !localRepo) {
              throw new Error('Database repository not available');
            }

            const persistResult = await persistObservationWithAttachments(
              {
                formType,
                finalData,
                observationId: effectiveObservationId,
                subObservationMode,
              },
              {
                saveObservation: args =>
                  localRepo
                    ? localRepo.saveObservation(args)
                    : Promise.resolve(null),
                updateObservation: args =>
                  localRepo
                    ? localRepo.updateObservation(args)
                    : Promise.resolve(false),
              },
            );

            const resultObservationId = persistResult.observationId;
            const resultFormData = persistResult.formData;

            // Mark form as successfully submitted
            setFormSubmitted(true);

            // Resolve the form operation with success result
            const completionResult: FormCompletionResult = {
              status: effectiveObservationId
                ? 'form_updated'
                : 'form_submitted',
              observationId: resultObservationId,
              formData: resultFormData,
              formType: formType,
            };

            if (currentOperationId) {
              resolveFormOperation(currentOperationId, completionResult);
              setCurrentOperationId(null);
            } else {
              resolveFormOperationByType(formType, completionResult);
            }

            if (subObservationModeRef.current && skipFinalizeRef.current) {
              setIsSubmitting(false);
              onClose();
              return resultObservationId;
            }

            const successMessage = effectiveObservationId
              ? t('formplayer.submitSuccessUpdated')
              : t('formplayer.submitSuccessSubmitted');
            showConfirm({
              title: t('common.success'),
              message: successMessage,
              buttons: [
                {
                  text: t('common.ok'),
                  variant: 'primary',
                  onPress: () => {
                    setIsSubmitting(false);
                    onClose();
                  },
                },
              ],
            });

            return resultObservationId;
          } catch (error) {
            console.error('FormplayerModal: Error in handleSubmission:', error);
            setIsSubmitting(false);

            // Resolve the form operation with error result
            const errorResult: FormCompletionResult = {
              status: 'error',
              formType: formType,
              message:
                error instanceof Error
                  ? error.message
                  : 'Unknown error occurred',
            };

            if (currentOperationId) {
              resolveFormOperation(currentOperationId, errorResult);
            } else {
              resolveFormOperationByType(formType, errorResult);
            }

            showConfirm({
              title: t('common.error'),
              message: t('formplayer.saveFailed'),
              buttons: [
                { text: t('common.ok'), variant: 'primary', onPress: () => {} },
              ],
            });
            throw error;
          }
        }),
      [currentObservationId, currentOperationId, onClose, showConfirm, t],
    );

    // Register/unregister modal with message handlers and reset form state.
    // Stacked modals (e.g. sub-observation child): parent stays visible but inactive — it must NOT
    // clear the global ref, or the child's submit would miss the active modal and fail or persist wrongly.
    useEffect(() => {
      if (visible && isActive) {
        setActiveFormplayerModal({ handleSubmission });
        return () => {
          clearActiveFormplayerModalIfMatches(handleSubmission);
        };
      }

      if (!visible) {
        const timeoutId = setTimeout(() => {
          setCurrentFormType(null);
          setCurrentFormDisplayName(null);
          setCurrentObservationId(null);
          setCurrentObservationData(null);
          setIsClosing(false); // Reset closing state when modal is fully closed
          setFormSubmitted(false); // Reset submission flag
          setWebViewReady(false); // Reset WebView ready state
          subObservationModeRef.current = false;
        }, 300); // Small delay to ensure modal is fully closed
        return () => clearTimeout(timeoutId);
      }

      return undefined;
    }, [visible, isActive, handleSubmission]);

    useEffect(() => {
      if (
        visible &&
        isActive &&
        webViewReady &&
        currentFormType &&
        previousIsActiveRef.current === false
      ) {
        webViewRef.current?.notifyReceiveFocus();
      }
      previousIsActiveRef.current = isActive;
    }, [visible, isActive, webViewReady, currentFormType]);

    useImperativeHandle(ref, () => ({
      initializeForm,
      handleSubmission,
      flushDraftAsync,
      flushDraft: () => {
        void flushDraftAsync().catch(error =>
          console.warn('Draft flush failed:', error),
        );
      },
    }));

    return (
      <Modal
        animationType="slide"
        transparent={false}
        visible={visible}
        onRequestClose={handleClose}
        presentationStyle="fullScreen"
        statusBarTranslucent={false}>
        <SafeAreaView style={shellStyle} edges={['top']}>
          <View
            style={[
              styles.container,
              { backgroundColor: themeColors.background as string },
            ]}>
            <View
              style={[
                styles.header,
                {
                  backgroundColor:
                    resolvedMode === 'dark'
                      ? (colors.neutral[900] as string)
                      : (colors.neutral[50] as string),
                  borderBottomColor: themeColors.divider as string,
                },
              ]}>
              <TouchableOpacity
                onPress={handleClose}
                style={[
                  styles.closeButton,
                  (isSubmitting || isClosing) && styles.disabledButton,
                ]}
                disabled={isSubmitting || isClosing}>
                <Icon
                  name="close"
                  size={24}
                  color={
                    isSubmitting || isClosing
                      ? colors.neutral[400]
                      : themeColors.onBackground
                  }
                />
              </TouchableOpacity>
              <Text
                style={[
                  styles.headerTitle,
                  { color: themeColors.onBackground },
                ]}
                numberOfLines={1}
                ellipsizeMode="tail">
                {currentFormDisplayName ||
                  (currentObservationId
                    ? 'Edit Observation'
                    : 'New Observation')}
              </Text>
            </View>

            <CustomAppWebView
              ref={webViewRef}
              appUrl={formplayerUri}
              iosReadAccessUrl={formplayerReadAccessUrl}
              appName="Formplayer"
              backgroundColor={themeColors.background as string}
              onLoadEndProp={handleWebViewLoad}
              onDraftFlushed={handleDraftFlushed}
            />

            {/* Loading overlay */}
            {isSubmitting && (
              <View style={styles.loadingOverlay}>
                <View style={styles.loadingContainer}>
                  <ActivityIndicator
                    size="large"
                    color={colors.semantic.info.ios}
                  />
                  <Text style={styles.loadingText}>
                    {t('formplayer.saving')}
                  </Text>
                </View>
              </View>
            )}
          </View>
        </SafeAreaView>
      </Modal>
    );
  },
);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.neutral.transparent,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    width: '100%',
    paddingLeft: 6,
    paddingRight: odeSpacing.sm,
    paddingVertical: 2,
    borderBottomWidth: odeBorderWidth.hairline,
    minHeight: odeFormplayerHeaderHeight,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderRadius: 0,
    overflow: 'visible',
  },
  headerTitle: {
    fontSize: odeTypography.bodySm,
    fontWeight: 'normal',
    marginLeft: 8,
    flex: 1,
    flexShrink: 1,
  },
  closeButton: {
    paddingVertical: 2,
    paddingHorizontal: 2,
  },
  disabledButton: {
    opacity: 0.5,
  },
  webview: {
    flex: 1,
  },
  loadingOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: colors.ui.background,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingContainer: {
    backgroundColor: colors.neutral.white,
    padding: 20,
    borderRadius: 10,
    alignItems: 'center',
    shadowColor: colors.neutral.black,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: colors.neutral[800],
  },
});

export default FormplayerModal;