/**
===============================================================================
FILE: modules/web_api/static/js/tasks.js
PROJECT: SCUD Orion AI (Unified Architecture)
MODULE: web_api / static / js
ROLE: Загрузка, фильтрация и рендеринг списка задач в боковой панели (Drawer).
===============================================================================
*/

let currentTaskFilter = 'IN_PROGRESS';

async function loadTasks() {
    const token = typeof API_TOKEN !== 'undefined' && API_TOKEN ? API_TOKEN : localStorage.getItem("scud_api_auth_token");
    if (!token) return;

    try {
        const res = await fetch("/api/v1/tasks", {
            headers: { "Authorization": "Bearer " + token }
        });
        if (res.ok) {
            const data = await res.json();
            renderSidebarTasks(data.tasks || []);
        } else {
            renderSidebarError("Ошибка доступа. Авторизуйтесь снова.");
        }
    } catch (e) {
        console.error("Ошибка загрузки задач:", e);
        renderSidebarError("Ошибка сети. Сервер недоступен.");
    }
}

function renderSidebarError(msg) {
    // Поддерживаем оба варианта ID (новый и старый) для обратной совместимости
    const container = document.getElementById("tasks-list") || document.getElementById("tasks-list-container");
    if (container) {
        container.innerHTML = `<div class="text-center py-8 text-xs text-rose-500 font-semibold">${msg}</div>`;
    }
}

function filterTasksByTab(status) {
    currentTaskFilter = status;
    
    // Сброс стилей всех кнопок-вкладок
    document.querySelectorAll('.task-tab-btn').forEach(btn => {
        btn.classList.remove('text-indigo-600', 'bg-indigo-50');
        btn.classList.add('text-slate-600');
    });
    
    // Установка активного стиля для выбранной вкладки
    const activeBtnId = {
        'IN_PROGRESS': 'tab-in-progress',
        'BACKLOG': 'tab-backlog',
        'COMPLETED': 'tab-completed',
        'ALL': 'tab-all'
    }[status];
    
    if (activeBtnId) {
        const btn = document.getElementById(activeBtnId);
        if (btn) {
            btn.classList.remove('text-slate-600', 'hover:bg-slate-100');
            btn.classList.add('text-indigo-600', 'bg-indigo-50');
        }
    }
    
    loadTasks();
}

function renderSidebarTasks(tasks) {
    const container = document.getElementById("tasks-list") || document.getElementById("tasks-list-container");
    if (!container) return;
    
    let filtered = tasks;
    if (currentTaskFilter !== 'ALL') {
        filtered = tasks.filter(t => t.status === currentTaskFilter);
    }

    if (filtered.length === 0) {
        container.innerHTML = `<div class="text-center py-8 text-[11px] font-medium text-slate-400 bg-slate-50 rounded-xl border border-dashed border-slate-200">Нет задач в этой категории</div>`;
        return;
    }

    container.innerHTML = filtered.map(t => {
        const isCompleted = t.status === 'COMPLETED';
        const priorityColor = t.priority === 'HIGH' || t.priority === 'CRITICAL' 
            ? 'text-rose-600 bg-rose-50 border-rose-200' 
            : t.priority === 'MEDIUM' 
                ? 'text-amber-600 bg-amber-50 border-amber-200' 
                : 'text-slate-600 bg-slate-50 border-slate-200';
        
        return `
            <div class="p-3 bg-white border border-slate-200 rounded-xl shadow-sm hover:border-indigo-400 hover:shadow-md transition cursor-pointer flex flex-col gap-2 group" 
                 onclick="handleActionButtonClick('покажи задачу ${t.id}')">
                
                <div class="flex items-start justify-between gap-2">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider group-hover:text-indigo-500 transition">#${t.id}</span>
                    ${isCompleted 
                        ? `<span class="text-[10px] font-bold px-1.5 py-0.5 rounded-md bg-emerald-50 text-emerald-600 border border-emerald-200 shadow-sm"><i class="fa-solid fa-check mr-0.5"></i> Готово</span>`
                        : `<span class="text-[10px] font-bold px-1.5 py-0.5 rounded-md ${priorityColor} shadow-sm">${t.priority || 'LOW'}</span>`
                    }
                </div>
                
                <div class="text-xs font-semibold text-slate-700 leading-snug line-clamp-3">${escapeHtml(t.title || 'Без названия')}</div>
                
                <div class="flex items-center justify-between text-[10px] text-slate-400 mt-1">
                    <span class="bg-slate-100 px-1.5 py-0.5 rounded font-mono truncate max-w-[120px]">${escapeHtml(t.module || 'general')}</span>
                    ${t.due_date ? `<span class="shrink-0 font-medium text-slate-500"><i class="fa-regular fa-calendar mr-1"></i>${escapeHtml(t.due_date)}</span>` : ''}
                </div>
            </div>
        `;
    }).join('');
}

// Глобальная инициализация при загрузке DOM
document.addEventListener("DOMContentLoaded", () => {
    // Небольшая задержка, чтобы гарантировать применение токена
    setTimeout(loadTasks, 200);
});