// Dev Portal screens 2: Dashboard, Transactions
const { useState: uS_d2, useEffect: uE_d2, useMemo: uM_d2, useRef: uR_d2 } = React;

// ============== 9. DASHBOARD ==============
function ScreenDevDashboard({ goto, mobile }) {
  const [tab, setTab] = uS_d2('overview');
  const [range, setRange] = uS_d2('30d');

  const tabs = [
    {id:'overview', label:'Обзор'},
    {id:'subs',     label:'Подписки'},
    {id:'payments', label:'Платежи'},
    {id:'customers',label:'Покупатели'},
  ];

  // Generate sparkline data
  const trendData = uM_d2(()=>{
    const days = range === '7d' ? 7 : range === '30d' ? 30 : 90;
    return Array.from({length: days}, (_,i) => {
      const base = 30000 + i*1500;
      const noise = Math.sin(i*0.7)*8000 + Math.cos(i*0.3)*4000;
      return Math.max(8000, base + noise + (Math.sin(i*1.3))*5000);
    });
  }, [range]);

  return (
    <DevShell goto={goto} mobile={mobile} currentScreen="devDashboard" title="Dashboard">
      {/* Date range + filters */}
      <div style={{display:'flex', alignItems:'center', gap:8, marginBottom: 20, flexWrap:'wrap'}}>
        <div style={{display:'flex', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:2}}>
          {[['7d','7 дней'],['30d','30 дней'],['90d','90 дней'],['ytd','С нач. года']].map(([k,l])=>(
            <button key={k} onClick={()=>setRange(k)} style={{
              padding:'6px 12px', fontSize:12, fontWeight: range===k?600:500,
              background: range===k?'var(--n-100)':'transparent',
              borderRadius:'var(--r-3)', color: range===k?'var(--text)':'var(--text-soft)',
            }}>{l}</button>
          ))}
        </div>
        <button className="btn btn-secondary btn-sm"><IconFilter size={12}/> Все продукты</button>
        <div style={{flex:1}}/>
        <button className="btn btn-secondary btn-sm"><IconDownload size={12}/> Экспорт CSV</button>
      </div>

      {/* Tabs */}
      <div className="tabs" style={{marginBottom:24}}>
        {tabs.map(t=>(
          <button key={t.id} className={'tab'+(tab===t.id?' active':'')} onClick={()=>setTab(t.id)}>{t.label}</button>
        ))}
      </div>

      {tab==='overview' && (
        <>
          {/* KPIs */}
          <div style={{display:'grid', gridTemplateColumns: mobile?'1fr 1fr':'repeat(4,1fr)', gap:12, marginBottom:24}}>
            {[
              ['GMV (валовой оборот)', 1284563, '₽', '+18,2%', 'up'],
              ['Чистая выручка', 1206488, '₽', '+19,4%', 'up'],
              ['Транзакции', 8412, '', '+12,1%', 'up'],
              ['ARPPU', 1284, '₽', '+5,3%', 'up'],
            ].map(([l,v,sfx,d,dir],i)=>(
              <div key={i} className="card" style={{padding:16}}>
                <div style={{fontSize:11, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>{l}</div>
                <div style={{fontSize:24, fontWeight:800, fontFamily:'var(--font-display)', letterSpacing:'-0.02em', marginTop:6}} className="tnum">
                  {fmtNum(v)} <span style={{fontSize:14, color:'var(--text-muted)', fontWeight:500}}>{sfx}</span>
                </div>
                <div style={{fontSize:11, color: dir==='up'?'var(--success)':'var(--danger)', marginTop:4, display:'flex', alignItems:'center', gap:4, fontWeight:600}}>
                  <IconArrowR size={10} style={{transform: dir==='up'?'rotate(-45deg)':'rotate(45deg)'}}/> {d}
                  <span style={{color:'var(--text-muted)', fontWeight:500}}>vs пред. период</span>
                </div>
              </div>
            ))}
          </div>

          {/* Main chart + breakdown */}
          <div style={{display:'grid', gridTemplateColumns: mobile?'1fr':'2fr 1fr', gap:16, marginBottom:24}}>
            <div className="card" style={{padding:20}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:16}}>
                <div>
                  <h3 style={{fontSize:14, fontWeight:600, margin:'0 0 4px'}}>Чистая выручка</h3>
                  <div style={{fontSize:24, fontWeight:800, fontFamily:'var(--font-display)', letterSpacing:'-0.02em'}} className="tnum">1 206 488 ₽</div>
                </div>
                <div style={{display:'flex', gap:12, fontSize:11}}>
                  <div style={{display:'flex', alignItems:'center', gap:5}}><span style={{width:8, height:8, borderRadius:2, background:'var(--n-900)'}}/>Выручка</div>
                  <div style={{display:'flex', alignItems:'center', gap:5}}><span style={{width:8, height:8, borderRadius:2, background:'var(--n-300)'}}/>Прошлый период</div>
                </div>
              </div>
              <RevenueChart data={trendData} mobile={mobile}/>
            </div>
            <div className="card" style={{padding:20}}>
              <h3 style={{fontSize:14, fontWeight:600, margin:'0 0 16px'}}>По способу оплаты</h3>
              {[
                ['Мир',     485000, 0.40, 'var(--n-900)'],
                ['СБП',     362000, 0.30, '#3F46FF'],
                ['SberPay', 217000, 0.18, '#21A038'],
                ['YandexPay', 145000, 0.12, '#FFCC00'],
              ].map(([n,v,p,c],i)=>(
                <div key={i} style={{marginBottom:14}}>
                  <div style={{display:'flex', justifyContent:'space-between', fontSize:13, marginBottom:6}}>
                    <span style={{fontWeight:500}}>{n}</span>
                    <span style={{fontWeight:600}} className="tnum">{fmtNum(v)} ₽</span>
                  </div>
                  <div style={{height:6, background:'var(--n-100)', borderRadius:'var(--r-full)', overflow:'hidden'}}>
                    <div style={{width:(p*100)+'%', height:'100%', background:c, borderRadius:'var(--r-full)', transition:'width .4s'}}/>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Top products + recent activity */}
          <div style={{display:'grid', gridTemplateColumns: mobile?'1fr':'1fr 1fr', gap:16}}>
            <div className="card" style={{padding:0, overflow:'hidden'}}>
              <div style={{padding:'16px 20px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between'}}>
                <h3 style={{fontSize:14, fontWeight:600, margin:0}}>Топ-продукты</h3>
                <button className="btn btn-ghost btn-sm">Все →</button>
              </div>
              <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
                <tbody>
                {[
                  ['1200 Кристаллов', 'Astral Chronicles', 421, 711_490],
                  ['Боевой пропуск', 'Astral Chronicles', 612, 361_080],
                  ['Premium 1 год', 'FocusFlow', 89, 355_110],
                  ['VIP-набор', 'Kingdom Rush', 134, 200_866],
                  ['600 Кристаллов', 'Astral Chronicles', 287, 256_000],
                ].map(([n,g,c,r],i)=>(
                  <tr key={i} style={{borderTop: i?'1px solid var(--border)':'none'}}>
                    <td style={{padding:'10px 20px'}}>
                      <div style={{fontWeight:600}}>{n}</div>
                      <div style={{fontSize:11, color:'var(--text-muted)'}}>{g} · {c} продаж</div>
                    </td>
                    <td style={{padding:'10px 20px', textAlign:'right', fontWeight:700, fontFamily:'var(--font-display)'}} className="tnum">{fmtNum(r)} ₽</td>
                  </tr>
                ))}
                </tbody>
              </table>
            </div>
            <div className="card" style={{padding:0, overflow:'hidden'}}>
              <div style={{padding:'16px 20px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <h3 style={{fontSize:14, fontWeight:600, margin:0}}>Последние транзакции</h3>
                <span style={{fontSize:11, color:'var(--success)', display:'flex', alignItems:'center', gap:5, fontWeight:600}}>
                  <span style={{width:6, height:6, borderRadius:'50%', background:'var(--success)', animation:'pulseDot 1.5s infinite'}}/> live
                </span>
              </div>
              <style>{`@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:0.3} }`}</style>
              {[
                ['00:08', '1200 Кристаллов', 1690, 'paid'],
                ['00:23', 'Боевой пропуск', 590, 'paid'],
                ['01:14', 'VIP 1 мес', 999, 'paid'],
                ['01:41', '6500 Кристаллов', 7500, 'paid'],
                ['02:02', 'Premium 1 год', 3990, 'paid'],
                ['02:18', '600 Кристаллов', 890, 'failed'],
                ['02:34', '300 Кристаллов', 490, 'paid'],
              ].map(([t,p,a,st],i)=>(
                <button onClick={()=>goto('devTx')} key={i} style={{display:'flex', width:'100%', alignItems:'center', gap:12, padding:'10px 20px', borderTop: i?'1px solid var(--border)':'none', textAlign:'left'}} className="lift">
                  <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-muted)', width:48}}>{t}</span>
                  <span style={{flex:1, fontSize:13, fontWeight:500}}>{p}</span>
                  <span style={{fontWeight:700, fontFamily:'var(--font-display)'}} className="tnum">{fmtNum(a)} ₽</span>
                  <span className={'badge '+(st==='failed'?'badge-danger':'badge-success')} style={{fontSize:10}}>{st==='failed'?'отклон':'оплачено'}</span>
                </button>
              ))}
            </div>
          </div>
        </>
      )}

      {tab === 'subs' && (
        <>
          <div style={{display:'grid', gridTemplateColumns: mobile?'1fr 1fr':'repeat(4,1fr)', gap:12, marginBottom:24}}>
            {[
              ['MRR', '847 200 ₽', '+22,4%'],
              ['Активные подписки', '1 248', '+89'],
              ['Trial → Paid', '38,2%', '+2,1пп'],
              ['Churn (30д)', '4,8%', '-0,3пп'],
            ].map(([l,v,d],i)=>(
              <div key={i} className="card" style={{padding:16}}>
                <div style={{fontSize:11, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>{l}</div>
                <div style={{fontSize:22, fontWeight:800, fontFamily:'var(--font-display)', letterSpacing:'-0.02em', marginTop:6}} className="tnum">{v}</div>
                <div style={{fontSize:11, color: d.startsWith('-')&&l.startsWith('Churn')?'var(--success)': d.startsWith('-')?'var(--danger)':'var(--success)', marginTop:4, fontWeight:600}}>{d}</div>
              </div>
            ))}
          </div>
          <div className="card" style={{padding:20}}>
            <h3 style={{fontSize:14, fontWeight:600, margin:'0 0 4px'}}>MRR Movement</h3>
            <p style={{fontSize:12, color:'var(--text-muted)', margin:'0 0 20px'}}>Из чего складывается прирост MRR за период</p>
            <MRRWaterfall mobile={mobile}/>
          </div>
        </>
      )}

      {tab === 'payments' && (
        <div className="card" style={{padding:20}}>
          <h3 style={{fontSize:14, fontWeight:600, margin:'0 0 16px'}}>Воронка платежей</h3>
          <PaymentFunnel mobile={mobile}/>
        </div>
      )}

      {tab === 'customers' && (
        <div className="card" style={{padding:48, textAlign:'center', color:'var(--text-muted)'}}>
          <IconUser size={32} style={{margin:'0 auto 12px', opacity:0.4}}/>
          <div style={{fontWeight:600, color:'var(--text)', marginBottom:4}}>Покупатели</div>
          <div style={{fontSize:13}}>Здесь будут когорты, LTV и сегменты — следующий спринт</div>
        </div>
      )}
    </DevShell>
  );
}

// Revenue chart SVG
function RevenueChart({ data, mobile }) {
  const w = mobile ? 320 : 600;
  const h = 180;
  const max = Math.max(...data) * 1.1;
  const points = data.map((d,i) => [i / (data.length-1) * w, h - (d/max)*h]);
  const pathD = points.map((p,i) => (i?'L':'M')+p[0].toFixed(1)+' '+p[1].toFixed(1)).join(' ');
  const areaD = pathD + ` L ${w} ${h} L 0 ${h} Z`;

  // previous period - lower amplitude, dashed
  const prev = data.map((d,i)=>d*0.82 - Math.sin(i*0.5)*3000);
  const prevPoints = prev.map((d,i)=>[i/(prev.length-1)*w, h - (d/max)*h]);
  const prevD = prevPoints.map((p,i)=>(i?'L':'M')+p[0].toFixed(1)+' '+p[1].toFixed(1)).join(' ');

  return (
    <svg viewBox={`0 0 ${w} ${h+20}`} style={{width:'100%', height: 'auto', display:'block'}}>
      <defs>
        <linearGradient id="gFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--n-900)" stopOpacity="0.15"/>
          <stop offset="100%" stopColor="var(--n-900)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {/* grid */}
      {[0,1,2,3].map(i=>(<line key={i} x1="0" x2={w} y1={i*h/3} y2={i*h/3} stroke="var(--border)" strokeWidth="1"/>))}
      <path d={areaD} fill="url(#gFill)"/>
      <path d={prevD} stroke="var(--n-300)" strokeWidth="1.5" strokeDasharray="3 3" fill="none"/>
      <path d={pathD} stroke="var(--n-900)" strokeWidth="2" fill="none"/>
      {/* labels */}
      {[0, Math.floor(data.length/2), data.length-1].map(i=>(
        <text key={i} x={i / (data.length-1) * w} y={h+15} fontSize="10" fill="var(--text-muted)" textAnchor={i===0?'start':i===data.length-1?'end':'middle'}>
          {i===0?'1 апр':i===data.length-1?'1 мая':'15 апр'}
        </text>
      ))}
    </svg>
  );
}

function MRRWaterfall({ mobile }) {
  const bars = [
    { label:'MRR начало', val: 690000, color:'var(--n-700)' },
    { label:'+ Новые',    val: 142000, color:'var(--success)', delta:true },
    { label:'+ Reactivation', val: 28000, color:'var(--success)', delta:true },
    { label:'+ Expansion', val: 36000, color:'var(--info)', delta:true },
    { label:'− Churn',    val: -49000, color:'var(--danger)', delta:true },
    { label:'MRR конец',  val: 847000, color:'var(--n-900)' },
  ];
  const max = 900000;
  let cum = 0;
  return (
    <div style={{display:'flex', alignItems:'flex-end', gap: mobile?6:16, height: 220, padding:'0 8px', overflowX:'auto'}}>
      {bars.map((b,i) => {
        const isStart = i === 0;
        const isEnd = i === bars.length - 1;
        const h = Math.abs(isStart||isEnd ? b.val : b.val) / max * 180;
        const baseY = b.delta ? (b.val<0 ? cum/max*180 : (cum + b.val)/max*180) : (b.val/max*180);
        if (b.delta) cum += b.val;
        else cum = b.val;
        return (
          <div key={i} style={{display:'flex', flexDirection:'column', alignItems:'center', minWidth: mobile?60:80, flexShrink:0}}>
            <div style={{fontSize:11, fontWeight:600, marginBottom:6, fontFamily:'var(--font-display)'}} className="tnum">
              {b.delta?(b.val>0?'+':'')+fmtNum(Math.round(b.val/1000))+'k':fmtNum(Math.round(b.val/1000))+'k'}
            </div>
            <div style={{position:'relative', width: '100%', height: 180, display:'flex', alignItems:'flex-end'}}>
              <div style={{
                width:'100%',
                height: Math.max(h, 6),
                background: b.color,
                borderRadius:'var(--r-2) var(--r-2) 0 0',
                marginBottom: b.delta && b.val>0 ? (cum-b.val)/max*180 : 0,
                opacity: 0.95,
              }}/>
            </div>
            <div style={{fontSize:10, color:'var(--text-muted)', marginTop:6, textAlign:'center', maxWidth:80}}>{b.label}</div>
          </div>
        );
      })}
    </div>
  );
}

function PaymentFunnel({ mobile }) {
  const steps = [
    ['Открыли чекаут', 12483, 1.0, 'var(--n-200)'],
    ['Ввели ID', 11215, 0.898, 'var(--n-300)'],
    ['Выбрали способ', 10420, 0.834, 'var(--n-500)'],
    ['Подтвердили', 9128, 0.731, 'var(--n-700)'],
    ['Платёж успешен', 8412, 0.674, 'var(--success)'],
  ];
  return (
    <div style={{display:'flex', flexDirection:'column', gap:8}}>
      {steps.map(([l,v,p,c],i)=>(
        <div key={i} style={{display:'flex', alignItems:'center', gap:12}}>
          <div style={{width: mobile?100:140, fontSize:13, fontWeight:500}}>{l}</div>
          <div style={{flex:1, height: 32, background:'var(--n-50)', borderRadius:'var(--r-3)', position:'relative', overflow:'hidden'}}>
            <div style={{width: (p*100)+'%', height:'100%', background: c, borderRadius:'var(--r-3)', display:'flex', alignItems:'center', padding:'0 12px', color:'#fff', fontSize:12, fontWeight:600}}>
              <span className="tnum">{fmtNum(v)}</span>
              <span style={{marginLeft:8, opacity:0.8}}>{(p*100).toFixed(1)}%</span>
            </div>
          </div>
          {i>0 && (
            <div style={{width:60, fontSize:11, color: i===4?'var(--success)':'var(--text-muted)', textAlign:'right'}}>
              {i===steps.length-1?'✓ конверт.':`−${((1-v/steps[i-1][1])*100).toFixed(1)}%`}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

// ============== 10. TRANSACTIONS w/ DRILL-DOWN ==============
function ScreenDevTx({ goto, mobile }) {
  const [filter, setFilter] = uS_d2('all');
  const [selectedTx, setSelectedTx] = uS_d2(null);
  const [search, setSearch] = uS_d2('');

  const all = uM_d2(()=>{
    const products = ['1200 Кристаллов','Боевой пропуск','VIP-набор','6500 Кристаллов','Premium 1 год','Топливо ×100','Без рекламы','300 Кристаллов'];
    const methods = ['mir','sbp','sberpay','yandexpay'];
    const statuses = ['paid','paid','paid','paid','paid','paid','paid','paid','failed','refund','pending'];
    const games = ['Astral Chronicles','Kingdom Rush','Drift Royale','Solitaire+','FocusFlow'];
    return Array.from({length: 24}, (_,i) => ({
      id: 'tx_' + ('1m4kr' + (1003-i).toString(36)).padEnd(12,'x').slice(0,12),
      date: `${(13 - Math.floor(i/4)).toString().padStart(2,'0')}.05 ${(23-i%24).toString().padStart(2,'0')}:${((i*17)%60).toString().padStart(2,'0')}`,
      product: products[i%products.length],
      game: games[i%games.length],
      customer: 'AC-' + (7000000 + i*1031).toString(),
      method: methods[i%methods.length],
      amount: [199, 299, 490, 590, 890, 999, 1690, 3990, 7500][i%9],
      status: statuses[i%statuses.length],
    }));
  },[]);

  const filtered = uM_d2(()=>{
    let r = all;
    if (filter !== 'all') r = r.filter(t => t.status === filter);
    if (search) r = r.filter(t => t.id.includes(search) || t.customer.includes(search.toUpperCase()) || t.product.toLowerCase().includes(search.toLowerCase()));
    return r;
  }, [filter, search, all]);

  const counts = uM_d2(()=>({
    all: all.length,
    paid: all.filter(t=>t.status==='paid').length,
    failed: all.filter(t=>t.status==='failed').length,
    refund: all.filter(t=>t.status==='refund').length,
    pending: all.filter(t=>t.status==='pending').length,
  }), [all]);

  return (
    <DevShell goto={goto} mobile={mobile} currentScreen="devTx" title="Транзакции">
      {/* Filters */}
      <div style={{display:'flex', gap:6, marginBottom:16, flexWrap:'wrap', alignItems:'center'}}>
        {[
          ['all','Все', counts.all],
          ['paid','Оплачено', counts.paid],
          ['pending','В обработке', counts.pending],
          ['failed','Отклонено', counts.failed],
          ['refund','Возврат', counts.refund],
        ].map(([k,l,c])=>(
          <button key={k} onClick={()=>setFilter(k)} className={'btn btn-sm '+(filter===k?'btn-primary':'btn-secondary')}>
            {l} <span style={{opacity:0.6, marginLeft:4}}>{c}</span>
          </button>
        ))}
        <div style={{flex:1}}/>
        <div style={{position:'relative'}}>
          <IconSearch style={{position:'absolute', left:10, top:'50%', transform:'translateY(-50%)', color:'var(--n-400)'}} size={14}/>
          <input className="input" placeholder="ID, клиент, продукт..." value={search} onChange={e=>setSearch(e.target.value)} style={{paddingLeft:32, height:32, fontSize:12, width: mobile?'100%':260}}/>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns: selectedTx && !mobile ? '1fr 360px' : '1fr', gap:16}}>
        {/* Table */}
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <div className="scroll-thin" style={{overflowX:'auto'}}>
            <table style={{width:'100%', borderCollapse:'collapse', fontSize:12, minWidth: 700}}>
              <thead style={{background:'var(--n-50)', position:'sticky', top:0}}>
                <tr>
                  {['ID','Дата','Продукт','Клиент','Метод','Сумма','Статус'].map(h=>(
                    <th key={h} style={{padding:'10px 14px', textAlign:'left', fontWeight:600, fontSize:11, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.04em', whiteSpace:'nowrap'}}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {filtered.map(t => (
                  <tr key={t.id} onClick={()=>setSelectedTx(t)} style={{
                    borderTop:'1px solid var(--border)', cursor:'pointer',
                    background: selectedTx?.id === t.id ? 'var(--n-50)' : undefined,
                  }}>
                    <td style={{padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-soft)'}}>{t.id}</td>
                    <td style={{padding:'10px 14px', whiteSpace:'nowrap', color:'var(--text-soft)'}} className="tnum">{t.date}</td>
                    <td style={{padding:'10px 14px'}}>
                      <div style={{fontWeight:600}}>{t.product}</div>
                      <div style={{fontSize:11, color:'var(--text-muted)'}}>{t.game}</div>
                    </td>
                    <td style={{padding:'10px 14px', fontFamily:'var(--font-mono)', fontSize:11}}>{t.customer}</td>
                    <td style={{padding:'10px 14px'}}><PayLogo kind={t.method} size={18}/></td>
                    <td style={{padding:'10px 14px', textAlign:'right', fontWeight:700, fontFamily:'var(--font-display)', whiteSpace:'nowrap'}} className="tnum">{fmtNum(t.amount)} ₽</td>
                    <td style={{padding:'10px 14px'}}>
                      <span className={'badge '+(t.status==='paid'?'badge-success':t.status==='failed'?'badge-danger':t.status==='refund'?'badge-warning':'badge')} style={{fontSize:10}}>
                        {t.status==='paid'?'оплачено':t.status==='failed'?'отклонено':t.status==='refund'?'возврат':'в обработке'}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div style={{padding:'10px 14px', borderTop:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:12, color:'var(--text-muted)'}}>
            <span>Показано {filtered.length} из {all.length}</span>
            <div style={{display:'flex', gap:4}}>
              <button className="btn btn-ghost btn-sm" disabled style={{opacity:0.4}}><IconChevL size={12}/></button>
              <button className="btn btn-ghost btn-sm">1</button>
              <button className="btn btn-ghost btn-sm" style={{background:'var(--n-100)'}}>2</button>
              <button className="btn btn-ghost btn-sm">3</button>
              <button className="btn btn-ghost btn-sm"><IconChevL size={12} style={{transform:'rotate(180deg)'}}/></button>
            </div>
          </div>
        </div>

        {/* Drill-down panel */}
        {selectedTx && (
          <aside className="card" style={{padding:0, height:'fit-content', position: mobile?'fixed':'sticky', top: mobile?0:80, left: mobile?0:undefined, right: mobile?0:undefined, bottom: mobile?0:undefined, zIndex: mobile?100:1, maxHeight: mobile?'100vh':undefined, overflowY:'auto', borderRadius: mobile?0:'var(--r-4)'}}>
            <div style={{padding:'14px 16px', borderBottom:'1px solid var(--border)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <div>
                <div style={{fontSize:11, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>Транзакция</div>
                <div style={{fontFamily:'var(--font-mono)', fontSize:13, fontWeight:600, marginTop:2}}>{selectedTx.id}</div>
              </div>
              <button onClick={()=>setSelectedTx(null)} className="btn btn-ghost btn-sm" style={{padding:6}}><IconX size={14}/></button>
            </div>
            <div style={{padding:16}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:16, paddingBottom:16, borderBottom:'1px solid var(--border)'}}>
                <div>
                  <div style={{fontSize:11, color:'var(--text-muted)'}}>Сумма</div>
                  <div style={{fontSize:28, fontWeight:800, fontFamily:'var(--font-display)', letterSpacing:'-0.02em'}} className="tnum">{fmtNum(selectedTx.amount)} ₽</div>
                </div>
                <span className={'badge '+(selectedTx.status==='paid'?'badge-success':selectedTx.status==='failed'?'badge-danger':selectedTx.status==='refund'?'badge-warning':'badge')}>
                  {selectedTx.status==='paid'?'Оплачено':selectedTx.status==='failed'?'Отклонено':selectedTx.status==='refund'?'Возврат':'В обработке'}
                </span>
              </div>

              <div style={{display:'flex', flexDirection:'column', gap:10, marginBottom:16}}>
                {[
                  ['Продукт', selectedTx.product],
                  ['Игра', selectedTx.game],
                  ['Покупатель', selectedTx.customer],
                  ['Метод оплаты', <span style={{display:'flex', alignItems:'center', gap:6}}><PayLogo kind={selectedTx.method} size={16}/> {selectedTx.method.toUpperCase()}</span>],
                  ['Дата', selectedTx.date + ' MSK'],
                  ['Комиссия rev.cut', '−' + Math.round(selectedTx.amount * 0.025) + ' ₽ (2,5%)'],
                  ['Чистая выручка', <strong>{fmtNum(selectedTx.amount - Math.round(selectedTx.amount * 0.025))} ₽</strong>],
                ].map(([k,v],i)=>(
                  <div key={i} style={{display:'flex', justifyContent:'space-between', fontSize:13}}>
                    <span style={{color:'var(--text-muted)'}}>{k}</span>
                    <span style={{fontWeight:500, textAlign:'right'}}>{v}</span>
                  </div>
                ))}
              </div>

              {/* Timeline */}
              <div style={{borderTop:'1px solid var(--border)', paddingTop:16, marginBottom: 16}}>
                <div style={{fontSize:11, fontWeight:600, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:12}}>Лог событий</div>
                <div style={{display:'flex', flexDirection:'column', gap:10}}>
                  {[
                    ['Создан запрос', '00:08:12', 'pending', true],
                    ['Платёж проведён в ЮKassa', '00:08:15', 'success', true],
                    ['Webhook отправлен в ваш бэкенд', '00:08:16', 'success', true],
                    ['Webhook 200 OK от backend', '00:08:17', 'success', true],
                    ['Чек 54-ФЗ отправлен в ОФД', '00:08:19', 'success', true],
                  ].map(([n,t,s,d],i)=>(
                    <div key={i} style={{display:'flex', gap:10, fontSize:12}}>
                      <div style={{width:8, height:8, borderRadius:'50%', background: s==='success'?'var(--success)':'var(--n-300)', marginTop:4, flexShrink:0}}/>
                      <div style={{flex:1}}>
                        <div style={{fontWeight:500}}>{n}</div>
                        <div style={{fontSize:11, color:'var(--text-muted)', fontFamily:'var(--font-mono)'}}>{t}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Webhook payload */}
              <details style={{borderTop:'1px solid var(--border)', paddingTop:16, marginBottom: 16}}>
                <summary style={{fontSize:12, fontWeight:600, cursor:'pointer', color:'var(--text-soft)'}}>Webhook payload (JSON)</summary>
                <pre className="mono" style={{padding:12, background:'var(--n-900)', color:'#E2E8F0', borderRadius:'var(--r-3)', fontSize:10, marginTop:8, overflow:'auto', lineHeight:1.6}}>
{`{
  "type": "payment.succeeded",
  "id": "${selectedTx.id}",
  "amount": ${selectedTx.amount}00,
  "currency": "RUB",
  "product_id": "battle_pass_monthly",
  "customer": {
    "ingame_id": "${selectedTx.customer}",
    "email": "demo@example.com"
  },
  "method": "${selectedTx.method}",
  "fiscal_receipt": "https://ofd.../17428"
}`}
                </pre>
              </details>

              <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
                <button className="btn btn-secondary btn-sm" style={{flex:1}}><IconRefresh size={12}/> Повторить webhook</button>
                <button className="btn btn-secondary btn-sm" style={{flex:1}}>Возврат</button>
              </div>
              <button className="btn btn-ghost btn-sm" style={{width:'100%', marginTop:8}}><IconExternal size={12}/> Открыть фискальный чек</button>
            </div>
          </aside>
        )}
      </div>
    </DevShell>
  );
}

window.ScreenDevDashboard = ScreenDevDashboard;
window.ScreenDevTx = ScreenDevTx;