// admin-creators.jsx — Gestionare creatori

const { useState: useStateAC } = React;

const CREATORS = [
  { id: 1, name: 'Andra Mihăescu', user: '@andra.m', email: 'andra.m@gmail.com', country: '🇷🇴', tier: 'DIAMOND', pts: 1247, exp: '19 mai 2026', status: 'Activ', avatar: 'AM' },
  { id: 2, name: 'Răzvan Popescu', user: '@razvan.live', email: 'razvan.p@yahoo.com', country: '🇷🇴', tier: 'PLATINUM', pts: 892, exp: '12 mai 2026', status: 'Activ', avatar: 'RP' },
  { id: 3, name: 'Maria Iancu', user: '@maria.iancu', email: 'maria.i@gmail.com', country: '🇷🇴', tier: 'GOLD', pts: 540, exp: '8 mai 2026', status: 'Activ', avatar: 'MI' },
  { id: 4, name: 'Sophia Lloyd', user: '@sophia_l', email: 'sophia@gmail.com', country: '🇬🇧', tier: 'DIAMOND', pts: 1580, exp: '23 apr 2026', status: 'Activ', avatar: 'SL', warn: true },
  { id: 5, name: 'Marco Rossi', user: '@marco.r', email: 'marco@libero.it', country: '🇮🇹', tier: 'PLATINUM', pts: 720, exp: '14 mai 2026', status: 'Activ', avatar: 'MR' },
  { id: 6, name: 'Lukas Schmidt', user: '@lukas.s', email: 'lukas@gmx.de', country: '🇩🇪', tier: 'SILVER', pts: 245, exp: '20 mai 2026', status: 'Inactiv', avatar: 'LS' },
  { id: 7, name: 'Carmen Albu', user: '@carmen.a', email: 'carmen.a@gmail.com', country: '🇷🇴', tier: 'BRONZE', pts: 65, exp: '10 mai 2026', status: 'Activ', avatar: 'CA' },
  { id: 8, name: 'Diego Sanchez', user: '@diego.s', email: 'diego@gmail.com', country: '🇪🇸', tier: 'GOLD', pts: 480, exp: '15 mai 2026', status: 'Activ', avatar: 'DS' },
  { id: 9, name: 'Ana Munteanu', user: '@ana_live', email: 'ana.m@yahoo.com', country: '🇷🇴', tier: 'PLATINUM', pts: 950, exp: '11 mai 2026', status: 'Activ', avatar: 'AM' },
  { id: 10, name: 'Tom Jenkins', user: '@tomj_uk', email: 'tom.j@gmail.com', country: '🇬🇧', tier: 'GOLD', pts: 380, exp: '24 apr 2026', status: 'Suspendat', avatar: 'TJ', warn: true },
  { id: 11, name: 'Pierre Dubois', user: '@pierre.d', email: 'pierre@gmail.fr', country: '🇫🇷', tier: 'SILVER', pts: 180, exp: '18 mai 2026', status: 'Activ', avatar: 'PD' },
  { id: 12, name: 'Elena Petrescu', user: '@elena.p', email: 'elena.p@gmail.com', country: '🇷🇴', tier: 'DIAMOND', pts: 1820, exp: '16 mai 2026', status: 'Activ', avatar: 'EP' },
  { id: 13, name: 'João Silva', user: '@joao.s', email: 'joao@gmail.pt', country: '🇵🇹', tier: 'BRONZE', pts: 45, exp: '22 mai 2026', status: 'Inactiv', avatar: 'JS' },
  { id: 14, name: 'Lars van Berg', user: '@lars.vb', email: 'lars@gmail.nl', country: '🇳🇱', tier: 'GOLD', pts: 410, exp: '13 mai 2026', status: 'Activ', avatar: 'LV' },
  { id: 15, name: 'Dragoș Ionescu', user: '@dragos.i', email: 'dragos@gmail.com', country: '🇷🇴', tier: 'PLATINUM', pts: 870, exp: '17 mai 2026', status: 'Activ', avatar: 'DI' },
];

const TIER_COLORS = { BRONZE: '#cd7f32', SILVER: '#c0c0c0', GOLD: '#FFD700', PLATINUM: '#e5e4e2', DIAMOND: '#52F20F' };

function AdminCreatorsPage({ onNav, user }) {
  const adminUser = { name: user?.name || 'Andrei Popescu', role: 'Super Admin' };
  const [q, setQ] = useStateAC('');
  const [statusF, setStatusF] = useStateAC('Toate');
  const [tierF, setTierF] = useStateAC('Toate');
  const [selected, setSelected] = useStateAC([]);
  const [drawer, setDrawer] = useStateAC(null);
  const [Toast, toast] = useToast();

  let list = CREATORS;
  if (q) list = list.filter(c => c.name.toLowerCase().includes(q.toLowerCase()) || c.user.toLowerCase().includes(q.toLowerCase()) || c.email.toLowerCase().includes(q.toLowerCase()));
  if (statusF !== 'Toate') list = list.filter(c => c.status === statusF);
  if (tierF !== 'Toate') list = list.filter(c => c.tier === tierF);

  const toggleSel = (id) => setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  const toggleAll = () => setSelected(selected.length === list.length ? [] : list.map(c => c.id));

  return (
    <div className="page" style={{ display: 'grid', gridTemplateColumns: '260px 1fr', minHeight: '100vh', background: 'linear-gradient(135deg, #0A0A0F, #0E0E0E)' }}>
      <DashSidebar active="admin-creators" onNav={onNav} user={adminUser} admin />
      <main style={{ padding: '32px 40px', overflowY: 'auto' }} className="dash-main">
        <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' }}>● MOD ADMIN · CREATORI</span>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
          <div>
            <h1 className="display" style={{ fontSize: 32, margin: 0 }}>Toți creatorii 4U</h1>
            <p style={{ fontSize: 14, color: 'var(--txt-2)', marginTop: 4 }}>5.247 creatori activi în 8 țări</p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-glass btn-sm" onClick={() => toast('Invitație trimisă (mock)')}>+ Invită creator</button>
            <button className="btn btn-glass btn-sm">↑ Import CSV</button>
            <button className="btn btn-glass btn-sm">↓ Export listă</button>
          </div>
        </div>

        {/* Filters */}
        <div className="card" style={{ padding: 16, marginBottom: 16 }}>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <input value={q} onChange={(e) => setQ(e.target.value)} className="input" placeholder="🔍 Caută după nume, username, email..." style={{ flex: 1, minWidth: 220, height: 36 }} />
            <select value={statusF} onChange={(e) => setStatusF(e.target.value)} className="input" style={{ width: 'auto', height: 36 }}>
              {['Toate', 'Activ', 'Inactiv', 'Suspendat'].map(s => <option key={s}>{s}</option>)}
            </select>
            <select value={tierF} onChange={(e) => setTierF(e.target.value)} className="input" style={{ width: 'auto', height: 36 }}>
              {['Toate', 'BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND'].map(t => <option key={t}>{t}</option>)}
            </select>
            <button className="btn btn-glass btn-sm" onClick={() => { setQ(''); setStatusF('Toate'); setTierF('Toate'); }}>Resetează</button>
          </div>
        </div>

        {/* Bulk bar */}
        {selected.length > 0 && (
          <div className="card-glass" style={{ padding: 12, marginBottom: 16, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', borderColor: 'var(--accent-2)' }}>
            <span className="mono" style={{ fontSize: 12, color: 'var(--accent-2)' }}>● {selected.length} selectați</span>
            <button className="btn btn-glass btn-sm">Trimite mesaj</button>
            <button className="btn btn-glass btn-sm">Adaugă puncte</button>
            <button className="btn btn-glass btn-sm">Schimbă tier</button>
            <button className="btn btn-glass btn-sm">Suspendă</button>
            <button className="btn btn-glass btn-sm" style={{ marginLeft: 'auto' }} onClick={() => setSelected([])}>Anulează</button>
          </div>
        )}

        {/* Table */}
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, minWidth: 1100 }}>
              <thead style={{ background: 'var(--bg-2)' }}>
                <tr>
                  <th style={th(40)}><input type="checkbox" checked={selected.length === list.length && list.length > 0} onChange={toggleAll} /></th>
                  <th style={th()}>Creator</th>
                  <th style={th()}>Email</th>
                  <th style={th(60)}>Țară</th>
                  <th style={th(100)}>Tier</th>
                  <th style={th(120)}>Sold puncte</th>
                  <th style={th(120)}>Expirare</th>
                  <th style={th(100)}>Status</th>
                  <th style={th(60)}></th>
                </tr>
              </thead>
              <tbody>
                {list.map(c => (
                  <tr key={c.id} onClick={() => setDrawer(c)} className="hov" style={{ cursor: 'pointer', borderTop: '.5px solid var(--line-soft)', transition: 'background .15s' }}
                      onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(82,242,15,.04)'}
                      onMouseLeave={(e) => e.currentTarget.style.background = ''}>
                    <td style={td()} onClick={(e) => { e.stopPropagation(); toggleSel(c.id); }}>
                      <input type="checkbox" checked={selected.includes(c.id)} onChange={() => {}} />
                    </td>
                    <td style={td()}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <div style={{ width: 32, height: 32, borderRadius: 999, background: 'linear-gradient(135deg, var(--accent-2), var(--accent-1))', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600, color: '#0A0A0F', flexShrink: 0 }}>{c.avatar}</div>
                        <div>
                          <div style={{ fontWeight: 500 }}>{c.name}</div>
                          <div className="mono" style={{ fontSize: 10, color: 'var(--accent-1)' }}>{c.user}</div>
                        </div>
                      </div>
                    </td>
                    <td style={{ ...td(), color: 'var(--txt-2)' }}>{c.email}</td>
                    <td style={{ ...td(), fontSize: 18, textAlign: 'center' }}>{c.country}</td>
                    <td style={td()}>
                      <span className="pill" style={{ fontSize: 9, color: TIER_COLORS[c.tier], borderColor: TIER_COLORS[c.tier] + '40', background: TIER_COLORS[c.tier] + '12' }}>{c.tier}</span>
                    </td>
                    <td style={{ ...td(), fontFamily: 'JetBrains Mono', color: 'var(--accent-1)' }}>💎 {c.pts.toLocaleString('ro-RO')}</td>
                    <td style={{ ...td(), fontFamily: 'JetBrains Mono', fontSize: 11, color: c.warn ? '#FFD700' : 'var(--txt-3)' }}>{c.warn ? '⚠ ' : ''}{c.exp}</td>
                    <td style={td()}>
                      <span style={{ fontSize: 11, color: c.status === 'Activ' ? 'var(--accent-1)' : c.status === 'Suspendat' ? '#ef4444' : 'var(--txt-3)' }}>● {c.status}</span>
                    </td>
                    <td style={td()}><button className="btn btn-glass btn-sm" style={{ padding: '4px 8px' }} onClick={(e) => e.stopPropagation()}>⋯</button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Pagination */}
        <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>Afișare 1-15 din 5.247</div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <select className="input" style={{ width: 'auto', height: 32, fontSize: 12 }}>
              <option>15 / pagină</option><option>25 / pagină</option><option>50 / pagină</option><option>100 / pagină</option>
            </select>
            <button className="btn btn-glass btn-sm">← Prev</button>
            {[1, 2, 3, '...', 350].map((p, i) => (
              <button key={i} className="btn btn-sm" style={{ background: p === 1 ? 'var(--accent-1)' : 'transparent', color: p === 1 ? '#0A0A0F' : 'var(--txt-2)', border: p === 1 ? 'none' : '.5px solid var(--line)', minWidth: 32 }}>{p}</button>
            ))}
            <button className="btn btn-glass btn-sm">Next →</button>
          </div>
        </div>
      </main>

      {/* Drawer */}
      {drawer && <CreatorDrawer creator={drawer} onClose={() => setDrawer(null)} toast={toast} />}
      {Toast}
    </div>
  );
}

const th = (w) => ({ textAlign: 'left', padding: '12px 14px', fontSize: 10, fontFamily: 'JetBrains Mono', color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 500, width: w });
const td = () => ({ padding: '12px 14px', verticalAlign: 'middle' });

function CreatorDrawer({ creator, onClose, toast }) {
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', zIndex: 100, display: 'flex', justifyContent: 'flex-end' }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: 'min(540px, 90vw)', height: '100%', background: 'var(--bg-1)', borderLeft: '.5px solid var(--line)',
        overflowY: 'auto', padding: 28, animation: 'slideR .3s ease-out',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>● PROFIL CREATOR</span>
          <button onClick={onClose} style={{ background: 'transparent', border: 0, fontSize: 22, color: 'var(--txt-2)', cursor: 'pointer' }}>×</button>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
          <div style={{ width: 64, height: 64, borderRadius: 999, background: 'linear-gradient(135deg, var(--accent-2), var(--accent-1))', display: 'grid', placeItems: 'center', fontSize: 22, fontWeight: 600, color: '#0A0A0F' }}>{creator.avatar}</div>
          <div>
            <div className="display" style={{ fontSize: 22 }}>{creator.name}</div>
            <div className="mono" style={{ fontSize: 12, color: 'var(--accent-1)' }}>{creator.user}</div>
            <span className="pill" style={{ fontSize: 9, color: TIER_COLORS[creator.tier], borderColor: TIER_COLORS[creator.tier] + '40', background: TIER_COLORS[creator.tier] + '12', marginTop: 6, display: 'inline-block' }}>{creator.tier}</span>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 20 }}>
          <Info label="Email" val={creator.email} />
          <Info label="Țară" val={creator.country + ' RO'} />
          <Info label="Status" val={creator.status} />
          <Info label="Sold puncte" val={'💎 ' + creator.pts.toLocaleString('ro-RO')} />
        </div>

        <div className="display" style={{ fontSize: 16, marginBottom: 12 }}>Stats</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 8, marginBottom: 24 }}>
          {[['💎 Total dia', '8.4M'], ['⏱ Ore live', '247h'], ['📅 Zile active', '184'], ['📦 Comenzi', '12']].map(([l, v]) => (
            <div key={l} style={{ padding: 10, background: 'var(--bg-2)', borderRadius: 8, textAlign: 'center' }}>
              <div className="display mono" style={{ fontSize: 14, color: 'var(--accent-1)' }}>{v}</div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--txt-3)', marginTop: 2 }}>{l}</div>
            </div>
          ))}
        </div>

        <div className="display" style={{ fontSize: 16, marginBottom: 12 }}>Timeline puncte (6 luni)</div>
        <div style={{ height: 80, background: 'var(--bg-2)', borderRadius: 8, padding: 12, marginBottom: 24 }}>
          <svg viewBox="0 0 400 60" style={{ width: '100%', height: '100%' }}>
            <path d={[850, 920, 1050, 1180, 1090, 1247].map((d, i) => `${i === 0 ? 'M' : 'L'} ${(i / 5) * 400},${60 - (d / 1300) * 50}`).join(' ')} stroke="#52F20F" strokeWidth="2" fill="none" />
          </svg>
        </div>

        <div className="display" style={{ fontSize: 16, marginBottom: 12 }}>Note interne</div>
        <textarea className="input" style={{ minHeight: 70, padding: 10, marginBottom: 20 }} placeholder="Adaugă o notă pentru echipă..." defaultValue="Creator foarte activ. A participat la meciul oficial din martie." />

        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-glass" style={{ flex: 1 }}>Editează</button>
          <button className="btn btn-primary" style={{ flex: 1 }} onClick={() => toast('+50 pts adăugate')}>Adaugă puncte</button>
          <button className="btn btn-glass" onClick={() => toast('Cont suspendat')}>Suspendă</button>
        </div>
      </div>
      <style>{`@keyframes slideR { from { transform: translateX(100%) } to { transform: translateX(0) } }`}</style>
    </div>
  );
}

function Info({ label, val }) {
  return (
    <div style={{ padding: 10, background: 'var(--bg-2)', borderRadius: 8 }}>
      <div className="mono" style={{ fontSize: 9, color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{label}</div>
      <div style={{ fontSize: 13, marginTop: 3 }}>{val}</div>
    </div>
  );
}

window.AdminCreatorsPage = AdminCreatorsPage;