<?php ?>
<div class="forum-container">
    <div class="forum-header">
        <div class="header-content">
            <h1><?= \App\Helpers\Lang::t('forums') ?></h1>
            <p><?= \App\Helpers\Lang::t('explore_forums') ?></p>
        </div>
        <div class="header-cta">
            <form class="search-form" action="/forums/search" method="GET">
                <input type="text" name="q" placeholder="<?= \App\Helpers\Lang::t('search_forum_placeholder') ?>" required>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </div>

    <?php if (!empty($trendingTopics)): ?>
    <div class="trending-section">
        <div class="section-title">
            <i class="fas fa-fire"></i> <?= \App\Helpers\Lang::t('trending_this_week') ?>
        </div>
        <div class="trending-carousel">
            <?php foreach (array_slice($trendingTopics, 0, 5) as $topic): ?>
            <div class="trending-card">
                <div class="trending-rank">🔥</div>
                <div class="trending-content">
                    <h4><a href="/post/<?= htmlspecialchars($topic['slug']) ?>"><?= htmlspecialchars($topic['title']) ?></a></h4>
                    <div class="trending-meta">
                        <span class="author">
                            <img src="<?= \App\Helpers\Asset::avatar($topic['avatar'], $topic['username'], 24) ?>" alt="">
                            <?= htmlspecialchars($topic['username']) ?>
                        </span>
                        <span class="comments"><i class="fas fa-comments"></i> <?= $topic['comment_count'] ?? 0 ?></span>
                        <span class="score"><i class="fas fa-arrow-up"></i> <?= $topic['score'] ?? 0 ?></span>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endif; ?>

    <div class="forums-grid">
        <div class="forums-list">
            <div class="list-header">
                <h2><?= \App\Helpers\Lang::t('all_forums') ?></h2>
                <div class="list-actions">
                    <a href="/forums/stats" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-chart-bar"></i> <?= \App\Helpers\Lang::t('stats') ?>
                    </a>
                    <a href="/forums/trending" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-fire"></i> <?= \App\Helpers\Lang::t('trending') ?>
                    </a>
                </div>
            </div>

            <div class="forums-table">
                <?php foreach ($forums as $forum): ?>
                <div class="forum-row">
                    <div class="forum-icon">
                        <i class="fas fa-<?= htmlspecialchars($forum['icon'] ?? 'comment') ?>"></i>
                    </div>
                    
                    <div class="forum-info">
                        <h3><a href="/forum/<?= htmlspecialchars($forum['slug']) ?>"><?= htmlspecialchars($forum['name']) ?></a></h3>
                        <p class="forum-desc"><?= htmlspecialchars($forum['description'] ?? 'Немає опису') ?></p>
                        <div class="forum-tags">
                            <?php if ($forum['post_count'] > 100): ?>
                            <span class="tag active"><?= \App\Helpers\Lang::t('active') ?></span>
                            <?php endif; ?>
                            <?php if ($forum['week_posts'] > 10): ?>
                            <span class="tag trending"><?= \App\Helpers\Lang::t('new') ?></span>
                            <?php endif; ?>
                        </div>
                    </div>

                    <div class="forum-stats">
                        <div class="stat">
                            <div class="stat-value"><?= number_format($forum['post_count']) ?></div>
                            <div class="stat-label"><?= \App\Helpers\Lang::t('themes') ?></div>
                        </div>
                        <div class="stat">
                            <div class="stat-value"><?= number_format($forum['member_count']) ?></div>
                            <div class="stat-label"><?= \App\Helpers\Lang::t('participants') ?></div>
                        </div>
                        <div class="stat">
                            <div class="stat-value"><?= $forum['today_active_users'] ?></div>
                            <div class="stat-label"><?= \App\Helpers\Lang::t('online') ?></div>
                        </div>
                    </div>

                    <div class="forum-last-post">
                        <?php if ($forum['last_post_date']): ?>
                        <div class="last-activity">
                            <i class="fas fa-clock"></i>
                            <span><?= date('d M Y', strtotime($forum['last_post_date'])) ?></span>
                        </div>
                        <?php else: ?>
                        <div class="no-activity">
                            <i class="fas fa-circle"></i> <?= \App\Helpers\Lang::t('no_activity') ?>
                        </div>
                        <?php endif; ?>
                    </div>

                    <a href="/forum/<?= htmlspecialchars($forum['slug']) ?>" class="btn btn-primary btn-sm">
                        <?= \App\Helpers\Lang::t('view_btn') ?>
                    </a>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="forums-sidebar">
            <div class="sidebar-card stats-card">
                <div class="card-title">Статистика форуму</div>
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-icon">📊</div>
                        <div class="stat-data">
                            <div class="stat-num"><?= count($forums) ?></div>
                            <div class="stat-name">Форумів</div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-icon">💬</div>
                        <div class="stat-data">
                            <div class="stat-num"><?= number_format(array_sum(array_column($forums, 'post_count'))) ?></div>
                            <div class="stat-name">Обговорень</div>
                        </div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-icon">👥</div>
                        <div class="stat-data">
                            <div class="stat-num"><?= number_format(array_sum(array_column($forums, 'member_count'))) ?></div>
                            <div class="stat-name">Учасників</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sidebar-card guide-card">
                <div class="card-title">Поради для форуму</div>
                <ul class="tips-list">
                    <li>✓ Прочитайте правила перед постингом</li>
                    <li>✓ Спочатку пошукайте відповідь</li>
                    <li>✓ Будьте ввічливі до інших</li>
                    <li>✓ Не спамьте та не рекламуйте</li>
                    <li>✓ Дякуйте корисним постам</li>
                </ul>
            </div>

            <div class="sidebar-card quick-links">
                <div class="card-title">Швидкі посилання</div>
                <div class="links-grid">
                    <a href="/forums/trending" class="quick-link">
                        <i class="fas fa-fire"></i>
                        <span><?= \App\Helpers\Lang::t('trending') ?></span>
                    </a>
                    <a href="/forums/stats" class="quick-link">
                        <i class="fas fa-chart-line"></i>
                        <span><?= \App\Helpers\Lang::t('stats') ?></span>
                    </a>
                    <a href="/post/create" class="quick-link">
                        <i class="fas fa-plus"></i>
                        <span><?= \App\Helpers\Lang::t('new_topic') ?></span>
                    </a>
                    <a href="/forums/search" class="quick-link">
                        <i class="fas fa-search"></i>
                        <span><?= \App\Helpers\Lang::t('search') ?></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

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

.forum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 1.5rem;
}

.header-content h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.search-form {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 400px;
}

.search-form input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text);
}

.search-form input::placeholder {
    color: var(--text-muted);
}

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

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i {
    color: #f59e0b;
}

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

.trending-card {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.trending-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #ec4899);
}

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

.trending-rank {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.trending-card h4 {
    margin-bottom: 0.75rem;
}

.trending-card a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
}

.trending-card a:hover {
    color: #6366f1;
}

.trending-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.author img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.forums-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.list-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.list-actions {
    display: flex;
    gap: 0.5rem;
}

.forums-table {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

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

.forum-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #6366f1;
    flex-shrink: 0;
}

.forum-info {
    flex: 1;
    min-width: 0;
}

.forum-info h3 {
    margin-bottom: 0.5rem;
}

.forum-info a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
}

.forum-info a:hover {
    color: #6366f1;
}

.forum-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    background: rgba(99,102,241,0.1);
    color: #6366f1;
}

.tag.trending {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
}

.forum-stats {
    display: flex;
    gap: 1.5rem;
}

.stat {
    text-align: center;
}

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

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.forum-last-post {
    text-align: center;
}

.last-activity, .no-activity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.forums-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(99,102,241,0.05);
    border-radius: 0.5rem;
}

.stat-icon {
    font-size: 1.5rem;
}

.stat-num {
    font-weight: 700;
    font-size: 1rem;
}

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

.tips-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tips-list li {
    padding: 0.75rem;
    background: rgba(16,185,129,0.05);
    border-left: 3px solid #10b981;
    border-radius: 0.375rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 0.75rem;
    color: var(--text);
    text-decoration: none;
    transition: all 0.3s;
}

.quick-link:hover {
    background: rgba(99,102,241,0.2);
    transform: translateY(-2px);
}

.quick-link i {
    color: #6366f1;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.quick-link span {
    font-size: 0.8rem;
    text-align: center;
}

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

    .forum-row {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .forum-info {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .forum-header {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .header-content h1 {
        font-size: 1.75rem;
    }

    .search-form {
        max-width: 100%;
    }

    .trending-carousel {
        grid-template-columns: 1fr;
    }

    .forum-row {
        gap: 0.75rem;
    }

    .forum-stats, .forum-last-post {
        display: none;
    }

    .links-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .forum-header {
        padding: 1.5rem;
    }

    .list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .forum-row {
        flex-direction: column;
        align-items: flex-start;
    }

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