// screens-dashboard.jsx — Home/Dashboard screen
const { useState: _ds_useState, useEffect: _ds_useEffect, useMemo: _ds_useMemo } = React;

function DashboardScreen({ ctx }){
  const { user, lang, balance, premium, navigate, campaign, fortune, t: T, jobs } = ctx;
  const displayName = (user && (user.name || user.username)) || 'Mira';

  const isLowBalance = balance.photo <= 5 && balance.video === 0;
  const showInvoice = campaign === 'invoice_reminder';
  const showUpsell = campaign === 'post_result_upsell';
  const showReactivation = campaign === 'reactivation';

  return (
    <div className="screen">
      {/* Greeting + premium chip */}
      <div className="row-between" style={{marginTop: 4, gap: 12, alignItems:'flex-start'}}>
        <div style={{flex: 1, minWidth: 0}}>
          <div className="h-hello">{T('hello')}, {displayName}</div>
          <div className="h-screen" style={{fontSize: 20, marginTop: 2}}>
            {showReactivation ? T('reactivation_title') :
             showInvoice ? T('campaign_invoice_title') :
             showUpsell ? T('campaign_upsell_title') :
             T('start_action')}
          </div>
        </div>
        <div style={{flex: 'none', marginTop: 4, display: 'flex', gap: 6, alignItems: 'center'}}>
          <PremiumChip kind={premium} lang={lang}/>
          <HelpButton topic="home" lang={lang}/>
        </div>
      </div>

      {/* Campaign banner (AI image) */}
      {showReactivation && <AIBanner kind="campaign-reactivation">
        <div className="h-card" style={{marginBottom: 4}}>{T('reactivation_title')}</div>
        <div className="mute" style={{fontSize: 12, color: 'var(--text-2)'}}>
          Premium queues, MultiFace, Image Gen, larger packages.
        </div>
        <div style={{display:'flex', gap: 8, marginTop: 10}}>
          <button className="btn btn-primary btn-sm" onClick={()=>navigate('credits')}>{T('top_up')}</button>
          <button className="btn btn-ghost btn-sm" onClick={()=>navigate('create')}>{T('nav_create')}</button>
        </div>
      </AIBanner>}

      {showInvoice && <AIBanner kind="campaign-invoice">
        <div className="row-between" style={{alignItems: 'flex-end'}}>
          <div>
            <div className="h-card" style={{marginBottom: 4}}>{T('campaign_invoice_title')}</div>
            <div style={{fontSize: 12, color: 'var(--text-2)'}}>{T('campaign_invoice_sub')}</div>
          </div>
          <button className="btn btn-gold btn-sm" onClick={()=>navigate('invoice')}>{T('resume_payment')}</button>
        </div>
      </AIBanner>}

      {showUpsell && <AIBanner kind="campaign-upsell">
        <div className="h-card" style={{marginBottom: 4}}>{T('campaign_upsell_title')}</div>
        <div style={{fontSize: 12, color: 'var(--text-2)', marginBottom: 8}}>{T('campaign_upsell_sub')}</div>
        <div style={{display:'flex', gap: 8}}>
          <button className="btn btn-primary btn-sm" onClick={()=>navigate('credits')}>{T('buy_credits')}</button>
          <button className="btn btn-ghost btn-sm" onClick={()=>navigate('create')}>{T('create_another')}</button>
        </div>
      </AIBanner>}

      {/* Balance pills */}
      <div className="balance-pills">
        <div className="balance-pill">
          <div className="num">{balance.photo}</div>
          <div className="lbl">{T('photo_credits')}</div>
          <div className="icn"><Icon.image size={15}/></div>
        </div>
        <div className="balance-pill video">
          <div className="num">{balance.video}<span style={{fontSize:13, color: 'var(--text-3)', marginLeft: 4}}>min</span></div>
          <div className="lbl">{T('video_credits')}</div>
          <div className="icn"><Icon.video size={15}/></div>
        </div>
      </div>

      {isLowBalance && (
        <div className="lowbal-banner">
          <Icon.warning size={16} style={{color: 'var(--error)', flex:'none'}}/>
          <div style={{flex:1, color:'var(--text-1)'}}>{T('low_balance')}</div>
          <button className="btn btn-primary btn-sm" onClick={()=>navigate('credits')}>{T('top_up')}</button>
        </div>
      )}

      {/* 3 Create CTAs */}
      <div className="grid-3">
        <button className="feature-card" onClick={()=>navigate('faceswap')}>
          <div className="ico"><Icon.face size={18}/></div>
          <div className="ttl">{T('face_swap')}</div>
          <div className="sub">{T('face_swap_sub')}</div>
        </button>
        <button className={"feature-card premium"} onClick={()=>navigate('multiface')}>
          {premium === 'free' && <div className="lock"><Icon.lock size={12}/></div>}
          <div className="ico"><Icon.multiface size={18}/></div>
          <div className="ttl">{T('multiface')}</div>
          <div className="sub">{T('multiface_sub')}</div>
        </button>
        <button className="feature-card" onClick={()=>navigate('imagegen')}>
          <div className="ico"><Icon.wand size={18}/></div>
          <div className="ttl">{T('image_gen')}</div>
          <div className="sub">{T('image_gen_sub')}</div>
        </button>
      </div>

      {ctx.features && ctx.features.fortune && <FortuneWidget ctx={ctx}/>}

      {/* Active jobs */}
      {jobs && jobs.length > 0 && (
        <>
          <div className="section-title">
            <h3>{T('active_jobs')}</h3>
          </div>
          <div className="col">
            {jobs.map(j => (
              <ActiveJobCard key={j.id} job={j} lang={lang}
                onClick={()=>navigate('process', { jobId: j.id })}/>
            ))}
          </div>
        </>
      )}

      {/* Referral teaser */}
      <button onClick={()=>navigate('referrals')} className="card" style={{
        textAlign:'left', cursor:'pointer', color:'inherit',
        display:'flex', alignItems:'center', gap: 12,
        background: 'linear-gradient(135deg, rgba(155,92,255,0.12), rgba(34,211,238,0.06))',
        borderColor: 'rgba(155,92,255,0.28)'
      }}>
        <div style={{
          width: 40, height: 40, borderRadius: 12,
          background: 'rgba(155,92,255,0.2)', color: 'var(--purple-3)',
          display:'flex',alignItems:'center',justifyContent:'center'
        }}>
          <Icon.gift size={20}/>
        </div>
        <div style={{flex: 1, textAlign: 'left'}}>
          <div style={{fontSize: 13, fontWeight: 600}}>{T('invite_friends')}</div>
          <div className="dim">{T('referral_teaser')}</div>
        </div>
        <Icon.chevronRight size={18}/>
      </button>

      <div style={{height: 4}}/>
    </div>
  );
}

function FortuneWidget({ ctx }){
  const { fortune, navigate, t: T } = ctx;
  const ready = fortune.dailyReady && fortune.spins === 0;
  const haveExtra = fortune.spins > 0;
  return (
    <div className="fortune-widget">
      <MiniWheel/>
      <div style={{display:'flex', flexDirection:'column', gap: 6, maxWidth: 220}}>
        <div className="chip chip-gold" style={{alignSelf:'flex-start'}}><Icon.sparkles size={11}/> Fortune</div>
        <div className="h-card">
          {haveExtra ? T('fortune_widget_spins', null, {n: fortune.spins})
            : ready ? T('fortune_widget_ready') :
            T('fortune_widget_cooldown') + ' ' + fortune.cooldown}
        </div>
        <div className="dim" style={{maxWidth: 200, lineHeight: 1.4}}>
          {ready || haveExtra ? 'Premium AI rewards await' : 'Earn extra spin by inviting'}
        </div>
        <div style={{display:'flex', gap: 8, marginTop: 4}}>
          <button className="btn btn-gold btn-sm" onClick={()=>navigate('fortune')}>
            {haveExtra || ready ? T('spin_now') : T('open_fortune')}
          </button>
        </div>
      </div>
    </div>
  );
}

function MiniWheel(){
  return (
    <div className="mini-wheel">
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: '50%',
        background: 'conic-gradient(from -90deg, #7C3AED, #22D3EE, #F6C85F, #9B5CFF, #38BDF8, #DFA64A, #C084FC, #2563EB, #7C3AED)',
        boxShadow: '0 0 0 3px #050716, 0 0 0 4px rgba(246,200,95,0.7), 0 0 26px -4px rgba(246,200,95,0.6)',
        animation: 'spinSlow 12s linear infinite',
      }}/>
      <div style={{
        position: 'absolute',
        inset: '32%',
        borderRadius: '50%',
        background: 'radial-gradient(circle at 30% 30%, #1a1b3a, #050716)',
        border: '1px solid var(--gold)',
        display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        <Icon.star size={14} style={{color: 'var(--gold)'}}/>
      </div>
      <style>{`@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}`}</style>
    </div>
  );
}

window.DashboardScreen = DashboardScreen;
window.FortuneWidget = FortuneWidget;