<div class="forum-stats-container">
    <div class="stats-header">
        <h1>📊 Статистика форуму</h1>
        <p>Аналітика та вляснення активності спільноти</p>
    </div>

    <div class="stats-grid">
        <div class="stat-card large">
            <div class="stat-icon">📝</div>
            <div class="stat-content">
                <div class="stat-value"><?= number_format($globalStats['total_topics'] ?? 0) ?></div>
                <div class="stat-label">Всього тем</div>
            </div>
        </div>

        <div class="stat-card large">
            <div class="stat-icon">💬</div>
            <div class="stat-content">
                <div class="stat-value"><?= number_format($globalStats['total_comments'] ?? 0) ?></div>
                <div class="stat-label">Всього відповідей</div>
            </div>
        </div>

        <div class="stat-card large">
            <div class="stat-icon">👥</div>
            <div class="stat-content">
                <div class="stat-value"><?= number_format($globalStats['total_members'] ?? 0) ?></div>
                <div class="stat-label">Активних учасників</div>
            </div>
        </div>

        <div class="stat-card large">
            <div class="stat-icon">👁️</div>
            <div class="stat-content">
                <div class="stat-value"><?= number_format($globalStats['total_views'] ?? 0) ?></div>
                <div class="stat-label">Переглядів</div>
            </div>
        </div>
    </div>

    <div class="charts-section">
        <div class="chart-card">
            <div class="chart-title">📈 Активність за час</div>
            <div class="activity-chart">
                <?php 
                $maxActivity = max(array_column($activityDaily ?? [], 'count'));
                foreach ($activityDaily ?? [] as $day): 
                ?>
                <div class="bar-item">
                    <div class="bar" style="height: <?= ($day['count'] / max($maxActivity, 1)) * 100 ?>%">
                        <span class="bar-value"><?= $day['count'] ?></span>
                    </div>
                    <div class="bar-label"><?= $day['day'] ?></div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-title">🏆 Топ форуми за активністю</div>
            <div class="forum-ranking">
                <?php foreach ($topForums ?? [] as $index => $forum): ?>
                <div class="ranking-item">
                    <div class="rank-badge"><?= str_pad($index + 1, 2, '0', STR_PAD_LEFT) ?></div>
                    <div class="rank-content">
                        <div class="forum-name"><?= htmlspecialchars($forum['name']) ?></div>
                        <div class="forum-stats">
                            <span><?= $forum['topics'] ?> тем</span>
                            <span>•</span>
                            <span><?= $forum['replies'] ?> відповідей</span>
                        </div>
                    </div>
                    <div class="activity-indicator">
                        <div class="activity-bar">
                            <div class="activity-fill" style="width: <?= min(100, ($forum['topics'] / max(array_column($topForums ?? [], 'topics'), 1)) * 100) ?>%"></div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

    <div class="insights-section">
        <h2>💡 Ключові показники</h2>
        <div class="insights-grid">
            <div class="insight-card">
                <div class="insight-title">Середня довжина дискусії</div>
                <div class="insight-value">
                    <?php 
                    $avgReplies = $globalStats['total_comments'] > 0 ? 
                        round($globalStats['total_comments'] / max($globalStats['total_topics'], 1), 1) : 0;
                    echo $avgReplies;
                    ?>
                </div>
                <div class="insight-meta">відповідей на тему</div>
            </div>

            <div class="insight-card">
                <div class="insight-title">Середні переглядів на тему</div>
                <div class="insight-value">
                    <?php 
                    $avgViews = $globalStats['total_views'] > 0 ? 
                        round($globalStats['total_views'] / max($globalStats['total_topics'], 1), 0) : 0;
                    echo number_format($avgViews);
                    ?>
                </div>
                <div class="insight-meta">переглядів</div>
            </div>

            <div class="insight-card">
                <div class="insight-title">Залучення учасників</div>
                <div class="insight-value">
                    <?php 
                    $engagement = $globalStats['total_members'] > 0 ? 
                        round(($globalStats['total_comments'] / $globalStats['total_members']), 1) : 0;
                    echo $engagement;
                    ?>
                </div>
                <div class="insight-meta">постів на учасника</div>
            </div>

            <div class="insight-card">
                <div class="insight-title">Популярність тем</div>
                <div class="insight-value">
                    <?php 
                    $engagementRate = $globalStats['total_topics'] > 0 ? 
                        round(($globalStats['total_comments'] / $globalStats['total_topics']) * 100, 0) : 0;
                    echo $engagementRate . '%';
                    ?>
                </div>
                <div class="insight-meta">тем має коментарі</div>
            </div>
        </div>
    </div>

    <div class="member-activity">
        <h2>🌟 Найбільш активні учасники</h2>
        <div class="members-grid">
            <?php foreach ($topMembers ?? [] as $member): ?>
            <div class="member-card">
                <div class="member-avatar">
                    <img src="<?= \App\Helpers\Asset::avatar($member['avatar'], $member['username'], 60) ?>" alt="">
                    <div class="member-rank"><?= htmlspecialchars(substr($member['role'] ?? 'User', 0, 1)) ?></div>
                </div>
                <div class="member-info">
                    <h4><?= htmlspecialchars($member['username']) ?></h4>
                    <div class="member-stats">
                        <span>📝 <?= $member['post_count'] ?? 0 ?> постів</span>
                        <span>💬 <?= $member['comment_count'] ?? 0 ?> комментарів</span>
                    </div>
                    <a href="/u/<?= htmlspecialchars($member['username']) ?>" class="view-profile">
                        Профіль <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<style>
.forum-stats-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.stats-header {
    text-align: center;
    margin-bottom: 3rem;
}

.stats-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.stats-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    padding: 2rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s;
}

.stat-card:hover {
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 12px 24px rgba(99,102,241,0.1);
}

.stat-card.large {
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
}

.stat-icon {
    font-size: 2.5rem;
    min-width: 80px;
    text-align: center;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #6366f1;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.charts-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.chart-card {
    padding: 2rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.chart-title {
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.activity-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 200px;
    gap: 0.5rem;
}

.bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    gap: 0.5rem;
}

.bar {
    width: 100%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 0.5rem 0.5rem 0 0;
    position: relative;
    min-height: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: all 0.3s;
}

.bar:hover {
    filter: brightness(1.1);
}

.bar-value {
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

.bar-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.forum-ranking {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ranking-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: rgba(99,102,241,0.05);
    border-radius: 0.75rem;
    transition: all 0.3s;
}

.ranking-item:hover {
    background: rgba(99,102,241,0.1);
}

.rank-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.rank-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.forum-name {
    font-weight: 600;
}

.forum-stats {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.5rem;
}

.activity-indicator {
    width: 100px;
}

.activity-bar {
    height: 6px;
    background: rgba(99,102,241,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.activity-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 3px;
    transition: width 0.3s;
}

.insights-section {
    margin-bottom: 3rem;
}

.insights-section h2 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.insight-card {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 1rem;
    text-align: center;
    transition: all 0.3s;
}

.insight-card:hover {
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 8px 16px rgba(99,102,241,0.1);
}

.insight-title {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.insight-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #6366f1;
    margin-bottom: 0.5rem;
}

.insight-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.member-activity {
    margin-bottom: 3rem;
}

.member-activity h2 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.member-card {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s;
}

.member-card:hover {
    border-color: rgba(99,102,241,0.5);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(99,102,241,0.1);
}

.member-avatar {
    position: relative;
    margin-bottom: 1rem;
}

.member-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--border);
}

.member-rank {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #6366f1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.member-info h4 {
    margin-bottom: 0.5rem;
}

.member-stats {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.view-profile {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(99,102,241,0.1);
    color: #6366f1;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
}

.view-profile:hover {
    background: #6366f1;
    color: white;
}

@media (max-width: 1024px) {
    .charts-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card {
        flex-direction: column;
        text-align: center;
    }

    .activity-chart {
        height: 150px;
    }

    .members-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .forum-stats-container {
        padding: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}
</style>
