App.tsx

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  Alert,
  Image,
  Linking,
  NativeModules,
  Platform,
  Pressable,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { WebView, type WebViewMessageEvent } from 'react-native-webview';
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';

import {
  addNativeSttListener,
  isNativeSttAvailable,
  setNativeSttAec,
  startNativeStt,
  stopNativeStt,
} from './src/nativeStt';

import {
  addNativeTtsListener,
  playNativeTts,
  stopNativeTts,
} from './src/nativeTts';
import {
  startNativeBrowserAuthSession,
  type NativeAuthProvider,
} from './src/nativeAuth';
import { validateRnApiNamespace } from './src/apiNamespace';

type RuntimeEnvMap = Record<string, string | undefined>;
type NativeRuntimeConfig = {
  webAppBaseUrl?: string;
  defaultWsUrl?: string;
  apiNamespace?: string;
  clientVersion?: string;
  clientBuild?: string;
  deviceLocaleTag?: string;
  devicePreferredLanguages?: string[];
};
type VersionPolicyAction = 'force_update' | 'recommend_update' | 'none';
type VersionGateState =
  | { status: 'checking' }
  | { status: 'ready' }
  | {
      status: 'force_update';
      updateUrl: string;
      title: string;
      message: string;
      updateButtonLabel: string;
      clientVersion: string;
      latestVersion: string;
    };
type VersionPolicyResponse = {
  action: VersionPolicyAction;
  platform?: string;
  policyPlatform?: string;
  locale?: string;
  updateUrl?: string;
  title?: string;
  message?: string;
  latestVersion?: string;
  clientVersion?: string;
  updateButtonLabel?: string;
  laterButtonLabel?: string;
};
type IOSSettingsManager = {
  settings?: {
    AppleLocale?: string;
    AppleLanguages?: string[];
  };
};
type AndroidI18nManager = {
  localeIdentifier?: string;
};

function readRuntimeEnvValue(keys: string[]): string {
  const env = (globalThis as { process?: { env?: RuntimeEnvMap } }).process?.env;
  if (!env) return '';

  for (const key of keys) {
    const value = env[key];
    if (typeof value === 'string' && value.trim().length > 0) {
      return value.trim();
    }
  }

  return '';
}

function readNativeRuntimeConfig(): NativeRuntimeConfig {
  const runtimeConfigModule = (NativeModules as {
    NativeRuntimeConfigModule?: {
      runtimeConfig?: NativeRuntimeConfig;
    };
    NativeSTTModule?: {
      runtimeConfig?: NativeRuntimeConfig;
    };
  }).NativeRuntimeConfigModule;
  const runtimeConfig = runtimeConfigModule?.runtimeConfig ?? (NativeModules.NativeSTTModule as
    | {
        runtimeConfig?: NativeRuntimeConfig;
      }
    | undefined)?.runtimeConfig;
  if (!runtimeConfig || typeof runtimeConfig !== 'object') {
    return {};
  }
  return runtimeConfig;
}

function normalizeConfiguredUrl(
  raw: string,
  allowedProtocols: string[],
  options?: { trimTrailingSlash?: boolean },
): string {
  if (!raw) return '';

  try {
    const parsed = new URL(raw);
    if (!allowedProtocols.includes(parsed.protocol)) return '';
    if (options?.trimTrailingSlash) {
      return raw.replace(/\/+$/, '');
    }
    return raw;
  } catch {
    return '';
  }
}

function resolveConfiguredUrl(
  keys: string[],
  allowedProtocols: string[],
  options?: { trimTrailingSlash?: boolean },
): string {
  return normalizeConfiguredUrl(readRuntimeEnvValue(keys), allowedProtocols, options);
}

function isLoopbackHost(host: string): boolean {
  const normalized = host.trim().toLowerCase();
  return normalized === '127.0.0.1' || normalized === 'localhost' || normalized === '::1';
}

function isLoopbackUrl(raw: string): boolean {
  if (!raw) return false;
  try {
    return isLoopbackHost(new URL(raw).hostname);
  } catch {
    return /(127\.0\.0\.1|localhost|::1)/i.test(raw);
  }
}

function formatWebViewLoadError(description: string, currentWebUrl: string): string {
  const normalizedDescription = description.trim() || 'webview_load_failed';
  if (!currentWebUrl || !isLoopbackUrl(currentWebUrl)) {
    return normalizedDescription;
  }
  return `${normalizedDescription} (현재 앱 URL이 ${currentWebUrl} 입니다. 실기기에서는 127.0.0.1/localhost에 접속할 수 없습니다. scripts/devbox profile --profile device 후 --device-app-env prod 또는 dev로 설치해 주세요.)`;
}

const RN_RUNTIME_OS = Platform.OS;
const NATIVE_RUNTIME_CONFIG = readNativeRuntimeConfig();
const WEB_APP_BASE_URL = resolveConfiguredUrl(
  ['NEXT_PUBLIC_SITE_URL', 'RN_WEB_APP_BASE_URL'],
  ['http:', 'https:'],
  { trimTrailingSlash: true },
) || normalizeConfiguredUrl(
  NATIVE_RUNTIME_CONFIG.webAppBaseUrl || '',
  ['http:', 'https:'],
  { trimTrailingSlash: true },
) || 'https://mingle-app-xi.vercel.app';
const DEFAULT_WS_URL = resolveConfiguredUrl(
  ['NEXT_PUBLIC_WS_URL', 'RN_DEFAULT_WS_URL'],
  ['ws:', 'wss:'],
) || normalizeConfiguredUrl(
  NATIVE_RUNTIME_CONFIG.defaultWsUrl || '',
  ['ws:', 'wss:'],
) || 'wss://mingle.up.railway.app';
const DEFAULT_SONIOX_MANUAL_FINALIZE_SILENCE_MS = 1000;
const MIN_SONIOX_MANUAL_FINALIZE_SILENCE_MS = 500;
const MAX_SONIOX_MANUAL_FINALIZE_SILENCE_MS = 3000;

function normalizeSonioxManualFinalizeSilenceMs(value: unknown): number {
  const parsed = typeof value === 'number' ? value : Number(value);
  if (!Number.isFinite(parsed)) {
    return DEFAULT_SONIOX_MANUAL_FINALIZE_SILENCE_MS;
  }
  return Math.max(
    MIN_SONIOX_MANUAL_FINALIZE_SILENCE_MS,
    Math.min(MAX_SONIOX_MANUAL_FINALIZE_SILENCE_MS, Math.floor(parsed)),
  );
}

const STARTUP_SPLASH_BACKGROUND = '#F3C35A';
const STARTUP_SPLASH_LOGO = require('./ios/mingle/Images.xcassets/LaunchLogo.imageset/launch-logo.png');
const {
  expectedApiNamespace: EXPECTED_API_NAMESPACE,
  configuredApiNamespace: CONFIGURED_API_NAMESPACE,
  validatedApiNamespace: VALIDATED_API_NAMESPACE,
} = validateRnApiNamespace({
  runtimeOs: RN_RUNTIME_OS,
  configuredApiNamespace: readRuntimeEnvValue(['NEXT_PUBLIC_API_NAMESPACE', 'RN_API_NAMESPACE'])
    || (NATIVE_RUNTIME_CONFIG.apiNamespace || '').trim(),
});

const missingRuntimeConfig: string[] = [];
if (!WEB_APP_BASE_URL) {
  missingRuntimeConfig.push('NEXT_PUBLIC_SITE_URL');
}
if (!DEFAULT_WS_URL) {
  missingRuntimeConfig.push('NEXT_PUBLIC_WS_URL');
}
if (EXPECTED_API_NAMESPACE && !CONFIGURED_API_NAMESPACE) {
  missingRuntimeConfig.push(`NEXT_PUBLIC_API_NAMESPACE (expected: ${EXPECTED_API_NAMESPACE})`);
} else if (EXPECTED_API_NAMESPACE && !VALIDATED_API_NAMESPACE) {
  missingRuntimeConfig.push(`NEXT_PUBLIC_API_NAMESPACE must match current platform namespace: ${EXPECTED_API_NAMESPACE}`);
}
const REQUIRED_CONFIG_ERROR = missingRuntimeConfig.length > 0
  ? `Missing or invalid env: ${missingRuntimeConfig.join(', ')}`
  : null;

const NATIVE_STT_EVENT = 'mingle:native-stt';
const NATIVE_TTS_EVENT = 'mingle:native-tts';
const NATIVE_UI_EVENT = 'mingle:native-ui';
const NATIVE_AUTH_EVENT = 'mingle:native-auth';
const IOS_SAFE_BROWSER_USER_AGENT = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1';
const WEB_SUPPORTED_LOCALES = new Set([
  'ko',
  'en',
  'ja',
  'zh-CN',
  'zh-TW',
  'fr',
  'de',
  'es',
  'pt',
  'it',
  'ru',
  'ar',
  'hi',
  'th',
  'vi',
]);
const WEB_LOCALE_ALIASES: Record<string, string> = {
  ko: 'ko',
  en: 'en',
  ja: 'ja',
  fr: 'fr',
  de: 'de',
  es: 'es',
  pt: 'pt',
  it: 'it',
  ru: 'ru',
  ar: 'ar',
  hi: 'hi',
  th: 'th',
  vi: 'vi',
  zh: 'zh-CN',
  'zh-cn': 'zh-CN',
  'zh-hans': 'zh-CN',
  'zh-sg': 'zh-CN',
  'zh-tw': 'zh-TW',
  'zh-hant': 'zh-TW',
  'zh-hk': 'zh-TW',
  'zh-mo': 'zh-TW',
};
const WEB_SUPPORTED_LOCALE_SEGMENTS = new Set(Array.from(WEB_SUPPORTED_LOCALES).map(locale => locale.toLowerCase()));

type SafeAreaPalette = {
  topColor: string;
  topOverlayColor: string;
  bottomColor: string;
  webViewColor: string;
  statusBarStyle: 'dark-content' | 'light-content';
  topEdgeMode: 'fill' | 'overlay' | 'transparent';
  bottomEdgeMode: 'fill' | 'transparent';
};

const DEFAULT_SAFE_AREA_PALETTE: SafeAreaPalette = {
  topColor: '#ffffff',
  topOverlayColor: 'transparent',
  bottomColor: '#ffffff',
  webViewColor: '#ffffff',
  statusBarStyle: 'dark-content',
  topEdgeMode: 'overlay',
  bottomEdgeMode: 'fill',
};

const AUTH_LOGIN_SAFE_AREA_PALETTE: SafeAreaPalette = {
  topColor: '#fbbc32',
  topOverlayColor: 'transparent',
  bottomColor: '#1c1c1e',
  webViewColor: '#1c1c1e',
  statusBarStyle: 'light-content',
  topEdgeMode: 'transparent',
  bottomEdgeMode: 'transparent',
};
type VersionPolicyLocale =
  | 'ko'
  | 'en'
  | 'ja'
  | 'zh-CN'
  | 'zh-TW'
  | 'fr'
  | 'de'
  | 'es'
  | 'pt'
  | 'it'
  | 'ru'
  | 'ar'
  | 'hi'
  | 'th'
  | 'vi';

const VERSION_POLICY_SUPPORTED_LOCALES = new Set<VersionPolicyLocale>([
  'ko',
  'en',
  'ja',
  'zh-CN',
  'zh-TW',
  'fr',
  'de',
  'es',
  'pt',
  'it',
  'ru',
  'ar',
  'hi',
  'th',
  'vi',
]);
const IOS_VERSION_POLICY_TIMEOUT_MS = 8000;
const VERSION_POLICY_LOCALE_ALIASES: Record<string, VersionPolicyLocale> = {
  ko: 'ko',
  en: 'en',
  ja: 'ja',
  fr: 'fr',
  de: 'de',
  es: 'es',
  pt: 'pt',
  it: 'it',
  ru: 'ru',
  ar: 'ar',
  hi: 'hi',
  th: 'th',
  vi: 'vi',
  zh: 'zh-CN',
  'zh-cn': 'zh-CN',
  'zh-hans': 'zh-CN',
  'zh-sg': 'zh-CN',
  'zh-tw': 'zh-TW',
  'zh-hant': 'zh-TW',
  'zh-hk': 'zh-TW',
  'zh-mo': 'zh-TW',
};
const VERSION_POLICY_FALLBACK_COPY: Record<VersionPolicyLocale, {
  checkingTitle: string;
  checkingMessage: string;
  forceTitle: string;
  forceMessage: string;
  recommendTitle: string;
  recommendMessage: string;
  updateLabel: string;
  laterLabel: string;
  updateNowA11y: string;
  webViewLoadFailedTitle: string;
  unknownVersionLabel: string;
}> = {
  ko: {
    checkingTitle: '버전 확인 중',
    checkingMessage: '최신 업데이트 정책을 확인하고 있습니다.',
    forceTitle: '업데이트 필요',
    forceMessage: '현재 버전은 더 이상 지원되지 않습니다. 최신 버전으로 업데이트해 주세요.',
    recommendTitle: '업데이트 권장',
    recommendMessage: '새 버전 업데이트를 권장합니다.',
    updateLabel: '업데이트',
    laterLabel: '나중에',
    updateNowA11y: '지금 업데이트',
    webViewLoadFailedTitle: 'WebView 로드 실패',
    unknownVersionLabel: '알 수 없음',
  },
  en: {
    checkingTitle: 'Checking version',
    checkingMessage: 'Checking the latest update policy.',
    forceTitle: 'Update Required',
    forceMessage: 'This version is no longer supported. Please update to the latest version.',
    recommendTitle: 'Update Recommended',
    recommendMessage: 'A new version is available. We recommend updating for a better experience.',
    updateLabel: 'Update',
    laterLabel: 'Later',
    updateNowA11y: 'Update now',
    webViewLoadFailedTitle: 'WebView Load Failed',
    unknownVersionLabel: 'unknown',
  },
  ja: {
    checkingTitle: 'バージョン確認中',
    checkingMessage: '最新のアップデートポリシーを確認しています。',
    forceTitle: 'アップデートが必要です',
    forceMessage: 'このバージョンはサポートされていません。最新バージョンにアップデートしてください。',
    recommendTitle: 'アップデート推奨',
    recommendMessage: '新しいバージョンが利用可能です。アップデートをお勧めします。',
    updateLabel: 'アップデート',
    laterLabel: 'あとで',
    updateNowA11y: '今すぐアップデート',
    webViewLoadFailedTitle: 'WebView の読み込みに失敗しました',
    unknownVersionLabel: '不明',
  },
  'zh-CN': {
    checkingTitle: '正在检查版本',
    checkingMessage: '正在检查最新更新策略。',
    forceTitle: '更新必需',
    forceMessage: '当前版本已不再受支持。请更新到最新版本。',
    recommendTitle: '建议更新',
    recommendMessage: '新版本已发布，建议更新以获得更稳定的体验。',
    updateLabel: '更新',
    laterLabel: '稍后',
    updateNowA11y: '立即更新',
    webViewLoadFailedTitle: 'WebView 加载失败',
    unknownVersionLabel: '未知',
  },
  'zh-TW': {
    checkingTitle: '正在檢查版本',
    checkingMessage: '正在檢查最新更新政策。',
    forceTitle: '必須更新',
    forceMessage: '目前版本已不再支援。請更新至最新版本。',
    recommendTitle: '建議更新',
    recommendMessage: '新版本已推出，建議更新以獲得更穩定的體驗。',
    updateLabel: '更新',
    laterLabel: '稍後',
    updateNowA11y: '立即更新',
    webViewLoadFailedTitle: 'WebView 載入失敗',
    unknownVersionLabel: '未知',
  },
  fr: {
    checkingTitle: 'Vérification de la version',
    checkingMessage: 'Vérification de la politique de mise à jour la plus récente.',
    forceTitle: 'Mise à jour requise',
    forceMessage: 'Cette version n\'est plus prise en charge. Veuillez mettre à jour vers la dernière version.',
    recommendTitle: 'Mise à jour recommandée',
    recommendMessage: 'Une nouvelle version est disponible. Nous recommandons la mise à jour.',
    updateLabel: 'Mettre à jour',
    laterLabel: 'Plus tard',
    updateNowA11y: 'Mettre à jour maintenant',
    webViewLoadFailedTitle: 'Échec du chargement de WebView',
    unknownVersionLabel: 'inconnu',
  },
  de: {
    checkingTitle: 'Version wird überprüft',
    checkingMessage: 'Die neuesten Update-Richtlinien werden geprüft.',
    forceTitle: 'Update erforderlich',
    forceMessage: 'Diese Version wird nicht mehr unterstützt. Bitte aktualisieren Sie auf die neueste Version.',
    recommendTitle: 'Update empfohlen',
    recommendMessage: 'Eine neue Version ist verfügbar. Wir empfehlen ein Update.',
    updateLabel: 'Aktualisieren',
    laterLabel: 'Später',
    updateNowA11y: 'Jetzt aktualisieren',
    webViewLoadFailedTitle: 'WebView-Laden fehlgeschlagen',
    unknownVersionLabel: 'unbekannt',
  },
  es: {
    checkingTitle: 'Comprobando versión',
    checkingMessage: 'Estamos comprobando la política de actualización más reciente.',
    forceTitle: 'Actualización obligatoria',
    forceMessage: 'Esta versión ya no es compatible. Actualiza a la última versión.',
    recommendTitle: 'Actualización recomendada',
    recommendMessage: 'Hay una nueva versión disponible. Recomendamos actualizar.',
    updateLabel: 'Actualizar',
    laterLabel: 'Más tarde',
    updateNowA11y: 'Actualizar ahora',
    webViewLoadFailedTitle: 'Error al cargar WebView',
    unknownVersionLabel: 'desconocida',
  },
  pt: {
    checkingTitle: 'Verificando versão',
    checkingMessage: 'Estamos verificando a política de atualização mais recente.',
    forceTitle: 'Atualização obrigatória',
    forceMessage: 'Esta versão não é mais compatível. Atualize para a versão mais recente.',
    recommendTitle: 'Atualização recomendada',
    recommendMessage: 'Há uma nova versão disponível. Recomendamos atualizar.',
    updateLabel: 'Atualizar',
    laterLabel: 'Mais tarde',
    updateNowA11y: 'Atualizar agora',
    webViewLoadFailedTitle: 'Falha ao carregar o WebView',
    unknownVersionLabel: 'desconhecida',
  },
  it: {
    checkingTitle: 'Verifica versione in corso',
    checkingMessage: 'Stiamo verificando la policy di aggiornamento più recente.',
    forceTitle: 'Aggiornamento obbligatorio',
    forceMessage: 'Questa versione non è più supportata. Aggiorna all\'ultima versione.',
    recommendTitle: 'Aggiornamento consigliato',
    recommendMessage: 'È disponibile una nuova versione. Ti consigliamo di aggiornare.',
    updateLabel: 'Aggiorna',
    laterLabel: 'Più tardi',
    updateNowA11y: 'Aggiorna ora',
    webViewLoadFailedTitle: 'Caricamento WebView non riuscito',
    unknownVersionLabel: 'sconosciuta',
  },
  ru: {
    checkingTitle: 'Проверка версии',
    checkingMessage: 'Проверяем актуальную политику обновлений.',
    forceTitle: 'Требуется обновление',
    forceMessage: 'Эта версия больше не поддерживается. Обновите приложение до последней версии.',
    recommendTitle: 'Рекомендуется обновление',
    recommendMessage: 'Доступна новая версия. Рекомендуем обновить приложение.',
    updateLabel: 'Обновить',
    laterLabel: 'Позже',
    updateNowA11y: 'Обновить сейчас',
    webViewLoadFailedTitle: 'Не удалось загрузить WebView',
    unknownVersionLabel: 'неизвестно',
  },
  ar: {
    checkingTitle: 'جارٍ التحقق من الإصدار',
    checkingMessage: 'جارٍ التحقق من سياسة التحديث الأحدث.',
    forceTitle: 'التحديث مطلوب',
    forceMessage: 'هذا الإصدار لم يعد مدعومًا. يرجى التحديث إلى أحدث إصدار.',
    recommendTitle: 'يوصى بالتحديث',
    recommendMessage: 'يتوفر إصدار جديد. نوصي بالتحديث.',
    updateLabel: 'تحديث',
    laterLabel: 'لاحقًا',
    updateNowA11y: 'حدّث الآن',
    webViewLoadFailedTitle: 'فشل تحميل WebView',
    unknownVersionLabel: 'غير معروف',
  },
  hi: {
    checkingTitle: 'संस्करण जाँचा जा रहा है',
    checkingMessage: 'नवीनतम अपडेट नीति की जाँच की जा रही है।',
    forceTitle: 'अपडेट आवश्यक',
    forceMessage: 'यह संस्करण अब समर्थित नहीं है। कृपया नवीनतम संस्करण में अपडेट करें।',
    recommendTitle: 'अपडेट की अनुशंसा',
    recommendMessage: 'नया संस्करण उपलब्ध है। अपडेट करने की सलाह दी जाती है।',
    updateLabel: 'अपडेट करें',
    laterLabel: 'बाद में',
    updateNowA11y: 'अभी अपडेट करें',
    webViewLoadFailedTitle: 'WebView लोड विफल',
    unknownVersionLabel: 'अज्ञात',
  },
  th: {
    checkingTitle: 'กำลังตรวจสอบเวอร์ชัน',
    checkingMessage: 'กำลังตรวจสอบนโยบายอัปเดตล่าสุด',
    forceTitle: 'จำเป็นต้องอัปเดต',
    forceMessage: 'เวอร์ชันนี้ไม่รองรับแล้ว กรุณาอัปเดตเป็นเวอร์ชันล่าสุด',
    recommendTitle: 'แนะนำให้อัปเดต',
    recommendMessage: 'มีเวอร์ชันใหม่พร้อมใช้งาน แนะนำให้อัปเดต',
    updateLabel: 'อัปเดต',
    laterLabel: 'ภายหลัง',
    updateNowA11y: 'อัปเดตตอนนี้',
    webViewLoadFailedTitle: 'โหลด WebView ไม่สำเร็จ',
    unknownVersionLabel: 'ไม่ทราบ',
  },
  vi: {
    checkingTitle: 'Đang kiểm tra phiên bản',
    checkingMessage: 'Đang kiểm tra chính sách cập nhật mới nhất.',
    forceTitle: 'Cần cập nhật',
    forceMessage: 'Phiên bản này không còn được hỗ trợ. Vui lòng cập nhật lên phiên bản mới nhất.',
    recommendTitle: 'Khuyến nghị cập nhật',
    recommendMessage: 'Đã có phiên bản mới. Chúng tôi khuyên bạn nên cập nhật.',
    updateLabel: 'Cập nhật',
    laterLabel: 'Để sau',
    updateNowA11y: 'Cập nhật ngay',
    webViewLoadFailedTitle: 'Tải WebView thất bại',
    unknownVersionLabel: 'không rõ',
  },
};

type NativeSttStartPayload = {
  wsUrl?: string;
  sttModel?: string;
  languages?: string[];
  aecEnabled?: boolean;
  sonioxLanguageHints?: string[];
  sonioxManualFinalizeSilenceMs?: number;
};

type NativeSttStopPayload = {
  pendingText?: string;
  pendingLanguage?: string;
};

type NativeSttCommand =
  | {
      type: 'native_stt_start';
      payload?: NativeSttStartPayload;
    }
  | {
      type: 'native_stt_stop';
      payload?: NativeSttStopPayload;
    };

type NativeTtsCommand =
  | {
      type: 'native_tts_play';
      payload: {
        utteranceId: string;
        playbackId?: string;
        audioBase64: string;
        contentType?: string;
      };
    }
  | {
      type: 'native_tts_stop';
      payload?: {
        reason?: string;
      };
    };

type NativeSttAecCommand = {
  type: 'native_stt_set_aec';
  payload: { enabled: boolean };
};

type NativeAuthStartCommand = {
  type: 'native_auth_start';
  payload: {
    provider: NativeAuthProvider;
    callbackUrl?: string;
    startUrl: string;
  };
};

type NativeAuthAckCommand = {
  type: 'native_auth_ack';
  payload?: {
    provider?: NativeAuthProvider;
    outcome?: 'success' | 'error';
    bridgeToken?: string;
  };
};

type NativeAuthResetCommand = {
  type: 'native_auth_reset';
};

type WebViewCommand =
  | NativeSttCommand
  | NativeTtsCommand
  | NativeSttAecCommand
  | NativeAuthStartCommand
  | NativeAuthAckCommand
  | NativeAuthResetCommand;

type NativeSttEvent =
  | { type: 'status'; status: string }
  | { type: 'message'; raw: string }
  | { type: 'error'; message: string }
  | { type: 'close'; reason: string };

type NativeUiEvent = {
  type: 'scroll_to_top';
  source: string;
};

type NativeAuthEvent =
  | {
      type: 'status';
      provider: NativeAuthProvider;
      status: 'opening';
    }
  | {
      type: 'success';
      provider: NativeAuthProvider;
      callbackUrl: string;
      bridgeToken: string;
    }
  | {
      type: 'error';
      provider: NativeAuthProvider;
      message: string;
    };
type RecommendUpdatePrompt = {
  title: string;
  message: string;
  updateUrl: string;
  updateLabel: string;
  laterLabel: string;
};
function normalizeClientVersion(raw: string): string {
  return raw.trim().replace(/^v/i, '');
}

function buildVersionPolicyUrl(baseUrl: string, apiNamespace: string): string {
  const normalizedNamespace = apiNamespace.trim().replace(/^\/+/, '').replace(/\/+$/, '');
  if (!normalizedNamespace) {
    return `${baseUrl}/api/client/version-policy`;
  }
  return `${baseUrl}/api/${normalizedNamespace}/client/version-policy`;
}

function resolveVersionPolicyClientPlatform(runtimeOs: string): 'ios' | 'android' {
  if (runtimeOs === 'android') return 'android';
  return 'ios';
}

function resolveIosTopTapOverlayHeight(rawStatusBarHeight: unknown): number {
  const numeric = typeof rawStatusBarHeight === 'number'
    ? rawStatusBarHeight
    : Number(rawStatusBarHeight);
  if (!Number.isFinite(numeric) || numeric <= 0) return 24;
  // iOS 상단 탭은 상태바/노치 영역 기준으로만 처리합니다.
  return Math.max(20, Math.min(64, Math.ceil(numeric)));
}

function resolveDeviceLocaleTag(): string {
  if (Platform.OS === 'ios') {
    const runtimeLocaleTag = NATIVE_RUNTIME_CONFIG.deviceLocaleTag;
    if (typeof runtimeLocaleTag === 'string' && runtimeLocaleTag.trim()) {
      return runtimeLocaleTag.trim();
    }

    const runtimePreferredLanguages = NATIVE_RUNTIME_CONFIG.devicePreferredLanguages;
    if (Array.isArray(runtimePreferredLanguages)) {
      for (const language of runtimePreferredLanguages) {
        if (typeof language === 'string' && language.trim()) {
          return language.trim();
        }
      }
    }

    const settingsManager = (NativeModules as {
      SettingsManager?: IOSSettingsManager;
    }).SettingsManager;
    const appleLanguages = settingsManager?.settings?.AppleLanguages;
    if (Array.isArray(appleLanguages)) {
      for (const language of appleLanguages) {
        if (typeof language === 'string' && language.trim()) {
          return language.trim();
        }
      }
    }

    // AppleLocale can reflect regional format settings rather than UI language.
    // Prefer AppleLanguages first so locale follows the device language priority.
    const appleLocale = settingsManager?.settings?.AppleLocale;
    if (typeof appleLocale === 'string' && appleLocale.trim()) {
      return appleLocale.trim();
    }
  }

  if (Platform.OS === 'android') {
    const localeIdentifier = (NativeModules.I18nManager as AndroidI18nManager | undefined)?.localeIdentifier;
    if (typeof localeIdentifier === 'string' && localeIdentifier.trim()) {
      return localeIdentifier.trim();
    }
  }

  try {
    return Intl.DateTimeFormat().resolvedOptions().locale || 'ko';
  } catch {
    return 'ko';
  }
}

function resolveWebLocaleSegment(rawLocaleTag: string): string {
  const normalized = rawLocaleTag.trim().replace(/_/g, '-').toLowerCase();
  if (!normalized) return 'ko';

  const directMatch = WEB_LOCALE_ALIASES[normalized];
  if (directMatch && WEB_SUPPORTED_LOCALES.has(directMatch)) {
    return directMatch;
  }

  if (normalized.startsWith('zh-')) {
    if (normalized.includes('-tw') || normalized.includes('-hant') || normalized.includes('-hk') || normalized.includes('-mo')) {
      return 'zh-TW';
    }
    return 'zh-CN';
  }

  const base = normalized.split('-')[0] || '';
  const baseMatch = WEB_LOCALE_ALIASES[base];
  if (baseMatch && WEB_SUPPORTED_LOCALES.has(baseMatch)) {
    return baseMatch;
  }

  return 'ko';
}

function resolveVersionPolicyLocale(rawLocaleTag: string): VersionPolicyLocale {
  const normalized = rawLocaleTag.trim().replace(/_/g, '-').toLowerCase();
  if (!normalized) return 'en';

  const directMatch = VERSION_POLICY_LOCALE_ALIASES[normalized];
  if (directMatch && VERSION_POLICY_SUPPORTED_LOCALES.has(directMatch)) {
    return directMatch;
  }

  if (normalized.startsWith('zh-')) {
    if (normalized.includes('-tw') || normalized.includes('-hant') || normalized.includes('-hk') || normalized.includes('-mo')) {
      return 'zh-TW';
    }
    return 'zh-CN';
  }

  const base = normalized.split('-')[0] || '';
  const baseMatch = VERSION_POLICY_LOCALE_ALIASES[base];
  if (baseMatch && VERSION_POLICY_SUPPORTED_LOCALES.has(baseMatch)) {
    return baseMatch;
  }

  return 'en';
}

function getVersionPolicyFallbackCopy(locale: VersionPolicyLocale) {
  return VERSION_POLICY_FALLBACK_COPY[locale];
}

function isAuthLikePathname(pathname: string): boolean {
  const segments = pathname
    .split('/')
    .map(segment => segment.trim())
    .filter(Boolean);
  if (segments.length === 0) return false;

  const first = segments[0].toLowerCase();
  if (segments[0] === 'auth') {
    return true;
  }
  if (segments.length >= 2 && WEB_SUPPORTED_LOCALE_SEGMENTS.has(first) && segments[1] === 'auth') {
    return true;
  }
  return false;
}

function isAllowedNativeAuthStartPath(pathname: string): boolean {
  const normalized = pathname.trim();
  if (!normalized.startsWith('/')) return false;
  if (normalized.startsWith('/api/native-auth/start')) return true;

  const segments = normalized
    .split('/')
    .map(segment => segment.trim())
    .filter(Boolean);
  if (segments.length !== 3) return false;

  const locale = segments[0]?.toLowerCase() || '';
  if (!WEB_SUPPORTED_LOCALE_SEGMENTS.has(locale)) return false;
  return segments[1] === 'auth' && segments[2] === 'native';
}

function resolveSafeAreaPaletteForUrl(rawUrl: string): SafeAreaPalette {
  const candidate = rawUrl.trim();
  if (!candidate) return DEFAULT_SAFE_AREA_PALETTE;

  try {
    const parsed = new URL(candidate);
    if (isAuthLikePathname(parsed.pathname)) {
      return AUTH_LOGIN_SAFE_AREA_PALETTE;
    }
  } catch {
    return DEFAULT_SAFE_AREA_PALETTE;
  }

  return DEFAULT_SAFE_AREA_PALETTE;
}

function resolveTrustedOrigin(rawUrl: string): string {
  const candidate = rawUrl.trim();
  if (!candidate) return '';
  try {
    const parsed = new URL(candidate);
    if (!parsed.host) return '';
    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return '';
    return parsed.origin;
  } catch {
    return '';
  }
}

function AppInner(): React.JSX.Element {
  const webViewRef = useRef<WebView>(null);
  const isPageReadyRef = useRef(false);
  const safeAreaInsets = useSafeAreaInsets();
  const nativeAvailable = useMemo(() => isNativeSttAvailable(), []);
  const [loadError, setLoadError] = useState<string | null>(REQUIRED_CONFIG_ERROR);
  const [versionGate, setVersionGate] = useState<VersionGateState>(() => (
    (Platform.OS === 'ios' || Platform.OS === 'android') && WEB_APP_BASE_URL && !REQUIRED_CONFIG_ERROR
      ? { status: 'checking' }
      : { status: 'ready' }
  ));
  const recommendPromptShownRef = useRef(false);
  const pendingRecommendPromptRef = useRef<RecommendUpdatePrompt | null>(null);
  const nativeStatusRef = useRef('idle');
  const currentTtsPlaybackRef = useRef<{ utteranceId: string; playbackId: string } | null>(null);
  const nativeAuthInFlightRef = useRef<NativeAuthProvider | null>(null);
  const pendingAuthEventRef = useRef<NativeAuthEvent | null>(null);
  const authDispatchRetryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const authDispatchRetryCountRef = useRef(0);
  const [iosTopTapOverlayHeight, setIosTopTapOverlayHeight] = useState(() => {
    if (Platform.OS !== 'ios') return 36;
    const manager = (NativeModules as {
      StatusBarManager?: { HEIGHT?: number };
    }).StatusBarManager;
    return resolveIosTopTapOverlayHeight(manager?.HEIGHT);
  });

  const deviceLocaleTag = useMemo(() => resolveDeviceLocaleTag(), []);
  const webLocale = useMemo(() => resolveWebLocaleSegment(deviceLocaleTag), [deviceLocaleTag]);
  const versionPolicyLocale = useMemo(() => resolveVersionPolicyLocale(deviceLocaleTag), [deviceLocaleTag]);
  const versionPolicyFallback = useMemo(
    () => getVersionPolicyFallbackCopy(versionPolicyLocale),
    [versionPolicyLocale],
  );
  const webUrl = useMemo(() => {
    if (!WEB_APP_BASE_URL || REQUIRED_CONFIG_ERROR) return '';
    const apiNamespaceQuery = VALIDATED_API_NAMESPACE
      ? `&apiNamespace=${encodeURIComponent(VALIDATED_API_NAMESPACE)}`
      : '';
    const debugParams = __DEV__ ? '&sttDebug=1&ttsDebug=1' : '';
    const nativeSttQuery = nativeAvailable ? '1' : '0';
    return `${WEB_APP_BASE_URL}/${webLocale}?nativeStt=${nativeSttQuery}&nativeUi=1&nativeAuth=1${apiNamespaceQuery}${debugParams}`;
  }, [nativeAvailable, webLocale]);
  const trustedNativeAuthOrigin = useMemo(() => resolveTrustedOrigin(WEB_APP_BASE_URL), []);
  const [safeAreaPalette, setSafeAreaPalette] = useState<SafeAreaPalette>(() => resolveSafeAreaPaletteForUrl(webUrl));
  const initialLoadSettledRef = useRef(false);
  const [startupSplashVisible, setStartupSplashVisible] = useState(() => Boolean(webUrl));

  const updateSafeAreaPalette = useCallback((candidateUrl?: string) => {
    const nextPalette = resolveSafeAreaPaletteForUrl(candidateUrl || webUrl);
    setSafeAreaPalette((current) => {
      if (
        current.topColor === nextPalette.topColor
        && current.topOverlayColor === nextPalette.topOverlayColor
        && current.bottomColor === nextPalette.bottomColor
        && current.webViewColor === nextPalette.webViewColor
        && current.statusBarStyle === nextPalette.statusBarStyle
        && current.topEdgeMode === nextPalette.topEdgeMode
        && current.bottomEdgeMode === nextPalette.bottomEdgeMode
      ) {
        return current;
      }
      return nextPalette;
    });
  }, [webUrl]);

  const iosTopSafeAreaHeight = Platform.OS === 'ios'
    ? (safeAreaInsets.top > 0 ? safeAreaInsets.top : iosTopTapOverlayHeight)
    : 0;
  const shouldRenderTopSafeAreaFill = Platform.OS === 'ios' && safeAreaPalette.topEdgeMode === 'fill';
  const shouldRenderTopSafeAreaOverlay = Platform.OS === 'ios' && safeAreaPalette.topEdgeMode === 'overlay';
  const shouldRenderBottomSafeAreaFill = Platform.OS === 'ios' && safeAreaPalette.bottomEdgeMode === 'fill';

  useEffect(() => {
    updateSafeAreaPalette(webUrl);
  }, [updateSafeAreaPalette, webUrl]);

  const presentRecommendPrompt = useCallback((prompt: RecommendUpdatePrompt) => {
    if (prompt.updateUrl) {
      Alert.alert(
        prompt.title,
        prompt.message,
        [
          { text: prompt.laterLabel, style: 'cancel' },
          {
            text: prompt.updateLabel,
            onPress: () => {
              void Linking.openURL(prompt.updateUrl);
            },
          },
        ],
      );
      return;
    }
    Alert.alert(prompt.title, prompt.message);
  }, []);

  const flushPendingRecommendPrompt = useCallback(() => {
    if (!isPageReadyRef.current) return;
    const pendingPrompt = pendingRecommendPromptRef.current;
    if (!pendingPrompt) return;
    pendingRecommendPromptRef.current = null;
    presentRecommendPrompt(pendingPrompt);
  }, [presentRecommendPrompt]);

  useEffect(() => {
    if ((Platform.OS !== 'ios' && Platform.OS !== 'android') || !WEB_APP_BASE_URL || REQUIRED_CONFIG_ERROR) {
      return;
    }

    let active = true;
    let settled = false;
    const abortController = typeof AbortController !== 'undefined' ? new AbortController() : null;
    const nativeRuntimeConfig = readNativeRuntimeConfig();
    const envClientVersion = readRuntimeEnvValue(['RN_CLIENT_VERSION']);
    const envClientBuild = readRuntimeEnvValue(['RN_CLIENT_BUILD']);
    const clientVersion = normalizeClientVersion(
      envClientVersion
      || nativeRuntimeConfig?.clientVersion
      || '',
    );
    const clientBuild = envClientBuild || nativeRuntimeConfig?.clientBuild || '';

    const fallbackToReady = (reason: string, details?: string) => {
      if (!active || settled) return;
      settled = true;
      if (__DEV__) {
        console.log(`[VersionPolicy] bypass (${reason})${details ? `: ${details}` : ''}`);
      }
      setVersionGate({ status: 'ready' });
    };

    const timeoutId = setTimeout(() => {
      abortController?.abort();
      fallbackToReady('timeout');
    }, IOS_VERSION_POLICY_TIMEOUT_MS);

    void fetch(buildVersionPolicyUrl(WEB_APP_BASE_URL, VALIDATED_API_NAMESPACE), {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      signal: abortController?.signal,
      body: JSON.stringify({
        platform: resolveVersionPolicyClientPlatform(Platform.OS),
        clientVersion,
        clientBuild,
        locale: versionPolicyLocale,
      }),
    })
      .then(async (response) => {
        if (!response.ok) {
          throw new Error(`version_policy_status_${response.status}`);
        }
        return response.json() as Promise<VersionPolicyResponse>;
      })
      .then((policy) => {
        if (!active || settled) return;

        if (policy.action === 'force_update') {
          settled = true;
          setVersionGate({
            status: 'force_update',
            updateUrl: typeof policy.updateUrl === 'string' ? policy.updateUrl : '',
            message: typeof policy.message === 'string' && policy.message.trim()
              ? policy.message.trim()
              : versionPolicyFallback.forceMessage,
            title: typeof policy.title === 'string' && policy.title.trim()
              ? policy.title.trim()
              : versionPolicyFallback.forceTitle,
            updateButtonLabel: typeof policy.updateButtonLabel === 'string' && policy.updateButtonLabel.trim()
              ? policy.updateButtonLabel.trim()
              : versionPolicyFallback.updateLabel,
            clientVersion: typeof policy.clientVersion === 'string' ? policy.clientVersion : clientVersion,
            latestVersion: typeof policy.latestVersion === 'string' ? policy.latestVersion : '',
          });
          return;
        }

        settled = true;
        setVersionGate({ status: 'ready' });
        if (policy.action === 'recommend_update' && !recommendPromptShownRef.current) {
          recommendPromptShownRef.current = true;
          const updateUrl = typeof policy.updateUrl === 'string' ? policy.updateUrl : '';
          const promptTitle = typeof policy.title === 'string' && policy.title.trim()
            ? policy.title.trim()
            : versionPolicyFallback.recommendTitle;
          const promptMessage = typeof policy.message === 'string' && policy.message.trim()
            ? policy.message.trim()
            : versionPolicyFallback.recommendMessage;
          const updateLabel = typeof policy.updateButtonLabel === 'string' && policy.updateButtonLabel.trim()
            ? policy.updateButtonLabel.trim()
            : versionPolicyFallback.updateLabel;
          const laterLabel = typeof policy.laterButtonLabel === 'string' && policy.laterButtonLabel.trim()
            ? policy.laterButtonLabel.trim()
            : versionPolicyFallback.laterLabel;

          const prompt = {
            title: promptTitle,
            message: promptMessage,
            updateUrl,
            updateLabel,
            laterLabel,
          };

          if (isPageReadyRef.current) {
            presentRecommendPrompt(prompt);
          } else {
            pendingRecommendPromptRef.current = prompt;
          }
        }
      })
      .catch((error: unknown) => {
        const message = error instanceof Error ? error.message : String(error);
        fallbackToReady('error', message);
      })
      .finally(() => {
        clearTimeout(timeoutId);
      });

    return () => {
      active = false;
      clearTimeout(timeoutId);
      abortController?.abort();
      pendingRecommendPromptRef.current = null;
    };
  }, [presentRecommendPrompt, versionPolicyFallback, versionPolicyLocale]);

  const handleForceUpdatePress = useCallback(() => {
    if (versionGate.status !== 'force_update') return;
    const updateUrl = versionGate.updateUrl.trim();
    if (!updateUrl) return;
    void Linking.openURL(updateUrl);
  }, [versionGate]);

  const emitToWeb = useCallback((payload: NativeSttEvent) => {
    if (!isPageReadyRef.current) return;
    const serialized = JSON.stringify(payload);
    if (__DEV__) {
      const preview = payload.type === 'message'
        ? `message(${(payload as { raw?: string }).raw?.slice(0, 80) ?? ''})`
        : `${payload.type}(${JSON.stringify(payload).slice(0, 80)})`;
      console.log(`[NativeSTT→Web] ${preview}`);
    }
    const script = `window.dispatchEvent(new CustomEvent(${JSON.stringify(NATIVE_STT_EVENT)}, { detail: ${serialized} })); true;`;
    webViewRef.current?.injectJavaScript(script);
  }, []);

  const emitTtsToWeb = useCallback((payload: Record<string, unknown>) => {
    if (!isPageReadyRef.current) return;
    const serialized = JSON.stringify(payload);
    if (__DEV__) {
      console.log(`[NativeTTS→Web] ${JSON.stringify(payload).slice(0, 120)}`);
    }
    const script = `window.dispatchEvent(new CustomEvent(${JSON.stringify(NATIVE_TTS_EVENT)}, { detail: ${serialized} })); true;`;
    webViewRef.current?.injectJavaScript(script);
  }, []);

  const emitUiToWeb = useCallback((payload: NativeUiEvent) => {
    if (!isPageReadyRef.current) return;
    const serialized = JSON.stringify(payload);
    if (__DEV__) {
      console.log(`[NativeUI→Web] ${JSON.stringify(payload).slice(0, 120)}`);
    }
    const script = `window.dispatchEvent(new CustomEvent(${JSON.stringify(NATIVE_UI_EVENT)}, { detail: ${serialized} })); true;`;
    webViewRef.current?.injectJavaScript(script);
  }, []);

  const dispatchAuthToWeb = useCallback((payload: NativeAuthEvent) => {
    const serialized = JSON.stringify(payload);
    if (__DEV__) {
      console.log(`[NativeAuth→Web] ${JSON.stringify(payload).slice(0, 160)}`);
    }
    const script = `window.__MINGLE_LAST_NATIVE_AUTH_EVENT = ${serialized}; window.dispatchEvent(new CustomEvent(${JSON.stringify(NATIVE_AUTH_EVENT)}, { detail: ${serialized} })); true;`;
    webViewRef.current?.injectJavaScript(script);
  }, []);

  const clearAuthDispatchRetryTimer = useCallback(() => {
    if (authDispatchRetryTimerRef.current) {
      clearTimeout(authDispatchRetryTimerRef.current);
      authDispatchRetryTimerRef.current = null;
    }
  }, []);

  const scheduleAuthDispatchRetry = useCallback((payload: NativeAuthEvent) => {
    if (payload.type === 'status') return;
    clearAuthDispatchRetryTimer();

    authDispatchRetryTimerRef.current = setTimeout(() => {
      const pending = pendingAuthEventRef.current;
      if (!pending || pending.type === 'status') return;
      if (pending.provider !== payload.provider) return;
      if (pending.type !== payload.type) return;
      if (pending.type === 'success' && payload.type === 'success' && pending.bridgeToken !== payload.bridgeToken) {
        return;
      }
      if (authDispatchRetryCountRef.current >= 20) return;

      if (!isPageReadyRef.current || !webViewRef.current) {
        scheduleAuthDispatchRetry(payload);
        return;
      }

      authDispatchRetryCountRef.current += 1;
      dispatchAuthToWeb(pending);
      scheduleAuthDispatchRetry(payload);
    }, 500);
  }, [clearAuthDispatchRetryTimer, dispatchAuthToWeb]);

  const emitAuthToWeb = useCallback((payload: NativeAuthEvent) => {
    if (payload.type !== 'status') {
      pendingAuthEventRef.current = payload;
      authDispatchRetryCountRef.current = 0;
    }

    if (!isPageReadyRef.current) {
      if (__DEV__) {
        console.log(`[NativeAuth→Web] queued (page not ready) ${JSON.stringify(payload).slice(0, 160)}`);
      }
      if (payload.type !== 'status') {
        scheduleAuthDispatchRetry(payload);
      }
      return;
    }
    dispatchAuthToWeb(payload);
    if (payload.type !== 'status') {
      scheduleAuthDispatchRetry(payload);
    }
  }, [dispatchAuthToWeb, scheduleAuthDispatchRetry]);

  const flushPendingAuthToWeb = useCallback(() => {
    if (!isPageReadyRef.current) return;
    const pending = pendingAuthEventRef.current;
    if (!pending) return;
    dispatchAuthToWeb(pending);
    if (pending.type !== 'status') {
      scheduleAuthDispatchRetry(pending);
    }
  }, [dispatchAuthToWeb, scheduleAuthDispatchRetry]);

  useEffect(() => {
    return () => {
      clearAuthDispatchRetryTimer();
    };
  }, [clearAuthDispatchRetryTimer]);

  const resolveCurrentTtsIdentity = useCallback((event?: { utteranceId?: string; playbackId?: string }) => {
    const active = currentTtsPlaybackRef.current;
    const eventPlaybackId = typeof event?.playbackId === 'string' ? event.playbackId : '';
    const eventUtteranceId = typeof event?.utteranceId === 'string' ? event.utteranceId : '';
    const playbackId = eventPlaybackId || active?.playbackId || '';
    const utteranceId = eventUtteranceId || active?.utteranceId || '';

    if (active) {
      if (playbackId && playbackId === active.playbackId) {
        currentTtsPlaybackRef.current = null;
      } else if (!playbackId && utteranceId && utteranceId === active.utteranceId) {
        currentTtsPlaybackRef.current = null;
      } else if (!playbackId && !utteranceId) {
        currentTtsPlaybackRef.current = null;
      }
    }

    return { utteranceId, playbackId };
  }, []);

  const handleNativeStart = useCallback(async (payload?: NativeSttStartPayload) => {
    if (!nativeAvailable) {
      emitToWeb({ type: 'error', message: 'native_stt_unavailable' });
      return;
    }

    const payloadWsUrl = typeof payload?.wsUrl === 'string' ? payload.wsUrl.trim() : '';
    if (!payloadWsUrl && !DEFAULT_WS_URL) {
      emitToWeb({ type: 'error', message: 'missing_ws_url_env(NEXT_PUBLIC_WS_URL)' });
      return;
    }

    const wsUrl = payloadWsUrl
      ? payloadWsUrl
      : DEFAULT_WS_URL;
    const sttModel = typeof payload?.sttModel === 'string' && payload.sttModel.trim()
      ? payload.sttModel.trim()
      : undefined;
    const languages = Array.isArray(payload?.languages)
      ? payload.languages
        .filter((language): language is string => typeof language === 'string')
        .map(language => language.trim())
        .filter(Boolean)
      : [];
    const aecEnabled = payload?.aecEnabled === true;
    const sonioxLanguageHints = Array.isArray(payload?.sonioxLanguageHints)
      ? payload.sonioxLanguageHints
        .filter((language): language is string => typeof language === 'string')
        .map(language => language.trim())
        .filter(Boolean)
      : [];
    const sonioxManualFinalizeSilenceMs = normalizeSonioxManualFinalizeSilenceMs(
      payload?.sonioxManualFinalizeSilenceMs,
    );

    try {
      nativeStatusRef.current = 'starting';
      await startNativeStt({
        wsUrl,
        sttModel,
        languages,
        aecEnabled,
        sonioxLanguageHints,
        sonioxManualFinalizeSilenceMs,
      });
      nativeStatusRef.current = 'running';
    } catch (error: unknown) {
      const message = error instanceof Error ? error.message : String(error);
      nativeStatusRef.current = 'failed';
      emitToWeb({ type: 'error', message });
    }
  }, [emitToWeb, nativeAvailable]);

  const handleNativeStop = useCallback(async (payload?: NativeSttStopPayload) => {
    try {
      await stopNativeStt({
        pendingText: typeof payload?.pendingText === 'string' ? payload.pendingText : '',
        pendingLanguage: typeof payload?.pendingLanguage === 'string' ? payload.pendingLanguage : 'unknown',
      });
      nativeStatusRef.current = 'stopped';
    } catch (error: unknown) {
      const message = error instanceof Error ? error.message : String(error);
      emitToWeb({ type: 'error', message });
    }
  }, [emitToWeb]);

  const handleNativeAuthStart = useCallback(async (payload?: {
    provider?: NativeAuthProvider;
    callbackUrl?: string;
    startUrl?: string;
  }) => {
    const provider = payload?.provider === 'google' || payload?.provider === 'apple'
      ? payload.provider
      : null;
    if (!provider) {
      return;
    }

    if (nativeAuthInFlightRef.current) {
      emitAuthToWeb({
        type: 'error',
        provider,
        message: 'native_auth_already_in_flight',
      });
      return;
    }

    const startUrl = typeof payload?.startUrl === 'string' ? payload.startUrl.trim() : '';
    if (!startUrl) {
      emitAuthToWeb({
        type: 'error',
        provider,
        message: 'native_auth_missing_start_url',
      });
      return;
    }
    if (!trustedNativeAuthOrigin) {
      emitAuthToWeb({
        type: 'error',
        provider,
        message: 'native_auth_untrusted_origin_unavailable',
      });
      return;
    }
    let parsedStartUrl: URL;
    try {
      parsedStartUrl = new URL(startUrl);
    } catch {
      emitAuthToWeb({
        type: 'error',
        provider,
        message: 'native_auth_invalid_start_url',
      });
      return;
    }
    if (parsedStartUrl.protocol !== 'http:' && parsedStartUrl.protocol !== 'https:') {
      emitAuthToWeb({
        type: 'error',
        provider,
        message: 'native_auth_invalid_start_url_protocol',
      });
      return;
    }
    if (parsedStartUrl.origin !== trustedNativeAuthOrigin) {
      emitAuthToWeb({
        type: 'error',
        provider,
        message: 'native_auth_invalid_start_url_origin',
      });
      return;
    }
    if (!isAllowedNativeAuthStartPath(parsedStartUrl.pathname)) {
      emitAuthToWeb({
        type: 'error',
        provider,
        message: 'native_auth_invalid_start_url_path',
      });
      return;
    }
    const expectedPathPrefix = parsedStartUrl.pathname.startsWith('/api/native-auth/start')
      ? '/api/native-auth/start'
      : parsedStartUrl.pathname;

    pendingAuthEventRef.current = null;
    authDispatchRetryCountRef.current = 0;
    clearAuthDispatchRetryTimer();
    nativeAuthInFlightRef.current = provider;
    emitAuthToWeb({
      type: 'status',
      provider,
      status: 'opening',
    });
    try {
      const result = await startNativeBrowserAuthSession({
        provider,
        startUrl,
        expectedOrigin: trustedNativeAuthOrigin,
        expectedPathPrefix,
      });
      emitAuthToWeb({
        type: 'success',
        provider: result.provider,
        callbackUrl: result.callbackUrl,
        bridgeToken: result.bridgeToken,
      });
    } catch (error: unknown) {
      const message = error instanceof Error ? error.message : String(error);
      emitAuthToWeb({
        type: 'error',
        provider,
        message: message || 'native_auth_failed',
      });
    } finally {
      nativeAuthInFlightRef.current = null;
    }
  }, [clearAuthDispatchRetryTimer, emitAuthToWeb, trustedNativeAuthOrigin]);

  const handleWebMessage = useCallback((event: WebViewMessageEvent) => {
    let parsed: WebViewCommand | null = null;
    try {
      parsed = JSON.parse(event.nativeEvent.data) as WebViewCommand;
    } catch {
      return;
    }
    if (!parsed || typeof parsed !== 'object') return;

    if (parsed.type === 'native_auth_ack') {
      const provider = parsed.payload?.provider === 'google' || parsed.payload?.provider === 'apple'
        ? parsed.payload.provider
        : null;
      if (!provider) return;

      const pending = pendingAuthEventRef.current;
      if (!pending || pending.type === 'status' || pending.provider !== provider) return;

      const outcome = parsed.payload?.outcome;
      if (pending.type === 'success') {
        if (outcome !== 'success') return;
        const ackBridgeToken = typeof parsed.payload?.bridgeToken === 'string'
          ? parsed.payload.bridgeToken.trim()
          : '';
        if (ackBridgeToken && ackBridgeToken !== pending.bridgeToken) return;
      } else if (outcome !== 'error') {
        return;
      }

      pendingAuthEventRef.current = null;
      authDispatchRetryCountRef.current = 0;
      clearAuthDispatchRetryTimer();
      if (__DEV__) {
        console.log(`[Web→NativeAuth] ack provider=${provider} outcome=${outcome ?? 'unknown'}`);
      }
      return;
    }

    if (parsed.type === 'native_auth_reset') {
      // 웹이 로그아웃/세션 만료 시 전송하는 리셋 명령.
      // 이전 세션의 auth 결과(pendingAuthEventRef)와 retry 타이머를 클리어해서
      // 이전 로그인의 에러/성공 이벤트가 재전송되지 않도록 함.
      if (nativeAuthInFlightRef.current === null) {
        pendingAuthEventRef.current = null;
        authDispatchRetryCountRef.current = 0;
        clearAuthDispatchRetryTimer();
        if (__DEV__) {
          console.log('[Web→NativeAuth] reset: cleared pending auth state');
        }
      }
      return;
    }

    if (parsed.type === 'native_stt_start') {
      if (__DEV__) {
        console.log(`[Web→NativeSTT] ${parsed.type}`, JSON.stringify(parsed.payload ?? {}).slice(0, 120));
      }
      void handleNativeStart(parsed.payload);
      return;
    }

    if (parsed.type === 'native_stt_stop') {
      if (__DEV__) {
        console.log(`[Web→NativeSTT] ${parsed.type}`, JSON.stringify(parsed.payload ?? {}).slice(0, 120));
      }
      void handleNativeStop(parsed.payload);
      return;
    }

    if (parsed.type === 'native_tts_play') {
      const { utteranceId, audioBase64 } = parsed.payload;
      const playbackId = typeof parsed.payload.playbackId === 'string' && parsed.payload.playbackId.trim()
        ? parsed.payload.playbackId.trim()
        : utteranceId;
      currentTtsPlaybackRef.current = { utteranceId, playbackId };
      if (__DEV__) {
        console.log(`[Web→NativeTTS] play utteranceId=${utteranceId} playbackId=${playbackId} base64Len=${audioBase64.length}`);
      }
      void playNativeTts({ audioBase64, utteranceId, playbackId }).catch((error: unknown) => {
        const message = error instanceof Error ? error.message : String(error);
        if (__DEV__) {
          console.log(`[NativeTTS] play error playbackId=${playbackId}: ${message}`);
        }
        if (currentTtsPlaybackRef.current?.playbackId === playbackId) {
          currentTtsPlaybackRef.current = null;
        }
        emitTtsToWeb({ type: 'tts_error', utteranceId, playbackId, message });
      });
      return;
    }

    if (parsed.type === 'native_stt_set_aec') {
      const enabled = parsed.payload?.enabled === true;
      if (__DEV__) {
        console.log(`[Web→NativeSTT] setAec enabled=${enabled}`);
      }
      void setNativeSttAec(enabled);
      return;
    }

    if (parsed.type === 'native_tts_stop') {
      const reason = typeof parsed.payload?.reason === 'string' && parsed.payload.reason.trim()
        ? parsed.payload.reason.trim()
        : 'unspecified';
      if (__DEV__) {
        console.log(`[Web→NativeTTS] stop reason=${reason}`);
      }
      currentTtsPlaybackRef.current = null;
      void stopNativeTts();
      return;
    }

    if (parsed.type === 'native_auth_start') {
      if (__DEV__) {
        console.log(`[Web→NativeAuth] ${parsed.type}`, JSON.stringify(parsed.payload ?? {}).slice(0, 120));
      }
      void handleNativeAuthStart(parsed.payload);
    }
  }, [clearAuthDispatchRetryTimer, emitTtsToWeb, handleNativeAuthStart, handleNativeStart, handleNativeStop]);

  useEffect(() => {
    if (Platform.OS !== 'ios') return;
    let isMounted = true;
    const manager = (NativeModules as {
      StatusBarManager?: {
        HEIGHT?: number;
        getHeight?: (callback: (metrics: { height: number }) => void) => void;
      };
    }).StatusBarManager;

    if (!manager || typeof manager.getHeight !== 'function') return;

    manager.getHeight((metrics) => {
      if (!isMounted) return;
      setIosTopTapOverlayHeight(resolveIosTopTapOverlayHeight(metrics?.height));
    });
    return () => {
      isMounted = false;
    };
  }, []);

  useEffect(() => {
    const statusSub = addNativeSttListener('status', event => {
      if (__DEV__) console.log(`[NativeSTT] status: ${event.status}`);
      nativeStatusRef.current = event.status;
      emitToWeb({ type: 'status', status: event.status });
    });

    const messageSub = addNativeSttListener('message', event => {
      emitToWeb({ type: 'message', raw: event.raw });
    });

    const errorSub = addNativeSttListener('error', event => {
      if (__DEV__) console.log(`[NativeSTT] error: ${event.message}`);
      nativeStatusRef.current = 'error';
      emitToWeb({ type: 'error', message: event.message });
    });

    const closeSub = addNativeSttListener('close', event => {
      if (__DEV__) console.log(`[NativeSTT] close: ${event.reason}`);
      nativeStatusRef.current = 'closed';
      emitToWeb({ type: 'close', reason: event.reason });
    });

    return () => {
      statusSub.remove();
      messageSub.remove();
      errorSub.remove();
      closeSub.remove();
    };
  }, [emitToWeb]);

  useEffect(() => {
    const finishedSub = addNativeTtsListener('ttsPlaybackFinished', (event) => {
      const { utteranceId, playbackId } = resolveCurrentTtsIdentity(event);
      if (__DEV__) {
        console.log(`[NativeTTS] finished utteranceId=${utteranceId} playbackId=${playbackId} success=${event.success}`);
      }
      emitTtsToWeb({ type: 'tts_ended', utteranceId: utteranceId || '', playbackId: playbackId || '' });
    });

    const stoppedSub = addNativeTtsListener('ttsPlaybackStopped', (event) => {
      const { utteranceId, playbackId } = resolveCurrentTtsIdentity(event);
      emitTtsToWeb({ type: 'tts_stopped', utteranceId: utteranceId || '', playbackId: playbackId || '' });
    });

    const errorSub = addNativeTtsListener('ttsError', (event) => {
      const { utteranceId, playbackId } = resolveCurrentTtsIdentity(event);
      if (__DEV__) {
        console.log(`[NativeTTS] error playbackId=${playbackId}: ${event.message}`);
      }
      emitTtsToWeb({ type: 'tts_error', utteranceId: utteranceId || '', playbackId: playbackId || '', message: event.message });
    });

    return () => {
      finishedSub.remove();
      stoppedSub.remove();
      errorSub.remove();
    };
  }, [emitTtsToWeb, resolveCurrentTtsIdentity]);

  const handleLoadStart = useCallback((event?: { nativeEvent?: { url?: string } }) => {
    isPageReadyRef.current = false;
    if (!initialLoadSettledRef.current) {
      setStartupSplashVisible(true);
    }
    updateSafeAreaPalette(event?.nativeEvent?.url);
  }, [updateSafeAreaPalette]);

  const handleLoadEnd = useCallback((event?: { nativeEvent?: { url?: string } }) => {
    isPageReadyRef.current = true;
    if (!initialLoadSettledRef.current) {
      initialLoadSettledRef.current = true;
      setStartupSplashVisible(false);
    }
    updateSafeAreaPalette(event?.nativeEvent?.url);
    emitToWeb({ type: 'status', status: nativeStatusRef.current });
    flushPendingAuthToWeb();
    flushPendingRecommendPrompt();
  }, [emitToWeb, flushPendingAuthToWeb, flushPendingRecommendPrompt, updateSafeAreaPalette]);

  const handleLoadError = useCallback((event: { nativeEvent: { description?: string } }) => {
    if (!initialLoadSettledRef.current) {
      initialLoadSettledRef.current = true;
      setStartupSplashVisible(false);
    }
    const description = event.nativeEvent.description || 'webview_load_failed';
    setLoadError(formatWebViewLoadError(description, webUrl));
  }, [webUrl]);

  const handleNavigationStateChange = useCallback((navigationState: { url: string }) => {
    updateSafeAreaPalette(navigationState.url);
  }, [updateSafeAreaPalette]);

  useEffect(() => {
    if (versionGate.status === 'force_update' && !initialLoadSettledRef.current) {
      initialLoadSettledRef.current = true;
      setStartupSplashVisible(false);
    }
  }, [versionGate.status]);

  return (
    <View style={[styles.root, { backgroundColor: safeAreaPalette.webViewColor }]}>
      {shouldRenderTopSafeAreaFill ? (
        <View
          pointerEvents="none"
          style={[
            styles.safeAreaTopFill,
            {
              height: iosTopSafeAreaHeight,
              backgroundColor: safeAreaPalette.topColor,
            },
          ]}
        />
      ) : null}
      <StatusBar barStyle={safeAreaPalette.statusBarStyle} />
      {/* iOS top-tap fallback is handled in web UI to avoid native overlay
          intercepting touches on WebView content. */}
      <View style={[styles.webViewContainer, { backgroundColor: safeAreaPalette.webViewColor }]}>
        {versionGate.status !== 'force_update' ? (
          <WebView
            ref={webViewRef}
            source={webUrl
              ? { uri: webUrl }
              : { html: '<html><body style=\"margin:0;background:#fff;\"></body></html>' }}
            originWhitelist={['*']}
            userAgent={Platform.OS === 'ios' ? IOS_SAFE_BROWSER_USER_AGENT : undefined}
            javaScriptEnabled
            domStorageEnabled
            allowsInlineMediaPlayback
            mediaPlaybackRequiresUserAction={false}
            setSupportMultipleWindows={false}
            allowsBackForwardNavigationGestures={false}
            onMessage={handleWebMessage}
            onLoadStart={handleLoadStart}
            onLoadEnd={handleLoadEnd}
            onError={handleLoadError}
            onNavigationStateChange={handleNavigationStateChange}
            style={[styles.webView, { backgroundColor: safeAreaPalette.webViewColor }]}
          />
        ) : (
          <View style={[styles.webView, { backgroundColor: safeAreaPalette.webViewColor }]} />
        )}
        {versionGate.status === 'force_update' ? (
          <View style={styles.versionOverlay}>
            <Text style={styles.versionTitle}>{versionGate.title}</Text>
            <Text style={styles.versionDescription}>{versionGate.message}</Text>
            {versionGate.latestVersion ? (
              <Text style={styles.versionMeta}>
                {versionGate.clientVersion || versionPolicyFallback.unknownVersionLabel} → {versionGate.latestVersion}
              </Text>
            ) : null}
            <Pressable
              accessibilityRole="button"
              accessibilityLabel={versionPolicyFallback.updateNowA11y}
              onPress={handleForceUpdatePress}
              style={({ pressed }) => [
                styles.updateButton,
                pressed ? styles.updateButtonPressed : null,
              ]}
            >
              <Text style={styles.updateButtonText}>{versionGate.updateButtonLabel}</Text>
            </Pressable>
          </View>
        ) : null}
        {versionGate.status !== 'force_update' && loadError ? (
          <View style={styles.errorOverlay}>
            <Text style={styles.errorTitle}>{versionPolicyFallback.webViewLoadFailedTitle}</Text>
            <Text style={styles.errorDescription}>{loadError}</Text>
          </View>
        ) : null}
      </View>
      {shouldRenderTopSafeAreaOverlay ? (
        <View
          pointerEvents="none"
          style={[
            styles.safeAreaTopOverlay,
            {
              height: iosTopSafeAreaHeight,
              backgroundColor: safeAreaPalette.topOverlayColor,
            },
          ]}
        />
      ) : null}
      {shouldRenderBottomSafeAreaFill ? (
        <View
          pointerEvents="none"
          style={[
            styles.safeAreaBottomFill,
            {
              height: safeAreaInsets.bottom,
              backgroundColor: safeAreaPalette.bottomColor,
            },
          ]}
        />
      ) : null}
      {startupSplashVisible ? (
        <View style={styles.startupSplashOverlay}>
          <Image
            source={STARTUP_SPLASH_LOGO}
            resizeMode="contain"
            fadeDuration={0}
            style={styles.startupSplashLogo}
          />
        </View>
      ) : null}
    </View>
  );
}

function App(): React.JSX.Element {
  return (
    <SafeAreaProvider>
      <AppInner />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  safeAreaTopFill: {
    width: '100%',
  },
  safeAreaTopOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 10,
  },
  safeAreaBottomFill: {
    width: '100%',
  },
  webViewContainer: {
    flex: 1,
  },
  iosTopTapOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 20,
    backgroundColor: 'transparent',
  },
  webView: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  startupSplashOverlay: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: STARTUP_SPLASH_BACKGROUND,
    zIndex: 30,
  },
  startupSplashLogo: {
    width: 180,
    height: 180,
  },
  errorOverlay: {
    position: 'absolute',
    left: 16,
    right: 16,
    bottom: 16,
    backgroundColor: 'rgba(17, 24, 39, 0.9)',
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 10,
    gap: 4,
  },
  errorTitle: {
    color: '#f9fafb',
    fontSize: 13,
    fontWeight: '700',
  },
  errorDescription: {
    color: '#d1d5db',
    fontSize: 12,
    lineHeight: 16,
  },
  versionOverlay: {
    position: 'absolute',
    left: 16,
    right: 16,
    bottom: 16,
    backgroundColor: 'rgba(17, 24, 39, 0.94)',
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 14,
    gap: 8,
  },
  versionTitle: {
    color: '#f9fafb',
    fontSize: 16,
    fontWeight: '700',
  },
  versionDescription: {
    color: '#d1d5db',
    fontSize: 13,
    lineHeight: 18,
  },
  versionMeta: {
    color: '#9ca3af',
    fontSize: 12,
    lineHeight: 16,
  },
  updateButton: {
    alignSelf: 'flex-start',
    backgroundColor: '#2563eb',
    borderRadius: 10,
    paddingHorizontal: 14,
    paddingVertical: 8,
  },
  updateButtonPressed: {
    opacity: 0.85,
  },
  updateButtonText: {
    color: '#f9fafb',
    fontSize: 13,
    fontWeight: '700',
  },
});

export default App;