WiSearch/ui/templates/admin_dashboard.html

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - WiSearch</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { background-color: #121212; color: #e0e0e0; font-family: 'Segoe UI', Tahoma, sans-serif; margin: 0; padding: 20px; }
        .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #333; padding-bottom: 15px; margin-bottom: 20px; }
        .title { color: #bb86fc; margin: 0; }
        .nav-links a { color: #03dac6; text-decoration: none; margin-left: 15px; font-weight: bold; }
        .tab-buttons { display: flex; gap: 10px; margin-bottom: 15px; }
        .tab-btn { background: #1e1e1e; color: #e0e0e0; border: 1px solid #333; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-weight: bold; }
        .tab-btn.active { background: #bb86fc; color: #121212; }
        .tab-content { display: none; background: #1e1e1e; padding: 20px; border-radius: 8px; border: 1px solid #333; }
        .tab-content.active { display: block; }
        h3 { color: #bb86fc; border-bottom: 1px solid #333; padding-bottom: 10px; margin-top:0; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; }
        th, td { padding: 10px; text-align: left; border-bottom: 1px solid #333; }
        th { background-color: #2d2d2d; color: #03dac6; }
        input, select, textarea { width: 100%; max-width: 500px; padding: 10px; background: #121212; border: 1px solid #333; color: #e0e0e0; border-radius: 4px; margin-bottom: 15px; }
        .btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; color: #000; background: #03dac6; }
        .btn-danger { background: #cf6679; color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; }
        .chart-container { display: flex; gap: 20px; justify-content: space-around; flex-wrap: wrap; margin-top:20px; }
        .chart-box { background: #2d2d2d; padding: 15px; border-radius: 8px; flex: 1; min-width: 300px; }
    </style>
</head>
<body>
    <div class="header">
        <h1 class="title">WiSearch <span>Panel</span></h1>
        <div class="nav-links">
            <a href="/">🏠 Αναζήτηση</a>
            {% if session.get('user_role') == 'admin' %}
            <a href="/admin/logs">📜 Logs</a>
            <a href="/admin/users">👥 Χρήστες</a>
            {% endif %}
            <a href="/logout" style="color: #cf6679;">🚪 Έξοδος</a>
        </div>
    </div>

    <div class="tab-buttons">
        <button class="tab-btn active" onclick="openTab('tab-sponsored', this)">📢 Sponsored Links</button>
        {% if session.get('user_role') == 'admin' %}
        <button class="tab-btn" onclick="openTab('tab-analytics', this)">📊 Γραφήματα</button>
        <button class="tab-btn" onclick="openTab('tab-ai', this)">🤖 Cloudflare AI</button>
        <button class="tab-btn" onclick="openTab('tab-blacklist', this)">🚫 Blacklist</button>
        {% endif %}
    </div>

    <div id="tab-sponsored" class="tab-content active">
        <h3>Οι Διαφημίσεις σας</h3>
        <table>
            <tr><th>Τίτλος</th><th>URL</th><th>Ενέργειες</th></tr>
            {% for link in sponsored %}
            <tr>
                <td><b>{{ link.title }}</b></td>
                <td><a href="{{ link.url }}" style="color: #8ab4f8;">{{ link.url }}</a></td>
                <td><a href="/admin/sponsored/delete/{{ link.id }}" class="btn-danger">Διαγραφή</a></td>
            </tr>
            {% endfor %}
        </table>
        <form action="/admin/sponsored/add" method="POST">
            <input type="text" name="title" required placeholder="Τίτλος"><br>
            <input type="text" name="url" required placeholder="URL Προορισμού"><br>
            <textarea name="description" rows="2" required placeholder="Περιγραφή"></textarea><br>
            <input type="text" name="keywords" required placeholder="Λέξεις κλειδιά"><br>
            <button type="submit" class="btn">Προσθήκη</button>
        </form>
    </div>

    {% if session.get('user_role') == 'admin' %}
    <div id="tab-analytics" class="tab-content">
        <h3>Στατιστικά Συστήματος</h3>
        <div class="chart-container">
            <div class="chart-box">
                <h4 style="text-align:center; color:#e0e0e0;">Top 10 Αναζητήσεις</h4>
                <canvas id="searchChart"></canvas>
            </div>
            <div class="chart-box">
                <h4 style="text-align:center; color:#e0e0e0;">Κατανομή Κατηγοριών (AI)</h4>
                <canvas id="catChart"></canvas>
            </div>
        </div>
    </div>

    <div id="tab-ai" class="tab-content">
        <h3>Cloudflare AI Accounts</h3>
        <table>
            <tr><th>Email/Tag</th><th>Account ID</th><th>Ενέργειες</th></tr>
            {% for cred in cf_creds %}
            <tr>
                <td>{{ cred.comment }}</td><td>{{ cred.account_id[:10] }}...</td>
                <td><a href="/admin/cf/delete/{{ loop.index0 }}" class="btn-danger">Διαγραφή</a></td>
            </tr>
            {% endfor %}
        </table>
        <form action="/admin/cf/add" method="POST">
            <input type="text" name="comment" placeholder="Tag (π.χ. email)"><br>
            <input type="text" name="account_id" required placeholder="Account ID"><br>
            <input type="password" name="api_token" required placeholder="API Token"><br>
            <select name="model">
                <option value="@cf/meta/llama-3-8b-instruct">LLaMA-3 8B</option>
                <option value="@cf/meta/llama-2-7b-chat-int8">LLaMA-2 7B</option>
                <option value="@cf/mistral/mistral-7b-instruct-v0.1">Mistral 7B</option>
            </select><br>
            <button type="submit" class="btn" style="background:#bb86fc;">Προσθήκη Account</button>
        </form>
        <hr style="border-color:#333; margin:20px 0;">
        <form action="/admin/cf/prompt" method="POST">
            <label>AI System Prompt</label>
            <textarea name="ai_prompt" rows="6">{{ ai_prompt }}</textarea><br>
            <button type="submit" class="btn" style="background:#bb86fc;">Αποθήκευση Prompt</button>
        </form>
    </div>

    <div id="tab-blacklist" class="tab-content">
        <h3>Αποκλεισμένα Domains (Blacklist)</h3>
        <p style="font-size:13px; color:#9e9e9e;">Τα domains αυτά δεν θα εμφανίζονται ποτέ στην αναζήτηση.</p>
        <table>
            <tr><th>Domain</th><th>Ενέργειες</th></tr>
            {% for b in analytics.blacklists %}
            <tr>
                <td style="color:#cf6679; font-family:monospace;">{{ b.domain }}</td>
                <td><a href="/admin/blacklist/delete/{{ b.id }}" class="btn-danger">Αφαίρεση</a></td>
            </tr>
            {% endfor %}
        </table>
        <form action="/admin/blacklist/add" method="POST">
            <input type="text" name="domain" required placeholder="π.χ. spam.awmn">
            <button type="submit" class="btn" style="background:#cf6679; color:#fff;">Προσθήκη στη Blacklist</button>
        </form>
    </div>

    <script>
        function openTab(tabId, btn) {
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            document.getElementById(tabId).classList.add('active');
            btn.classList.add('active');
        }

        // Γραφήματα
        const queries = {{ analytics.top_queries | tojson | safe }};
        const categories = {{ analytics.categories | tojson | safe }};

        if (queries.length > 0) {
            new Chart(document.getElementById('searchChart'), {
                type: 'bar',
                data: {
                    labels: queries.map(q => q.search_query),
                    datasets: [{ label: 'Αναζητήσεις', data: queries.map(q => q.count), backgroundColor: '#03dac6' }]
                },
                options: { scales: { y: { beginAtZero: true, ticks: {color: '#9e9e9e'} }, x: { ticks: {color: '#9e9e9e'} } }, plugins: { legend: { labels: {color: '#e0e0e0'} } } }
            });
        }

        if (categories.length > 0) {
            new Chart(document.getElementById('catChart'), {
                type: 'doughnut',
                data: {
                    labels: categories.map(c => c.category),
                    datasets: [{ data: categories.map(c => c.count), backgroundColor: ['#bb86fc', '#03dac6', '#cf6679', '#ffb86c', '#f1fa8c', '#8be9fd'] }]
                },
                options: { plugins: { legend: { position: 'right', labels: {color: '#e0e0e0'} } } }
            });
        }
    </script>
    {% endif %}
</body>
</html>