{% extends "base.html" %}
{% set active_page = "projects" %}
{% block title %}{{ task.task_name }} — ZP Remote{% endblock %}
{% block page_title %}
    <a href="/projects" class="text-slate-400 hover:text-white mr-3 transition-colors">
        <i class="fas fa-arrow-left"></i>
    </a>
    {{ task.task_name }}
    <span class="ml-3 text-xs px-2 py-0.5 rounded font-normal
        {% if task.status == 'Running' %}text-green-400 bg-green-400/10
        {% elif task.status == 'Completed' %}text-blue-400 bg-blue-400/10
        {% elif task.status == 'Error' %}text-red-400 bg-red-400/10
        {% elif task.status == 'New' %}text-cyan-400 bg-cyan-400/10
        {% else %}text-slate-400 bg-slate-400/10{% endif %}">
        {% if task.status == 'Running' %}<span class="inline-block w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse mr-1"></span>{% endif %}
        {{ task.status }}
    </span>
{% endblock %}

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

    <!-- ===== CONTROLS ===== -->
    <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-gamepad text-blue-400 mr-2"></i>Controls
        </h3>
        <div class="flex flex-wrap gap-3">

            {% if task.status == 'Running' %}
                <!-- Запущена: показываем Pause, Stop, Restart -->
                <button onclick="taskAction('pause','{{ task.id }}','{{ task.task_name }}')"
                        class="px-5 py-2 rounded-lg text-sm font-medium transition-colors
                               bg-yellow-500/10 text-yellow-400 border border-yellow-500/30
                               hover:bg-yellow-500/20">
                    <i class="fas fa-pause mr-2"></i>Pause
                </button>
                <button onclick="taskAction('stop','{{ task.id }}','{{ task.task_name }}')"
                        class="px-5 py-2 rounded-lg text-sm font-medium transition-colors
                               bg-red-500/10 text-red-400 border border-red-500/30
                               hover:bg-red-500/20">
                    <i class="fas fa-stop mr-2"></i>Stop
                </button>
                <button onclick="showStartModal('{{ task.id }}','{{ task.task_name }}')"
                        class="px-5 py-2 rounded-lg text-sm font-medium transition-colors
                               bg-blue-500/10 text-blue-400 border border-blue-500/30
                               hover:bg-blue-500/20">
                    <i class="fas fa-redo mr-2"></i>Restart
                </button>
            {% else %}
                <!-- Остановлена: показываем Start -->
                <button onclick="showStartModal('{{ task.id }}','{{ task.task_name }}')"
                        class="px-5 py-2 rounded-lg text-sm font-medium transition-colors
                               bg-green-500/10 text-green-400 border border-green-500/30
                               hover:bg-green-500/20">
                    <i class="fas fa-play mr-2"></i>Start
                </button>
                <button onclick="taskAction('stop','{{ task.id }}','{{ task.task_name }}')"
                        class="px-5 py-2 rounded-lg text-sm font-medium transition-colors
                               bg-red-500/10 text-red-400 border border-red-500/30
                               hover:bg-red-500/20">
                    <i class="fas fa-stop mr-2"></i>Stop
                </button>
            {% endif %}

        </div>
    </div>

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

        <!-- ===== THREADS ===== -->
        <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-microchip text-blue-400 mr-2"></i>Threads
            </h3>
            <div class="text-center mb-4">
                <p class="text-5xl font-bold text-blue-400">{{ task.threads }}</p>
                <p class="text-slate-500 text-sm mt-1">/ {{ task.max_threads }} max</p>
            </div>
            {% if task.max_threads > 0 %}
            <div class="w-full bg-slate-700 rounded-full h-2 mb-4">
                <div class="bg-blue-500 h-2 rounded-full transition-all"
                     style="width: {{ (task.threads * 100 / task.max_threads)|int }}%"></div>
            </div>
            {% endif %}
            <div class="flex items-center gap-2">
                <label class="text-sm text-slate-400 shrink-0">Max threads:</label>
                <input type="number" id="max-threads-val"
                       value="{{ task.max_threads }}" min="0"
                       class="w-20 bg-slate-900 border border-slate-600 rounded-lg
                              px-3 py-1.5 text-white text-center text-sm
                              focus:border-blue-500 focus:outline-none">
                <button onclick="updateSettings()"
                        class="px-4 py-1.5 bg-blue-600 hover:bg-blue-700
                               text-white rounded-lg text-sm transition-colors">
                    Apply
                </button>
            </div>
        </div>

        <!-- ===== QUEUE / RESULTS ===== -->
        <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-layer-group text-purple-400 mr-2"></i>Results & Queue
            </h3>
            <div class="grid grid-cols-3 gap-3 mb-4">
                <div class="bg-slate-900 rounded-lg p-3 text-center">
                    <p class="text-2xl font-bold text-purple-400">{{ task.remaining }}</p>
                    <p class="text-xs text-slate-500 mt-0.5">Queue</p>
                </div>
                <div class="bg-slate-900 rounded-lg p-3 text-center">
                    <p class="text-2xl font-bold text-green-400">{{ task.good_end }}</p>
                    <p class="text-xs text-slate-500 mt-0.5">Good</p>
                </div>
                <div class="bg-slate-900 rounded-lg p-3 text-center">
                    <p class="text-2xl font-bold text-red-400">{{ task.bad_end }}</p>
                    <p class="text-xs text-slate-500 mt-0.5">Bad</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-2">
                    <div class="bg-green-500 h-2 rounded-full"
                         style="width: {{ (done * 100 / total_work)|int }}%"></div>
                </div>
            </div>
            {% endif %}

            <div class="flex items-center gap-2">
                <label class="text-sm text-slate-400 shrink-0">Add tries:</label>
                <input type="number" id="add-tries-val" value="100" min="1"
                       class="w-24 bg-slate-900 border border-slate-600 rounded-lg
                              px-3 py-1.5 text-white text-center text-sm
                              focus:border-blue-500 focus:outline-none">
                <button onclick="addTries()"
                        class="px-4 py-1.5 bg-purple-600 hover:bg-purple-700
                               text-white rounded-lg text-sm transition-colors">
                    Add
                </button>
            </div>
        </div>
    </div>

    <!-- ===== INFO ===== -->
    <div class="bg-slate-800 border border-slate-700 rounded-xl p-5">
        <h3 class="font-semibold text-white mb-3">
            <i class="fas fa-info-circle text-slate-400 mr-2"></i>Info
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8">
            <div class="flex justify-between py-2 border-b border-slate-700">
                <span class="text-sm text-slate-500">Task ID</span>
                <span class="text-xs text-slate-300 font-mono">{{ task.id }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-slate-700">
                <span class="text-sm text-slate-500">Status (raw ZP)</span>
                <span class="text-sm text-slate-300">{{ task.raw_status }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-slate-700">
                <span class="text-sm text-slate-500">Created</span>
                <span class="text-sm text-slate-300">{{ task.start_time or '—' }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-slate-700">
                <span class="text-sm text-slate-500">Last updated</span>
                <span class="text-sm text-slate-300">{{ task.updated_at }}</span>
            </div>
            <div class="flex justify-between py-2 col-span-1 md:col-span-2">
                <span class="text-sm text-slate-500">Project file</span>
                <span class="text-xs text-slate-300 font-mono text-right max-w-xs truncate"
                      title="{{ task.project_file }}">
                    {{ task.project_file or '—' }}
                </span>
            </div>
        </div>
    </div>

    <!-- ===== UPLOAD DATA ===== -->
    <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-file-upload text-green-400 mr-2"></i>Upload Data Files
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

            <div class="bg-slate-900 rounded-lg p-4">
                <div class="flex items-center gap-2 mb-2">
                    <i class="fas fa-shield-alt text-blue-400"></i>
                    <span class="text-sm text-slate-300">Proxy List</span>
                </div>
                <textarea id="var-proxy_list" rows="4"
                          placeholder="ip:port:user:pass&#10;ip:port&#10;..."
                          class="w-full bg-slate-800 border border-slate-700 rounded-lg p-2
                                 text-xs text-slate-300 font-mono resize-none
                                 focus:border-blue-500 focus:outline-none"></textarea>
                <button onclick="uploadVar('proxy_list')"
                        class="mt-2 w-full py-1.5 rounded-lg text-xs transition-colors
                               bg-blue-500/10 text-blue-400 border border-blue-500/30
                               hover:bg-blue-500/20">
                    <i class="fas fa-upload mr-1"></i>Upload Proxies
                </button>
            </div>

            <div class="bg-slate-900 rounded-lg p-4">
                <div class="flex items-center gap-2 mb-2">
                    <i class="fas fa-users text-green-400"></i>
                    <span class="text-sm text-slate-300">Accounts</span>
                </div>
                <textarea id="var-accounts" rows="4"
                          placeholder="login:password&#10;login:password&#10;..."
                          class="w-full bg-slate-800 border border-slate-700 rounded-lg p-2
                                 text-xs text-slate-300 font-mono resize-none
                                 focus:border-blue-500 focus:outline-none"></textarea>
                <button onclick="uploadVar('accounts')"
                        class="mt-2 w-full py-1.5 rounded-lg text-xs transition-colors
                               bg-green-500/10 text-green-400 border border-green-500/30
                               hover:bg-green-500/20">
                    <i class="fas fa-upload mr-1"></i>Upload Accounts
                </button>
            </div>

            <div class="bg-slate-900 rounded-lg p-4">
                <div class="flex items-center gap-2 mb-2">
                    <i class="fas fa-desktop text-purple-400"></i>
                    <span class="text-sm text-slate-300">User Agents</span>
                </div>
                <textarea id="var-user_agents" rows="4"
                          placeholder="Mozilla/5.0 (Windows...)&#10;..."
                          class="w-full bg-slate-800 border border-slate-700 rounded-lg p-2
                                 text-xs text-slate-300 font-mono resize-none
                                 focus:border-blue-500 focus:outline-none"></textarea>
                <button onclick="uploadVar('user_agents')"
                        class="mt-2 w-full py-1.5 rounded-lg text-xs transition-colors
                               bg-purple-500/10 text-purple-400 border border-purple-500/30
                               hover:bg-purple-500/20">
                    <i class="fas fa-upload mr-1"></i>Upload UA
                </button>
            </div>

        </div>
    </div>

    <!-- ===== LOGS ===== -->
    <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>
                Logs — {{ task.task_name }}
            </h3>
            <div class="flex items-center gap-3">
                <button onclick="clearLogs()"
                        class="text-xs text-slate-500 hover:text-red-400 transition-colors">
                    <i class="fas fa-trash mr-1"></i>Clear
                </button>
                <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">Live</span>
                </div>
            </div>
        </div>
        <div class="bg-slate-900 rounded-lg p-4 font-mono text-xs
                    max-h-80 overflow-y-auto" id="project-logs">
            {% for log in logs %}
            <div class="py-0.5 hover:bg-slate-800/50">
                <span class="text-slate-600">{{ log.created_at }}</span>
                <span class="font-medium
                    {% if log.level == 'ERROR' %}text-red-400
                    {% elif log.level == 'WARN' %}text-yellow-400
                    {% else %}text-green-400{% endif %}">
                    [{{ log.level }}]
                </span>
                {% if log.thread_id %}
                <span class="text-slate-500">{{ log.thread_id }}</span>
                {% endif %}
                <span class="text-slate-300">{{ log.message }}</span>
            </div>
            {% else %}
            <p class="text-slate-600">Нет логов для "{{ task.task_name }}"</p>
            {% endfor %}
        </div>
    </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>
const TASK_NAME = "{{ task.task_name }}";
const TASK_ID   = "{{ task.id }}";

// ─── Settings ─────────────────────────────────────────────
async function updateSettings() {
    const mt = parseInt(document.getElementById('max-threads-val').value);
    if (isNaN(mt) || mt < 0) {
        showToast('warning', 'Введите число >= 0');
        return;
    }
    try {
        const r = await fetch('/api/tasks/settings', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({task_name: TASK_NAME, max_threads: mt})
        });
        const d = await r.json();
        showToast(d.success ? 'success' : 'error', d.message);
        if (d.success) setTimeout(() => location.reload(), 1500);
    } catch(e) {
        showToast('error', 'Ошибка: ' + e.message);
    }
}

async function addTries() {
    const at = parseInt(document.getElementById('add-tries-val').value);
    if (isNaN(at) || at < 1) {
        showToast('warning', 'Введите число > 0');
        return;
    }
    try {
        const r = await fetch('/api/tasks/settings', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({task_name: TASK_NAME, add_tries: at})
        });
        const d = await r.json();
        showToast(d.success ? 'success' : 'error', d.message);
        if (d.success) setTimeout(() => location.reload(), 1500);
    } catch(e) {
        showToast('error', 'Ошибка: ' + e.message);
    }
}

// ─── Upload ───────────────────────────────────────────────
async function uploadVar(varName) {
    const el = document.getElementById('var-' + varName);
    const content = el ? el.value.trim() : '';
    if (!content) {
        showToast('warning', 'Введите данные для загрузки');
        return;
    }
    try {
        const r = await fetch('/api/tasks/variables', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                task_name: TASK_NAME,
                variable_name: varName,
                content: content
            })
        });
        const d = await r.json();
        showToast(d.success ? 'success' : 'error', d.message);
        if (d.success) el.value = '';
    } catch(e) {
        showToast('error', 'Ошибка: ' + e.message);
    }
}

// ─── Clear logs ───────────────────────────────────────────
function clearLogs() {
    const el = document.getElementById('project-logs');
    if (el) {
        el.innerHTML = '<p class="text-slate-600">Логи очищены...</p>';
    }
}

// ─── Start Modal ──────────────────────────────────────────
let _startTaskId   = '';
let _startTaskName = '';

function showStartModal(taskId, taskName) {
    _startTaskId   = taskId;
    _startTaskName = taskName;
    document.getElementById('modal-task-name').textContent = taskName;
    document.getElementById('modal-tries').value = 1;
    const modal = document.getElementById('start-modal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    setTimeout(() => document.getElementById('modal-tries').select(), 100);
}

function closeStartModal() {
    const modal = document.getElementById('start-modal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

function setTries(n) {
    document.getElementById('modal-tries').value = n;
}

async function confirmStart() {
    const triesVal = parseInt(document.getElementById('modal-tries').value);

    if (isNaN(triesVal) || (triesVal < 1 && triesVal !== -1)) {
        showToast('warning', 'Введите количество попыток (минимум 1, или -1 для ∞)');
        return;
    }

    closeStartModal();
    showToast('info', `Запускаем "${_startTaskName}"...`);

    try {
        // Шаг 1: AddTries
        if (triesVal !== -1) {
            const triesResp = await fetch('/api/tasks/settings', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    task_name: _startTaskName,
                    add_tries: triesVal
                })
            });
            const triesData = await triesResp.json();
            if (!triesData.success) {
                showToast('error', 'Ошибка AddTries: ' + triesData.message);
                return;
            }
        }

        // Шаг 2: Start
        const startResp = await fetch('/api/tasks/start', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                task_id:   _startTaskId,
                task_name: _startTaskName
            })
        });
        const startData = await startResp.json();

        if (startData.success) {
            const label = triesVal === -1 ? '∞' : triesVal;
            showToast('success', `✅ "${_startTaskName}" запущена (${label} итераций)`);
            setTimeout(() => location.reload(), 2000);
        } else {
            showToast('error', startData.message);
        }
    } catch(e) {
        showToast('error', 'Ошибка: ' + e.message);
    }
}

// Закрытие по клику на фон
document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById('start-modal');
    if (modal) {
        modal.addEventListener('click', e => {
            if (e.target === modal) closeStartModal();
        });
    }
});

// Закрытие по Escape
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') closeStartModal();
});
</script>
{% endblock %}