{% extends "base.html" %}
{% set active_page = "dashboard" %}
{% block title %}Dashboard — ZP Remote{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div class="space-y-6">

    <!-- Предупреждение если нет данных от ZP -->
    {% if tasks|length == 0 %}
    <div class="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4
                flex items-center gap-3 text-yellow-400">
        <i class="fas fa-exclamation-triangle text-xl flex-shrink-0"></i>
        <div>
            <p class="font-medium">ZennoPoster не передаёт данные</p>
            <p class="text-sm text-yellow-500 mt-0.5">
                Запустите шаблон-контроллер в ZennoPoster.
                Проверьте путь <code class="bg-yellow-900/30 px-1 rounded">projectDir</code>
                в controller.cs
            </p>
            <a href="/api/debug" target="_blank"
               class="text-xs text-yellow-600 hover:text-yellow-400 underline mt-1 inline-block">
                Открыть диагностику →
            </a>
        </div>
    </div>
    {% endif %}

    <!-- Карточки статистики -->
    <div class="grid grid-cols-2 lg:grid-cols-5 gap-4">

        <div class="bg-slate-800 border border-slate-700 rounded-xl p-4">
            <p class="text-slate-400 text-xs uppercase tracking-wide mb-1">Running</p>
            <p class="text-3xl font-bold text-green-400" id="stat-active">
                {{ summary.active }}
            </p>
        </div>

        <div class="bg-slate-800 border border-slate-700 rounded-xl p-4">
            <p class="text-slate-400 text-xs uppercase tracking-wide mb-1">Paused</p>
            <p class="text-3xl font-bold text-yellow-400" id="stat-paused">
                {{ summary.paused }}
            </p>
        </div>

        <div class="bg-slate-800 border border-slate-700 rounded-xl p-4">
            <p class="text-slate-400 text-xs uppercase tracking-wide mb-1">Errors</p>
            <p class="text-3xl font-bold text-red-400" id="stat-errors">
                {{ summary.errors }}
            </p>
        </div>

        <div class="bg-slate-800 border border-slate-700 rounded-xl p-4">
            <p class="text-slate-400 text-xs uppercase tracking-wide mb-1">Threads</p>
            <p class="text-2xl font-bold text-blue-400" id="stat-threads">
                {{ summary.total_threads }}/{{ summary.max_threads }}
            </p>
            {% if summary.max_threads > 0 %}
            <div class="mt-2 w-full bg-slate-700 rounded-full h-1.5">
                <div class="bg-blue-500 h-1.5 rounded-full"
                     style="width: {{ summary.threads_pct }}%">
                </div>
            </div>
            {% endif %}
        </div>

        <div class="bg-slate-800 border border-slate-700 rounded-xl p-4">
            <p class="text-slate-400 text-xs uppercase tracking-wide mb-1">Queue</p>
            <p class="text-3xl font-bold text-purple-400" id="stat-queue">
                {{ summary.total_queue }}
            </p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <!-- Результаты -->
        <div class="bg-slate-800 border border-slate-700 rounded-xl p-5">
            <h3 class="font-semibold text-white mb-4">
                <i class="fas fa-chart-bar text-blue-400 mr-2"></i>Результаты
            </h3>
            {% set total_done = summary.total_good + summary.total_bad %}
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-sm text-slate-400">
                        <i class="fas fa-check-circle text-green-400 mr-2"></i>Успешно
                    </span>
                    <span class="text-2xl font-bold text-green-400">
                        {{ summary.total_good }}
                    </span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-slate-400">
                        <i class="fas fa-times-circle text-red-400 mr-2"></i>Ошибки
                    </span>
                    <span class="text-2xl font-bold text-red-400">
                        {{ summary.total_bad }}
                    </span>
                </div>
                {% if total_done > 0 %}
                <div class="pt-2 border-t border-slate-700">
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-slate-500">Success rate</span>
                        <span class="text-white font-medium">
                            {{ "%.1f"|format(summary.total_good / total_done * 100) }}%
                        </span>
                    </div>
                    <div class="w-full bg-slate-700 rounded-full h-2">
                        <div class="bg-green-500 h-2 rounded-full"
                             style="width: {{ (summary.total_good / total_done * 100)|int }}%">
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Список задач -->
        <div class="bg-slate-800 border border-slate-700 rounded-xl p-5">
            <h3 class="font-semibold text-white mb-4">
                <i class="fas fa-tasks text-blue-400 mr-2"></i>
                Задачи ({{ tasks|length }})
            </h3>
            <div class="space-y-2">
                {% for task in tasks %}
                <a href="/projects/{{ task.id }}"
                   class="flex items-center justify-between p-2.5 rounded-lg
                          bg-slate-900 hover:bg-slate-700 transition-colors group">
                    <div class="flex items-center gap-2 min-w-0">
                        <span class="w-2 h-2 rounded-full flex-shrink-0
                            {% if task.status == 'Running' %}bg-green-400 animate-pulse
                            {% elif task.status == 'Paused' %}bg-yellow-400
                            {% elif task.status == 'Error' %}bg-red-400 animate-pulse
                            {% else %}bg-slate-500{% endif %}">
                        </span>
                        <span class="text-sm text-slate-300 truncate
                                     group-hover:text-white transition-colors">
                            {{ task.task_name }}
                        </span>
                    </div>
                    <span class="text-xs px-2 py-0.5 rounded flex-shrink-0 ml-2
                        {% if task.status == 'Running' %}text-green-400 bg-green-400/10
                        {% elif task.status == 'Paused' %}text-yellow-400 bg-yellow-400/10
                        {% elif task.status == 'Error' %}text-red-400 bg-red-400/10
                        {% else %}text-slate-400 bg-slate-400/10{% endif %}">
                        {{ task.status }}
                    </span>
                </a>
                {% else %}
                <div class="text-center py-8 text-slate-500">
                    <i class="fas fa-robot text-3xl mb-2 block"></i>
                    <p>Нет данных от ZennoPoster</p>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Последние события -->
        <div class="bg-slate-800 border border-slate-700 rounded-xl p-5">
            <h3 class="font-semibold text-white mb-4">
                <i class="fas fa-bell text-blue-400 mr-2"></i>События
            </h3>
            <div class="space-y-2">
                {% for n in notifications %}
                <div class="p-3 rounded-lg bg-slate-900 border-l-4
                    {% if n.type == 'error' %}border-red-500
                    {% elif n.type == 'success' %}border-green-500
                    {% else %}border-blue-500{% endif %}">
                    <p class="text-sm text-white">{{ n.title }}</p>
                    {% if n.message %}
                    <p class="text-xs text-slate-500 mt-0.5">{{ n.message }}</p>
                    {% endif %}
                    <p class="text-xs text-slate-600 mt-1">{{ n.created_at }}</p>
                </div>
                {% else %}
                <div class="text-center py-8 text-slate-500">
                    <i class="fas fa-inbox text-3xl mb-2 block"></i>
                    <p>Нет событий</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Live Log -->
    <div class="bg-slate-800 border border-slate-700 rounded-xl p-5">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold text-white">
                <i class="fas fa-terminal text-blue-400 mr-2"></i>Live Log
            </h3>
            <div class="flex items-center gap-2">
                <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
                <span class="text-xs text-slate-500" id="ws-status">Connecting...</span>
            </div>
        </div>
        <div class="bg-slate-900 rounded-lg p-4 font-mono text-xs h-40 overflow-y-auto"
             id="live-log">
            <p class="text-slate-600">Ожидание логов от ZennoPoster...</p>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/dashboard.js"></script>
{% endblock %}