// Healify Web — mobile renderer. Faithful port of the V2 mobile prototype's
// router/screen-switch (from the design-system index.html), rendered FULL-BLEED
// for real mobile browsers (no iOS bezel). The Wall feature is wired in as a
// route. Exports renderMobileScreen (shared with the desktop shell for Tier-B
// pages) and MobileApp (the full single-column experience + tab bar).

const { useMemo: useMemoM } = React;

// Top-level tabs (same as the prototype).
const APP_TABS = [
  { k: 'home',      label: 'Home'      },
  { k: 'health',    label: 'Health'    },
  { k: 'nutrition', label: 'Nutrition' },
  { k: 'fitness',   label: 'Fitness'   },
];

const APP_HIDE_TAB_BAR = new Set([
  'chat', 'voice', 'menu', 'profile', 'settings', 'notifications',
  'account', 'privacy', 'integrations', 'units', 'appearance', 'notification-prefs',
  'plans', 'payment', 'subscription', 'receipts', 'receipt-detail',
  'help', 'faq', 'contact', 'report', 'status',
  'legal-terms', 'legal-privacy', 'legal-about',
  'habits', 'blood', 'dna', 'picks', 'mealplan', 'workout', 'meditation',
  'history', 'focus', 'paywall', 'wall', 'post-detail',
  'auth-splash', 'auth-signin', 'auth-register', 'auth-reset', 'auth-verify', 'auth-mfa',
  'onboarding', 'survey-intro', 'survey', 'survey-results',
  'permissions-health', 'permissions-notifications', 'permissions-calendar',
  'error-offline', 'error-sync', 'error-payment',
  'empty-home', 'empty-health', 'empty-nutrition', 'empty-fitness',
]);

const APP_DARK_SCREENS = new Set(['paywall', 'voice']);

// Screens that manage their own full-height layout (no extra top padding).
const APP_SELF_LAYOUT = new Set(['chat', 'voice', 'paywall', 'wall', 'post-detail', 'auth-splash']);

// Returns the screen element for a route. Used by MobileApp (all routes) and by
// the desktop shell for Tier-B routes (rendered in a centered phone column).
function renderMobileScreen(screen, p, ctx) {
  const { nav, pop, resetTo, stackLen, wallStore, wallSettings } = ctx;
  const onBack = pop;
  switch (screen) {
    case 'home':      return <HomeScreen      onNavigate={nav} />;
    case 'health':    return <HealthScreen    onNavigate={nav} />;
    case 'nutrition': return <NutritionScreen onNavigate={nav} />;
    case 'fitness':   return <FitnessScreen   onNavigate={nav} />;
    case 'chat':      return <ChatScreen      onNavigate={nav} onBack={stackLen > 1 ? onBack : () => resetTo('home')} topic={p.topic} />;

    case 'wall':        return <WallScreen       onNavigate={nav} store={wallStore} settings={wallSettings} />;
    case 'post-detail': return <PostDetailScreen onNavigate={nav} onBack={onBack} postId={p.postId} store={wallStore} settings={wallSettings} />;

    case 'menu':          return <MenuScreen          onNavigate={nav} onBack={onBack} />;
    case 'profile':       return <ProfileScreen       onNavigate={nav} onBack={onBack} />;
    case 'settings':      return <SettingsScreen      onNavigate={nav} onBack={onBack} />;
    case 'notifications': return <NotificationsScreen onNavigate={nav} onBack={onBack} />;
    case 'habits':        return <HabitsScreen        onNavigate={nav} onBack={onBack} />;
    case 'blood':         return <BloodReportScreen   onNavigate={nav} onBack={onBack} />;
    case 'dna':           return <DNAScreen           onNavigate={nav} onBack={onBack} />;
    case 'picks':         return <PicksScreen         onNavigate={nav} onBack={onBack} />;
    case 'mealplan':      return <MealPlanScreen      onNavigate={nav} onBack={onBack} />;
    case 'workout':       return <WorkoutScreen       onNavigate={nav} onBack={onBack} id={p.id} />;
    case 'meditation':    return <MeditationScreen    onNavigate={nav} onBack={onBack} />;
    case 'history':       return <ChatHistoryScreen   onNavigate={nav} onBack={onBack} />;
    case 'voice':         return <VoiceCallScreen     onBack={onBack} onNavigate={nav} />;
    case 'focus':         return <FocusDetailScreen   onNavigate={nav} onBack={onBack} area={p.area} />;
    case 'paywall':       return <PaywallScreen       onBack={onBack} />;

    case 'account':            return <AccountScreen            onNavigate={nav} onBack={onBack} />;
    case 'privacy':            return <PrivacyScreen            onNavigate={nav} onBack={onBack} />;
    case 'integrations':       return <IntegrationsScreen       onNavigate={nav} onBack={onBack} />;
    case 'units':              return <UnitsScreen              onNavigate={nav} onBack={onBack} />;
    case 'appearance':         return <AppearanceScreen         onNavigate={nav} onBack={onBack} />;
    case 'notification-prefs': return <NotificationPrefsScreen  onNavigate={nav} onBack={onBack} />;

    case 'plans':          return <PlansScreen              onNavigate={nav} onBack={onBack} />;
    case 'payment':        return <PaymentScreen            onNavigate={nav} onBack={onBack} plan={p.plan} />;
    case 'subscription':   return <ManageSubscriptionScreen onNavigate={nav} onBack={onBack} />;
    case 'receipts':       return <ReceiptsScreen           onNavigate={nav} onBack={onBack} />;
    case 'receipt-detail': return <ReceiptDetailScreen      onNavigate={nav} onBack={onBack} receipt={p.receipt} />;

    case 'help':    return <HelpScreen          onNavigate={nav} onBack={onBack} />;
    case 'faq':     return <FAQScreen           onNavigate={nav} onBack={onBack} />;
    case 'contact': return <ContactScreen       onNavigate={nav} onBack={onBack} />;
    case 'report':  return <ReportProblemScreen onNavigate={nav} onBack={onBack} />;
    case 'status':  return <StatusScreen        onNavigate={nav} onBack={onBack} />;

    case 'legal-terms':   return <LegalScreen onNavigate={nav} onBack={onBack} kind="terms" />;
    case 'legal-privacy': return <LegalScreen onNavigate={nav} onBack={onBack} kind="privacy" />;
    case 'legal-about':   return <LegalScreen onNavigate={nav} onBack={onBack} kind="about" />;

    case 'auth-splash':   return <AuthSplashScreen   onNavigate={nav} />;
    case 'auth-signin':   return <AuthSignInScreen   onNavigate={nav} onBack={onBack} />;
    case 'auth-register': return <AuthRegisterScreen onNavigate={nav} onBack={onBack} />;
    case 'auth-reset':    return <AuthResetScreen    onNavigate={nav} onBack={onBack} />;
    case 'auth-verify':   return <AuthVerifyScreen   onNavigate={nav} onBack={onBack} email={p.email} />;
    case 'auth-mfa':      return <AuthMFAScreen      onNavigate={nav} onBack={onBack} />;

    case 'onboarding':    return <OnboardingScreen   onNavigate={nav} onBack={() => resetTo('auth-splash')} />;
    case 'survey-intro':  return <SurveyIntroScreen  onNavigate={nav} onBack={onBack} />;
    case 'survey':        return <SurveyScreen       onNavigate={nav} onBack={onBack} />;
    case 'survey-results':return <SurveyResultsScreen onNavigate={nav} onBack={onBack} phq={p.phq} gad={p.gad} phq9={p.phq9} />;

    case 'permissions-health':        return <PermissionsHealthScreen        onNavigate={nav} onBack={onBack} />;
    case 'permissions-notifications': return <PermissionsNotificationsScreen onNavigate={nav} onBack={onBack} />;
    case 'permissions-calendar':      return <PermissionsCalendarScreen      onNavigate={nav} onBack={onBack} />;

    case 'error-offline': return <ErrorOfflineScreen        onNavigate={nav} onBack={onBack} />;
    case 'error-sync':    return <ErrorSyncConflictScreen   onNavigate={nav} onBack={onBack} />;
    case 'error-payment': return <ErrorPaymentDeclinedScreen onNavigate={nav} onBack={onBack} />;

    case 'empty-home':      return <EmptyHomeScreen      onNavigate={nav} />;
    case 'empty-health':    return <EmptyHealthScreen    onNavigate={nav} />;
    case 'empty-nutrition': return <EmptyNutritionScreen onNavigate={nav} />;
    case 'empty-fitness':   return <EmptyFitnessScreen   onNavigate={nav} />;

    default: return <HomeScreen onNavigate={nav} />;
  }
}

// Full-bleed mobile experience: current screen + canonical tab bar.
function MobileApp({ stack, nav, pop, resetTo, activeTab, onTabChange, wallStore, wallSettings }) {
  const top = stack[stack.length - 1];
  const screen = top.name;
  const p = top.params || {};
  const showTabBar = !APP_HIDE_TAB_BAR.has(screen);
  const selfLayout = APP_SELF_LAYOUT.has(screen);
  const ctx = { nav, pop, resetTo, stackLen: stack.length, wallStore, wallSettings };

  return (
    <div data-screen-label={screen} style={{ position: 'relative', height: '100%', width: '100%', overflow: 'hidden', background: H.bg }}>
      <div key={stack.length + ':' + screen} style={{
        position: 'absolute', inset: 0, overflowY: selfLayout ? 'hidden' : 'auto',
        paddingTop: selfLayout ? 0 : 'max(10px, env(safe-area-inset-top, 0px))',
      }} className="no-scrollbar">
        {renderMobileScreen(screen, p, ctx)}
      </div>

      {showTabBar && (
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 100, pointerEvents: 'none', zIndex: 70 }}>
          <div style={{ position: 'absolute', left: 16, right: 16, bottom: 'calc(16px + env(safe-area-inset-bottom, 0px))', pointerEvents: 'auto' }}>
            <HTabBar tab={activeTab} showActivityDot onChange={onTabChange} />
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { renderMobileScreen, MobileApp, APP_TABS, APP_HIDE_TAB_BAR, APP_DARK_SCREENS, APP_SELF_LAYOUT });