<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{if $smarty.get.q}Search: {$smarty.get.q} - EasyStream{else}Search - EasyStream{/if}</title>
    <link rel="stylesheet" href="{$main_url}/f_templates/tpl_frontend/css/search.css">
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; background: #f8f9fa; }
        .header { background: #fff; border-bottom: 1px solid #e1e5e9; padding: 1rem 0; }
        .header-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
        .logo { font-size: 1.5rem; font-weight: bold; color: #007bff; text-decoration: none; }
        .header-search { flex: 1; max-width: 600px; margin: 0 2rem; }
        .search-container { display: flex; position: relative; }
        .search-input { flex: 1; padding: 0.75rem 1rem; border: 1px solid #ccc; border-radius: 25px 0 0 25px; font-size: 1rem; outline: none; }
        .search-input:focus { border-color: #007bff; }
        .search-btn { background: #007bff; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0 25px 25px 0; cursor: pointer; }
        .search-btn:hover { background: #0056b3; }
        .nav { display: flex; gap: 2rem; }
        .nav a { color: #495057; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px; transition: all 0.2s; }
        .nav a:hover { background: #f8f9fa; }
        .container { max-width: 1200px; margin: 0 auto; padding: 2rem 20px; }
        .search-filters { background: white; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .filter-tabs { display: flex; gap: 1rem; flex-wrap: wrap; }
        .filter-tab { padding: 0.5rem 1rem; border: 1px solid #dee2e6; border-radius: 20px; background: white; color: #495057; text-decoration: none; transition: all 0.2s; }
        .filter-tab:hover, .filter-tab.active { background: #007bff; color: white; border-color: #007bff; }
        .search-results-header { margin-bottom: 1.5rem; }
        .results-count { color: #6c757d; font-size: 0.875rem; }
        .no-results { text-align: center; padding: 3rem; background: white; border-radius: 8px; }
        .no-results h3 { color: #495057; margin: 0 0 1rem 0; }
        .no-results p { color: #6c757d; margin: 0; }
        .suggestions { margin-top: 2rem; }
        .suggestions h4 { margin: 0 0 1rem 0; color: #495057; }
        .suggestion-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .suggestion-tag { padding: 0.25rem 0.75rem; background: #e9ecef; color: #495057; border-radius: 15px; text-decoration: none; font-size: 0.875rem; }
        .suggestion-tag:hover { background: #007bff; color: white; }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <a href="{$main_url}" class="logo">🎬 EasyStream</a>
            
            <div class="header-search">
                <form method="get" action="{$main_url}/search">
                    <div class="search-container">
                        <input type="text" name="q" class="search-input" 
                               value="{$smarty.get.q|escape}" 
                               placeholder="Search videos, channels, and more..." 
                               autocomplete="off">
                        <button type="submit" class="search-btn">🔍</button>
                    </div>
                </form>
            </div>
            
            <nav class="nav">
                <a href="{$main_url}">Home</a>
                <a href="{$main_url}/videos">Videos</a>
                <a href="{$main_url}/upload">Upload</a>
                {if $smarty.session.USER_ID}
                    <a href="{$main_url}/account">Account</a>
                {else}
                    <a href="{$main_url}/signin">Sign In</a>
                {/if}
            </nav>
        </div>
    </header>

    <div class="container">
        {if $smarty.get.q}
            <div class="search-filters">
                <div class="filter-tabs">
                    <a href="?q={$smarty.get.q|urlencode}&tf=0" class="filter-tab {if !$smarty.get.tf or $smarty.get.tf eq '0'}active{/if}">
                        📹 All
                    </a>
                    <a href="?q={$smarty.get.q|urlencode}&tf=1" class="filter-tab {if $smarty.get.tf eq '1'}active{/if}">
                        🎬 Videos
                    </a>
                    <a href="?q={$smarty.get.q|urlencode}&tf=8" class="filter-tab {if $smarty.get.tf eq '8'}active{/if}">
                        📺 Live
                    </a>
                    <a href="?q={$smarty.get.q|urlencode}&tf=2" class="filter-tab {if $smarty.get.tf eq '2'}active{/if}">
                        🖼️ Images
                    </a>
                    <a href="?q={$smarty.get.q|urlencode}&tf=3" class="filter-tab {if $smarty.get.tf eq '3'}active{/if}">
                        🎵 Audio
                    </a>
                    <a href="?q={$smarty.get.q|urlencode}&tf=4" class="filter-tab {if $smarty.get.tf eq '4'}active{/if}">
                        📄 Documents
                    </a>
                    <a href="?q={$smarty.get.q|urlencode}&tf=6" class="filter-tab {if $smarty.get.tf eq '6'}active{/if}">
                        👤 Channels
                    </a>
                    <a href="?q={$smarty.get.q|urlencode}&tf=5" class="filter-tab {if $smarty.get.tf eq '5'}active{/if}">
                        📋 Playlists
                    </a>
                </div>
            </div>

            <div class="search-results-header">
                <h1 style="margin: 0 0 0.5rem 0; color: #212529;">
                    Search Results for "{$smarty.get.q|escape}"
                </h1>
                <div class="results-count">
                    {if $total_results}
                        {$total_results|number_format} results found
                    {else}
                        No results found
                    {/if}
                </div>
            </div>

            <div id="search-results">
                {generate_html type="search_layout" bullet_id="ct-search" entry_id="ct-search-details" section="search" bb="0"}
            </div>

            {if !$total_results}
                <div class="no-results">
                    <h3>No results found for "{$smarty.get.q|escape}"</h3>
                    <p>Try different keywords, check your spelling, or browse our categories below</p>
                    
                    <div class="suggestions">
                        <h4>Popular searches:</h4>
                        <div class="suggestion-tags">
                            <a href="?q=music" class="suggestion-tag">music</a>
                            <a href="?q=gaming" class="suggestion-tag">gaming</a>
                            <a href="?q=tutorial" class="suggestion-tag">tutorial</a>
                            <a href="?q=comedy" class="suggestion-tag">comedy</a>
                            <a href="?q=news" class="suggestion-tag">news</a>
                            <a href="?q=sports" class="suggestion-tag">sports</a>
                            <a href="?q=technology" class="suggestion-tag">technology</a>
                            <a href="?q=education" class="suggestion-tag">education</a>
                        </div>
                    </div>
                </div>
            {/if}
        {else}
            <div style="text-align: center; padding: 3rem;">
                <h1 style="color: #495057; margin: 0 0 1rem 0;">🔍 Search EasyStream</h1>
                <p style="color: #6c757d; margin: 0 0 2rem 0;">Find videos, channels, and content across our platform</p>
                
                <form method="get" action="{$main_url}/search" style="max-width: 500px; margin: 0 auto;">
                    <div class="search-container">
                        <input type="text" name="q" class="search-input" 
                               placeholder="What are you looking for?" 
                               autocomplete="off" style="border-radius: 25px;">
                        <button type="submit" class="search-btn" style="border-radius: 25px; margin-left: 0.5rem;">
                            Search
                        </button>
                    </div>
                </form>

                <div class="suggestions" style="margin-top: 3rem;">
                    <h4>Trending searches:</h4>
                    <div class="suggestion-tags" style="justify-content: center;">
                        <a href="?q=music" class="suggestion-tag">music</a>
                        <a href="?q=gaming" class="suggestion-tag">gaming</a>
                        <a href="?q=tutorial" class="suggestion-tag">tutorial</a>
                        <a href="?q=comedy" class="suggestion-tag">comedy</a>
                        <a href="?q=news" class="suggestion-tag">news</a>
                        <a href="?q=sports" class="suggestion-tag">sports</a>
                    </div>
                </div>
            </div>
        {/if}
    </div>

    <script>
        // Enhanced search functionality
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.querySelector('.search-input');
            
            // Auto-focus search input
            if (searchInput && !searchInput.value) {
                searchInput.focus();
            }
            
            // Search suggestions (integrate with existing EasyStream autocomplete)
            if (searchInput) {
                let timeout;
                searchInput.addEventListener('input', function() {
                    clearTimeout(timeout);
                    timeout = setTimeout(() => {
                        // Integration with existing EasyStream autocomplete system
                        // This would call the existing VGenerate::processAutoComplete() method
                        console.log('Search suggestions for:', this.value);
                    }, 300);
                });
            }
            
            // Filter tab interactions
            document.querySelectorAll('.filter-tab').forEach(tab => {
                tab.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-1px)';
                });
                tab.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
        });
    </script>
</body>
</html>