// admin.jsx — Admin web panel preview (rendered as a small "tablet/laptop" mockup)

function AdminPanel({ lang, t }) {
  const stats = [
    { label: t('total_users'), val: '1,248', delta: '+12%', up: true },
    { label: t('total_listings'), val: '562', delta: '+8%', up: true },
    { label: t('active_chats'), val: '342', delta: '+15%', up: true },
    { label: t('reports'), val: '28', delta: '-5%', up: false },
  ];
  const navItems = [
    { id: 'stats', icon: '◇', label: lang === 'ka' ? 'სტატისტიკა' : 'Statistiques' },
    { id: 'users', icon: '◔', label: lang === 'ka' ? 'მომხმარებლები' : 'Utilisateurs' },
    { id: 'listings', icon: '▣', label: lang === 'ka' ? 'განცხადებები' : 'Annonces' },
    { id: 'reports', icon: '⚑', label: lang === 'ka' ? 'რეპორტები' : 'Signalements' },
    { id: 'finance', icon: '€', label: lang === 'ka' ? 'ფინანსები' : 'Finances' },
    { id: 'settings', icon: '◐', label: lang === 'ka' ? 'პარამეტრები' : 'Paramètres' },
  ];
  const reports = [
    { code: '#1254', issue: lang === 'ka' ? 'არასწორი ფოტო' : 'Photo inappropriée', time: lang === 'ka' ? '2 წთ' : 'il y a 2 min' },
    { code: '#1253', issue: lang === 'ka' ? 'ნომრის გაცვლა' : 'Échange de numéro', time: lang === 'ka' ? '1 სთ' : 'il y a 1 h' },
    { code: '#1251', issue: lang === 'ka' ? 'სპამი' : 'Spam', time: lang === 'ka' ? '3 სთ' : 'il y a 3 h' },
  ];

  return (
    <div style={{
      width: '100%', height: '100%', background: COLORS.bg,
      fontFamily: 'Inter, system-ui', color: '#fff', display: 'flex',
    }}>
      {/* Sidebar */}
      <div style={{
        width: 220, background: '#0A0A0A', borderRight: `1px solid ${COLORS.borderSoft}`,
        padding: '20px 14px', display: 'flex', flexDirection: 'column', gap: 4,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px 18px' }}>
          <TrustaLogo size={28} />
          <Wordmark size={14} />
        </div>
        <div style={{ fontSize: 10, color: COLORS.text3, textTransform: 'uppercase', letterSpacing: 0.6, padding: '8px 10px 4px' }}>Admin</div>
        {navItems.map((it, i) => {
          const a = i === 0;
          return (
            <div key={it.id} style={{
              padding: '10px 12px', borderRadius: 10,
              background: a ? COLORS.goldSoft : 'transparent',
              color: a ? COLORS.gold : COLORS.text2,
              fontSize: 13, fontWeight: a ? 600 : 500,
              display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
            }}>
              <span style={{ fontSize: 14, opacity: 0.8 }}>{it.icon}</span>
              {it.label}
            </div>
          );
        })}
      </div>

      {/* Main */}
      <div style={{ flex: 1, padding: '24px 28px', overflow: 'auto' }}>
        <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 24, marginBottom: 20 }}>
          {lang === 'ka' ? 'სტატისტიკა' : 'Statistiques'}
        </div>

        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 20 }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: 16, borderRadius: 14, background: COLORS.card,
              border: `1px solid ${COLORS.borderSoft}`,
            }}>
              <div style={{ fontSize: 11, color: COLORS.text3, textTransform: 'uppercase', letterSpacing: 0.4 }}>{s.label}</div>
              <div style={{
                fontFamily: '"Playfair Display", serif', fontSize: 28, color: '#fff',
                fontWeight: 600, marginTop: 6,
              }}>{s.val}</div>
              <div style={{
                fontSize: 11, color: s.up ? COLORS.green : COLORS.red,
                marginTop: 4, fontWeight: 600,
              }}>{s.delta}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>
          {/* Chart */}
          <div style={{ padding: 20, borderRadius: 14, background: COLORS.card, border: `1px solid ${COLORS.borderSoft}` }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{t('activity')}</div>
              <div style={{ fontSize: 11, color: COLORS.text3 }}>30j</div>
            </div>
            <svg width="100%" height="140" viewBox="0 0 400 140" preserveAspectRatio="none">
              <defs>
                <linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stopColor="#D4AF37" stopOpacity="0.4" />
                  <stop offset="1" stopColor="#D4AF37" stopOpacity="0" />
                </linearGradient>
              </defs>
              {[0, 35, 70, 105, 140].map(y => (
                <line key={y} x1="0" y1={y} x2="400" y2={y} stroke="rgba(255,255,255,0.05)" />
              ))}
              <path d="M0 100 L40 90 L80 95 L120 70 L160 75 L200 50 L240 60 L280 35 L320 45 L360 25 L400 30 L400 140 L0 140 Z" fill="url(#ag)" />
              <path d="M0 100 L40 90 L80 95 L120 70 L160 75 L200 50 L240 60 L280 35 L320 45 L360 25 L400 30" stroke={COLORS.gold} strokeWidth="2" fill="none" />
              {[[40, 90], [120, 70], [200, 50], [280, 35], [360, 25]].map(([x, y], i) => (
                <circle key={i} cx={x} cy={y} r="3" fill={COLORS.gold} />
              ))}
            </svg>
          </div>

          {/* Recent reports */}
          <div style={{ padding: 20, borderRadius: 14, background: COLORS.card, border: `1px solid ${COLORS.borderSoft}` }}>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>{t('recent_reports')}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {reports.map((r, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(248,113,113,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1 V8 M7 11 V11.1" stroke={COLORS.red} strokeWidth="1.6" strokeLinecap="round" /><circle cx="7" cy="7" r="6" stroke={COLORS.red} strokeWidth="1.2" fill="none" /></svg>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, color: '#fff', fontWeight: 600 }}>{r.code}</div>
                    <div style={{ fontSize: 11, color: COLORS.text2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.issue}</div>
                  </div>
                  <div style={{ fontSize: 10, color: COLORS.text3 }}>{r.time}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.AdminPanel = AdminPanel;