{% extends "mainapp/base.html" %}
{% load static %}

{% block title %}Тех. анализ - Ввод данных{% endblock %}

{% block extra_css %}
<link href="{% static 'tabulator/css/tabulator_bootstrap5.min.css' %}" rel="stylesheet">
<style>
    .data-entry-container {
        padding: 20px;
    }
    .form-section {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    .table-section {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    #tech-analyze-table {
        margin-top: 20px;
        font-size: 12px;
    }
    #tech-analyze-table .tabulator-header {
        font-size: 12px;
        white-space: normal;
        word-wrap: break-word;
    }
    #tech-analyze-table .tabulator-header .tabulator-col {
        white-space: normal;
        word-wrap: break-word;
        height: auto;
        min-height: 40px;
    }
    #tech-analyze-table .tabulator-header .tabulator-col-content {
        white-space: normal;
        word-wrap: break-word;
        padding: 6px 4px;
    }
    #tech-analyze-table .tabulator-cell {
        font-size: 12px;
        padding: 6px 4px;
    }
    .btn-group-custom {
        margin-top: 15px;
    }
</style>
{% endblock %}

{% block content %}
<!-- Toast Container -->
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 9999;">
    <div id="saveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto" id="toastTitle">Уведомление</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"></button>
        </div>
        <div class="toast-body" id="toastBody">
        </div>
    </div>
</div>

<div class="data-entry-container">
    <h2>Тех. анализ - Ввод данных</h2>
    
    <div class="form-section">
        <div class="row">
            <div class="col-md-4 mb-3">
                <label for="satellite-select" class="form-label">Спутник <span class="text-danger">*</span></label>
                <select id="satellite-select" class="form-select">
                    <option value="">Выберите спутник</option>
                    {% for satellite in satellites %}
                    <option value="{{ satellite.id }}">{{ satellite.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-8 mb-3 d-flex align-items-end gap-2">
                <a href="{% url 'mainapp:tech_analyze_list' %}" class="btn btn-primary">
                    <i class="bi bi-list"></i> Список данных
                </a>
            </div>
            <!-- <div class="col-md-8 mb-3">
                <div class="alert alert-info mb-0">
                    <i class="bi bi-info-circle"></i> 
                    <strong>Инструкция:</strong>
                    <ul class="mb-0 mt-2" style="font-size: 0.9em;">
                        <li><strong>Порядок столбцов в Excel:</strong> Имя, Частота МГц, Полоса МГц, Сим. скорость БОД, Модуляция, Стандарт, Примечание</li>
                        <li><strong>Поляризация извлекается автоматически</strong> из имени (например: "Сигнал 11500 МГц L" → "Левая")</li>
                        <li>Поддерживаемые буквы: L=Левая, R=Правая, H=Горизонтальная, V=Вертикальная</li>
                        <li>Скопируйте данные из Excel и вставьте в таблицу (Ctrl+V)</li>
                        <li>Используйте стрелки, Tab, Enter для навигации и редактирования</li>
                    </ul>
                </div>
            </div> -->
        </div>
    </div>
    
    <div class="table-section">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5>Таблица данных <span id="row-count" class="badge bg-primary">0</span></h5>
            </div>
            <div class="btn-group-custom">
                <button id="add-row" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Добавить строку
                </button>
                <button id="delete-selected" class="btn btn-warning ms-2">
                    <i class="bi bi-trash"></i> Удалить выбранные
                </button>
                <button id="save-data" class="btn btn-success ms-2">
                    <i class="bi bi-save"></i> Сохранить
                </button>
                <button id="clear-table" class="btn btn-danger ms-2">
                    <i class="bi bi-x-circle"></i> Очистить таблицу
                </button>
            </div>
        </div>
        
        <div id="tech-analyze-table"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'tabulator/js/tabulator.min.js' %}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Tabulator
    const table = new Tabulator("#tech-analyze-table", {
        layout: "fitDataStretch",
        height: "500px",
        placeholder: "Нет данных. Скопируйте данные из Excel и вставьте в таблицу (Ctrl+V).",
        headerWordWrap: true,
        clipboard: true,
        clipboardPasteAction: "replace",
        clipboardPasteParser: function(clipboard) {
            // Парсим данные из буфера обмена
            const rows = clipboard.split('\n').filter(row => row.trim() !== '');
            const data = [];
            
            // Функция для извлечения поляризации из имени
            function extractPolarization(name) {
                if (!name) return '';
                
                // Маппинг букв на полные названия
                const polarizationMap = {
                    'L': 'Левая',
                    'R': 'Правая',
                    'H': 'Горизонтальная',
                    'V': 'Вертикальная'
                };
                
                // Ищем паттерн "МГц X" где X - буква поляризации
                const match = name.match(/МГц\s+([LRHV])/i);
                if (match) {
                    const letter = match[1].toUpperCase();
                    return polarizationMap[letter] || '';
                }
                
                // Альтернативный паттерн: просто последняя буква L/R/H/V
                const lastChar = name.trim().slice(-1).toUpperCase();
                if (polarizationMap[lastChar]) {
                    return polarizationMap[lastChar];
                }
                
                return '';
            }
            
            rows.forEach(row => {
                // Разделяем по табуляции (стандартный разделитель Excel)
                const cells = row.split('\t');
                
                const name = cells[0] || '';
                const polarization = extractPolarization(name);
                
                // Создаем объект с правильными полями (новый порядок без поляризации в начале)
                const rowData = {
                    name: name,
                    frequency: cells[1] || '',
                    freq_range: cells[2] || '',
                    bod_velocity: cells[3] || '',
                    modulation: cells[4] || '',
                    standard: cells[5] || '',
                    note: cells[6] || '',
                    polarization: polarization  // Автоматически извлеченная поляризация
                };
                
                data.push(rowData);
            });
            
            return data;
        },
        columns: [
            {
                formatter: "rowSelection", 
                titleFormatter: "rowSelection", 
                hozAlign: "center", 
                headerSort: false, 
                width: 40,
                clipboard: false,
                cellClick: function(e, cell) {
                    cell.getRow().toggleSelect();
                }
            },
            {title: "Имя", field: "name", minWidth: 150, widthGrow: 2, editor: "input"},
            {title: "Частота, МГц", field: "frequency", minWidth: 100, widthGrow: 1, editor: "input"},
            {title: "Полоса, МГц", field: "freq_range", minWidth: 100, widthGrow: 1, editor: "input"},
            {title: "Символьная скорость, БОД", field: "bod_velocity", minWidth: 150, widthGrow: 1.5, editor: "input"},
            {title: "Вид модуляции", field: "modulation", minWidth: 120, widthGrow: 1.2, editor: "input"},
            {title: "Стандарт", field: "standard", minWidth: 100, widthGrow: 1, editor: "input"},
            {title: "Примечание", field: "note", minWidth: 150, widthGrow: 2, editor: "input"},
            {title: "Поляризация", field: "polarization", minWidth: 100, widthGrow: 1, editor: "input"},
        ],
        data: [],
    });
    
    // Update row count
    function updateRowCount() {
        const count = table.getDataCount();
        document.getElementById('row-count').textContent = count;
    }
    
    // Listen to table events
    table.on("rowAdded", updateRowCount);
    table.on("dataChanged", updateRowCount);
    table.on("rowDeleted", updateRowCount);
    
    // Add row button
    document.getElementById('add-row').addEventListener('click', function() {
        table.addRow({
            name: '',
            frequency: '',
            freq_range: '',
            bod_velocity: '',
            modulation: '',
            standard: '',
            note: '',
            polarization: ''
        });
    });
    
    // Helper function to show toast
    function showToast(title, message, type = 'info') {
        const toastEl = document.getElementById('saveToast');
        const toastTitle = document.getElementById('toastTitle');
        const toastBody = document.getElementById('toastBody');
        const toastHeader = toastEl.querySelector('.toast-header');
        
        // Remove previous background classes
        toastHeader.classList.remove('bg-success', 'bg-danger', 'bg-warning', 'text-white');
        
        // Add appropriate background class
        if (type === 'success') {
            toastHeader.classList.add('bg-success', 'text-white');
        } else if (type === 'error') {
            toastHeader.classList.add('bg-danger', 'text-white');
        } else if (type === 'warning') {
            toastHeader.classList.add('bg-warning');
        }
        
        toastTitle.textContent = title;
        toastBody.innerHTML = message;
        
        const toast = new bootstrap.Toast(toastEl, { delay: 5000 });
        toast.show();
    }
    
    // Delete selected rows
    document.getElementById('delete-selected').addEventListener('click', function() {
        const selectedRows = table.getSelectedRows();
        if (selectedRows.length === 0) {
            showToast('Внимание', 'Выберите строки для удаления', 'warning');
            return;
        }
        
        if (confirm(`Удалить ${selectedRows.length} строк(и)?`)) {
            selectedRows.forEach(row => row.delete());
            showToast('Успешно', `Удалено строк: ${selectedRows.length}`, 'success');
        }
    });
    
    // Save data
    document.getElementById('save-data').addEventListener('click', async function() {
        const satelliteId = document.getElementById('satellite-select').value;
        
        if (!satelliteId) {
            showToast('Внимание', 'Пожалуйста, выберите спутник', 'warning');
            return;
        }
        
        const data = table.getData();
        
        if (data.length === 0) {
            showToast('Внимание', 'Нет данных для сохранения', 'warning');
            return;
        }
        
        // Validate that all rows have names
        const emptyNames = data.filter(row => !row.name || row.name.trim() === '');
        if (emptyNames.length > 0) {
            showToast('Внимание', 'Все строки должны иметь имя', 'warning');
            return;
        }
        
        // Disable button while saving
        this.disabled = true;
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Сохранение...';
        
        try {
            const response = await fetch('/tech-analyze/save/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')
                },
                body: JSON.stringify({
                    satellite_id: satelliteId,
                    rows: data
                })
            });
            
            const result = await response.json();
            
            if (result.success) {
                let message = `<strong>Успешно сохранено!</strong><br>`;
                message += `Создано: ${result.created}<br>`;
                message += `Обновлено: ${result.updated}<br>`;
                message += `Всего: ${result.total}`;
                
                if (result.errors && result.errors.length > 0) {
                    message += `<br><br><strong>Ошибки:</strong><br>${result.errors.join('<br>')}`;
                }
                
                showToast('Сохранение завершено', message, 'success');
                
                // Clear table after successful save
                if (!result.errors || result.errors.length === 0) {
                    table.clearData();
                }
            } else {
                showToast('Ошибка', result.error || 'Неизвестная ошибка', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showToast('Ошибка', 'Произошла ошибка при сохранении данных', 'error');
        } finally {
            // Re-enable button
            this.disabled = false;
            this.innerHTML = '<i class="bi bi-save"></i> Сохранить';
        }
    });
    
    // Clear table
    document.getElementById('clear-table').addEventListener('click', function() {
        if (confirm('Вы уверены, что хотите очистить таблицу?')) {
            table.clearData();
            updateRowCount();
        }
    });
    
    // Helper function to get CSRF token
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    // Initialize row count
    updateRowCount();
});
</script>
{% endblock %}
