// App root — stitches everything together

function App() {
  const [tweaks, setTweaks] = useTweaks();
  const theme = THEMES.clinic;
  const accent = theme.accentOverride;

  // Apply per-theme font overrides to the shared FONTS object so all components pick them up
  React.useEffect(() => {
    if (theme.fontOverride) {
      Object.assign(FONTS, theme.fontOverride);
    } else {
      // restore defaults
      FONTS.display = "'Fraunces', 'Times New Roman', serif";
      FONTS.ui      = "'Inter', system-ui, sans-serif";
      FONTS.mono    = "'JetBrains Mono', ui-monospace, monospace";
    }
  }, [tweaks.theme]);

  const [screen, setScreen] = React.useState(tweaks.screen || 'home');
  const [screenArgs, setScreenArgs] = React.useState({});
  const [showPaywall, setShowPaywall] = React.useState(false);
  const [showAddAsset, setShowAddAsset] = React.useState(false);
  const [showAddLiability, setShowAddLiability] = React.useState(false);
  const [showAddGoal, setShowAddGoal] = React.useState(false);
  const [planState, setPlanState] = React.useState('free'); // 'free' | 'monthly' | 'annual'

  // Sync screen from tweaks
  React.useEffect(() => {
    if (tweaks.screen && tweaks.screen !== screen) setScreen(tweaks.screen);
  }, [tweaks.screen]);

  React.useEffect(() => {
    const ha = () => setShowAddAsset(true);
    const hl = () => setShowAddLiability(true);
    const hg = () => setShowAddGoal(true);
    window.addEventListener('himma-add-asset', ha);
    window.addEventListener('himma-add-liability', hl);
    window.addEventListener('himma-add-goal', hg);
    return () => {
      window.removeEventListener('himma-add-asset', ha);
      window.removeEventListener('himma-add-liability', hl);
      window.removeEventListener('himma-add-goal', hg);
    };
  }, []);

  const navigate = (s, args = {}) => {
    setScreenArgs(args);
    setScreen(s);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { screen: s }}, '*');
  };

  const renderScreen = () => {
    switch (screen) {
      case 'home':         return <HomeScreen theme={theme} accent={accent} onNav={navigate} onAskHimma={() => navigate('chat')} onOpenPaywall={() => setShowPaywall(true)}/>;
      case 'assets':       return <AssetsScreen theme={theme} accent={accent} onAddAsset={() => setShowAddAsset(true)}/>;
      case 'chat':         return <ChatScreen theme={theme} accent={accent}/>;
      case 'tx':           return <TransactionsScreen theme={theme} accent={accent} onAskHimma={() => navigate('chat')} onOpenPaywall={() => setShowPaywall(true)}/>;
      case 'recs':         return <RecommendationsScreen theme={theme} accent={accent} onNav={navigate} onOpenPaywall={() => setShowPaywall(true)}/>;
      case 'compare':      return <CompareScreen theme={theme} accent={accent} onBack={() => navigate('home')}/>;
      case 'learn':         return <LearnScreen theme={theme} accent={accent} onNav={navigate}/>;
      case 'learn_article': return <LearnArticleScreen theme={theme} accent={accent} articleId={screenArgs.articleId} onBack={() => navigate('learn')} onNav={navigate}/>;
      case 'goal_detail':  return <GoalDetailScreen theme={theme} accent={accent} goalId={screenArgs.goalId} onBack={() => navigate('home')} onAskHimma={() => navigate('chat')}/>;
      case 'paywall':      return <PaywallScreen theme={theme} accent={accent} onClose={() => navigate('home')}/>;
      case 'settings':     return <SettingsScreen theme={theme} accent={accent} onBack={() => navigate('home')} onNav={navigate} planState={planState}/>;
      case 'notifications':return <NotificationsScreen theme={theme} accent={accent} onBack={() => navigate('home')}/>;
      case 'subscription': return <SubscriptionScreen theme={theme} accent={accent} onBack={() => navigate('settings')} planState={planState} setPlanState={setPlanState}/>;
      case 'settings_personal_info':    return <SettingsPersonalInfoScreen   theme={theme} accent={accent} onBack={() => navigate('settings')}/>;
      case 'settings_linked_accounts':  return <SettingsLinkedAccountsScreen theme={theme} accent={accent} onBack={() => navigate('settings')} onAddAsset={() => setShowAddAsset(true)}/>;
      case 'settings_security':         return <SettingsSecurityScreen      theme={theme} accent={accent} onBack={() => navigate('settings')} onNav={navigate}/>;
      case 'settings_change_passcode':  return <SettingsChangePasscodeScreen theme={theme} accent={accent} onBack={() => navigate('settings_security')}/>;
      case 'settings_export_data':      return <SettingsExportDataScreen     theme={theme} accent={accent} onBack={() => navigate('settings')}/>;
      case 'settings_privacy_controls': return <SettingsPrivacyControlsScreen theme={theme} accent={accent} onBack={() => navigate('settings')}/>;
      case 'settings_help_centre':      return <SettingsHelpCentreScreen     theme={theme} accent={accent} onBack={() => navigate('settings')}/>;
      case 'settings_delete_account':   return <SettingsDeleteAccountScreen  theme={theme} accent={accent} onBack={() => navigate('settings')}/>;
      case 'settings_referral':         return <SettingsReferralScreen       theme={theme} accent={accent} onBack={() => navigate('settings')}/>;
      default:             return <HomeScreen theme={theme} accent={accent} onNav={navigate} onAskHimma={() => navigate('chat')}/>;
    }
  };

  const pageBg = 'radial-gradient(circle at 30% 20%, #F4F6FA, #E4E8EF)';

  return (
    <div style={{
      minHeight: '100vh', width: '100%',
      background: pageBg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '40px 20px',
      boxSizing: 'border-box',
      fontFamily: FONTS.ui,
      position: 'relative',
    }}>
      {/* Left side brand + meta (hidden on narrow) */}
      <div style={{
        position: 'fixed', left: 40, top: 40, zIndex: 5, color: theme.text,
        display: 'flex', flexDirection: 'column', gap: 6,
      }} className="himma-meta">
        <Wordmark color={theme.text} accent={accent} showArabic={tweaks.showArabic} size={24}/>
        <div style={{ fontFamily: FONTS.mono, fontSize: 10, letterSpacing: 1.2, textTransform: 'uppercase', color: theme.textMute }}>Financial OS · UAE</div>
      </div>

      {/* Right side tip (hidden on narrow) */}
      <div style={{
        position: 'fixed', right: 40, top: 40, zIndex: 5, textAlign: 'right',
      }} className="himma-meta">
        <div style={{ fontFamily: FONTS.mono, fontSize: 10, letterSpacing: 1.2, textTransform: 'uppercase', color: theme.textMute }}>Prototype · Tap tabs to navigate</div>
      </div>

      <div style={{ position: 'relative', width: PHONE_W }}>
        <Phone theme={theme}>
          {renderScreen()}
          {/* Tab bar only over non-paywall screens */}
          {!['paywall','settings','notifications','subscription','learn_article','goal_detail',
             'settings_personal_info','settings_linked_accounts','settings_security','settings_change_passcode',
             'settings_export_data','settings_privacy_controls','settings_help_centre','settings_delete_account',
             'settings_referral'
            ].includes(screen) && <TabBar current={screen} onNav={navigate} theme={theme} accent={accent}/>}
        </Phone>

        {/* Modals render inside phone coords for visual fidelity */}
        <div style={{ position:'absolute', inset: 7, borderRadius: 46, overflow: 'hidden', pointerEvents: showAddAsset ? 'auto' : 'none' }}>
          <AddAssetModal theme={theme} accent={accent} open={showAddAsset} onClose={() => setShowAddAsset(false)}/>
        </div>
        <div style={{ position:'absolute', inset: 7, borderRadius: 46, overflow: 'hidden', pointerEvents: showAddLiability ? 'auto' : 'none' }}>
          <AddLiabilityModal theme={theme} accent={accent} open={showAddLiability} onClose={() => setShowAddLiability(false)}/>
        </div>
        <div style={{ position:'absolute', inset: 7, borderRadius: 46, overflow: 'hidden', pointerEvents: showAddGoal ? 'auto' : 'none' }}>
          <AddGoalModal theme={theme} accent={accent} open={showAddGoal} onClose={() => setShowAddGoal(false)}/>
        </div>

        {showPaywall && (
          <div style={{ position:'absolute', top: 7, left: 7, right: 7, bottom: 7, borderRadius: 46, overflow: 'hidden', zIndex: 90 }}>
            <div style={{ height: '100%', background: theme.bg, paddingTop: 54 }}>
              <PaywallScreen theme={theme} accent={accent} onClose={() => setShowPaywall(false)}/>
            </div>
          </div>
        )}
      </div>

      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} theme={theme} accent={accent}/>

      <Inspector
        enabled={!!tweaks.inspect}
        theme={theme}
        onDisable={() => {
          setTweaks({ inspect: false });
          window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { inspect: false }}, '*');
        }}
      />

      <style>{`
        @media (max-width: 900px) { .himma-meta { display: none !important; } }
      `}</style>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);