// admin-points.jsx — Actualizare lunară puncte (wizard 4 pași)

const { useState: useStateAP, useEffect: useEffectAP, useRef: useRefAP } = React;

const PREVIEW_ROWS = [
  { n: 1, cid: 'andra.m', user: '@andra.m', name: 'Andra Mihăescu', diam: 524800, ore: 96.5, zile: 28, status: 'ok' },
  { n: 2, cid: 'sophia_l', user: '@sophia_l', name: 'Sophia Lloyd', diam: 1240500, ore: 124.0, zile: 30, status: 'ok' },
  { n: 3, cid: 'razvan.live', user: '@razvan.live', name: 'Răzvan Popescu', diam: 412300, ore: 88.0, zile: 26, status: 'ok' },
  { n: 4, cid: 'maria.iancu', user: '@maria.iancu', name: 'Maria Iancu', diam: 187200, ore: 72.5, zile: 22, status: 'ok' },
  { n: 5, cid: 'elena.p', user: '@elena.p', name: 'Elena Petrescu', diam: 892100, ore: 110.0, zile: 29, status: 'ok' },
  { n: 6, cid: 'tomj_uk', user: '@tomj_uk', name: 'Tom Jenkins', diam: 320500, ore: 64.0, zile: 18, status: 'ok' },
  { n: 7, cid: 'lukas.s', user: '@lukas.s', name: 'Lukas Schmidt', diam: 156000, ore: 48.0, zile: 14, status: 'ok' },
  { n: 8, cid: 'marco.r', user: '@marco.r', name: 'Marco Rossi', diam: 487200, ore: 92.0, zile: 27, status: 'ok' },
  { n: 9, cid: 'nadia.x', user: '@nadia.x', name: '— negăsit —', diam: 245000, ore: 60.0, zile: 20, status: 'missing' },
  { n: 10, cid: 'diego.s', user: '@diego.s', name: 'Diego Sanchez', diam: 312400, ore: 80.0, zile: 25, status: 'ok' },
  { n: 11, cid: 'pierre.d', user: '@pierre.d', name: 'Pierre Dubois', diam: 198700, ore: 55.0, zile: 19, status: 'ok' },
  { n: 12, cid: 'lars.vb', user: '@lars.vb', name: 'Lars van Berg', diam: 421000, ore: 84.5, zile: 26, status: 'ok' },
  { n: 13, cid: 'joao.s', user: '@joao.s', name: 'João Silva', diam: 274000, ore: 68.0, zile: 22, status: 'ok' },
  { n: 14, cid: 'carmen.a', user: '@carmen.a', name: 'Carmen Albu', diam: 165000, ore: 52.0, zile: 17, status: 'ok' },
  { n: 15, cid: 'mike.uk', user: '@mike.uk', name: '— negăsit —', diam: 89000, ore: 30.0, zile: 12, status: 'missing' },
  { n: 16, cid: 'irina.t', user: '@irina.t', name: 'Irina Tudor', diam: 723000, ore: 102.0, zile: 28, status: 'ok' },
  { n: 17, cid: 'cristi.f', user: '@cristi.f', name: 'Cristi Focșa', diam: 354000, ore: 78.5, zile: 24, status: 'ok' },
  { n: 18, cid: 'ioana.v', user: '@ioana.v', name: 'Ioana Vlad', diam: 612000, ore: 95.0, zile: 28, status: 'ok' },
  { n: 19, cid: 'denis.k', user: '@denis.k', name: 'Denis Kovacs', diam: 287000, ore: 70.0, zile: 23, status: 'ok' },
  { n: 20, cid: 'alex.m', user: '@alex.m', name: 'Alex Marin', diam: 1521000, ore: 138.0, zile: 30, status: 'ok' },
];

const HISTORY = [
  { date: '5 apr 2026', admin: 'Andrei P.', pts: 1247582, creators: 4847, template: 'Standard 2026', status: 'Aplicat' },
  { date: '5 mar 2026', admin: 'Andrei P.', pts: 1184200, creators: 4612, template: 'Standard 2026', status: 'Aplicat' },
  { date: '5 feb 2026', admin: 'Andrei P.', pts: 1098400, creators: 4421, template: 'Standard 2026', status: 'Aplicat' },
  { date: '5 ian 2026', admin: 'Mihai R.', pts: 1342100, creators: 4500, template: 'Bonus Live Fest', status: 'Aplicat' },
  { date: '5 dec 2025', admin: 'Andrei P.', pts: 987600, creators: 4180, template: 'Standard 2025', status: 'Aplicat' },
  { date: '5 nov 2025', admin: 'Andrei P.', pts: 932400, creators: 3987, template: 'Standard 2025', status: 'Aplicat' },
  { date: '5 oct 2025', admin: 'Vlad I.', pts: 891200, creators: 3812, template: 'Standard 2025', status: 'Aplicat' },
  { date: '5 sep 2025', admin: 'Andrei P.', pts: 824700, creators: 3641, template: 'Standard 2025', status: 'Revert' },
  { date: '5 aug 2025', admin: 'Andrei P.', pts: 758400, creators: 3502, template: 'Standard 2025', status: 'Aplicat' },
  { date: '5 iul 2025', admin: 'Mihai R.', pts: 712000, creators: 3387, template: 'Standard 2025', status: 'Aplicat' },
  { date: '5 iun 2025', admin: 'Andrei P.', pts: 685400, creators: 3241, template: 'Standard 2025', status: 'Aplicat' },
  { date: '5 mai 2025', admin: 'Andrei P.', pts: 642100, creators: 3098, template: 'Standard 2025', status: 'Aplicat' },
];

function AdminPointsPage({ onNav, user }) {
  const adminUser = { name: user?.name || 'Andrei Popescu' };
  const [step, setStep] = useStateAP(1);
  const [hasFile, setHasFile] = useStateAP(false);
  const [fileName, setFileName] = useStateAP('');
  const [confirm, setConfirm] = useStateAP(false);
  const [submitting, setSubmitting] = useStateAP(false);
  const [done, setDone] = useStateAP(false);

  // Conversion rules
  const [rate, setRate] = useStateAP(100000);
  const [b1, setB1] = useStateAP(true);
  const [b1h1, setB1h1] = useStateAP(80); const [b1p1, setB1p1] = useStateAP(2);
  const [b1h2, setB1h2] = useStateAP(120); const [b1p2, setB1p2] = useStateAP(5);
  const [b2, setB2] = useStateAP(true);
  const [b2d, setB2d] = useStateAP(25); const [b2p, setB2p] = useStateAP(3);
  const [b3, setB3] = useStateAP(false);
  const [b4, setB4] = useStateAP(false);
  const [b4n, setB4n] = useStateAP(10); const [b4p, setB4p] = useStateAP(20);

  const [Toast, toast] = useToast();

  const totalRows = 4847;
  const matched = 4821;
  const missing = 26;
  const errors = 0;

  // Calculate preview total based on rules
  const calcPoints = (row) => {
    let pts = Math.floor(row.diam / rate);
    if (b1 && row.ore > b1h2) pts += b1p2;
    else if (b1 && row.ore > b1h1) pts += b1p1;
    if (b2 && row.zile > b2d) pts += b2p;
    return pts;
  };
  const totalPts = Math.round(1247582 * (100000 / rate)) + (b1 ? 12000 : 0) + (b2 ? 9500 : 0) + (b4 ? b4n * b4p : 0);

  return (
    <div className="page" style={{ display: 'grid', gridTemplateColumns: '260px 1fr', minHeight: '100vh', background: 'linear-gradient(135deg, #0A0A0F, #0E0E0E)' }}>
      <DashSidebar active="admin-points" onNav={onNav} user={adminUser} admin />
      <main style={{ padding: '32px 48px 80px', overflowY: 'auto' }} className="dash-main">
        {/* Header */}
        <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' }}>● ACTUALIZARE LUNARĂ PUNCTE</span>
        </div>
        <h1 className="display" style={{ fontSize: 36, margin: 0 }}>Distribuie puncte 4U</h1>
        <div className="card" style={{ padding: '12px 16px', marginTop: 14, background: 'rgba(255,215,0,.06)', borderColor: 'rgba(255,215,0,.3)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontSize: 18 }}>⚠</span>
          <div style={{ fontSize: 13, color: '#FFD700' }}>Acțiunile de pe această pagină afectează <strong>5.000+ creatori</strong>. Verifică totul de două ori înainte să confirmi.</div>
        </div>
        <div className="card-glass" style={{ padding: '12px 18px', marginTop: 12, fontSize: 12, color: 'var(--txt-2)' }}>
          <span className="mono" style={{ color: 'var(--txt-3)' }}>Ultima actualizare:</span> 5 aprilie 2026 · 14:32 ·
          <strong style={{ color: 'var(--accent-1)' }}> 1.247.582 puncte</strong> distribuite la <strong>4.847 creatori</strong>
        </div>

        {/* Sticky stepper */}
        <div style={{ position: 'sticky', top: 0, zIndex: 5, padding: '20px 0 16px', marginTop: 24, background: 'linear-gradient(180deg, #0A0A0F 50%, transparent)' }}>
          <ApStepper step={step} done={done} />
        </div>

        {/* STEP CONTENT */}
        {!done && step === 1 && <ApStep1 hasFile={hasFile} setHasFile={setHasFile} fileName={fileName} setFileName={setFileName} onNext={() => setStep(2)} onCancel={() => onNav('admin')} />}
        {!done && step === 2 && <ApStep2 totalRows={totalRows} matched={matched} missing={missing} errors={errors} onBack={() => setStep(1)} onNext={() => setStep(3)} />}
        {!done && step === 3 && <ApStep3
          rate={rate} setRate={setRate}
          b1={b1} setB1={setB1} b1h1={b1h1} setB1h1={setB1h1} b1p1={b1p1} setB1p1={setB1p1} b1h2={b1h2} setB1h2={setB1h2} b1p2={b1p2} setB1p2={setB1p2}
          b2={b2} setB2={setB2} b2d={b2d} setB2d={setB2d} b2p={b2p} setB2p={setB2p}
          b3={b3} setB3={setB3} b4={b4} setB4={setB4} b4n={b4n} setB4n={setB4n} b4p={b4p} setB4p={setB4p}
          totalPts={totalPts} matched={matched}
          calcPoints={calcPoints}
          onBack={() => setStep(2)} onNext={() => setStep(4)} toast={toast}
        />}
        {!done && step === 4 && <ApStep4
          matched={matched} missing={missing} totalPts={totalPts}
          confirm={confirm} setConfirm={setConfirm}
          submitting={submitting}
          onBack={() => setStep(3)}
          onSubmit={() => {
            setSubmitting(true);
            setTimeout(() => { setSubmitting(false); setDone(true); fireConfetti(); }, 3000);
          }}
        />}
        {done && <ApSuccessCard matched={matched} totalPts={totalPts} onNav={onNav} onReset={() => { setDone(false); setStep(1); setHasFile(false); setConfirm(false); }} />}

        {/* History (always visible) */}
        <HistoryTable />

        {Toast}
      </main>
    </div>
  );
}

// ─── STEPPER ───
function ApStepper({ step, done }) {
  const steps = ['Upload fișier', 'Preview & verificare', 'Reguli conversie', 'Confirmare & aplicare'];
  return (
    <div className="card-glass" style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 8 }}>
      {steps.map((label, i) => {
        const idx = i + 1;
        const active = step === idx && !done;
        const past = idx < step || done;
        return (
          <React.Fragment key={i}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1, minWidth: 0 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 10, display: 'grid', placeItems: 'center',
                background: active ? 'var(--accent-1)' : past ? 'rgba(82,242,15,.2)' : 'rgba(255,255,255,.05)',
                color: active ? '#000' : past ? 'var(--accent-1)' : 'var(--txt-3)',
                border: active ? '1px solid var(--accent-1)' : past ? '1px solid rgba(82,242,15,.5)' : '1px solid rgba(255,255,255,.1)',
                boxShadow: active ? '0 0 24px rgba(82,242,15,.6)' : 'none',
                fontWeight: 600, fontSize: 13, fontFamily: 'JetBrains Mono, monospace', flexShrink: 0,
              }}>{past ? '✓' : String(idx).padStart(2, '0')}</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: 'var(--txt-3)', letterSpacing: '0.1em' }}>PAS {String(idx).padStart(2, '0')}</div>
                <div style={{ fontSize: 12, color: active ? 'var(--accent-1)' : past ? 'var(--txt-1)' : 'var(--txt-3)', fontWeight: active ? 600 : 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</div>
              </div>
            </div>
            {i < steps.length - 1 && <div style={{ width: 24, height: 1, background: past ? 'var(--accent-1)' : 'rgba(255,255,255,.1)', flexShrink: 0 }} />}
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ─── STEP 1: Upload ───
function ApStep1({ hasFile, setHasFile, fileName, setFileName, onNext, onCancel }) {
  const inpRef = useRefAP(null);
  const [drag, setDrag] = useStateAP(false);
  const pick = (f) => { if (f) { setHasFile(true); setFileName(f.name); } };

  return (
    <div style={{ display: 'grid', gap: 20 }}>
      <div className="card" style={{ padding: 24 }}>
        <div
          onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
          onDragLeave={() => setDrag(false)}
          onDrop={(e) => { e.preventDefault(); setDrag(false); pick(e.dataTransfer.files?.[0]); }}
          onClick={() => inpRef.current?.click()}
          style={{
            border: hasFile ? '2px solid var(--accent-1)' : drag ? '2px solid var(--accent-1)' : '2px dashed rgba(82,242,15,.4)',
            borderRadius: 16, padding: '60px 32px', textAlign: 'center', cursor: 'pointer',
            background: hasFile ? 'rgba(82,242,15,.06)' : drag ? 'rgba(82,242,15,.08)' : 'rgba(82,242,15,.02)',
            transition: 'all .2s', minHeight: 280, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          }}
        >
          <input ref={inpRef} type="file" accept=".xlsx,.xls,.csv" style={{ display: 'none' }} onChange={(e) => pick(e.target.files?.[0])} />
          <div style={{ fontSize: 60, marginBottom: 16 }}>{hasFile ? '✅' : '📤'}</div>
          {hasFile ? (
            <>
              <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--accent-1)' }}>{fileName}</div>
              <div style={{ fontSize: 13, color: 'var(--txt-2)', marginTop: 8 }}>4.847 rânduri detectate · 124 KB</div>
              <button className="btn btn-glass btn-sm" style={{ marginTop: 16 }} onClick={(e) => { e.stopPropagation(); setHasFile(false); setFileName(''); }}>↻ Schimbă fișier</button>
            </>
          ) : (
            <>
              <div style={{ fontSize: 17, fontWeight: 500 }}>Trage fișierul Excel aici sau click pentru a selecta</div>
              <div style={{ fontSize: 12, color: 'var(--txt-3)', marginTop: 8 }}>Formate acceptate: .xlsx, .xls, .csv · Max 10MB · Max 10.000 rânduri</div>
            </>
          )}
        </div>
      </div>

      {/* Format expected */}
      <div className="card" style={{ padding: 24 }}>
        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 14 }}>📋 Format așteptat</div>
        <div style={{ overflowX: 'auto', border: '1px solid rgba(255,255,255,.06)', borderRadius: 8 }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
            <thead>
              <tr style={{ background: 'rgba(255,255,255,.03)' }}>
                {['CreatorID / Username', 'Diamante', 'OreLive', 'ZileActive', 'Țara (opțional)'].map(h => (
                  <th key={h} style={{ padding: '10px 12px', textAlign: 'left', fontSize: 11, color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '.05em' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ['@andra.m', '524800', '96.5', '28', 'RO'],
                ['@sophia_l', '1240500', '124.0', '30', 'UK'],
                ['@lukas.s', '156000', '48.0', '14', 'DE'],
              ].map((r, i) => (
                <tr key={i} style={{ borderTop: '1px solid rgba(255,255,255,.04)' }}>
                  {r.map((c, j) => <td key={j} style={{ padding: '10px 12px', color: j === 0 ? 'var(--accent-1)' : 'var(--txt-1)', fontFamily: j > 0 ? 'JetBrains Mono, monospace' : 'inherit' }}>{c}</td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
          <button className="btn btn-glass btn-sm">📥 Descarcă template Excel</button>
          <button className="btn btn-glass btn-sm">📥 Descarcă exemplu cu date</button>
        </div>
      </div>

      {/* Quick guide */}
      <div className="card" style={{ padding: 24 }}>
        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 14 }}>💡 Ghid rapid</div>
        <div style={{ display: 'grid', gap: 10, fontSize: 13 }}>
          {[
            { c: 'var(--accent-1)', i: '✓', t: 'Verifică ca usernamele să fie identice cu cele din baza 4U (case-insensitive ok)' },
            { c: 'var(--accent-1)', i: '✓', t: 'Diamantele sunt totalul lunii (ex: aprilie = 1-30 aprilie)' },
            { c: 'var(--accent-1)', i: '✓', t: 'Decimalele sunt cu punct, nu virgulă (84.5, nu 84,5)' },
            { c: '#FFD700', i: '⚠', t: 'Creatorii care nu apar în fișier = 0 puncte luna asta' },
            { c: '#FFD700', i: '⚠', t: 'Operația e reversibilă în primele 24h (vezi Pas 04)' },
          ].map((g, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{ color: g.c, fontWeight: 700, flexShrink: 0, width: 16 }}>{g.i}</span>
              <span style={{ color: 'var(--txt-2)' }}>{g.t}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
        <button className="btn btn-glass" onClick={onCancel}>← Anulează</button>
        <button className="btn btn-primary" onClick={onNext} disabled={!hasFile} style={{ opacity: hasFile ? 1 : .4, cursor: hasFile ? 'default' : 'not-allowed' }}>Continuă →</button>
      </div>
    </div>
  );
}

// ─── STEP 2: Preview ───
function ApStep2({ totalRows, matched, missing, errors, onBack, onNext }) {
  const [showMissing, setShowMissing] = useStateAP(false);

  return (
    <div style={{ display: 'grid', gap: 20 }}>
      <div>
        <h2 style={{ fontSize: 22, margin: '0 0 4px' }}>Preview date încărcate</h2>
        <div style={{ fontSize: 13, color: 'var(--txt-2)' }}>Verifică ca datele să fie corecte înainte să continui</div>
      </div>

      {/* Summary cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }} className="ap-sum">
        {[
          { i: '📊', l: 'Total rânduri', v: totalRows.toLocaleString('ro-RO'), c: 'var(--txt-1)' },
          { i: '✅', l: 'Match-uri găsite', v: matched.toLocaleString('ro-RO'), c: 'var(--accent-1)' },
          { i: '⚠', l: 'Negăsiți în baza 4U', v: missing, c: '#FFD700' },
          { i: '❌', l: 'Erori format', v: errors, c: errors > 0 ? '#ef4444' : 'var(--txt-3)' },
        ].map((s, i) => (
          <div key={i} className="card" style={{ padding: 16 }}>
            <div style={{ fontSize: 22, marginBottom: 4 }}>{s.i}</div>
            <div style={{ fontSize: 11, color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'JetBrains Mono, monospace' }}>{s.l}</div>
            <div style={{ fontSize: 26, fontWeight: 700, color: s.c, marginTop: 4 }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Preview table */}
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(255,255,255,.06)', fontSize: 13, fontWeight: 600 }}>Preview primele 20 rânduri</div>
        <div style={{ overflowX: 'auto', maxHeight: 480, overflowY: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, minWidth: 720 }}>
            <thead style={{ position: 'sticky', top: 0, background: '#0E0E0E', zIndex: 1 }}>
              <tr>
                {['#', 'CreatorID', 'Username găsit', 'Diamante', 'Ore live', 'Zile active', 'Status'].map(h => (
                  <th key={h} style={{ padding: '10px 12px', textAlign: 'left', fontSize: 10, color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '.08em', borderBottom: '1px solid rgba(255,255,255,.08)' }}>{h.toUpperCase()}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {PREVIEW_ROWS.map(r => (
                <tr key={r.n} style={{
                  borderBottom: '1px solid rgba(255,255,255,.03)',
                  background: r.status === 'missing' ? 'rgba(255,215,0,.05)' : r.status === 'error' ? 'rgba(239,68,68,.05)' : 'transparent',
                }}>
                  <td style={{ padding: '10px 12px', color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace' }}>{r.n}</td>
                  <td style={{ padding: '10px 12px' }}>{r.user}</td>
                  <td style={{ padding: '10px 12px', color: r.status === 'missing' ? '#FFD700' : 'var(--txt-1)' }}>{r.name}</td>
                  <td style={{ padding: '10px 12px', fontFamily: 'JetBrains Mono, monospace', color: 'var(--accent-1)' }}>{r.diam.toLocaleString('ro-RO')}</td>
                  <td style={{ padding: '10px 12px', fontFamily: 'JetBrains Mono, monospace' }}>{r.ore}h</td>
                  <td style={{ padding: '10px 12px', fontFamily: 'JetBrains Mono, monospace' }}>{r.zile}</td>
                  <td style={{ padding: '10px 12px' }}>
                    <span style={{
                      padding: '3px 8px', borderRadius: 6, fontSize: 10, fontWeight: 600,
                      background: r.status === 'ok' ? 'rgba(82,242,15,.15)' : r.status === 'missing' ? 'rgba(255,215,0,.15)' : 'rgba(239,68,68,.15)',
                      color: r.status === 'ok' ? 'var(--accent-1)' : r.status === 'missing' ? '#FFD700' : '#ef4444',
                    }}>
                      {r.status === 'ok' ? '✓ OK' : r.status === 'missing' ? '⚠ Negăsit' : '❌ Eroare'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Missing accordion */}
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <button onClick={() => setShowMissing(s => !s)} style={{
          width: '100%', padding: '16px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          background: 'transparent', border: 'none', color: 'var(--txt-1)', cursor: 'default', textAlign: 'left',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ fontSize: 18 }}>⚠</span>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: '#FFD700' }}>{missing} creatori negăsiți în baza 4U</div>
              <div style={{ fontSize: 12, color: 'var(--txt-2)', marginTop: 2 }}>Aceștia vor fi sariți. Click pentru a-i vedea pe toți.</div>
            </div>
          </div>
          <span style={{ fontSize: 14, color: 'var(--txt-3)', transform: showMissing ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>▼</span>
        </button>
        {showMissing && (
          <div style={{ borderTop: '1px solid rgba(255,255,255,.06)', padding: 16 }}>
            <div style={{ display: 'grid', gap: 8, maxHeight: 280, overflowY: 'auto' }}>
              {['@nadia.x','@mike.uk','@johnny_ro','@sara.b','@petru.k','@ela.c','@vlad.t','@nicu.v','@andreea.l','@robert.s'].map((u, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: 'rgba(255,255,255,.02)', borderRadius: 8, fontSize: 12 }}>
                  <span style={{ color: '#FFD700' }}>{u}</span>
                  <span style={{ color: 'var(--txt-3)' }}>· rândul {15 + i * 3}</span>
                  <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
                    <button className="btn btn-glass btn-sm" style={{ fontSize: 10, padding: '4px 10px' }}>🔍 Caută similar</button>
                    <button className="btn btn-glass btn-sm" style={{ fontSize: 10, padding: '4px 10px' }}>+ Adaugă nou</button>
                    <button className="btn btn-glass btn-sm" style={{ fontSize: 10, padding: '4px 10px' }}>↷ Sari</button>
                  </div>
                </div>
              ))}
            </div>
            <button className="btn btn-glass" style={{ marginTop: 14, width: '100%' }}>Ignoră toți negăsiți și continuă</button>
          </div>
        )}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
        <button className="btn btn-glass" onClick={onBack}>← Înapoi (Upload)</button>
        <button className="btn btn-primary" onClick={onNext}>Continuă →</button>
      </div>

      <style>{`@media (max-width: 900px) { .ap-sum { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
    </div>
  );
}

// ─── STEP 3: Rules ───
function ApStep3({ rate, setRate, b1, setB1, b1h1, setB1h1, b1p1, setB1p1, b1h2, setB1h2, b1p2, setB1p2, b2, setB2, b2d, setB2d, b2p, setB2p, b3, setB3, b4, setB4, b4n, setB4n, b4p, setB4p, totalPts, matched, calcPoints, onBack, onNext, toast }) {
  const [tplName, setTplName] = useStateAP('Standard 2026');
  const top5 = PREVIEW_ROWS.filter(r => r.status === 'ok').slice(0, 5).map(r => ({ ...r, pts: calcPoints(r) }));

  return (
    <div style={{ display: 'grid', gap: 20 }}>
      <div>
        <h2 style={{ fontSize: 22, margin: '0 0 4px' }}>Setări conversie diamante → puncte 4U</h2>
        <div style={{ fontSize: 13, color: 'var(--txt-2)' }}>Aceste reguli se aplică pentru această încărcare. Poți salva ca template pentru lunile viitoare.</div>
      </div>

      {/* Main rule */}
      <div className="card" style={{ padding: 24 }}>
        <div style={{ fontSize: 13, color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'JetBrains Mono, monospace', marginBottom: 8 }}>● REGULA PRINCIPALĂ</div>
        <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 14 }}>Câte diamante = 1 punct 4U?</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 0, background: 'rgba(255,255,255,.03)', border: '1px solid rgba(255,255,255,.1)', borderRadius: 12, padding: '0 16px' }}>
            <span style={{ fontSize: 24 }}>💎</span>
            <input type="number" value={rate} onChange={(e) => setRate(Math.max(1, Number(e.target.value) || 1))} style={{ background: 'transparent', border: 'none', color: 'var(--accent-1)', fontFamily: 'JetBrains Mono, monospace', fontSize: 28, fontWeight: 700, padding: '14px 12px', width: 180, outline: 'none' }} />
            <span style={{ fontSize: 14, color: 'var(--txt-3)' }}>diamante</span>
          </div>
          <span style={{ fontSize: 18, color: 'var(--txt-3)' }}>=</span>
          <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--accent-2)' }}>1 punct</div>
        </div>
        <div style={{ fontSize: 12, color: 'var(--txt-3)', marginTop: 12 }}>Exemplu: un creator cu 500.000 diamante = <strong style={{ color: 'var(--accent-1)' }}>{Math.floor(500000 / rate)} puncte</strong></div>
      </div>

      {/* Bonus 1 */}
      <BonusCard title="Bonus 1 — Ore live consistență" enabled={b1} onToggle={setB1}>
        <div style={{ display: 'grid', gap: 12 }}>
          <BonusRow label="Bonus pentru >" v1={b1h1} setV1={setB1h1} unit="ore live" arrow="→ +" v2={b1p1} setV2={setB1p1} unit2="puncte bonus" />
          <BonusRow label="Bonus pentru >" v1={b1h2} setV1={setB1h2} unit="ore live" arrow="→ +" v2={b1p2} setV2={setB1p2} unit2="puncte bonus" />
        </div>
      </BonusCard>

      {/* Bonus 2 */}
      <BonusCard title="Bonus 2 — Zile active consistență" enabled={b2} onToggle={setB2}>
        <BonusRow label="Bonus pentru >" v1={b2d} setV1={setB2d} unit="zile active" arrow="→ +" v2={b2p} setV2={setB2p} unit2="puncte bonus" />
      </BonusCard>

      {/* Bonus 3 */}
      <BonusCard title="Bonus 3 — Multiplicator țară" enabled={b3} onToggle={setB3}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }} className="ap-cnt">
          {[['🇷🇴 RO',1.0],['🇬🇧 UK',1.5],['🇩🇪 DE',1.4],['🇦🇹 AT',1.3],['🇨🇭 CH',1.5],['🇮🇹 IT',1.2],['🇪🇸 ES',1.2],['🇦🇪 UAE',1.6]].map(([flag, m]) => (
            <div key={flag} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: 'rgba(255,255,255,.02)', borderRadius: 8 }}>
              <span style={{ fontSize: 12, flex: 1 }}>{flag}</span>
              <span style={{ fontSize: 12, color: 'var(--txt-3)' }}>x</span>
              <input type="number" defaultValue={m} step="0.1" style={{ width: 50, background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)', color: 'var(--accent-1)', fontFamily: 'JetBrains Mono, monospace', fontSize: 13, padding: '4px 6px', borderRadius: 6 }} />
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 800px) { .ap-cnt { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
      </BonusCard>

      {/* Bonus 4 */}
      <BonusCard title="Bonus 4 — Top performeri luna" enabled={b4} onToggle={setB4}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', fontSize: 13 }}>
          Top
          <NumInput v={b4n} set={setB4n} w={60} />
          creatori după diamante primesc bonus suplimentar de
          <NumInput v={b4p} set={setB4p} w={60} />
          puncte
        </div>
      </BonusCard>

      {/* Template save */}
      <div className="card" style={{ padding: 24 }}>
        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 12 }}>💾 Salvează ca template</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, marginBottom: 12 }} className="ap-tpl">
          <input className="input" value={tplName} onChange={(e) => setTplName(e.target.value)} placeholder="Nume template" />
          <button className="btn btn-glass" onClick={() => toast('Template salvat: ' + tplName)}>💾 Salvează template</button>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--txt-2)' }}>
          <span>Sau încarcă template existent:</span>
          <select className="input" style={{ width: 'auto', height: 34 }}>
            <option>Standard aprilie 2026</option>
            <option>Bonus extra Live Fest</option>
            <option>Custom...</option>
          </select>
        </div>
        <style>{`@media (max-width: 700px) { .ap-tpl { grid-template-columns: 1fr !important; } }`}</style>
      </div>

      {/* Calc preview */}
      <div className="card" style={{ padding: 24, background: 'linear-gradient(135deg, rgba(82,242,15,.04), rgba(255,215,0,.04))', borderColor: 'rgba(82,242,15,.3)' }}>
        <div style={{ fontSize: 13, color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'JetBrains Mono, monospace', marginBottom: 8 }}>● ESTIMARE TOTALĂ CU SETĂRILE CURENTE</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 14 }} className="ap-est">
          {[
            { l: 'Total puncte distribuite', v: totalPts.toLocaleString('ro-RO'), c: 'var(--accent-1)' },
            { l: 'Media / creator', v: Math.round(totalPts / matched), c: 'var(--accent-2)' },
            { l: 'Maxim (top creator)', v: '8.420', c: 'var(--accent-1)' },
            { l: 'Minim', v: '1', c: 'var(--txt-2)' },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ fontSize: 11, color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'JetBrains Mono, monospace' }}>{s.l}</div>
              <div style={{ fontSize: 26, fontWeight: 700, color: s.c, fontFamily: 'JetBrains Mono, monospace', marginTop: 4 }}>{s.v}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 20 }}>
          <div style={{ fontSize: 12, color: 'var(--txt-3)', marginBottom: 8, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '.08em' }}>TOP 5 BENEFICIARI (PREVIEW)</div>
          <div style={{ display: 'grid', gap: 6 }}>
            {top5.map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr 80px 80px', gap: 12, padding: '8px 12px', background: 'rgba(255,255,255,.02)', borderRadius: 8, fontSize: 12, alignItems: 'center' }}>
                <span style={{ color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace' }}>#{i + 1}</span>
                <span>{r.name}</span>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', color: 'var(--txt-2)', textAlign: 'right' }}>{r.diam.toLocaleString('ro-RO')}💎</span>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', color: 'var(--accent-1)', fontWeight: 600, textAlign: 'right' }}>+{r.pts}p</span>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .ap-est { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
        <button className="btn btn-glass" onClick={onBack}>← Înapoi (Preview)</button>
        <button className="btn btn-primary" onClick={onNext}>Continuă →</button>
      </div>
    </div>
  );
}

function BonusCard({ title, enabled, onToggle, children }) {
  return (
    <div className="card" style={{ padding: 20, opacity: enabled ? 1 : .55, transition: 'opacity .2s' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: enabled ? 14 : 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
        <button onClick={() => onToggle(!enabled)} style={{
          width: 44, height: 24, borderRadius: 999, background: enabled ? 'var(--accent-1)' : 'rgba(255,255,255,.1)',
          border: 'none', cursor: 'default', position: 'relative', transition: 'all .2s',
        }}>
          <div style={{ position: 'absolute', top: 2, left: enabled ? 22 : 2, width: 20, height: 20, borderRadius: '50%', background: enabled ? '#000' : '#fff', transition: 'left .2s' }} />
        </button>
      </div>
      {enabled && children}
    </div>
  );
}
function BonusRow({ label, v1, setV1, unit, arrow, v2, setV2, unit2 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', fontSize: 13, color: 'var(--txt-2)' }}>
      <span>{label}</span>
      <NumInput v={v1} set={setV1} w={70} />
      <span>{unit}</span>
      <span style={{ color: 'var(--accent-1)' }}>{arrow}</span>
      <NumInput v={v2} set={setV2} w={50} />
      <span style={{ color: 'var(--accent-1)' }}>{unit2}</span>
    </div>
  );
}
function NumInput({ v, set, w = 60 }) {
  return <input type="number" value={v} onChange={(e) => set(Number(e.target.value) || 0)} style={{ width: w, background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)', color: 'var(--accent-1)', fontFamily: 'JetBrains Mono, monospace', fontSize: 14, fontWeight: 600, padding: '6px 8px', borderRadius: 6, textAlign: 'center' }} />;
}

// ─── STEP 4: Confirm ───
function ApStep4({ matched, missing, totalPts, confirm, setConfirm, submitting, onBack, onSubmit }) {
  const [showRules, setShowRules] = useStateAP(false);

  if (submitting) {
    return (
      <div className="card" style={{ padding: 60, textAlign: 'center', borderColor: 'rgba(82,242,15,.4)' }}>
        <div style={{ fontSize: 56, marginBottom: 20 }}>⚡</div>
        <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 8 }}>Distribuie puncte...</div>
        <div style={{ fontSize: 13, color: 'var(--txt-2)', marginBottom: 24 }}>Procesare {matched.toLocaleString('ro-RO')} creatori. Nu închide pagina.</div>
        <div style={{ width: '100%', maxWidth: 400, margin: '0 auto', height: 8, background: 'rgba(255,255,255,.05)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ width: '0%', height: '100%', background: 'linear-gradient(90deg, var(--accent-1), var(--accent-2))', animation: 'apProg 3s linear forwards' }} />
        </div>
        <style>{`@keyframes apProg { from { width: 0% } to { width: 100% } }`}</style>
      </div>
    );
  }

  return (
    <div style={{ display: 'grid', gap: 20 }}>
      <div>
        <h2 style={{ fontSize: 22, margin: '0 0 4px' }}>⚠ Confirmare finală</h2>
        <div style={{ fontSize: 13, color: 'var(--txt-2)' }}>Asigură-te că totul e corect. Acțiunea afectează 5.000+ creatori.</div>
      </div>

      <div className="card" style={{ padding: 24, background: 'linear-gradient(135deg, rgba(255,215,0,.04), rgba(239,68,68,.04))', borderColor: 'rgba(255,215,0,.3)' }}>
        <div style={{ display: 'grid', gap: 14 }}>
          {[
            { l: 'Total creatori afectați', v: matched.toLocaleString('ro-RO'), c: 'var(--accent-1)' },
            { l: 'Total puncte de distribuit', v: totalPts.toLocaleString('ro-RO'), c: 'var(--accent-2)' },
            { l: 'Setări aplicate', v: <button onClick={() => setShowRules(true)} className="link-acc" style={{ background: 'none', border: 'none', color: 'var(--accent-1)', cursor: 'default', fontFamily: 'inherit', fontSize: 14, padding: 0 }}>Vezi reguli →</button>, c: 'var(--accent-1)' },
            { l: 'Data și ora aplicării', v: 'Acum (5 mai 2026, 14:32)', c: 'var(--txt-1)' },
          ].map((s, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 16, fontSize: 14, paddingBottom: 12, borderBottom: i < 3 ? '1px solid rgba(255,255,255,.06)' : 'none' }}>
              <div style={{ color: 'var(--txt-3)' }}>{s.l}</div>
              <div style={{ color: s.c, fontWeight: 600, fontFamily: typeof s.v === 'string' ? 'JetBrains Mono, monospace' : 'inherit' }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{ padding: 20 }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>Considerente</div>
        <div style={{ display: 'grid', gap: 10, fontSize: 13 }}>
          {[
            { c: 'var(--accent-1)', i: '✓', t: 'Toate datele sunt validate' },
            { c: '#FFD700', i: '⚠', t: `${missing} creatori din fișier nu au fost găsiți (sunt sariți)` },
            { c: 'var(--accent-1)', i: '✓', t: 'Operația poate fi anulată (Revert) în primele 24 ore' },
            { c: 'var(--accent-1)', i: '✓', t: 'Fiecare creator primește email automat: "Punctele tale au fost actualizate"' },
          ].map((g, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{ color: g.c, fontWeight: 700, flexShrink: 0, width: 16 }}>{g.i}</span>
              <span style={{ color: 'var(--txt-2)' }}>{g.t}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Checkbox */}
      <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: 16, background: 'rgba(255,255,255,.02)', borderRadius: 12, border: '1px solid rgba(255,255,255,.08)', cursor: 'default' }}>
        <input type="checkbox" checked={confirm} onChange={(e) => setConfirm(e.target.checked)} style={{ marginTop: 3, width: 18, height: 18, accentColor: 'var(--accent-1)' }} />
        <span style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.5 }}>
          Am verificat datele și înțeleg că această acțiune va distribui <strong style={{ color: 'var(--accent-2)' }}>{totalPts.toLocaleString('ro-RO')} puncte</strong> la <strong style={{ color: 'var(--accent-1)' }}>{matched.toLocaleString('ro-RO')} creatori</strong>. Sunt conștient că am 24h să fac revert.
        </span>
      </label>

      {/* HUGE submit button */}
      <button onClick={onSubmit} disabled={!confirm} style={{
        padding: '24px 32px', borderRadius: 16, border: confirm ? '2px solid #ef4444' : '2px solid rgba(255,255,255,.08)',
        background: confirm ? 'linear-gradient(135deg, rgba(239,68,68,.15), rgba(255,215,0,.05))' : 'rgba(255,255,255,.02)',
        color: confirm ? '#fff' : 'var(--txt-3)', cursor: confirm ? 'default' : 'not-allowed',
        boxShadow: confirm ? '0 0 60px rgba(239,68,68,.3)' : 'none', transition: 'all .2s',
        textAlign: 'center',
      }}>
        <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 6 }}>🚀 APLICĂ MODIFICĂRILE LA {matched.toLocaleString('ro-RO')} CREATORI</div>
        <div style={{ fontSize: 12, color: confirm ? 'rgba(255,255,255,.7)' : 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace' }}>Ultimul pas — nu mai există confirmare după acesta</div>
      </button>

      <button className="btn btn-glass" onClick={onBack} style={{ alignSelf: 'flex-start' }}>← Înapoi (Reguli)</button>

      {showRules && (
        <div onClick={() => setShowRules(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.7)', zIndex: 100, display: 'grid', placeItems: 'center', padding: 20 }}>
          <div onClick={(e) => e.stopPropagation()} className="card" style={{ padding: 28, maxWidth: 500, width: '100%' }}>
            <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 16 }}>Reguli aplicate</div>
            <div style={{ display: 'grid', gap: 8, fontSize: 13, color: 'var(--txt-2)' }}>
              <div>💎 Conversie: 100.000 diamante = 1 punct</div>
              <div>⏱ Bonus ore live: &gt;80h → +2p, &gt;120h → +5p</div>
              <div>📅 Bonus zile active: &gt;25 zile → +3p</div>
              <div>🌍 Multiplicator țară: dezactivat</div>
              <div>🏆 Top performeri: dezactivat</div>
            </div>
            <button className="btn btn-glass" style={{ marginTop: 16 }} onClick={() => setShowRules(false)}>Închide</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── SUCCESS ───
function ApSuccessCard({ matched, totalPts, onNav, onReset }) {
  const [revertSec, setRevertSec] = useStateAP(86400);
  useEffectAP(() => { const t = setInterval(() => setRevertSec(s => Math.max(0, s - 1)), 1000); return () => clearInterval(t); }, []);
  const h = Math.floor(revertSec / 3600), m = Math.floor((revertSec % 3600) / 60), s = revertSec % 60;
  return (
    <div className="card" style={{ padding: 40, textAlign: 'center', background: 'linear-gradient(135deg, rgba(82,242,15,.08), rgba(255,215,0,.05))', borderColor: 'rgba(82,242,15,.5)', boxShadow: '0 0 80px rgba(82,242,15,.2)' }}>
      <div style={{ fontSize: 80, marginBottom: 16 }}>✓</div>
      <div className="display" style={{ fontSize: 36, marginBottom: 8 }}>Distribuire reușită!</div>
      <div style={{ fontSize: 16, color: 'var(--txt-2)', marginBottom: 32 }}>
        <strong style={{ color: 'var(--accent-1)' }}>{totalPts.toLocaleString('ro-RO')} puncte</strong> distribuite la <strong style={{ color: 'var(--accent-2)' }}>{matched.toLocaleString('ro-RO')} creatori</strong>
      </div>
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 24 }}>
        <button className="btn btn-primary">📥 Descarcă raport detaliat (PDF)</button>
        <button className="btn btn-glass">📥 Descarcă Excel</button>
      </div>
      <div className="card" style={{ padding: 16, background: 'rgba(255,215,0,.05)', borderColor: 'rgba(255,215,0,.3)', display: 'inline-flex', alignItems: 'center', gap: 14, margin: '0 auto' }}>
        <span style={{ fontSize: 22 }}>↩</span>
        <div style={{ textAlign: 'left' }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Revert disponibil</div>
          <div style={{ fontSize: 11, color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace' }}>{String(h).padStart(2,'0')}:{String(m).padStart(2,'0')}:{String(s).padStart(2,'0')} rămase</div>
        </div>
        <button className="btn btn-glass btn-sm" style={{ marginLeft: 12 }}>↩ Revert</button>
      </div>
      <div style={{ marginTop: 28, display: 'flex', gap: 10, justifyContent: 'center' }}>
        <button className="btn btn-glass" onClick={onReset}>↺ Distribuire nouă</button>
        <button className="btn btn-primary" onClick={() => onNav('admin')}>Înapoi la dashboard admin →</button>
      </div>
    </div>
  );
}

// ─── HISTORY ───
function HistoryTable() {
  return (
    <div style={{ marginTop: 48 }}>
      <h2 style={{ fontSize: 18, margin: '0 0 14px' }}>Istoric upload-uri</h2>
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, minWidth: 720 }}>
            <thead>
              <tr style={{ background: 'rgba(255,255,255,.03)' }}>
                {['Data', 'Admin', 'Total puncte', 'Creatori', 'Template', 'Status', 'Acțiuni'].map(h => (
                  <th key={h} style={{ padding: '12px 14px', textAlign: 'left', fontSize: 10, color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '.08em' }}>{h.toUpperCase()}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {HISTORY.map((h, i) => (
                <tr key={i} style={{ borderTop: '1px solid rgba(255,255,255,.04)' }}>
                  <td style={{ padding: '12px 14px', fontFamily: 'JetBrains Mono, monospace' }}>{h.date}</td>
                  <td style={{ padding: '12px 14px' }}>{h.admin}</td>
                  <td style={{ padding: '12px 14px', fontFamily: 'JetBrains Mono, monospace', color: 'var(--accent-1)' }}>{h.pts.toLocaleString('ro-RO')}</td>
                  <td style={{ padding: '12px 14px', fontFamily: 'JetBrains Mono, monospace' }}>{h.creators.toLocaleString('ro-RO')}</td>
                  <td style={{ padding: '12px 14px', color: 'var(--txt-2)' }}>{h.template}</td>
                  <td style={{ padding: '12px 14px' }}>
                    <span style={{ padding: '3px 8px', borderRadius: 6, fontSize: 10, fontWeight: 600, background: h.status === 'Aplicat' ? 'rgba(82,242,15,.15)' : 'rgba(255,215,0,.15)', color: h.status === 'Aplicat' ? 'var(--accent-1)' : '#FFD700' }}>
                      {h.status === 'Aplicat' ? '✓ Aplicat' : '↩ Revert'}
                    </span>
                  </td>
                  <td style={{ padding: '12px 14px' }}>
                    <div style={{ display: 'flex', gap: 4 }}>
                      <button className="btn btn-glass btn-sm" style={{ fontSize: 10, padding: '3px 8px' }}>Raport</button>
                      <button className="btn btn-glass btn-sm" style={{ fontSize: 10, padding: '3px 8px' }}>Setări</button>
                      <button className="btn btn-glass btn-sm" style={{ fontSize: 10, padding: '3px 8px' }}>Re-folosește</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.AdminPointsPage = AdminPointsPage;