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

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

    <!-- Фильтры -->
    <div class="flex flex-wrap gap-2">
        <button onclick="filterCards('all')"
                class="filter-btn px-4 py-1.5 rounded-lg text-sm border
                       bg-blue-600/20 text-blue-400 border-blue-500/30"
                data-filter="all">
            Все ({{ tasks|length }})
        </button>
        <button onclick="filterCards('Running')"
                class="filter-btn px-4 py-1.5 rounded-lg text-sm border
                       bg-slate-800 text-slate-400 border-slate-700"
                data-filter="Running">
            🟢 Running
        </button>
        <button onclick="filterCards('Stopped')"
                class="filter-btn px-4 py-1.5 rounded-lg text-sm border
                       bg-slate-800 text-slate-400 border-slate-700"
                data-filter="Stopped">
            ⚫ Stopped
        </button>
        <button onclick="filterCards('Completed')"
                class="filter-btn px-4 py-1.5 rounded-lg text-sm border
                       bg-slate-800 text-slate-400 border-slate-700"
                data-filter="Completed">
            ✅ Completed
        </button>
        <button onclick="filterCards('New')"
                class="filter-btn px-4 py-1.5 rounded-lg text-sm border
                       bg-slate-800 text-slate-400 border-slate-700"
                data-filter="New">
            🔵 New
        </button>
        <button onclick="filterCards('Error')"
                class="filter-btn px-4 py-1.5 rounded-lg text-sm border
                       bg-slate-800 text-slate-400 border-slate-700"
                data-filter="Error">
            🔴 Error
        </button>
        <button onclick="location.reload()"
                class="ml-auto px-4 py-1.5 rounded-lg text-sm border
                       bg-slate-800 text-slate-400 border-slate-700 hover:text-white">
            <i class="fas fa-sync-alt mr-1"></i>Refresh
        </button>
    </div>

    <!-- Карточки задач -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4" id="tasks-grid">
        {% for task in tasks %}
        <div class="task-card bg-slate-800 border border-slate-700 rounded-xl p-5
                    hover:border-slate-600 transition-all"
             data-status="{{ task.status }}">

            <!-- Заголовок -->
            <div class="flex items-start justify-between mb-4">
                <div class="flex items-center gap-3 min-w-0">
                    {% if task.status == 'Running' %}
                    <span class="w-3 h-3 rounded-full bg-green-400 animate-pulse flex-shrink-0"></span>
                    {% elif task.status == 'Completed' %}
                    <span class="w-3 h-3 rounded-full bg-blue-400 flex-shrink-0"></span>
                    {% elif task.status == 'Error' %}
                    <span class="w-3 h-3 rounded-full bg-red-400 animate-pulse flex-shrink-0"></span>
                    {% elif task.status == 'New' %}
                    <span class="w-3 h-3 rounded-full bg-cyan-400 flex-shrink-0"></span>
                    {% else %}
                    <span class="w-3 h-3 rounded-full bg-slate-500 flex-shrink-0"></span>
                    {% endif %}
                    <div class="min-w-0">
                        <h3 class="text-white font-semibold truncate">{{ task.task_name }}</h3>
                        <p class="text-xs text-slate-500 mt-0.5 truncate"
                           title="{{ task.project_file }}">
                            {{ task.project_file or 'No file path' }}
                        </p>
                    </div>
                </div>
                <span class="text-xs px-2.5 py-1 rounded-full border flex-shrink-0 ml-2
                    {% if task.status == 'Running' %}
                        text-green-400 bg-green-400/10 border-green-400/30
                    {% elif task.status == 'Completed' %}
                        text-blue-400 bg-blue-400/10 border-blue-400/30
                    {% elif task.status == 'Error' %}
                        text-red-400 bg-red-400/10 border-red-400/30
                    {% elif task.status == 'New' %}
                        text-cyan-400 bg-cyan-400/10 border-cyan-400/30
                    {% else %}
                        text-slate-400 bg-slate-400/10 border-slate-400/30
                    {% endif %}">
                    {{ task.status }}
                </span>
            </div>

            <!-- Статистика -->
            <div class="grid grid-cols-3 gap-2 mb-4">
                <div class="bg-slate-900 rounded-lg p-2.5 text-center">
                    <p class="text-xs text-slate-500">Threads</p>
                    <p class="text-base font-bold text-blue-400">
                        {{ task.threads }}/{{ task.max_threads }}
                    </p>
                </div>
                <div class="bg-slate-900 rounded-lg p-2.5 text-center">
                    <p class="text-xs text-slate-500">Queue</p>
                    <p class="text-base font-bold text-purple-400">{{ task.remaining }}</p>
                </div>
                <div class="bg-slate-900 rounded-lg p-2.5 text-center">
                    <p class="text-xs text-slate-500">Good / Bad</p>
                    <p class="text-sm font-bold">
                        <span class="text-green-400">{{ task.good_end }}</span>
                        <span class="text-slate-600"> / </span>
                        <span class="text-red-400">{{ task.bad_end }}</span>
                    </p>
                </div>
            </div>

            <!-- Прогресс -->
            {% set done = task.good_end + task.bad_end %}
            {% set total_work = done + task.remaining %}
            {% if total_work > 0 %}
            <div class="mb-4">
                <div class="flex justify-between text-xs text-slate-500 mb-1">
                    <span>Progress</span>
                    <span>{{ (done * 100 / total_work)|int }}%</span>
                </div>
                <div class="w-full bg-slate-700 rounded-full h-1.5">
                    <div class="bg-blue-500 h-1.5 rounded-full"
                         style="width: {{ (done * 100 / total_work)|int }}%"></div>
                </div>
            </div>
            {% endif %}

            <!-- Кнопки -->
            <div class="flex gap-2 pt-3 border-t border-slate-700">
                {% if task.status == 'Running' %}
                    <button onclick="taskAction('pause','{{ task.id }}','{{ task.task_name }}')"
                            class="flex-1 py-1.5 rounded-lg text-xs font-medium
                                   bg-yellow-500/10 text-yellow-400 border border-yellow-500/30
                                   hover:bg-yellow-500/20">
                        <i class="fas fa-pause mr-1"></i>Pause
                    </button>
                    <button onclick="taskAction('stop','{{ task.id }}','{{ task.task_name }}')"
                            class="flex-1 py-1.5 rounded-lg text-xs font-medium
                                   bg-red-500/10 text-red-400 border border-red-500/30
                                   hover:bg-red-500/20">
                        <i class="fas fa-stop mr-1"></i>Stop
                    </button>
                    <button onclick="showStartModal('{{ task.id }}','{{ task.task_name }}')"
                            class="flex-1 py-1.5 rounded-lg text-xs font-medium
                                   bg-blue-500/10 text-blue-400 border border-blue-500/30
                                   hover:bg-blue-500/20">
                        <i class="fas fa-redo mr-1"></i>Restart
                    </button>
                {% else %}
                    <button onclick="showStartModal('{{ task.id }}','{{ task.task_name }}')"
                            class="flex-1 py-1.5 rounded-lg text-xs font-medium
                                   bg-green-500/10 text-green-400 border border-green-500/30
                                   hover:bg-green-500/20">
                        <i class="fas fa-play mr-1"></i>Start
                    </button>
                {% endif %}

                <a href="/projects/{{ task.id }}"
                   class="px-3 py-1.5 rounded-lg text-xs font-medium
                          bg-slate-700 text-slate-400 hover:text-white
                          border border-slate-600">
                    <i class="fas fa-expand-alt"></i>
                </a>
            </div>
        </div>
        {% else %}
        <div class="col-span-2 text-center py-16 text-slate-500">
            <i class="fas fa-robot text-4xl mb-3 block"></i>
            <p class="text-lg">Нет задач</p>
            <p class="text-sm mt-1">Запустите шаблон-контроллер в ZennoPoster</p>
        </div>
        {% endfor %}
    </div>
</div>

<!-- ===== МОДАЛЬНОЕ ОКНО ЗАПУСКА ===== -->
<div id="start-modal"
     class="fixed inset-0 bg-black/60 z-50 hidden items-center justify-center">
    <div class="bg-slate-800 border border-slate-700 rounded-xl p-6 w-80 shadow-2xl">

        <h3 class="text-white font-semibold mb-1">
            <i class="fas fa-play text-green-400 mr-2"></i>Запустить задачу
        </h3>
        <p class="text-green-400 text-sm font-medium mb-4 truncate"
           id="modal-task-name">—</p>

        <div class="mb-5">
            <label class="block text-xs text-slate-400 mb-2">
                Сколько раз выполнить:
            </label>
            <input type="number" id="modal-tries" value="1" min="1"
                   class="w-full bg-slate-900 border border-slate-600 rounded-lg
                          px-4 py-3 text-white text-center text-2xl font-bold
                          focus:border-blue-500 focus:outline-none">

            <!-- Быстрые кнопки -->
            <div class="flex gap-1.5 mt-2">
                <button onclick="setTries(1)"
                        class="flex-1 py-1.5 text-xs rounded-lg bg-slate-700
                               text-slate-400 hover:bg-slate-600 hover:text-white
                               transition-colors">1</button>
                <button onclick="setTries(10)"
                        class="flex-1 py-1.5 text-xs rounded-lg bg-slate-700
                               text-slate-400 hover:bg-slate-600 hover:text-white
                               transition-colors">10</button>
                <button onclick="setTries(100)"
                        class="flex-1 py-1.5 text-xs rounded-lg bg-slate-700
                               text-slate-400 hover:bg-slate-600 hover:text-white
                               transition-colors">100</button>
                <button onclick="setTries(1000)"
                        class="flex-1 py-1.5 text-xs rounded-lg bg-slate-700
                               text-slate-400 hover:bg-slate-600 hover:text-white
                               transition-colors">1000</button>
                <button onclick="setTries(-1)"
                        class="flex-1 py-1.5 text-xs rounded-lg bg-slate-700
                               text-slate-400 hover:bg-slate-600 hover:text-white
                               transition-colors font-bold">∞</button>
            </div>
            <p class="text-xs text-slate-600 mt-2">
                ∞ (-1) — бесконечно, пока не остановите вручную
            </p>
        </div>

        <!-- Кнопки -->
        <div class="flex gap-3">
            <button onclick="closeStartModal()"
                    class="flex-1 py-2.5 rounded-lg text-sm font-medium
                           bg-slate-700 text-slate-400 hover:bg-slate-600
                           hover:text-white transition-colors">
                <i class="fas fa-times mr-1"></i>Отмена
            </button>
            <button onclick="confirmStart()"
                    class="flex-1 py-2.5 rounded-lg text-sm font-medium
                           bg-green-600 hover:bg-green-700 text-white
                           transition-colors shadow-lg shadow-green-600/20">
                <i class="fas fa-play mr-1"></i>Запустить
            </button>
        </div>
    </div>
</div>
{% endblock %}

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