import React, { useEffect } from 'react';
import { Lock, LogIn, ShieldAlert, UserCheck, Clock, Zap, MessageSquare, Award, Shield } from 'lucide-react';
import { Radar } from 'react-chartjs-2';

// Custom SVG Circular Progress Component
function CircularProgress({ percentage, size = 68, strokeWidth = 5, color = 'var(--color-brand)' }) {
  const radius = (size - strokeWidth) / 2;
  const circumference = radius * 2 * Math.PI;
  const offset = circumference - (percentage / 100) * circumference;

  return (
    <div style={{ position: 'relative', width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        {/* Background Circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="transparent"
          stroke="rgba(255, 255, 255, 0.05)"
          strokeWidth={strokeWidth}
        />
        {/* Foreground Circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="transparent"
          stroke={color}
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          strokeLinecap="round"
          style={{ transition: 'stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1)' }}
        />
      </svg>
      <div style={{ position: 'absolute', fontSize: `${size * 0.23}px`, fontWeight: '800', fontFamily: 'var(--font-family-display)', color: 'var(--color-text-main)' }}>
        {percentage}%
      </div>
    </div>
  );
}

// Custom Initials Avatar Generator
function InitialsAvatar({ name, size = 40, border = '1px solid var(--color-border)' }) {
  const initials = (name || '??').substring(0, 2).toUpperCase();
  
  // Deterministic background gradient based on username string
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }
  const hue = Math.abs(hash % 360);
  const background = `linear-gradient(135deg, hsl(${hue}, 65%, 45%) 0%, hsl(${(hue + 40) % 360}, 75%, 30%) 100%)`;

  return (
    <div style={{
      width: size,
      height: size,
      borderRadius: '50%',
      background,
      border,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontWeight: '700',
      fontSize: `${size * 0.38}px`,
      color: '#ffffff',
      textShadow: '0 1px 2px rgba(0,0,0,0.3)',
      boxShadow: 'inset 0 1px 3px rgba(255,255,255,0.2)',
      fontFamily: 'var(--font-family-display)',
      flexShrink: 0
    }}>
      {initials}
    </div>
  );
}

// Custom Avatar Component that fetches from Twitch API Proxy, falls back to initials
function ModeratorAvatar({ name, size = 40, border = '1px solid var(--color-border)', API_BASE }) {
  const [imgSrc, setImgSrc] = React.useState('');
  const [hasError, setHasError] = React.useState(false);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    if (!name) return;
    const base = API_BASE || '';
    setImgSrc(`${base}/api/avatar/${name.toLowerCase()}`);
    setHasError(false);
    setLoading(true);
  }, [name, API_BASE]);

  if (hasError || !name) {
    return <InitialsAvatar name={name} size={size} border={border} />;
  }

  return (
    <div style={{
      width: size,
      height: size,
      borderRadius: '50%',
      border,
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      overflow: 'hidden',
      flexShrink: 0,
      backgroundColor: 'rgba(255, 255, 255, 0.05)',
      position: 'relative'
    }}>
      {loading && (
        <div style={{
          position: 'absolute',
          inset: 0,
          background: 'rgba(255, 255, 255, 0.05)',
          borderRadius: '50%'
        }} />
      )}
      <img
        src={imgSrc}
        alt={name}
        onLoad={() => setLoading(false)}
        onError={() => setHasError(true)}
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          opacity: loading ? 0 : 1,
          transition: 'opacity 0.2s ease-in-out'
        }}
      />
    </div>
  );
}

export default function ModeratorTab({
  twitchConfigured,
  auth,
  handleLogin,
  TWITCH_CHANNEL,
  modProfiles,
  selectedMod,
  setSelectedMod,
  API_BASE
}) {
  
  // Set default selected moderator if not set yet
  useEffect(() => {
    if (modProfiles && modProfiles.length > 0 && !selectedMod) {
      setSelectedMod(modProfiles[0]);
    }
  }, [modProfiles, selectedMod, setSelectedMod]);

  // Calculate composite KPI score
  const getKpiScore = (mod) => {
    if (!mod || !mod.scores) return 0;
    const { speed = 50, activity = 50, watchfulness = 50 } = mod.scores;
    return Math.round((speed + activity + watchfulness) / 3);
  };

  return (
    <div className="tab-content">
      {twitchConfigured && !auth.loggedIn ? (
        <div className="login-overlay">
          <div className="login-card">
            <Lock size={48} style={{ color: 'var(--color-brand)', marginBottom: '1.5rem' }} />
            <h2 className="login-title">Доступ Ограничен</h2>
            <p className="login-description">
              Лог действий модераторов и статистика банов/удалений доступны только стримеру и официальным модераторам канала **winx_prinx**. 
              Пожалуйста, авторизуйтесь через Twitch для проверки прав.
            </p>
            <button className="btn" onClick={handleLogin}>
              <LogIn size={16} /> Войти через Twitch
            </button>
          </div>
        </div>
      ) : twitchConfigured && (auth.user?.role !== 'streamer' && auth.user?.role !== 'moderator' && auth.user?.role !== 'admin') ? (
        <div className="status-msg">
          <ShieldAlert size={48} className="status-msg-icon" />
          <h2>Недостаточно прав</h2>
          <p>Вы успешно вошли как <strong>{auth.user?.displayName}</strong>, но вы не являетесь модератором канала {TWITCH_CHANNEL}.</p>
        </div>
      ) : (
        <div>
          {(!modProfiles || modProfiles.length <= 2) && (
            <div style={{ background: 'rgba(145, 70, 255, 0.08)', border: '1px solid rgba(145, 70, 255, 0.25)', borderRadius: '12px', padding: '1.25rem', marginBottom: '2rem', display: 'flex', gap: '1rem', alignItems: 'center' }}>
              <ShieldAlert size={26} style={{ color: 'var(--color-brand)', flexShrink: 0 }} />
              <div>
                <h4 style={{ margin: '0 0 0.25rem 0', color: 'var(--color-text-main)', fontSize: '0.95rem', fontWeight: 600 }}>Данные накапливаются</h4>
                <p style={{ margin: 0, fontSize: '0.82rem', color: 'var(--color-text-muted)' }}>Информация о модераторах появляется по мере их активности в выбранном стриме.</p>
              </div>
            </div>
          )}

          {/* TOP 3 PODIUM */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1.5rem', marginBottom: '2.5rem' }}>
            {modProfiles && modProfiles.slice(0, 3).map((mod, idx) => {
              const trophyColor = idx === 0 ? '#FFD700' : idx === 1 ? '#D1D1D6' : '#EAA96E';
              const rankName = idx === 0 ? 'Глава патруля' : idx === 1 ? 'Старший мод' : 'Защитник чата';
              const isSelected = selectedMod && selectedMod.moderator === mod.moderator;
              
              const glowStyle = {
                borderColor: isSelected ? 'var(--color-brand)' : 'var(--color-border)',
                background: isSelected ? 'rgba(145, 70, 255, 0.05)' : 'var(--color-bg-card)',
                boxShadow: isSelected ? '0 8px 30px rgba(145, 70, 255, 0.15)' : 'var(--shadow-md)',
                position: 'relative',
                overflow: 'hidden',
                borderWidth: '1px',
                borderStyle: 'solid',
                borderRadius: 'var(--radius-lg)',
                padding: '1.75rem',
                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                cursor: 'pointer'
              };

              return (
                <div key={idx} style={glowStyle} onClick={() => setSelectedMod(mod)}>
                  {/* Rank background watermark */}
                  <div style={{ 
                    position: 'absolute', 
                    top: '-15px', 
                    right: '-5px', 
                    fontSize: '6.5rem', 
                    opacity: isSelected ? 0.14 : 0.06, 
                    color: trophyColor, 
                    fontWeight: 900,
                    fontFamily: 'var(--font-family-display)',
                    userSelect: 'none'
                  }}>
                    0{idx + 1}
                  </div>

                  {/* Header metadata */}
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                      <ModeratorAvatar name={mod.moderator} size={48} border={`2px solid ${trophyColor}`} API_BASE={API_BASE} />
                      <div>
                        <h4 style={{ margin: 0, fontSize: '1.1rem', fontWeight: 700, letterSpacing: '-0.01em' }}>{mod.moderator}</h4>
                        <span style={{ 
                          fontSize: '0.68rem', 
                          fontWeight: '700',
                          color: trophyColor, 
                          textTransform: 'uppercase', 
                          letterSpacing: '0.08em',
                          display: 'flex',
                          alignItems: 'center',
                          gap: '0.2rem',
                          marginTop: '0.15rem'
                        }}>
                          <Award size={10} /> {rankName}
                        </span>
                      </div>
                    </div>
                    
                    {/* Circular KPI progress */}
                    <CircularProgress percentage={getKpiScore(mod)} size={62} color={trophyColor} />
                  </div>

                  {/* Quick stats grid */}
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem', borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: '1.25rem' }}>
                    <div>
                      <div style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.02em', marginBottom: '0.2rem' }}>Действий</div>
                      <div style={{ fontSize: '1.15rem', fontWeight: 800, color: 'var(--color-text-main)' }}>{mod.total_actions}</div>
                    </div>
                    <div>
                      <div style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.02em', marginBottom: '0.2rem' }}>Реакция</div>
                      <div style={{ fontSize: '1.15rem', fontWeight: 800, color: '#00F5D4' }}>
                        {mod.reaction_time_avg ? `${mod.reaction_time_avg}с` : '—'}
                      </div>
                    </div>
                    <div>
                      <div style={{ color: 'var(--color-text-muted)', fontSize: '0.72rem', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '0.02em', marginBottom: '0.2rem' }}>Муты/Баны</div>
                      <div style={{ fontSize: '1.15rem', fontWeight: 800, color: '#e91e63' }}>{mod.bans_count + mod.timeouts_count}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* MAIN GRID */}
          <div className="grid-2col" style={{ gridTemplateColumns: '1.1fr 0.9fr', gap: '1.75rem', alignItems: 'start' }}>
            
            {/* Left Column: Leaderboard Table */}
            <div className="panel" style={{ padding: '1.75rem' }}>
              <div className="panel-header" style={{ marginBottom: '1.5rem', paddingBottom: '1rem' }}>
                <h3 className="panel-title" style={{ fontSize: '1.1rem', fontWeight: 700 }}><Shield size={20} style={{ color: 'var(--color-brand)' }} /> Рейтинг модераторов</h3>
              </div>
              {(!modProfiles || modProfiles.length === 0) ? (
                <div className="status-msg" style={{ padding: '3rem 1.5rem' }}>
                  <ShieldAlert size={40} className="status-msg-icon" />
                  <p>Модераторы еще не совершали действий в этом периоде</p>
                </div>
              ) : (
                <div className="table-wrapper">
                  <table className="data-table">
                    <thead>
                      <tr>
                        <th style={{ width: '60px', padding: '0.75rem 0.5rem' }}>Ранг</th>
                        <th style={{ padding: '0.75rem 0.5rem' }}>Модератор</th>
                        <th style={{ textAlign: 'center', padding: '0.75rem 0.5rem' }}>Реакция</th>
                        <th style={{ textAlign: 'center', padding: '0.75rem 0.5rem' }}>Действий</th>
                        <th style={{ textAlign: 'center', padding: '0.75rem 0.5rem' }}>Бан/Мут</th>
                        <th style={{ width: '130px', padding: '0.75rem 0.5rem' }}>КПД</th>
                      </tr>
                    </thead>
                    <tbody>
                      {modProfiles.map((mod, idx) => {
                        const isSelected = selectedMod && selectedMod.moderator === mod.moderator;
                        const kpi = getKpiScore(mod);
                        return (
                          <tr 
                            key={idx} 
                            onClick={() => setSelectedMod(mod)}
                            style={{ 
                              cursor: 'pointer',
                              background: isSelected ? 'rgba(145, 70, 255, 0.06)' : 'transparent',
                              transition: 'background-color 0.2s ease'
                            }}
                          >
                            <td style={{ 
                              fontWeight: 700, 
                              color: isSelected ? 'var(--color-brand)' : 'var(--color-text-muted)',
                              padding: '0.9rem 0.5rem'
                            }}>
                              #{idx + 1}
                            </td>
                            <td style={{ padding: '0.9rem 0.5rem' }}>
                              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                                <ModeratorAvatar name={mod.moderator} size={32} API_BASE={API_BASE} />
                                <span style={{ fontWeight: 600, color: isSelected ? 'var(--color-text-main)' : 'var(--color-text-muted)' }}>{mod.moderator}</span>
                              </div>
                            </td>
                            <td style={{ textAlign: 'center', fontWeight: 700, color: '#00F5D4', padding: '0.9rem 0.5rem' }}>
                              {mod.reaction_time_avg ? `${mod.reaction_time_avg}с` : '—'}
                            </td>
                            <td style={{ textAlign: 'center', fontWeight: 700, padding: '0.9rem 0.5rem' }}>{mod.total_actions}</td>
                            <td style={{ textAlign: 'center', color: '#ff7f50', fontWeight: 600, padding: '0.9rem 0.5rem' }}>
                              {mod.bans_count}/{mod.timeouts_count}
                            </td>
                            <td style={{ padding: '0.9rem 0.5rem' }}>
                              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                                <div style={{ flex: 1, height: '6px', background: 'rgba(255,255,255,0.06)', borderRadius: '3px', overflow: 'hidden' }}>
                                  <div style={{ 
                                    width: `${kpi}%`, 
                                    background: 'linear-gradient(90deg, var(--color-brand) 0%, #00e5ff 100%)', 
                                    height: '100%',
                                    borderRadius: '3px'
                                  }} />
                                </div>
                                <span style={{ fontSize: '0.75rem', fontWeight: 700, width: '28px', textAlign: 'right' }}>{kpi}%</span>
                              </div>
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              )}
            </div>

            {/* Right Column: Detailed Dossier */}
            <div className="panel" style={{ padding: '1.75rem' }}>
              <div className="panel-header" style={{ marginBottom: '1.5rem', paddingBottom: '1rem' }}>
                <h3 className="panel-title" style={{ fontSize: '1.1rem', fontWeight: 700 }}><UserCheck size={20} style={{ color: 'var(--color-brand)' }} /> Личное досье модератора</h3>
              </div>
              
              {!selectedMod ? (
                <div className="status-msg" style={{ padding: '4rem 1.5rem' }}>
                  <UserCheck size={40} className="status-msg-icon" />
                  <p>Выберите модератора слева для просмотра досье</p>
                </div>
              ) : (
                <div>
                  {/* Moderator Card Summary */}
                  <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'center', 
                    marginBottom: '1.75rem',
                    background: 'rgba(255,255,255,0.02)',
                    border: '1px solid var(--color-border)',
                    borderRadius: 'var(--radius-md)',
                    padding: '1.25rem'
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                      <ModeratorAvatar name={selectedMod.moderator} size={54} border="2px solid var(--color-brand)" API_BASE={API_BASE} />
                      <div>
                        <h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 800 }}>{selectedMod.moderator}</h3>
                        <span className="badge badge-mod" style={{ marginTop: '0.35rem', fontSize: '0.65rem' }}>Модератор</span>
                      </div>
                    </div>
                    
                    {/* Circle KPI indicator */}
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.15rem' }}>
                      <CircularProgress percentage={getKpiScore(selectedMod)} size={64} color="var(--color-brand)" />
                      <span style={{ fontSize: '0.65rem', color: 'var(--color-text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em' }}>КПД</span>
                    </div>
                  </div>

                  {/* 3-column Detailed Metrics */}
                  <div style={{ 
                    display: 'grid', 
                    gridTemplateColumns: 'repeat(3, 1fr)', 
                    gap: '1rem', 
                    marginBottom: '1.75rem',
                    textAlign: 'center'
                  }}>
                    <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', padding: '0.75rem' }}>
                      <div style={{ fontSize: '0.65rem', color: 'var(--color-text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.2rem' }}>
                        <Clock size={10} /> Реакция
                      </div>
                      <div style={{ fontSize: '1.2rem', fontWeight: 800, color: '#00F5D4' }}>
                        {selectedMod.reaction_time_avg ? `${selectedMod.reaction_time_avg}с` : '—'}
                      </div>
                    </div>
                    <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', padding: '0.75rem' }}>
                      <div style={{ fontSize: '0.65rem', color: 'var(--color-text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.2rem' }}>
                        <Zap size={10} /> Действий
                      </div>
                      <div style={{ fontSize: '1.2rem', fontWeight: 800, color: 'var(--color-text-main)' }}>
                        {selectedMod.total_actions}
                      </div>
                    </div>
                    <div style={{ background: 'rgba(255,255,255,0.02)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', padding: '0.75rem' }}>
                      <div style={{ fontSize: '0.65rem', color: 'var(--color-text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.2rem' }}>
                        <MessageSquare size={10} /> Муты/Баны
                      </div>
                      <div style={{ fontSize: '1.2rem', fontWeight: 800, color: '#e91e63' }}>
                        {selectedMod.bans_count + selectedMod.timeouts_count}
                      </div>
                    </div>
                  </div>

                  {/* Radar chart */}
                  <div style={{ height: '270px', display: 'flex', justifyContent: 'center', marginBottom: '2rem' }}>
                    <Radar 
                      data={{
                        labels: ['Скорость', 'Активность', 'Присутствие', 'Жесткость', 'Внимательность'],
                        datasets: [{
                          data: [
                            selectedMod.scores.speed,
                            selectedMod.scores.activity,
                            Math.min(100, Math.round(selectedMod.scores.activity * 1.15)), // Presence mapped based on activity
                            selectedMod.scores.harshness,
                            selectedMod.scores.watchfulness
                          ],
                          backgroundColor: 'rgba(145, 70, 255, 0.15)',
                          borderColor: '#9146ff',
                          borderWidth: 2,
                          pointBackgroundColor: '#9146ff',
                          pointBorderColor: '#ffffff',
                          pointHoverBackgroundColor: '#ffffff',
                          pointHoverBorderColor: '#9146ff',
                          pointRadius: 3
                        }]
                      }}
                      options={{
                        plugins: { legend: { display: false } },
                        scales: {
                          r: {
                            angleLines: { color: 'rgba(47, 47, 53, 0.5)' },
                            grid: { color: '#2F2F35' },
                            pointLabels: { color: '#ADADB8', font: { family: 'var(--font-family-sans)', size: 9, weight: 'bold' } },
                            ticks: { display: false },
                            min: 0,
                            max: 100
                          }
                        }
                      }}
                    />
                  </div>

                  {/* Actions distribution */}
                  <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: '1.5rem' }}>
                    <h4 style={{ margin: '0 0 0.75rem 0', fontSize: '0.82rem', fontWeight: 700, textTransform: 'uppercase', color: 'var(--color-text-muted)', letterSpacing: '0.03em' }}>Распределение действий:</h4>
                    
                    {/* Stacked Horizontal Bar */}
                    <div style={{ height: '18px', display: 'flex', borderRadius: '9px', overflow: 'hidden', background: 'rgba(255,255,255,0.04)', border: '1px solid var(--color-border)' }}>
                      {selectedMod.bans_count > 0 && (
                        <div 
                          style={{ width: `${(selectedMod.bans_count / selectedMod.total_actions) * 100}%`, background: '#FF0055', height: '100%', transition: 'width 0.5s ease' }} 
                          title={`Баны: ${selectedMod.bans_count}`} 
                        />
                      )}
                      {selectedMod.timeouts_count > 0 && (
                        <div 
                          style={{ width: `${(selectedMod.timeouts_count / selectedMod.total_actions) * 100}%`, background: '#FFAA00', height: '100%', transition: 'width 0.5s ease' }} 
                          title={`Муты/Таймауты: ${selectedMod.timeouts_count}`} 
                        />
                      )}
                      {selectedMod.deletions_count > 0 && (
                        <div 
                          style={{ width: `${(selectedMod.deletions_count / selectedMod.total_actions) * 100}%`, background: '#00AAFF', height: '100%', transition: 'width 0.5s ease' }} 
                          title={`Удаления сообщений: ${selectedMod.deletions_count}`} 
                        />
                      )}
                      {selectedMod.unbans_count > 0 && (
                        <div 
                          style={{ width: `${(selectedMod.unbans_count / selectedMod.total_actions) * 100}%`, background: '#00FF88', height: '100%', transition: 'width 0.5s ease' }} 
                          title={`Разбаны: ${selectedMod.unbans_count}`} 
                        />
                      )}
                    </div>

                    {/* Legend Grid */}
                    <div style={{ 
                      display: 'grid', 
                      gridTemplateColumns: 'repeat(2, 1fr)', 
                      gap: '0.6rem 1rem', 
                      marginTop: '1rem', 
                      fontSize: '0.75rem', 
                      color: 'var(--color-text-muted)' 
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
                        <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: '#FF0055' }}></span>
                        <span>Баны: <strong>{selectedMod.bans_count}</strong> ({Math.round((selectedMod.bans_count / selectedMod.total_actions) * 100) || 0}%)</span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
                        <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: '#FFAA00' }}></span>
                        <span>Муты: <strong>{selectedMod.timeouts_count}</strong> ({Math.round((selectedMod.timeouts_count / selectedMod.total_actions) * 100) || 0}%)</span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
                        <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: '#00AAFF' }}></span>
                        <span>Удаления: <strong>{selectedMod.deletions_count}</strong> ({Math.round((selectedMod.deletions_count / selectedMod.total_actions) * 100) || 0}%)</span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
                        <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', background: '#00FF88' }}></span>
                        <span>Разбаны: <strong>{selectedMod.unbans_count}</strong> ({Math.round((selectedMod.unbans_count / selectedMod.total_actions) * 100) || 0}%)</span>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>

          </div>
        </div>
      )}
    </div>
  );
}