WiSearch/ui/templates/results.html

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ query }} - WiSearch</title>
    <style>
        body { background-color: #121212; color: #e0e0e0; font-family: 'Segoe UI', Tahoma, sans-serif; margin: 0; padding: 0; }
        .top-bar { display: flex; align-items: center; padding: 20px 30px; background: #1e1e1e; border-bottom: 1px solid #333; }
        .logo { font-size: 24px; font-weight: bold; color: #bb86fc; text-decoration: none; margin-right: 30px; }
        .logo span { color: #03dac6; }
        .search-box { padding: 10px 20px; font-size: 16px; border-radius: 30px; border: 1px solid #444; background: #121212; color: #fff; width: 400px; outline: none; }
        .btn-search { padding: 10px 20px; font-size: 16px; background-color: #bb86fc; color: #000; border: none; border-radius: 30px; cursor: pointer; margin-left: 10px; font-weight: bold; }
        
        .main-tabs { padding: 0 30px; background: #1e1e1e; border-bottom: 1px solid #333; display: flex; gap: 20px; }
        .tab-link { color: #9e9e9e; text-decoration: none; padding: 15px 5px; font-size: 15px; font-weight: bold; border-bottom: 3px solid transparent; transition: 0.2s; }
        .tab-link:hover { color: #fff; }
        .tab-link.active { color: #03dac6; border-bottom-color: #03dac6; }

        .filters-bar { padding: 10px 30px; border-bottom: 1px solid #333; background: #1a1a1a; display: flex; gap: 15px; flex-wrap: wrap; }
        .filter-btn { color: #9e9e9e; text-decoration: none; font-size: 13px; padding: 5px 12px; border-radius: 15px; border: 1px solid #333; transition: 0.2s; white-space: nowrap; }
        .filter-btn:hover { background: #333; color: #fff; }
        .filter-btn.active { background: #03dac6; color: #000; border-color: #03dac6; font-weight: bold; }

        /* ΝΕΟ: Διάταξη Σελίδας για Sidebar */
        .page-layout { display: flex; gap: 30px; max-width: 1400px; margin: 0 auto; align-items: flex-start; padding: 20px 30px; }
        .results-column { flex: 1; max-width: 800px; }
        
        /* Στυλ του AI Box */
        .ai-sidebar { width: 360px; background: #1e1e1e; border: 1px solid #333; border-radius: 10px; display: flex; flex-direction: column; height: 600px; position: sticky; top: 20px; flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
        .ai-header { background: #2d2d2d; padding: 15px; border-bottom: 1px solid #333; font-weight: bold; color: #bb86fc; display: flex; align-items: center; gap: 10px; }
        .ai-chat-window { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; font-size: 14px; }
        .ai-msg { background: #2d2d2d; padding: 12px 15px; border-radius: 10px 10px 10px 0; color: #e0e0e0; align-self: flex-start; max-width: 90%; line-height: 1.5; border: 1px solid #333; }
        .user-msg { background: rgba(3, 218, 198, 0.1); border: 1px solid rgba(3, 218, 198, 0.3); padding: 12px 15px; border-radius: 10px 10px 0 10px; color: #03dac6; align-self: flex-end; max-width: 90%; line-height: 1.5; }
        .ai-input-area { display: flex; padding: 15px; background: #1a1a1a; border-top: 1px solid #333; gap: 10px; }
        .ai-input { flex: 1; padding: 12px 15px; border-radius: 20px; border: 1px solid #444; background: #121212; color: #fff; outline: none; font-size: 13px; }
        .ai-input:focus { border-color: #bb86fc; }
        .ai-btn { background: #bb86fc; color: #000; border: none; border-radius: 50%; width: 42px; height: 42px; font-weight: bold; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
        .ai-btn:hover { background: #a36cf9; transform: scale(1.05); }
        .typing-indicator { color: #9e9e9e; font-size: 12px; font-style: italic; display: none; padding-left: 15px; margin-bottom: 10px; }

        .smart-query { font-size: 13px; color: #9e9e9e; margin-bottom: 20px; }
        .smart-query span { color: #bb86fc; }

        .result-item { margin-bottom: 30px; }
        .result-url { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; max-width: 100%; overflow: hidden; }
        .url-text { font-size: 13px; color: #e0e0e0; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 550px; display: inline-block; }
        .url-text:hover { color: #fff; }
        .cached-btn { font-size: 11px; background: #333; color: #fff; padding: 2px 6px; border-radius: 3px; text-decoration: none; border: 1px solid #555; flex-shrink: 0; }
        .cached-btn:hover { background: #bb86fc; color: #000; }
        .result-title { font-size: 20px; color: #8ab4f8; text-decoration: none; display: block; margin: 4px 0; }
        .result-title:hover { text-decoration: underline; }
        .result-snippet { font-size: 14px; color: #bdc1c6; line-height: 1.5; margin: 0; }
        .result-meta { font-size: 12px; color: #03dac6; margin-top: 5px; }

        .sponsored-box { background: rgba(3, 218, 198, 0.05); border: 1px solid rgba(3, 218, 198, 0.2); padding: 15px; border-radius: 8px; margin-bottom: 30px; }
        .sponsored-label { font-size: 11px; font-weight: bold; color: #03dac6; text-transform: uppercase; margin-bottom: 5px; display: block; }
        
        .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; max-width: 1200px; padding: 20px 30px; }
        .media-card { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; overflow: hidden; transition: 0.2s; text-decoration: none; display: flex; flex-direction: column; }
        .media-card:hover { transform: translateY(-3px); border-color: #bb86fc; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
        .media-card img, .media-card video { width: 100%; height: 160px; object-fit: cover; background: #000; }
        .media-info { padding: 10px; font-size: 12px; color: #9e9e9e; word-break: break-all; }
        .media-info span { display: block; color: #e0e0e0; font-weight: bold; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .pagination { display: flex; gap: 10px; margin-top: 30px; padding-bottom: 30px; }
        .page-btn { padding: 8px 15px; background: #333; color: #fff; text-decoration: none; border-radius: 4px; }
        .page-btn:hover { background: #bb86fc; color: #000; }

        /* Responsive: Κρύβουμε το Sidebar σε μικρές οθόνες (κινητά) */
        @media (max-width: 1000px) {
            .page-layout { flex-direction: column; }
            .ai-sidebar { width: 100%; position: static; height: 500px; margin-top: 30px; }
        }
    </style>
</head>
<body>

    <div class="top-bar">
        <a href="/" class="logo">Wi<span>Search</span></a>
        <form action="/search" method="GET" style="display: flex;">
            <input type="text" name="q" value="{{ query }}" class="search-box" autocomplete="off">
            <input type="hidden" name="tab" value="{{ tab }}">
            <input type="hidden" name="category" value="{{ category }}">
            <button type="submit" class="btn-search">🔍</button>
        </form>
    </div>

    <div class="main-tabs">
        <a href="/search?q={{ query | urlencode }}&tab=web" class="tab-link {% if tab == 'web' %}active{% endif %}">🌐 Web</a>
        <a href="/search?q={{ query | urlencode }}&tab=images" class="tab-link {% if tab == 'images' %}active{% endif %}">🖼️ Εικόνες</a>
        <a href="/search?q={{ query | urlencode }}&tab=videos" class="tab-link {% if tab == 'videos' %}active{% endif %}">🎥 Βίντεο</a>
    </div>

    {% if tab == 'web' %}
    <div class="filters-bar">
        <a href="/search?q={{ query | urlencode }}&tab=web" class="filter-btn {% if not category %}active{% endif %}">Όλα τα Αποτελέσματα</a>
        {% set emojis = { 'Media & Streaming': '🎬', 'P2P & Torrents': '⬇️', 'Forums & Communities': '💬', 'Gaming': '🎮', 'Network Tools & Stats': '📊', 'Router & Admin': '⚙️', 'Storage & FTP': '📁', 'Communication & VoIP': '📞', 'IoT & Sensors': '🌡️', 'Web Services & Blogs': '🌐', 'Core Services': '⭐', 'Default Page': '📄', 'Other': '📌' } %}
        {% for cat in available_categories %}
            <a href="/search?q={{ query | urlencode }}&tab=web&category={{ cat | urlencode }}" class="filter-btn {% if category == cat %}active{% endif %}">
                {{ emojis.get(cat, '🔹') }} {{ cat }}
            </a>
        {% endfor %}
    </div>

    <div class="page-layout">
        <div class="results-column">
            {% if smart_query %}
            <div class="smart-query">AI Διευρυμένη Αναζήτηση. Βρέθηκαν αποτελέσματα και για: <span>{{ smart_query }}</span></div>
            {% endif %}

            {% if sponsored %}
            <div class="sponsored-box">
                <span class="sponsored-label">Διαφήμιση (Sponsored)</span>
                {% for ad in sponsored %}
                <div style="margin-bottom: 15px;">
                    <a href="/go?url={{ ad.url }}&id=0" class="result-title" style="color: #03dac6;">{{ ad.title }}</a>
                    <p class="result-snippet">{{ ad.description }}</p>
                    <a href="{{ ad.url }}" target="_blank" class="url-text" style="font-size: 12px; color: #9e9e9e;">{{ ad.url }}</a>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            {% if results %}
                {% for result in results %}
                <div class="result-item">
                    <div class="result-url">
                        <a href="{{ result.url }}" target="_blank" class="url-text" title="{{ result.url }}">{{ result.url }}</a>
                        <a href="/cached/{{ result.id }}" target="_blank" class="cached-btn" title="Δείτε το αντίγραφο αν το site είναι πεσμένο">Cached</a>
                    </div>
                    <a href="/go?url={{ result.url }}&id={{ result.id }}" class="result-title">{{ result.page_title }}</a>
                    <p class="result-snippet">{{ result.snippet }}...</p>
                    <div class="result-meta">
                        [ {{ result.category }} ] - {{ result.ai_summary }} 
                        <span style="color: #666; margin-left: 10px;">(Score: {{ "%.2f"|format(result.total_score) }})</span>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <p>Δεν βρέθηκαν αποτελέσματα στο Web για <b>{{ query }}</b> {% if category %}στην κατηγορία <b>{{ category }}</b>{% endif %}.</p>
            {% endif %}

            <div class="pagination">
                {% if page > 1 %}
                <a href="/search?q={{ query | urlencode }}&tab={{ tab }}&category={{ category | urlencode }}&page={{ page - 1 }}" class="page-btn">« Προηγούμενη</a>
                {% endif %}
                {% if has_next %}
                <a href="/search?q={{ query | urlencode }}&tab={{ tab }}&category={{ category | urlencode }}&page={{ page + 1 }}" class="page-btn">Επόμενη Σελίδα »</a>
                {% endif %}
            </div>
        </div>

        <div class="ai-sidebar">
            <div class="ai-header">✨ AI Assistant</div>
            <div class="ai-chat-window" id="aiChat">
                <div class="ai-msg" id="aiInitMsg">Διαβάζω τα αποτελέσματα... ⏳</div>
            </div>
            <div class="typing-indicator" id="aiTyping">Το AI πληκτρολογεί...</div>
            <div class="ai-input-area">
                <input type="text" id="aiInput" class="ai-input" placeholder="Ρώτα κάτι..." onkeypress="if(event.key === 'Enter') sendAIMsg()">
                <button onclick="sendAIMsg()" class="ai-btn">➤</button>
            </div>
        </div>
    </div>

    <script>
        const aiChat = document.getElementById('aiChat');
        const aiInput = document.getElementById('aiInput');
        const aiTyping = document.getElementById('aiTyping');
        
        // Μαζεύουμε τα Top 5 αποτελέσματα σε JSON για να τα δώσουμε στο AI
        const searchContext = [
            {% for r in results[:5] %}
            { title: {{ r.page_title | tojson }}, snippet: {{ r.snippet | tojson }} },
            {% endfor %}
        ];
        const currentQuery = {{ query | tojson }};
        
        async function fetchAI(message, isInitial = false) {
            aiTyping.style.display = 'block';
            try {
                const response = await fetch('/api/ai_chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ query: currentQuery, context: searchContext, message: message })
                });
                const data = await response.json();
                aiTyping.style.display = 'none';
                
                if(isInitial) { aiChat.innerHTML = ''; } // Σβήνει το "Διαβάζω..."
                
                const aiDiv = document.createElement('div');
                aiDiv.className = 'ai-msg';
                aiDiv.innerText = data.response || "Δεν μπόρεσα να απαντήσω.";
                aiChat.appendChild(aiDiv);
                aiChat.scrollTop = aiChat.scrollHeight;
                
            } catch(e) {
                aiTyping.style.display = 'none';
                if(isInitial) aiChat.innerHTML = '';
                const aiDiv = document.createElement('div');
                aiDiv.className = 'ai-msg';
                aiDiv.innerText = "Σφάλμα επικοινωνίας με τον server AI.";
                aiChat.appendChild(aiDiv);
            }
        }

        function sendAIMsg() {
            const text = aiInput.value.trim();
            if(!text) return;
            
            // Εμφανίζουμε το μήνυμα του χρήστη
            const uDiv = document.createElement('div');
            uDiv.className = 'user-msg';
            uDiv.innerText = text;
            aiChat.appendChild(uDiv);
            aiChat.scrollTop = aiChat.scrollHeight;
            
            aiInput.value = '';
            fetchAI(text); // Στέλνουμε το ερώτημα στο AI
        }
        
        // Μόλις φορτώσει η σελίδα, το AI κάνει αυτόματα μια περίληψη των αποτελεσμάτων
        window.addEventListener('DOMContentLoaded', () => {
            if (searchContext.length > 0) {
                fetchAI("Φτιάξε μου μια πολύ σύντομη περίληψη (2-3 προτάσεις) στα Ελληνικά και Αγγλικα (διαχωρισε το με τιτλο Ελληνικά,English) για το τι αφορούν αυτά τα αποτελέσματα.", true);
            } else {
                document.getElementById('aiInitMsg').innerText = "Δεν υπάρχουν αποτελέσματα για να αναλύσω.";
            }
        });
    </script>
    {% endif %}

    {% if tab == 'images' %}
    <div class="media-grid">
        {% if image_results %}
            {% for img in image_results %}
            <a href="{{ img.source_url }}" target="_blank" class="media-card">
                <img src="/proxy_media?url={{ img.media_url | urlencode }}" alt="{{ img.alt_text }}" loading="lazy" onerror="this.src='https://via.placeholder.com/300x150/1e1e1e/333333?text=SSL+Error'">
                <div class="media-info">
                    <span>{{ img.alt_text if img.alt_text else 'Χωρίς Τίτλο' }}</span>
                    {{ img.source_url }}
                </div>
            </a>
            {% endfor %}
        {% else %}
            <p style="padding-left: 30px;">Δεν βρέθηκαν εικόνες.</p>
        {% endif %}
    </div>
    {% endif %}

    {% if tab == 'videos' %}
    <div class="media-grid">
        {% if video_results %}
            {% for vid in video_results %}
            <a href="{{ vid.source_url }}" target="_blank" class="media-card">
                <video controls preload="metadata">
                    <source src="{{ vid.media_url }}" type="video/mp4">
                </video>
                <div class="media-info">
                    <span>Βίντεο</span>
                    {{ vid.source_url }}
                </div>
            </a>
            {% endfor %}
        {% else %}
            <p style="padding-left: 30px;">Δεν βρέθηκαν βίντεο.</p>
        {% endif %}
    </div>
    {% endif %}

</body>
</html>