// admin-stats.jsx — Statistici globale 4U Agency

const { useState: useStateAS } = React;

function AdminStatsPage({ onNav, user }) {
  const adminUser = { name: user?.name || 'Andrei Popescu' };
  const [period, setPeriod] = useStateAS('30');
  const [compare, setCompare] = useStateAS(true);

  return (
    <div className="page" style={{ display: 'grid', gridTemplateColumns: '260px 1fr', minHeight: '100vh', background: 'linear-gradient(135deg, #0A0A0F, #0E0E0E)' }}>
      <DashSidebar active="admin-stats" onNav={onNav} user={adminUser} admin />
      <main style={{ padding: '32px 48px 80px', overflowY: 'auto' }} className="dash-main">
        {/* Header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 20 }}>
          <div>
            <div className="pill" style={{ background: 'rgba(255,215,0,.08)', borderColor: 'rgba(255,215,0,.4)', color: 'var(--accent-2)', display: 'inline-flex', marginBottom: 12 }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.15em' }}>● STATISTICI GLOBALE</span>
            </div>
            <h1 className="display" style={{ fontSize: 32, margin: 0 }}>Analytics & Performance</h1>
            <p style={{ fontSize: 13, color: 'var(--txt-2)', marginTop: 4 }}>Date complete despre 4U Agency</p>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <input type="date" className="input" style={{ width: 'auto', height: 36 }} />
            <button className="btn btn-glass btn-sm">📥 Export raport</button>
            <button className="btn btn-glass btn-sm">📅 Programează raport</button>
          </div>
        </div>

        {/* Sticky filter band */}
        <div style={{ position: 'sticky', top: 0, zIndex: 5, padding: '8px 0', background: 'linear-gradient(180deg, #0A0A0F 60%, transparent)', marginBottom: 20 }}>
          <div className="card-glass" style={{ padding: 8, display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
            {[['1','Astăzi'],['7','7 zile'],['30','30 zile'],['90','90 zile'],['365','Anul curent'],['custom','Custom']].map(([k, l]) => (
              <button key={k} onClick={() => setPeriod(k)} style={{
                padding: '6px 12px', borderRadius: 8, fontSize: 12,
                background: period === k ? 'var(--accent-1)' : 'transparent',
                color: period === k ? '#000' : 'var(--txt-2)',
                border: 'none', cursor: 'default', fontWeight: period === k ? 600 : 400,
              }}>{l}</button>
            ))}
            <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--txt-2)' }}>
              <button onClick={() => setCompare(!compare)} style={{ width: 36, height: 20, borderRadius: 999, background: compare ? 'var(--accent-1)' : 'rgba(255,255,255,.1)', border: 'none', cursor: 'default', position: 'relative' }}>
                <div style={{ position: 'absolute', top: 2, left: compare ? 18 : 2, width: 16, height: 16, borderRadius: '50%', background: compare ? '#000' : '#fff', transition: 'left .2s' }} />
              </button>
              Comparare cu perioada anterioară
            </div>
          </div>
        </div>

        {/* KPI grid 4x2 */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }} className="ks-kpi">
          {[
            ['👥', 'Creatori activi', '4.847', '+5.2%', 'up'],
            ['📦', 'Total comenzi', '1.243', '+12%', 'up'],
            ['💎', 'Puncte distribuite', '1.247.582', '-2.1%', 'warn'],
            ['💰', 'Revenue (RON)', '285.420', '+18%', 'up'],
            ['🎓', 'Înscrieri module', '187', '+22%', 'up'],
            ['⚔️', 'Meciuri câștigate', '23', '+15%', 'up'],
            ['📢', 'Campanii completate', '14', '+40%', 'up'],
            ['💬', 'Conversații AI', '8.421', '+58%', 'up'],
          ].map(([i, l, v, d, k], idx) => (
            <div key={idx} className="card" style={{ padding: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                <div style={{ fontSize: 22 }}>{i}</div>
                {compare && (
                  <div style={{ fontSize: 10, fontWeight: 700, padding: '2px 6px', borderRadius: 4, fontFamily: 'JetBrains Mono, monospace',
                    background: k === 'up' ? 'rgba(82,242,15,.15)' : 'rgba(255,215,0,.15)',
                    color: k === 'up' ? 'var(--accent-1)' : '#FFD700',
                  }}>{d}</div>
                )}
              </div>
              <div style={{ fontSize: 10, color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'JetBrains Mono, monospace' }}>{l}</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--txt-1)', fontFamily: 'JetBrains Mono, monospace', marginTop: 2 }}>{v}</div>
              <Sparkline />
            </div>
          ))}
        </div>

        {/* Row 2: line chart + donut */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20, marginBottom: 20 }} className="ks-2col">
          <div className="card" style={{ padding: 20 }}>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 14 }}>Evoluție creatori (12 luni)</div>
            <AsCreatorsChart />
          </div>
          <div className="card" style={{ padding: 20 }}>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 14 }}>Distribuție tier creatori</div>
            <Donut />
          </div>
        </div>

        {/* Row 3: 3 columns */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 20 }} className="ks-3col">
          <div className="card" style={{ padding: 20 }}>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 14 }}>Top 10 categorii produse</div>
            <BarRanking items={[
              ['Tech', 28], ['Modă & Lifestyle', 22], ['Călătorii', 16], ['Beauty', 11],
              ['Voucher cash', 8], ['Experiențe', 6], ['Concerte', 4], ['Gaming', 3], ['Fitness', 1.5], ['Altele', 0.5],
            ]} unit="%" color="var(--accent-1)" />
          </div>
          <div className="card" style={{ padding: 20 }}>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 14 }}>Top 10 module</div>
            <div style={{ display: 'grid', gap: 8 }}>
              {[
                ['Charisma & Performanță Live', 187, 4.9],
                ['Strategii Diamante 2026', 154, 4.8],
                ['Pregătire Live Battles', 132, 4.7],
                ['Mindset Creator Pro', 121, 4.8],
                ['OBS & Setup Tehnic', 98, 4.6],
                ['Branding personal TikTok', 87, 4.5],
                ['Live Selling 101', 76, 4.7],
                ['Storytelling Live', 64, 4.6],
                ['Audiență internațională', 52, 4.5],
                ['Fiscalitate creator', 41, 4.4],
              ].map(([t, n, r], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '20px 1fr 40px 40px', gap: 8, fontSize: 11, padding: '6px 0', borderBottom: i < 9 ? '1px solid rgba(255,255,255,.04)' : 'none', alignItems: 'center' }}>
                  <span style={{ color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace' }}>#{i + 1}</span>
                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t}</span>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', color: 'var(--accent-1)', textAlign: 'right' }}>{n}</span>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', color: '#FFD700', textAlign: 'right' }}>{r}★</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card" style={{ padding: 20 }}>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 14 }}>Top 10 creatori (luna)</div>
            <div style={{ display: 'grid', gap: 8 }}>
              {[
                ['Alex Marin', 'AM', 1521000, 'DIAMOND'],
                ['Sophia Lloyd', 'SL', 1240500, 'DIAMOND'],
                ['Elena Petrescu', 'EP', 892100, 'PLATINUM'],
                ['Irina Tudor', 'IT', 723000, 'PLATINUM'],
                ['Ioana Vlad', 'IV', 612000, 'GOLD'],
                ['Andra Mihăescu', 'AM', 524800, 'GOLD'],
                ['Marco Rossi', 'MR', 487200, 'GOLD'],
                ['Lars van Berg', 'LV', 421000, 'SILVER'],
                ['Răzvan Popescu', 'RP', 412300, 'SILVER'],
                ['Cristi Focșa', 'CF', 354000, 'SILVER'],
              ].map(([n, av, d, t], i) => {
                const tc = { DIAMOND: '#52F20F', PLATINUM: '#a8c8ff', GOLD: '#FFD700', SILVER: '#cbd5e0', BRONZE: '#cd7f32' };
                return (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '20px 26px 1fr auto', gap: 8, fontSize: 11, padding: '4px 0', alignItems: 'center' }}>
                    <span style={{ color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace' }}>#{i + 1}</span>
                    <div style={{ width: 24, height: 24, borderRadius: 6, background: 'rgba(82,242,15,.15)', color: 'var(--accent-1)', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700 }}>{av}</div>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{n}</div>
                      <div style={{ fontSize: 9, color: tc[t], fontFamily: 'JetBrains Mono, monospace', letterSpacing: '.05em' }}>{t}</div>
                    </div>
                    <span style={{ fontFamily: 'JetBrains Mono, monospace', color: 'var(--accent-1)', fontSize: 10 }}>{(d / 1000).toFixed(0)}K💎</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Geo map */}
        <div className="card" style={{ padding: 20, marginBottom: 20 }}>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 14 }}>Distribuția creatorilor pe țări</div>
          <GeoMap />
          <div style={{ overflowX: 'auto', marginTop: 16 }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, minWidth: 600 }}>
              <thead>
                <tr style={{ background: 'rgba(255,255,255,.03)' }}>
                  {['Țara', 'Creatori', 'Top tier', 'Revenue (RON)', '% din total'].map(h => (
                    <th key={h} style={{ padding: '10px 14px', textAlign: 'left', fontSize: 10, color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '.08em' }}>{h.toUpperCase()}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[
                  ['🇷🇴 România', 3142, 'DIAMOND', 187420, 64.8],
                  ['🇬🇧 UK', 487, 'DIAMOND', 38400, 10.0],
                  ['🇩🇪 Germania', 412, 'PLATINUM', 28100, 8.5],
                  ['🇮🇹 Italia', 287, 'GOLD', 14200, 5.9],
                  ['🇪🇸 Spania', 198, 'GOLD', 9800, 4.1],
                  ['🇦🇹 Austria', 142, 'SILVER', 4200, 2.9],
                  ['🇨🇭 Elveția', 98, 'GOLD', 2400, 2.0],
                  ['🇦🇪 UAE', 81, 'PLATINUM', 900, 1.7],
                ].map(([c, n, t, r, p], i) => (
                  <tr key={i} style={{ borderTop: '1px solid rgba(255,255,255,.04)' }}>
                    <td style={{ padding: '10px 14px' }}>{c}</td>
                    <td style={{ padding: '10px 14px', fontFamily: 'JetBrains Mono, monospace' }}>{n.toLocaleString('ro-RO')}</td>
                    <td style={{ padding: '10px 14px', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--accent-2)' }}>{t}</td>
                    <td style={{ padding: '10px 14px', fontFamily: 'JetBrains Mono, monospace', color: 'var(--accent-1)' }}>{r.toLocaleString('ro-RO')}</td>
                    <td style={{ padding: '10px 14px' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ width: 80, height: 6, background: 'rgba(255,255,255,.05)', borderRadius: 3, overflow: 'hidden' }}>
                          <div style={{ height: '100%', width: p + '%', background: 'var(--accent-1)' }} />
                        </div>
                        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10 }}>{p}%</span>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Trends & Insights */}
        <div style={{ marginBottom: 20 }}>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>Trends & Insights</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }} className="ks-ins">
            {[
              ['📈', 'Trending up', 'Categoria "Călătorii" a crescut +47% în 30 zile. Creatorii prioritizează experiențe.', 'var(--accent-1)', 'rgba(82,242,15,.04)'],
              ['📉', 'Needs attention', 'Conversia signup → primul live a scăzut la 37% (de la 45% luna trecută).', '#FFD700', 'rgba(255,215,0,.04)'],
              ['⚡', 'Opportunity', 'Creatorii din UK au rating 4.9 dar buget mic. Sugestie: campanie targeted UK.', '#FFD700', 'rgba(255,215,0,.04)'],
              ['🎯', 'Goal progress', 'Target lunar: 5.000 creatori activi. Progres: 4.847 (97%).', 'var(--accent-1)', 'rgba(82,242,15,.04)'],
            ].map(([i, l, t, c, b], k) => (
              <div key={k} className="card" style={{ padding: 16, background: b, borderColor: c }}>
                <div style={{ fontSize: 20, marginBottom: 6 }}>{i}</div>
                <div style={{ fontSize: 11, color: c, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '.08em', textTransform: 'uppercase' }}>{l}</div>
                <div style={{ fontSize: 12, color: 'var(--txt-2)', marginTop: 6, lineHeight: 1.5 }}>{t}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Cohort */}
        <div className="card" style={{ padding: 20, marginBottom: 20 }}>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>Cohort analysis — Retenție creatori</div>
          <div style={{ fontSize: 11, color: 'var(--txt-3)', marginBottom: 14 }}>% rămași activi după luna de înscriere</div>
          <CohortTable />
        </div>

        {/* Funnel */}
        <div className="card" style={{ padding: 20, marginBottom: 20 }}>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 14 }}>Funnel conversie</div>
          <Funnel />
        </div>

        {/* Footer exports */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', padding: 20, background: 'rgba(255,255,255,.02)', borderRadius: 12, border: '1px solid rgba(255,255,255,.06)' }}>
          <button className="btn btn-glass">📥 Export Excel cu toate datele</button>
          <button className="btn btn-glass">📥 Export PDF cu grafice</button>
          <button className="btn btn-glass">📧 Trimite raport pe email</button>
          <button className="btn btn-primary">📅 Programează raport recurent</button>
        </div>

        <style>{`
          @media (max-width: 1100px) {
            .ks-kpi { grid-template-columns: repeat(2, 1fr) !important; }
            .ks-2col { grid-template-columns: 1fr !important; }
            .ks-3col { grid-template-columns: 1fr !important; }
            .ks-ins { grid-template-columns: repeat(2, 1fr) !important; }
          }
          @media (max-width: 600px) {
            .ks-ins { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </main>
    </div>
  );
}

function Sparkline() {
  const pts = Array.from({ length: 30 }, (_, i) => 20 + Math.sin(i / 4) * 8 + Math.random() * 6 + i * 0.3);
  const max = Math.max(...pts), min = Math.min(...pts);
  const path = pts.map((v, i) => `${(i / 29) * 100},${30 - ((v - min) / (max - min)) * 28}`).join(' L ');
  return <svg viewBox="0 0 100 32" preserveAspectRatio="none" style={{ width: '100%', height: 28, marginTop: 8 }}>
    <path d={`M ${path}`} fill="none" stroke="var(--accent-1)" strokeWidth="1.2" />
  </svg>;
}

function AsCreatorsChart() {
  const months = ['mai','iun','iul','aug','sep','oct','nov','dec','ian','feb','mar','apr'];
  const total = [3098, 3241, 3387, 3502, 3641, 3812, 3987, 4180, 4500, 4612, 4847, 4847];
  const active = [2700, 2820, 2950, 3100, 3280, 3500, 3700, 3850, 4100, 4280, 4520, 4640];
  const news = [180, 195, 210, 215, 230, 280, 320, 290, 410, 280, 310, 340];
  const W = 700, H = 240, max = 5000;
  const path = (data, c) => `M ${data.map((v, i) => `${(i / 11) * W},${H - (v / max) * H}`).join(' L ')}`;
  return (
    <div style={{ overflowX: 'auto' }}>
      <svg viewBox={`0 0 ${W} ${H + 30}`} style={{ width: '100%', minWidth: 500, height: 270 }}>
        {[0, 0.25, 0.5, 0.75, 1].map(p => <line key={p} x1="0" y1={H * p} x2={W} y2={H * p} stroke="rgba(255,255,255,.05)" />)}
        <path d={path(total, '#52F20F')} fill="none" stroke="#52F20F" strokeWidth="2.5" />
        <path d={path(active, '#FFD700')} fill="none" stroke="#FFD700" strokeWidth="2" />
        <path d={path(news, '#fff')} fill="none" stroke="rgba(255,255,255,.7)" strokeWidth="1.5" strokeDasharray="3 3" />
        {months.map((m, i) => <text key={i} x={(i / 11) * W} y={H + 20} fontSize="11" fill="rgba(255,255,255,.4)" fontFamily="JetBrains Mono" textAnchor="middle">{m}</text>)}
      </svg>
      <div style={{ display: 'flex', gap: 16, fontSize: 11, marginTop: 4, flexWrap: 'wrap' }}>
        <span><span style={{ display: 'inline-block', width: 10, height: 10, background: '#52F20F', borderRadius: 2, marginRight: 6 }}></span>Total creatori</span>
        <span><span style={{ display: 'inline-block', width: 10, height: 10, background: '#FFD700', borderRadius: 2, marginRight: 6 }}></span>Activi</span>
        <span><span style={{ display: 'inline-block', width: 10, height: 10, background: '#fff', borderRadius: 2, marginRight: 6 }}></span>Noi (lună)</span>
      </div>
    </div>
  );
}

function Donut() {
  const data = [
    { l: 'BRONZE', v: 45, c: '#cd7f32', n: 2181 },
    { l: 'SILVER', v: 28, c: '#cbd5e0', n: 1357 },
    { l: 'GOLD', v: 18, c: '#FFD700', n: 872 },
    { l: 'PLATINUM', v: 7, c: '#a8c8ff', n: 339 },
    { l: 'DIAMOND', v: 2, c: '#52F20F', n: 98 },
  ];
  const r = 70, cx = 90, cy = 90, total = 100;
  let acc = 0;
  return (
    <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
      <svg viewBox="0 0 180 180" style={{ width: 180, height: 180, flexShrink: 0 }}>
        {data.map((d, i) => {
          const start = (acc / total) * 360 - 90;
          const end = ((acc + d.v) / total) * 360 - 90;
          acc += d.v;
          const sx = cx + r * Math.cos(start * Math.PI / 180);
          const sy = cy + r * Math.sin(start * Math.PI / 180);
          const ex = cx + r * Math.cos(end * Math.PI / 180);
          const ey = cy + r * Math.sin(end * Math.PI / 180);
          const large = d.v > 50 ? 1 : 0;
          return <path key={i} d={`M ${cx} ${cy} L ${sx} ${sy} A ${r} ${r} 0 ${large} 1 ${ex} ${ey} Z`} fill={d.c} stroke="#0E0E0E" strokeWidth="2" />;
        })}
        <circle cx={cx} cy={cy} r={36} fill="#0E0E0E" />
        <text x={cx} y={cy - 4} fontSize="11" fill="rgba(255,255,255,.6)" textAnchor="middle" fontFamily="JetBrains Mono">TOTAL</text>
        <text x={cx} y={cy + 14} fontSize="18" fill="#52F20F" fontWeight="700" textAnchor="middle" fontFamily="JetBrains Mono">4.847</text>
      </svg>
      <div style={{ flex: 1, minWidth: 160, display: 'grid', gap: 8 }}>
        {data.map((d, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr auto auto', gap: 10, alignItems: 'center', fontSize: 11 }}>
            <div style={{ width: 12, height: 12, background: d.c, borderRadius: 3 }} />
            <span style={{ fontFamily: 'JetBrains Mono, monospace' }}>{d.l}</span>
            <span style={{ color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace' }}>{d.v}%</span>
            <span style={{ color: 'var(--accent-1)', fontFamily: 'JetBrains Mono, monospace' }}>{d.n}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function BarRanking({ items, unit, color }) {
  const max = Math.max(...items.map(i => i[1]));
  return (
    <div style={{ display: 'grid', gap: 6 }}>
      {items.map(([l, v], i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '20px 1fr 50px', gap: 8, alignItems: 'center', fontSize: 11, padding: '4px 0' }}>
          <span style={{ color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace' }}>#{i + 1}</span>
          <div style={{ position: 'relative' }}>
            <div style={{ height: 18, background: 'rgba(255,255,255,.04)', borderRadius: 4, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: (v / max * 100) + '%', background: color, borderRadius: 4 }} />
            </div>
            <span style={{ position: 'absolute', left: 8, top: 1, fontSize: 10, lineHeight: '18px', fontWeight: 600, color: '#000' }}>{l}</span>
          </div>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', textAlign: 'right', color: 'var(--accent-1)' }}>{v}{unit}</span>
        </div>
      ))}
    </div>
  );
}

function GeoMap() {
  // Simplified Europe + UAE pin layout — coordinates approximate, percent-based
  const pins = [
    { c: '🇷🇴', n: 3142, x: 64, y: 50, big: true },
    { c: '🇬🇧', n: 487, x: 30, y: 28 },
    { c: '🇩🇪', n: 412, x: 49, y: 36 },
    { c: '🇮🇹', n: 287, x: 50, y: 60 },
    { c: '🇪🇸', n: 198, x: 30, y: 70 },
    { c: '🇦🇹', n: 142, x: 53, y: 46 },
    { c: '🇨🇭', n: 98, x: 46, y: 48 },
    { c: '🇦🇪', n: 81, x: 90, y: 78 },
  ];
  return (
    <div style={{ position: 'relative', height: 320, background: 'radial-gradient(ellipse at center, rgba(82,242,15,.05), transparent 60%)', borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(255,255,255,.06)' }}>
      {/* Stylized Europe shape */}
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.15 }}>
        <path d="M 25,20 Q 35,15 45,22 L 55,18 Q 65,20 70,30 L 75,40 Q 78,50 70,60 L 60,70 Q 50,75 40,72 L 30,70 Q 22,60 22,45 Z" fill="#52F20F" />
        <circle cx="90" cy="78" r="3" fill="#52F20F" />
      </svg>
      {pins.map((p, i) => (
        <div key={i} style={{ position: 'absolute', left: p.x + '%', top: p.y + '%', transform: 'translate(-50%, -50%)' }}>
          <div style={{
            width: p.big ? 56 : 36, height: p.big ? 56 : 36, borderRadius: '50%',
            background: 'rgba(82,242,15,.2)', border: '2px solid var(--accent-1)',
            display: 'grid', placeItems: 'center', position: 'relative',
            boxShadow: '0 0 20px rgba(82,242,15,.4)',
            animation: `pinPulse 2s ease-in-out ${i * 0.2}s infinite`,
          }}>
            <span style={{ fontSize: p.big ? 22 : 16 }}>{p.c}</span>
          </div>
          <div style={{ position: 'absolute', top: '110%', left: '50%', transform: 'translateX(-50%)', fontSize: 10, fontFamily: 'JetBrains Mono, monospace', color: 'var(--accent-1)', fontWeight: 700, whiteSpace: 'nowrap', background: 'rgba(0,0,0,.6)', padding: '2px 6px', borderRadius: 4 }}>{p.n.toLocaleString('ro-RO')}</div>
        </div>
      ))}
      <style>{`@keyframes pinPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }`}</style>
    </div>
  );
}

function CohortTable() {
  const cohorts = [
    { m: 'ian 2026', vals: [100, 87, 78, 72] },
    { m: 'feb 2026', vals: [100, 89, 81, null] },
    { m: 'mar 2026', vals: [100, 91, null, null] },
    { m: 'apr 2026', vals: [100, null, null, null] },
  ];
  const colorFor = v => {
    if (v === null) return 'rgba(255,255,255,.02)';
    if (v >= 85) return 'rgba(82,242,15,.4)';
    if (v >= 70) return 'rgba(82,242,15,.25)';
    if (v >= 50) return 'rgba(255,215,0,.25)';
    return 'rgba(239,68,68,.25)';
  };
  return (
    <div style={{ overflowX: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: 4, minWidth: 500 }}>
        <thead>
          <tr>
            <th style={{ textAlign: 'left', fontSize: 10, color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace', padding: '6px 10px' }}>COHORT</th>
            {['Luna 1', 'Luna 2', 'Luna 3', 'Luna 4'].map(h => (
              <th key={h} style={{ textAlign: 'center', fontSize: 10, color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace', padding: '6px 10px' }}>{h.toUpperCase()}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {cohorts.map((c, i) => (
            <tr key={i}>
              <td style={{ fontSize: 12, color: 'var(--txt-2)', fontFamily: 'JetBrains Mono, monospace', padding: '6px 10px' }}>{c.m}</td>
              {c.vals.map((v, j) => (
                <td key={j} style={{
                  textAlign: 'center', padding: '12px', fontSize: 13, fontWeight: 600,
                  background: colorFor(v), borderRadius: 6, fontFamily: 'JetBrains Mono, monospace',
                  color: v !== null ? '#fff' : 'transparent',
                }}>{v !== null ? `${v}%` : '—'}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function Funnel() {
  const steps = [
    { l: 'Vizitatori site', v: 12000, p: 100 },
    { l: 'Au creat cont', v: 1200, p: 10.0, conv: '10%' },
    { l: 'Au verificat email', v: 980, p: 8.2, conv: '81.6%' },
    { l: 'Au făcut primul live', v: 450, p: 3.75, conv: '45.9%' },
    { l: 'Au atins BRONZE', v: 180, p: 1.5, conv: '40%' },
  ];
  return (
    <div style={{ display: 'grid', gap: 8 }}>
      {steps.map((s, i) => {
        const w = 100 - (i * 14);
        return (
          <div key={i}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ flex: 1, position: 'relative', maxWidth: w + '%' }}>
                <div style={{
                  height: 50, background: `linear-gradient(135deg, rgba(82,242,15,${0.4 - i * 0.05}), rgba(255,215,0,${0.3 - i * 0.04}))`,
                  borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 18px',
                  border: '1px solid rgba(82,242,15,.3)',
                }}>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{s.l}</span>
                  <span style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent-1)', fontFamily: 'JetBrains Mono, monospace' }}>{s.v.toLocaleString('ro-RO')}</span>
                </div>
              </div>
              {s.conv && (
                <div style={{ width: 80, fontSize: 12, color: 'var(--accent-2)', fontFamily: 'JetBrains Mono, monospace', fontWeight: 600 }}>↓ {s.conv}</div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.AdminStatsPage = AdminStatsPage;