{% load static %}
{% load permission_tags %}
<!-- Вкладка заявок на источники -->
<link href="{% static 'tabulator/css/tabulator_bootstrap5.min.css' %}" rel="stylesheet">
<style>
    #requestsTable .tabulator-header .tabulator-col {
        padding: 8px 6px !important;
        font-size: 12px !important;
    }
    #requestsTable .tabulator-cell {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    #requestsTable .tabulator-row {
        min-height: 36px !important;
    }
    #requestsTable .tabulator-footer {
        font-size: 12px !important;
    }
</style>

<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-list-task"></i> Заявки на источники</h5>
        <div>
            {% if user|has_perm:'request_delete' %}
            <button type="button" class="btn btn-outline-danger btn-sm me-2" id="bulkDeleteBtn" onclick="bulkDeleteRequests()">
                <i class="bi bi-trash"></i> Удалить
            </button>
            {% endif %}
            <button type="button" class="btn btn-outline-success btn-sm me-2" onclick="exportRequests()">
                <i class="bi bi-file-earmark-excel"></i> Экспорт
            </button>
            {% if user|has_perm:'request_create' %}
            <button type="button" class="btn btn-success btn-sm" onclick="openCreateRequestModal()">
                <i class="bi bi-plus-circle"></i> Создать
            </button>
            {% endif %}
        </div>
    </div>
    <div class="card-body">
        <!-- Фильтры заявок -->
        <form method="get" class="row g-2 mb-3" id="requestsFilterForm">
            <div class="col-md-2">
                <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="">Все статусы</option>
                    {% for value, label in status_choices %}
                    <option value="{{ value }}" {% if current_status == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <select name="priority" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="">Все приоритеты</option>
                    {% for value, label in priority_choices %}
                    <option value="{{ value }}" {% if current_priority == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <select name="gso_success" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="">ГСО: все</option>
                    <option value="true" {% if request.GET.gso_success == 'true' %}selected{% endif %}>ГСО: Да</option>
                    <option value="false" {% if request.GET.gso_success == 'false' %}selected{% endif %}>ГСО: Нет</option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="kubsat_success" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="">Кубсат: все</option>
                    <option value="true" {% if request.GET.kubsat_success == 'true' %}selected{% endif %}>Кубсат: Да</option>
                    <option value="false" {% if request.GET.kubsat_success == 'false' %}selected{% endif %}>Кубсат: Нет</option>
                </select>
            </div>
        </form>
        
        <!-- Клиентский поиск -->
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="input-group input-group-sm">
                    <input type="text" id="searchRequestInput" class="form-control" 
                        placeholder="Поиск по спутнику, частоте...">
                    <button type="button" class="btn btn-outline-secondary" onclick="clearRequestSearch()">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Таблица заявок (Tabulator с встроенной пагинацией) -->
        <div id="requestsTable"></div>
    </div>
</div>

<script src="{% static 'tabulator/js/tabulator.min.js' %}"></script>
<script>
// Данные заявок из Django (через JSON)
const requestsData = JSON.parse('{{ requests_json|escapejs }}');

// Форматтер для статуса
function statusFormatter(cell) {
    const status = cell.getValue();
    const display = cell.getData().status_display;
    let badgeClass = 'bg-secondary';
    
    if (status === 'successful' || status === 'result_received') {
        badgeClass = 'bg-success';
    } else if (status === 'unsuccessful' || status === 'no_correlation' || status === 'no_signal') {
        badgeClass = 'bg-danger';
    } else if (status === 'planned') {
        badgeClass = 'bg-primary';
    } else if (status === 'downloading' || status === 'processing') {
        badgeClass = 'bg-warning text-dark';
    }
    
    return `<span class="badge ${badgeClass}">${display}</span>`;
}

// Форматтер для булевых значений (ГСО/Кубсат)
function boolFormatter(cell) {
    const val = cell.getValue();
    if (val === true) {
        return '<span class="badge bg-success">Да</span>';
    } else if (val === false) {
        return '<span class="badge bg-danger">Нет</span>';
    }
    return '-';
}

// Форматтер для координат (4 знака после запятой)
function coordsFormatter(cell) {
    const data = cell.getData();
    const field = cell.getField();
    let lat, lon;
    
    if (field === 'coords_lat') {
        lat = data.coords_lat;
        lon = data.coords_lon;
    } else if (field === 'coords_source_lat') {
        lat = data.coords_source_lat;
        lon = data.coords_source_lon;
    } else if (field === 'coords_object_lat') {
        lat = data.coords_object_lat;
        lon = data.coords_object_lon;
    }
    
    if (lat !== null && lon !== null) {
        return `${lat.toFixed(4)}, ${lon.toFixed(4)}`;
    }
    return '-';
}

// Форматтер для числовых значений
function numberFormatter(cell, decimals) {
    const val = cell.getValue();
    if (val !== null && val !== undefined) {
        return val.toFixed(decimals);
    }
    return '-';
}

// Форматтер для источника
function sourceFormatter(cell) {
    const sourceId = cell.getValue();
    if (sourceId) {
        return `<a href="/source/${sourceId}/edit/" target="_blank">#${sourceId}</a>`;
    }
    return '-';
}

// Форматтер для приоритета
function priorityFormatter(cell) {
    const priority = cell.getValue();
    const display = cell.getData().priority_display;
    let badgeClass = 'bg-secondary';
    
    if (priority === 'high') {
        badgeClass = 'bg-danger';
    } else if (priority === 'medium') {
        badgeClass = 'bg-warning text-dark';
    } else if (priority === 'low') {
        badgeClass = 'bg-info';
    }
    
    return `<span class="badge ${badgeClass}">${display}</span>`;
}

// Форматтер для комментария
function commentFormatter(cell) {
    const val = cell.getValue();
    if (!val) return '-';
    
    // Обрезаем длинный текст и добавляем tooltip
    const maxLength = 50;
    if (val.length > maxLength) {
        const truncated = val.substring(0, maxLength) + '...';
        return `<span title="${val.replace(/"/g, '&quot;')}">${truncated}</span>`;
    }
    return val;
}

// Права пользователя (передаются из Django)
const userPermissions = {
    canEditRequest: {% if user|has_perm:'request_edit' %}true{% else %}false{% endif %},
    canDeleteRequest: {% if user|has_perm:'request_delete' %}true{% else %}false{% endif %}
};

// Форматтер для действий
function actionsFormatter(cell) {
    const id = cell.getData().id;
    let buttons = `
        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-outline-info btn-sm" onclick="showHistory(${id})" title="История">
                <i class="bi bi-clock-history"></i>
            </button>`;
    
    if (userPermissions.canEditRequest) {
        buttons += `
            <button type="button" class="btn btn-outline-warning btn-sm" onclick="openEditRequestModal(${id})" title="Редактировать">
                <i class="bi bi-pencil"></i>
            </button>`;
    }
    
    if (userPermissions.canDeleteRequest) {
        buttons += `
            <button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteRequest(${id})" title="Удалить">
                <i class="bi bi-trash"></i>
            </button>`;
    }
    
    buttons += `</div>`;
    return buttons;
}

// Инициализация Tabulator
const requestsTable = new Tabulator("#requestsTable", {
    data: requestsData,
    layout: "fitColumns",
    height: "65vh",
    placeholder: "Нет заявок",
    selectable: true,
    selectableRangeMode: "click",
    pagination: true,
    paginationSize: true,
    paginationSizeSelector: [50, 200, 500],
    paginationCounter: "rows",
    columns: [
        {
            formatter: "rowSelection",
            titleFormatter: "rowSelection",
            hozAlign: "center",
            headerSort: false,
            width: 50,
            cellClick: function(e, cell) {
                cell.getRow().toggleSelect();
            }
        },
        {title: "ID", field: "id", width: 50, hozAlign: "center"},
        {title: "Ист.", field: "source_id", width: 55, formatter: sourceFormatter},
        {title: "Спутник", field: "satellite_name", width: 100},
        {title: "Статус", field: "status", width: 105, formatter: statusFormatter},
        {title: "Приоритет", field: "priority", width: 105, formatter: priorityFormatter},
        {title: "Заявка", field: "request_date_display", width: 105, 
            sorter: function(a, b, aRow, bRow) {
                const dateA = aRow.getData().request_date;
                const dateB = bRow.getData().request_date;
                if (!dateA && !dateB) return 0;
                if (!dateA) return 1;
                if (!dateB) return -1;
                return new Date(dateA) - new Date(dateB);
            }
        },
        {title: "Карточка", field: "card_date_display", width: 120,
            sorter: function(a, b, aRow, bRow) {
                const dateA = aRow.getData().card_date;
                const dateB = bRow.getData().card_date;
                if (!dateA && !dateB) return 0;
                if (!dateA) return 1;
                if (!dateB) return -1;
                return new Date(dateA) - new Date(dateB);
            }
        },
        {title: "Планирование", field: "planned_at_display", width: 150,
            sorter: function(a, b, aRow, bRow) {
                const dateA = aRow.getData().planned_at;
                const dateB = bRow.getData().planned_at;
                if (!dateA && !dateB) return 0;
                if (!dateA) return 1;
                if (!dateB) return -1;
                return new Date(dateA) - new Date(dateB);
            }
        },
        {title: "Down", field: "downlink", width: 65, hozAlign: "right", formatter: function(cell) { return numberFormatter(cell, 2); }},
        {title: "Up", field: "uplink", width: 65, hozAlign: "right", formatter: function(cell) { return numberFormatter(cell, 2); }},
        {title: "Пер.", field: "transfer", width: 50, hozAlign: "right", formatter: function(cell) { return numberFormatter(cell, 0); }},
        {title: "Коорд. ГСО", field: "coords_lat", width: 130, formatter: coordsFormatter},
        {title: "Район", field: "region", width: 100, formatter: function(cell) {
            const val = cell.getValue();
            return val ? val.substring(0, 12) + (val.length > 12 ? '...' : '') : '-';
        }},
        {title: "ГСО", field: "gso_success", width: 50, hozAlign: "center", formatter: boolFormatter},
        {title: "Куб", field: "kubsat_success", width: 50, hozAlign: "center", formatter: boolFormatter},
        {title: "Коорд. ист.", field: "coords_source_lat", width: 140, formatter: coordsFormatter},
        {title: "Коорд. об.", field: "coords_object_lat", width: 140, formatter: coordsFormatter},
        {title: "Комментарий", field: "comment", width: 180, formatter: commentFormatter},
        {title: "Действия", field: "id", width: 105, formatter: actionsFormatter, headerSort: false},
    ],
    rowSelectionChanged: function(data, rows) {
        updateSelectedCount();
    },
    dataFiltered: function(filters, rows) {
        updateRequestsCounter();
    },
});

// Поиск по таблице
document.getElementById('searchRequestInput').addEventListener('input', function() {
    const searchValue = this.value.toLowerCase().trim();
    if (searchValue) {
        requestsTable.setFilter(function(data) {
            // Поиск по спутнику
            const satelliteMatch = data.satellite_name && data.satellite_name.toLowerCase().includes(searchValue);
            
            // Поиск по частотам (downlink, uplink, transfer)
            const downlinkMatch = data.downlink && data.downlink.toString().includes(searchValue);
            const uplinkMatch = data.uplink && data.uplink.toString().includes(searchValue);
            const transferMatch = data.transfer && data.transfer.toString().includes(searchValue);
            
            // Поиск по району
            const regionMatch = data.region && data.region.toLowerCase().includes(searchValue);
            
            return satelliteMatch || downlinkMatch || uplinkMatch || transferMatch || regionMatch;
        });
    } else {
        requestsTable.clearFilter();
    }
    updateRequestsCounter();
});

// Обновление счётчика заявок (пустая функция для совместимости)
function updateRequestsCounter() {
    // Функция оставлена для совместимости, но ничего не делает
}

// Очистка поиска
function clearRequestSearch() {
    document.getElementById('searchRequestInput').value = '';
    requestsTable.clearFilter();
    updateRequestsCounter();
}

// Обновление счётчика выбранных (пустая функция для совместимости)
function updateSelectedCount() {
    // Функция оставлена для совместимости, но ничего не делает
}

// Массовое удаление заявок
async function bulkDeleteRequests() {
    const selectedRows = requestsTable.getSelectedRows();
    const ids = selectedRows.map(row => row.getData().id);
    
    if (ids.length === 0) {
        alert('Не выбраны заявки для удаления');
        return;
    }
    
    if (!confirm(`Вы уверены, что хотите удалить ${ids.length} заявок?`)) {
        return;
    }
    
    try {
        const response = await fetch('{% url "mainapp:source_request_bulk_delete" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({ ids: ids })
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert(data.message);
            location.reload();
        } else {
            alert('Ошибка: ' + (data.error || 'Неизвестная ошибка'));
        }
    } catch (error) {
        alert('Ошибка: ' + error.message);
    }
}

// Экспорт заявок в Excel
function exportRequests() {
    // Получаем текущие параметры фильтрации
    const urlParams = new URLSearchParams(window.location.search);
    const exportUrl = '{% url "mainapp:source_request_export" %}?' + urlParams.toString();
    window.location.href = exportUrl;
}

// Инициализация счётчика при загрузке
document.addEventListener('DOMContentLoaded', function() {
    updateRequestsCounter();
});
</script>
