// ════════════════════════════════════════════════════════════════
// AdminDashboard — /admin
// Overview tiles + last activity + token warnings
// ════════════════════════════════════════════════════════════════

function AdminDashboard({ currentUser, onRoute }) {
  const A = window.SDH_ADMIN;
  const B = window.SDH_BILLING;
  const isSuperAdmin = currentUser.role === 'super_admin';

  const activeUsers = A.users.filter(u => u.status === 'active').length;
  const invitedUsers = A.invites.filter(i => i.status === 'pending').length;
  const expiringTokens = A.users.filter(u => u.token_warning);
  const recentEvents = A.auditLog.slice(0, 8);
  const cronStatus = A.pipeline.cron_enabled ? 'running' : 'idle';
  const billingSummary = isSuperAdmin ? B.adminSummary() : null;

  return (
    <div className="sdh-fade">
      <PageHeader
        section="управление"
        title="Админ-панель"
        accent="панель"
        subtitle="Бэк-офис Symbiosis.DataHub. Все мутирующие действия логируются и видны super-admin'у."
        right={
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="sdh-btn" onClick={() => onRoute('admin.audit')}>Журнал событий</button>
            {isSuperAdmin && (
              <button className="sdh-btn sdh-btn--bronze" onClick={() => onRoute('admin.users')}>
                Пригласить
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M6 2v8M2 6h8" strokeLinecap="round" />
                </svg>
              </button>
            )}
          </div>
        }
      />

      <section className="sdh-container" style={{ paddingBottom: 'var(--space-16)' }}>
        {/* Top tiles */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 'var(--space-4)', marginBottom: 'var(--space-8)',
        }}>
          <Tile hue="emerald" onClick={() => onRoute('admin.users')}
            label="пользователи" metric={activeUsers} suffix="активных"
            footer={`+ ${invitedUsers} в ожидании`}
            help={{
              title: 'Активные пользователи',
              what: 'Учётные записи со статусом active и непросроченным токеном.',
              why: 'Если число резко растёт — проверьте журнал invites: не утекли ли ссылки. Если падает — проверьте expired tokens и продлите тем, кто работает.',
            }} />
          <Tile hue="amber" onClick={() => onRoute('admin.pipeline')}
            label="pipeline" metric={cronStatus === 'running' ? 'идёт' : 'ожидает'}
            suffix={cronStatus === 'running' ? null : 'cron включён'}
            footer={`последний прогон ${fmtAgo2(A.pipeline.last_run_at)} · ${A.pipeline.last_run_count} новых`}
            statusDot={cronStatus === 'running' ? 'running' : 'idle'}
            help={{
              title: 'Pipeline статус',
              what: 'Состояние cron-задачи, которая собирает новые стартапы из источников.',
              why: 'Если pipeline остановился, корпус устаревает каждые 6 часов. Проверьте источники на этой странице и нажмите «Запустить вручную», если нужен немедленный обновитель.',
            }} />
          {isSuperAdmin && (
            <Tile hue="bronze" onClick={() => onRoute('admin.cost')}
              label="расходы" metric={`$${billingSummary.monthCostUsd.toFixed(2)}`}
              suffix={`/ $${A.settings.budget_monthly_usd}`}
              footer={`${Math.round(billingSummary.monthCostUsd / A.settings.budget_monthly_usd * 100)}% от бюджета`}
              help={{
                title: 'Расходы API за месяц',
                what: 'Реальная стоимость LLM-вызовов в долларах. Конверсия в рубли по ЦБ курсу.',
                why: 'Если меньше 50% — бюджет можно урезать или провести больше Phase 4.5. Если выше 80% — настройте Budget guard в settings, чтобы cron не съел остаток.',
              }} />
          )}
          <Tile hue="info" onClick={() => onRoute('admin.audit')}
            label="события за 7 дней" metric={A.auditLog.length} suffix="записей"
            footer="все мутирующие действия логируются"
            help={{
              title: 'Журнал событий',
              what: 'Запись каждого мутирующего действия пользователей: входы, инвайты, изменения настроек, запуски pipeline.',
              why: 'Это ваша линия обороны. Если что-то пошло не так — здесь видно, кто и когда сделал. Регулярно просматривайте за день. Никогда не отключайте.',
            }} />
        </div>

        {/* Bottom grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-4)' }}>
          {/* Recent activity */}
          <div style={{
            background: 'var(--surface-elevated)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 'var(--radius-xl)',
            padding: 'var(--space-6)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-4)' }}>
              <h3 className="sdh-section-label" style={{ marginBottom: 0 }}>последняя активность</h3>
              <button className="sdh-btn sdh-btn--ghost" style={{ fontSize: 11, padding: '4px 8px' }}
                onClick={() => onRoute('admin.audit')}>
                полный журнал
                <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M3 6h6m-3-3 3 3-3 3" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {recentEvents.map((ev, i) => <AuditRow key={ev.id} event={ev} compact />)}
            </div>
          </div>

          {/* Expiring tokens */}
          <div style={{
            background: 'var(--surface-elevated)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 'var(--radius-xl)',
            padding: 'var(--space-6)',
          }}>
            <h3 className="sdh-section-label" style={{ display: 'block', marginBottom: 'var(--space-4)' }}>
              <InfoLabel
                title="Истекающие токены"
                what="Пользователи, у которых токен истечёт раньше, чем за порог предупреждения по их роли."
                why="Продлите токены тем, кто работает регулярно. Иначе в один момент их клиенты начнут возвращать 401, и кто-нибудь напишет тревожный месседж в чат во время вашего отпуска.">
                требуют внимания
              </InfoLabel>
            </h3>

            {expiringTokens.length === 0 ? (
              <p className="sdh-quote" style={{ margin: 0, fontSize: 13 }}>
                Все токены валидны. В ближайшие недели регенерация не нужна.
              </p>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
                {expiringTokens.map(u => (
                  <div key={u.id} style={{
                    padding: 'var(--space-3)',
                    background: 'var(--hue-amber-subtle)',
                    border: '1px solid var(--hue-amber)',
                    borderRadius: 'var(--radius-md)',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                      <UserAvatar name={u.name} role={u.role} size={28} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{u.name}</div>
                        <div style={{ fontSize: 11, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>{u.email}</div>
                      </div>
                      <RoleBadge role={u.role} size="sm" />
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--hue-amber)' }}>
                        истекает через {u.days_left} дн
                      </span>
                      <div style={{ display: 'flex', gap: 6 }}>
                        <button className="sdh-btn sdh-btn--ghost" style={{ fontSize: 11, padding: '4px 8px' }}>Продлить</button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

function Tile({ hue, label, metric, suffix, footer, statusDot, onClick, help }) {
  return (
    <button onClick={onClick} className="sdh-warm-card" style={{
      '--bg-tint': hue === 'bronze' ? 'var(--brand-bronze-subtle)' : `var(--hue-${hue}-subtle)`,
      padding: 'var(--space-4) var(--space-6)',
      display: 'flex', flexDirection: 'column', gap: 6,
      textAlign: 'left', width: '100%', cursor: 'pointer',
      border: '1px solid var(--border-subtle)',
    }}>
      <div className="sdh-mono-label" style={{ marginBottom: 0 }}>
        {help ? <InfoLabel {...help}>{label}</InfoLabel> : label}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        {statusDot && (
          <span style={{
            width: 8, height: 8, borderRadius: '50%',
            background: statusDot === 'running' ? 'var(--success)' : 'var(--text-tertiary)',
            marginRight: 4,
          }} />
        )}
        <span className="sdh-metric-big">{metric}</span>
        {suffix && <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{suffix}</span>}
      </div>
      {footer && (
        <div style={{ fontSize: 11.5, color: 'var(--text-secondary)', marginTop: 2 }}>
          {footer}
        </div>
      )}
    </button>
  );
}

function AuditRow({ event, compact }) {
  const t = new Date(event.timestamp);
  const hh = String(t.getHours()).padStart(2, '0') + ':' + String(t.getMinutes()).padStart(2, '0');
  const kindMap = {
    'auth.login':         { hue: 'info',    label: 'вход'  },
    'auth.logout':        { hue: 'info',    label: 'выход' },
    'pipeline.run':       { hue: 'amber',   label: 'pipeline'  },
    'idea.deep_dive':     { hue: 'purple',  label: 'deep-dive' },
    'invite.create':      { hue: 'emerald', label: 'invite'  },
    'invite.copied':      { hue: 'emerald', label: 'invite'  },
    'mcp.api_call':       { hue: 'amber',   label: 'mcp'  },
    'idea.viewed':        { hue: 'info',    label: 'просмотр' },
    'startup.exported':   { hue: 'emerald', label: 'export' },
    'user.role_changed':  { hue: 'rose',    label: 'роль'   },
    'cron.toggle':        { hue: 'amber',   label: 'cron'   },
    'settings.update':    { hue: 'bronze',  label: 'настройки' },
    'cluster.viewed':     { hue: 'info',    label: 'кластер' },
    'synthesis.opened':   { hue: 'purple',  label: 'синтез' },
    'token.regenerated':  { hue: 'rose',    label: 'токен'  },
    'corpus.search':      { hue: 'info',    label: 'поиск'  },
  };
  const k = kindMap[event.kind] || { hue: 'info', label: 'событие' };

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: compact ? '50px 90px 110px 1fr' : '70px 110px 130px 1fr 110px',
      gap: 12, alignItems: 'center',
      padding: '8px 0',
      borderBottom: '1px dashed var(--border-subtle)',
      fontSize: 12.5,
    }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-tertiary)' }}>{hh}</span>
      <span style={{ fontSize: 12.5, color: 'var(--text-primary)', fontWeight: 500 }}>{event.user}</span>
      <span>{k.hue === 'bronze'
        ? <CategoryPill hue="amber" small>{k.label}</CategoryPill>
        : <CategoryPill hue={k.hue} small>{k.label}</CategoryPill>}
      </span>
      <span style={{ fontSize: 12, color: 'var(--text-secondary)', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {event.details}
      </span>
      {!compact && (
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-tertiary)', textAlign: 'right' }}>
          {event.ip}
        </span>
      )}
    </div>
  );
}

function fmtAgo2(iso) {
  const d = new Date(iso);
  const mins = Math.round((new Date('2026-05-23T10:00:00Z') - d) / 60000);
  if (mins < 60) return `${mins} мин назад`;
  if (mins < 24 * 60) return `${Math.round(mins / 60)} ч назад`;
  return `${Math.round(mins / 60 / 24)} д назад`;
}

window.AdminDashboard = AdminDashboard;
window.AuditRow = AuditRow;
window.fmtAgo2 = fmtAgo2;