<div class="forum-search-container">
    <div class="search-header">
        <h1>🔍 Пошук форумом</h1>
        <div class="search-box-container">
            <input type="text" id="searchInput" placeholder="Шукати теми, автори, ключові слова..." class="search-box-large">
            <button onclick="performSearch()" class="search-btn">
                <i class="fas fa-search"></i> Пошук
            </button>
        </div>
    </div>

    <div class="search-filters">
        <div class="filter-group">
            <label>Категорія:</label>
            <select id="categoryFilter" class="filter-select">
                <option value="">Всі категорії</option>
                <?php foreach ($categories ?? [] as $cat): ?>
                <option value="<?= $cat['id'] ?>"><?= htmlspecialchars($cat['name']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="filter-group">
            <label>Сортування:</label>
            <select id="sortFilter" class="filter-select">
                <option value="latest">Найсвіжіші</option>
                <option value="popular">Найпопулярніші</option>
                <option value="trending">Тренди</option>
                <option value="unanswered">Без відповідей</option>
            </select>
        </div>

        <div class="filter-group">
            <label>За час:</label>
            <select id="timeFilter" class="filter-select">
                <option value="all">За весь час</option>
                <option value="7">Останні 7 днів</option>
                <option value="30">Останні 30 днів</option>
                <option value="90">Останні 90 днів</option>
            </select>
        </div>
    </div>

    <div class="search-results" id="searchResults">
        <?php if (!empty($results)): ?>
            <div class="results-info">
                <span><?= count($results) ?> результатів знайдено</span>
            </div>

            <div class="results-list">
                <?php foreach ($results as $result): ?>
                <div class="result-item">
                    <div class="result-left">
                        <div class="result-type-icon">
                            <?php if ($result['type'] === 'post'): ?>
                            <i class="fas fa-comments"></i>
                            <?php else: ?>
                            <i class="fas fa-reply"></i>
                            <?php endif; ?>
                        </div>
                    </div>

                    <div class="result-main">
                        <h3><a href="/post/<?= htmlspecialchars($result['slug']) ?>"><?= htmlspecialchars($result['title']) ?></a></h3>
                        
                        <p class="result-excerpt"><?= htmlspecialchars(substr(strip_tags($result['excerpt']), 0, 150)) ?>...</p>

                        <div class="result-meta">
                            <span class="meta-item">
                                <img src="<?= \App\Helpers\Asset::avatar($result['avatar'], $result['author'], 20) ?>" alt="">
                                <a href="/u/<?= htmlspecialchars($result['author']) ?>"><?= htmlspecialchars($result['author']) ?></a>
                            </span>
                            <span class="meta-item">
                                <i class="fas fa-calendar"></i>
                                <?= date('d M Y', strtotime($result['created_at'])) ?>
                            </span>
                            <span class="meta-item">
                                <i class="fas fa-folder"></i>
                                <?= htmlspecialchars($result['category_name']) ?>
                            </span>
                            <span class="meta-item">
                                <i class="fas fa-comments"></i>
                                <?= $result['comments'] ?? 0 ?> відповідей
                            </span>
                        </div>
                    </div>

                    <div class="result-right">
                        <div class="result-stat">
                            <div class="stat-value"><?= number_format($result['score'] ?? 0) ?></div>
                            <div class="stat-label">очки</div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

            <div class="pagination">
                <?php if (isset($currentPage) && $currentPage > 1): ?>
                <a href="/forums/search?q=<?= urlencode($query ?? '') ?>&page=<?= $currentPage - 1 ?>" class="page-link">← Попередня</a>
                <?php endif; ?>
                
                <span class="current-page">Сторінка <?= $currentPage ?? 1 ?></span>
                
                <?php if (isset($hasMore) && $hasMore): ?>
                <a href="/forums/search?q=<?= urlencode($query ?? '') ?>&page=<?= ($currentPage ?? 1) + 1 ?>" class="page-link">Наступна →</a>
                <?php endif; ?>
            </div>
        <?php else: ?>
            <div class="empty-results">
                <i class="fas fa-search"></i>
                <h3>Результатів не знайдено</h3>
                <p><?= isset($query) ? 'Спробуйте змінити параметри пошуку' : 'Почніть з введення пошукового запиту' ?></p>
            </div>
        <?php endif; ?>
    </div>

    <div class="search-tips">
        <h3>💡 Поради для пошуку</h3>
        <ul>
            <li><strong>"точна фраза"</strong> - Поиск точной фразы</li>
            <li><strong>слово1 слово2</strong> - Поиск обоих слов</li>
            <li><strong>-слово</strong> - Исключить слово из результатов</li>
            <li><strong>author:Username</strong> - Поиск по автору</li>
            <li><strong>category:Name</strong> - Поиск в категории</li>
        </ul>
    </div>
</div>

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

.search-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

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

.search-box-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.search-box-large {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    background: var(--card);
    color: var(--text);
    transition: all 0.3s;
}

.search-box-large:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

.search-btn {
    padding: 1rem 1.5rem;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.search-btn:hover {
    background: #4f46e5;
    transform: translateY(-2px);
}

.search-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

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

.filter-group label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.filter-select {
    padding: 0.5rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.filter-select:focus {
    outline: none;
    border-color: #6366f1;
}

.results-info {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(99,102,241,0.05);
    border-left: 4px solid #6366f1;
    border-radius: 0.5rem;
    color: var(--text-muted);
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.result-item {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    transition: all 0.3s;
    align-items: start;
}

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

.result-left {
    display: flex;
    justify-content: center;
}

.result-type-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(99,102,241,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #6366f1;
}

.result-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.result-main h3 {
    margin: 0;
}

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

.result-main a:hover {
    color: #6366f1;
}

.result-excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.result-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.meta-item img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.meta-item a {
    color: #6366f1;
    text-decoration: none;
}

.result-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.result-stat {
    text-align: center;
}

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

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

.empty-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

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

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.page-link {
    padding: 0.75rem 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    color: #6366f1;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.3s;
}

.page-link:hover {
    background: #6366f1;
    color: white;
}

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

.search-tips {
    margin-top: 3rem;
    padding: 2rem;
    background: rgba(99,102,241,0.05);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 1rem;
}

.search-tips h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #6366f1;
}

.search-tips ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.search-tips li {
    padding: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.search-tips strong {
    color: var(--text);
}

@media (max-width: 768px) {
    .result-item {
        grid-template-columns: 1fr;
    }

    .result-left, .result-right {
        display: none;
    }

    .search-box-container {
        flex-direction: column;
    }

    .search-filters {
        flex-direction: column;
    }

    .filter-group {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>

<script>
function performSearch() {
    const query = document.getElementById('searchInput').value;
    const category = document.getElementById('categoryFilter').value;
    const sort = document.getElementById('sortFilter').value;
    const time = document.getElementById('timeFilter').value;
    
    let url = '/forums/search?q=' + encodeURIComponent(query);
    if (category) url += '&category=' + category;
    if (sort) url += '&sort=' + sort;
    if (time) url += '&time=' + time;
    
    window.location.href = url;
}

document.getElementById('searchInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') performSearch();
});
</script>
