<div class="trending-container">
    <div class="trending-header">
        <div class="header-content">
            <h1>🔥 Тренду паралелі</h1>
            <p>Найбільш обговорювані теми останнього часу</p>
        </div>
        <div class="filter-options">
            <select id="timeFilter" onchange="filterTrending()">
                <option value="7">Останні 7 днів</option>
                <option value="14">Останні 14 днів</option>
                <option value="30">Останні 30 днів</option>
            </select>
        </div>
    </div>

    <div class="trending-grid">
        <?php if (!empty($trending)): ?>
            <?php foreach ($trending as $index => $item): ?>
            <div class="trending-card" data-rank="<?= $index + 1 ?>">
                <div class="ranking-badge">
                    <span class="rank-number"><?= str_pad($index + 1, 2, '0', STR_PAD_LEFT) ?></span>
                    <span class="trending-indicator">📈</span>
                </div>

                <div class="card-content">
                    <div class="card-category">
                        <a href="/forums"><?= htmlspecialchars($item['category_name']) ?></a>
                    </div>
                    
                    <h3><a href="/post/<?= htmlspecialchars($item['slug']) ?>"><?= htmlspecialchars($item['title']) ?></a></h3>
                    
                    <p class="card-excerpt"><?= htmlspecialchars(substr(strip_tags($item['content'] ?? ''), 0, 120)) ?>...</p>

                    <div class="card-author">
                        <img src="<?= \App\Helpers\Asset::avatar($item['avatar'], $item['username'], 32) ?>" alt="">
                        <div>
                            <strong><?= htmlspecialchars($item['username']) ?></strong>
                            <small><?= date('d M Y', strtotime($item['created_at'])) ?></small>
                        </div>
                    </div>

                    <div class="engagement-score">
                        <div class="score-meter">
                            <div class="score-label">Популярність</div>
                            <div class="score-bar">
                                <div class="score-fill" style="width: <?= min(100, ($item['engagement_score'] ?? 0) / 10) ?>%"></div>
                            </div>
                            <div class="score-value"><?= number_format($item['engagement_score'] ?? 0) ?></div>
                        </div>
                    </div>
                </div>

                <div class="card-metrics">
                    <div class="metric">
                        <i class="fas fa-eye"></i>
                        <span><?= number_format($item['view_count'] ?? 0) ?></span>
                    </div>
                    <div class="metric">
                        <i class="fas fa-comments"></i>
                        <span><?= $item['comment_count'] ?? 0 ?></span>
                    </div>
                    <div class="metric">
                        <i class="fas fa-arrow-up"></i>
                        <span><?= $item['vote_sum'] ?? 0 ?></span>
                    </div>
                </div>

                <a href="/post/<?= htmlspecialchars($item['slug']) ?>" class="card-link">
                    Прочитати тему <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            <?php endforeach; ?>
        <?php else: ?>
        <div class="empty-trending">
            <i class="fas fa-chart-line"></i>
            <h3>Нема трендів</h3>
            <p>Тренди відсутні. Почніть обговорення першим!</p>
        </div>
        <?php endif; ?>
    </div>

    <div class="trending-info">
        <div class="info-card">
            <h4>📊 Як розраховується популярність?</h4>
            <ul>
                <li><strong>Переглядів:</strong> +1 за кожний перегляд</li>
                <li><strong>Комментарів:</strong> +3 за кожний комментар</li>
                <li><strong>Голосів:</strong> +2 за кожний голос</li>
            </ul>
        </div>
        <div class="info-card">
            <h4>🎯 Що означає цей рейтинг?</h4>
            <p>Рейтинг трендів показує найбільш цікаві та обговорювані теми в спільноті. Чим вище рейтинг, тим більше уваги користувачів отримала тема.</p>
        </div>
    </div>
</div>

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

.trending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(244,63,94,0.1), rgba(251,146,60,0.1));
    border: 1px solid rgba(244,63,94,0.2);
    border-radius: 1.5rem;
    gap: 2rem;
}

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

.header-content p {
    color: var(--text-muted);
}

.filter-options select {
    padding: 0.75rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text);
    cursor: pointer;
    font-size: 0.9rem;
}

.trending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

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

.trending-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #f43f5e, #fb923c);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.trending-card:hover {
    border-color: rgba(244,63,94,0.5);
    box-shadow: 0 12px 24px rgba(244,63,94,0.15);
}

.trending-card:hover::before {
    transform: scaleX(1);
}

.ranking-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f43f5e, #fb923c);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.rank-number {
    display: inline-block;
    min-width: 30px;
}

.card-content {
    flex: 1;
    margin-bottom: 1.5rem;
}

.card-category {
    margin-bottom: 0.75rem;
}

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

.card-category a:hover {
    background: rgba(99,102,241,0.2);
}

.card-content h3 {
    margin-bottom: 1rem;
}

.card-content a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-content a:hover {
    color: #f43f5e;
}

.card-excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    max-height: 45px;
    overflow: hidden;
}

.card-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

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

.card-author strong {
    display: block;
}

.card-author small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.engagement-score {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(244,63,94,0.05);
    border-radius: 0.75rem;
}

.score-meter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.score-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

.score-bar {
    height: 8px;
    background: rgba(244,63,94,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.score-fill {
    height: 100%;
    background: linear-gradient(135deg, #f43f5e, #fb923c);
    transition: width 0.3s ease;
}

.score-value {
    font-weight: 700;
    color: #f43f5e;
    font-size: 0.9rem;
}

.card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.metric {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.metric i {
    color: #f43f5e;
}

.metric span {
    font-weight: 600;
}

.card-link {
    display: block;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(244,63,94,0.1), rgba(251,146,60,0.1));
    border: 1px solid rgba(244,63,94,0.2);
    color: #f43f5e;
    text-align: center;
    border-radius: 0.75rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.card-link:hover {
    background: linear-gradient(135deg, rgba(244,63,94,0.2), rgba(251,146,60,0.15));
    border-color: rgba(244,63,94,0.5);
}

.card-link i {
    margin-left: 0.5rem;
    transition: transform 0.3s;
}

.card-link:hover i {
    transform: translateX(4px);
}

.empty-trending {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-trending i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.trending-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

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

.info-card h4 {
    margin-bottom: 1rem;
    color: #f43f5e;
}

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

.info-card li {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding-left: 1.5rem;
    position: relative;
}

.info-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #f43f5e;
}

.info-card p {
    color: var(--text-muted);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .trending-header {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .ranking-badge {
        top: 0.75rem;
        right: 0.75rem;
        font-size: 0.9rem;
    }
}
</style>

<script>
function filterTrending() {
    const days = document.getElementById('timeFilter').value;
    window.location.href = '/forums/trending?days=' + days;
}
</script>
