// app.jsx — main shell, navigation, tweaks panel wiring
const { useState: _a_useState, useEffect: _a_useEffect, useMemo: _a_useMemo } = React;

// Tweak defaults (must be valid JSON inside markers)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "userState": "free_low",
  "campaign": "default",
  "fortuneStyle": "wheel",
  "accent": "purple-cyan",
  "lang": "en",
  "frame": "iphone",
  "firstRun": false
}/*EDITMODE-END*/;

const USER_STATES = {
  new_user: { premium: 'free', balance: { photo: 20, video: 0 }, label: 'New user (free starter)' },
  free_low: { premium: 'free', balance: { photo: 5, video: 0 }, label: 'Free, low balance' },
  free_normal: { premium: 'free', balance: { photo: 15, video: 0 }, label: 'Free, normal' },
  paid: { premium: 'premium', balance: { photo: 120, video: 80 }, label: 'Premium' },
  ref_premium: { premium: 'ref_premium', balance: { photo: 80, video: 25 }, label: 'Referral Premium' },
  returning: { premium: 'returning', balance: { photo: 8, video: 2 }, label: 'Old payer returning' },
};

const CAMPAIGNS = [
  ['default', 'Default'],
  ['invoice_reminder', 'Invoice reminder'],
  ['post_result_upsell', 'Post-result upsell'],
  ['reactivation', 'Reactivation'],
  ['referral_challenge', 'Referral challenge'],
];

const ACCENTS = {
  'purple-cyan':  { a: '#9B5CFF', b: '#22D3EE' },
  'purple-gold':  { a: '#9B5CFF', b: '#F6C85F' },
  'cyan-gold':    { a: '#22D3EE', b: '#F6C85F' },
};

function App(){
  // Tweaks state
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const mini = window.RavanaMiniApp || {};
  const isDebug = Boolean(mini.debug);
  const [sessionState, setSessionState] = _a_useState({
    loading: true,
    error: null,
    data: null,
  });

  // Derive starting tab/screen from campaign context
  const contextToScreen = (context) => {
    if (!context) return null;
    if (context === 'referral_challenge') return 'referrals';
    if (context && context.startsWith('fortune')) return 'fortune';
    if (context && context.startsWith('invoice')) return 'invoice';
    if (context && context.startsWith('post_result')) return 'credits';
    if (context === 'reactivation_old_payer' || context === 'reactivation') return 'home';
    if (context && context.includes('no_balance')) return 'credits';
    if (context && context.includes('premium')) return 'credits';
    if (context === 'faceswap') return 'faceswap';
    if (context === 'multiface') return 'multiface';
    if (context === 'imagegen') return 'imagegen';
    return null;
  };
  const routeFromContext = contextToScreen(mini.context) || (t.campaign === 'referral_challenge' ? 'referrals' : 'home');
  const initialTab = ['home', 'create', 'fortune', 'credits', 'referrals'].includes(routeFromContext)
    ? routeFromContext
    : 'home';
  const [tab, setTab] = _a_useState(initialTab);
  const [screenStack, setScreenStack] = _a_useState([routeFromContext]);  // navigation history within tab
  const [screenParams, setScreenParams] = _a_useState({});

  // App-level state
  const us = USER_STATES[t.userState] || USER_STATES.free_low;
  const [balance, setBalance] = _a_useState(us.balance);
  const sessionUser = sessionState.data && sessionState.data.user ? sessionState.data.user : null;
  const premium = sessionUser && sessionUser.premium ? 'premium' : us.premium;
  const [fortune, setFortune] = _a_useState({
    spins: t.userState === 'paid' ? 2 : 0,
    points: t.userState === 'paid' ? 380 : 120,
    dailyReady: true,
    cooldown: '23h 12m',
  });

  // Reset balance when user state changes via tweak
  _a_useEffect(() => {
    if (sessionUser && !isDebug) return;
    setBalance(USER_STATES[t.userState].balance);
    setFortune(f => ({
      ...f,
      spins: t.userState === 'paid' ? 2 : 0,
      points: t.userState === 'paid' ? 380 : 120,
    }));
  }, [t.userState, sessionUser, isDebug]);

  _a_useEffect(() => {
    let cancelled = false;
    async function loadSession() {
      if (!mini.fetchSession) {
        setSessionState({ loading: false, error: null, data: null });
        return;
      }
      try {
        const data = await mini.fetchSession();
        if (cancelled) return;
        if (data && data.ok !== false && data.user && !isDebug) {
          setBalance(data.user.balance || { photo: 0, video: 0 });
        }
        setSessionState({ loading: false, error: data && data.error ? data.error : null, data });
        if (mini.track) mini.track('miniapp_opened', { context: mini.context });
      } catch (error) {
        if (cancelled) return;
        setSessionState({ loading: false, error: error.message || 'Mini App session failed.', data: null });
      }
    }
    loadSession();
    return () => { cancelled = true; };
  }, []);

  // Apply accent colors
  _a_useEffect(() => {
    const acc = ACCENTS[t.accent] || ACCENTS['purple-cyan'];
    document.documentElement.style.setProperty('--accent-a', acc.a);
    document.documentElement.style.setProperty('--accent-b', acc.b);
  }, [t.accent]);

  const T = (key, lang, vars) => window.t(key, lang || t.lang, vars);

  const navigate = (screen, params) => {
    setScreenParams(params || {});
    // Update tab if root-level
    const tabMap = {
      home: 'home', create: 'create', fortune: 'fortune', credits: 'credits',
      referrals: 'referrals'
    };
    if (tabMap[screen]) setTab(tabMap[screen]);
    setScreenStack(s => {
      if (s[s.length - 1] === screen) return s;
      return [...s, screen];
    });
  };

  const goBack = () => {
    if (screenStack.length > 1) {
      setScreenStack(s => s.slice(0, -1));
    }
  };

  const switchTab = (newTab) => {
    setTab(newTab);
    setScreenStack([newTab]);
    setScreenParams({});
  };

  const currentScreen = screenStack[screenStack.length - 1];

  // Active jobs depend on user state
  const jobs = useMemo(() => {
    if (!isDebug) return [];
    if (premium === 'free') return [];
    return window.RAVANA_DATA.active_jobs_default;
  }, [premium, isDebug]);

  const paymentMethods = (
    sessionState.data && Array.isArray(sessionState.data.payment_methods)
      ? sessionState.data.payment_methods
      : ['telegram']
  );
  const features = (sessionState.data && sessionState.data.config && sessionState.data.config.features) || {};

  const ctx = {
    t: T, lang: t.lang,
    user: sessionUser,
    balance, setBalance,
    premium, fortune, setFortune,
    navigate, goBack,
    campaign: t.campaign,
    miniContext: mini.context,
    paymentMethods,
    features,
    fortuneStyle: t.fortuneStyle,
    setLang: (l) => setTweak('lang', l),
    jobs,
  };

  // Onboarding state — separate so re-runs don't depend on tweak persistence
  const onboardedKey = 'ravana_miniapp_onboarded_v1';
  const shouldShowOnboarding = !isDebug && !window.localStorage.getItem(onboardedKey);
  const [onboardingOpen, setOnboardingOpen] = _a_useState(t.firstRun || shouldShowOnboarding);
  _a_useEffect(() => { if (t.firstRun) setOnboardingOpen(true); }, [t.firstRun]);
  const closeOnboarding = () => {
    setOnboardingOpen(false);
    window.localStorage.setItem(onboardedKey, '1');
    if (t.firstRun) setTweak('firstRun', false);
  };

  // Render correct screen
  let body;
  switch (currentScreen) {
    case 'home':      body = <DashboardScreen ctx={ctx}/>; break;
    case 'create':    body = <CreateScreen ctx={ctx}/>; break;
    case 'faceswap':  body = <FaceSwapFlow ctx={ctx} prefill={screenParams.prefill}/>; break;
    case 'multiface': body = <MultiFaceFlow ctx={ctx}/>; break;
    case 'imagegen':  body = <ImageGenFlow ctx={ctx} prefill={screenParams.prefill}/>; break;
    case 'fortune':   body = <FortuneScreen ctx={ctx}/>; break;
    case 'credits':   body = <CreditsScreen ctx={ctx}/>; break;
    case 'invoice':   body = <InvoiceScreen ctx={ctx}/>; break;
    case 'manage_subscription': body = <ManageSubscriptionScreen ctx={ctx}/>; break;
    case 'referrals': body = <ReferralsScreen ctx={ctx}/>; break;
    case 'profile':   body = <ProfileScreen ctx={ctx}/>; break;
    case 'support':   body = <SupportScreen ctx={ctx}/>; break;
    case 'manual':    body = <ManualScreen ctx={ctx}/>; break;
    case 'terms':     body = <TermsScreen ctx={ctx}/>; break;
    default:          body = <DashboardScreen ctx={ctx}/>;
  }

  // Topbar balance summary (always visible)
  const topBalance = (
    <button className="tb-balance" onClick={()=>switchTab('credits')}>
      <Icon.image size={11}/>{balance.photo}
      <span className="sep"/>
      <Icon.video size={11}/>{balance.video}
    </button>
  );

  return (
    <>
      <div className="app-root">
        <header className="app-topbar">
          <div className="brand">
            <div className="brand-mark"/>
            {T('brand')}
          </div>
          <div className="topbar-actions">
            {topBalance}
            <button className="icon-btn" onClick={()=>navigate('profile')}>
              <Icon.user size={14}/>
            </button>
          </div>
        </header>

        <div className="app-body">
          <div className="app-scroll" key={currentScreen}>
            {(sessionState.loading || sessionState.error) && (
              <div className="screen" style={{paddingBottom: 0}}>
                <div className={"banner-info " + (sessionState.error ? "miniapp-session-error" : "")}>
                  {sessionState.loading ? (
                    <>
                      <Icon.clock size={15}/>
                      <span>Checking Telegram session...</span>
                    </>
                  ) : (
                    <>
                      <Icon.lock size={15}/>
                      <span>{sessionState.error}</span>
                    </>
                  )}
                </div>
              </div>
            )}
            {body}
          </div>
        </div>

        <nav className="bottomnav">
          {[
            ['home', 'nav_home', 'home'],
            ['create', 'nav_create', 'create'],
            ...(features.fortune ? [['fortune', 'nav_fortune', 'fortune']] : []),
            ['credits', 'nav_credits', 'wallet'],
          ].map(([key, label, icn]) => (
            <button key={key} className={"bottomnav-item " + (tab === key ? 'is-active' : '')}
              onClick={()=>switchTab(key)}>
              <div className="nav-icon">{React.createElement(Icon[icn === 'wallet' ? 'wallet' : icn], {size: 22})}</div>
              <div>{T(label)}</div>
            </button>
          ))}
        </nav>
      </div>

      {isDebug && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Demo state">
            <TweakSelect label="User state" value={t.userState} onChange={v=>setTweak('userState', v)}
              options={Object.keys(USER_STATES).map(k => ({value: k, label: USER_STATES[k].label}))}/>

            <TweakSelect label="Campaign context" value={t.campaign} onChange={v=>setTweak('campaign', v)}
              options={CAMPAIGNS.map(([v,l])=>({value:v, label:l}))}/>

            <TweakToggle label="First-run onboarding" value={t.firstRun} onChange={v=>setTweak('firstRun', v)}/>
          </TweakSection>

          <TweakSection title="Visual">
            <TweakRadio label="Fortune style" value={t.fortuneStyle} onChange={v=>setTweak('fortuneStyle', v)}
              options={[
                {value: 'wheel', label: 'Wheel'},
                {value: 'reel', label: 'Slot reel'},
              ]}/>

            <TweakRadio label="Accent" value={t.accent} onChange={v=>setTweak('accent', v)}
              options={[
                {value: 'purple-cyan', label: 'P/Cyan'},
                {value: 'purple-gold', label: 'P/Gold'},
                {value: 'cyan-gold', label: 'C/Gold'},
              ]}/>

            <TweakRadio label="Language" value={t.lang} onChange={v=>setTweak('lang', v)}
              options={[
                {value: 'en', label: 'English'},
                {value: 'ru', label: 'Русский'},
              ]}/>
          </TweakSection>

          <TweakSection title="Quick actions">
            <TweakButton onClick={()=>{ setOnboardingOpen(true); }}>Replay onboarding</TweakButton>
            <TweakButton onClick={()=>navigate('faceswap', { prefill: true })}>Jump to Face Swap review</TweakButton>
            <TweakButton onClick={()=>navigate('imagegen', { prefill: true })}>Jump to Image Gen review</TweakButton>
            <TweakButton onClick={()=>navigate('multiface')}>Open MultiFace flow</TweakButton>
            <TweakButton onClick={()=>navigate('invoice')}>Open invoice resume</TweakButton>
            <TweakButton onClick={()=>navigate('manage_subscription')}>Manage subscription</TweakButton>
            <TweakButton onClick={()=>navigate('terms')}>Terms</TweakButton>
          </TweakSection>
        </TweaksPanel>
      )}

      <Onboarding open={onboardingOpen} lang={t.lang} onComplete={closeOnboarding} navigate={navigate}/>
    </>
  );
}

// Boot
const root = ReactDOM.createRoot(document.getElementById('phone-mount'));
root.render(<App/>);