{% extends "base.html" %}

{% block title %}Пробные тарифы{% endblock %}
{% block title_header %}Пробные тарифы{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h6 class="text-lg font-semibold">Управление пробными тарифами</h6>
        <button class="btn btn-primary" onclick="showCreateTrialModal()">
            <i class="bi bi-plus-lg me-2"></i>Добавить тариф
        </button>
    </div>

    <div class="dataTables_wrapper">
        <table id="trialSettingsTable" class="table table-hover align-middle dataTable">
            <thead>
                <tr>
                    <th class="text-sm" style="width: 60px;">#</th>
                    <th class="text-sm" style="width: 200px;">Наименование</th>
                    <th class="text-sm" style="width: 120px;">Кол-во дней</th>
                    <th class="text-sm" style="width: 260px;">Серверы</th>
                    <th class="text-sm" style="width: 100px;">Статус</th>
                    <th class="text-sm" style="width: 120px;">Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for setting in settings %}
                <tr>
                    <td class="text-sm">{{ setting.id }}</td>
                    <td class="text-sm">{{ setting.name }}</td>
                    <td class="text-sm">{{ setting.left_day }}</td>
                    <td class="text-sm">{{ setting.server_display }}</td>
                    <td class="text-sm">
                        {% if setting.is_enable %}
                        <span class="text-sm">Активен</span>
                        {% else %}
                        <span class="text-sm" style="color: rgb(235, 137, 137);">Отключен</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm edit-btn" style="color: white;" onclick="editTrialSetting({{ setting.id }})">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <button class="btn btn-sm delete-btn" style="color: white;" onclick="deleteTrialSetting({{ setting.id }})">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Модальное окно для добавления/редактирования -->
<div class="modal fade" id="trialSettingModal" tabindex="-1" aria-labelledby="trialSettingModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="trialSettingModalLabel">Добавить пробный тариф</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="trialSettingForm">
                    <input type="hidden" id="trialSettingId">
                    
                    <div class="mb-3">
                        <label for="trialName" class="form-label">Наименование</label>
                        <input type="text" class="form-control" id="trialName" required>
                    </div>

                    <div class="mb-3">
                        <label for="leftDay" class="form-label">Кол-во дней</label>
                        <input type="number" class="form-control" id="leftDay" required min="1">
                    </div>

                    <div class="mb-3">
                        <label for="serverIds" class="form-label">Серверы</label>
                        <select class="form-select" id="serverIds" multiple size="8"></select>
                        <div class="form-text">Можно выбрать несколько серверов (Ctrl/Cmd + клик).</div>
                    </div>
                    <div class="mb-3">
                        <label for="serverOrder" class="form-label">Порядок серверов (ID через запятую)</label>
                        <input type="text" class="form-control" id="serverOrder" placeholder="например: 3,1,2">
                        <div class="form-text">Если указать, серверы будут сохранены и выданы именно в этом порядке.</div>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="allServers">
                        <label class="form-check-label" for="allServers">Все активные сервера</label>
                    </div>

                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="isEnable">
                        <label class="form-check-label" for="isEnable">Активен</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" onclick="saveTrialSetting()">Сохранить</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function getCountryCode(serverName) {
    // Проверяем, начинается ли имя сервера с эмодзи флага
    const match = serverName.match(/^(?:\uD83C[\uDDE6-\uDDFF]){2}/);
    if (!match) return null;

    // Получаем Unicode символы флага
    const flag = match[0];
    // Преобразуем Unicode в буквенный код страны
    const code = Array.from(flag)
        .map(char => char.codePointAt(0))
        .map(code => String.fromCharCode(code - 127397))
        .join('')
        .toLowerCase();
    
    return code;
}

function formatServerName(serverName) {
    if (!serverName) return '-';
    
    const code = getCountryCode(serverName);
    if (!code) return serverName;

    // Получаем название страны (убираем эмодзи флага)
    const name = serverName.replace(/^(?:\uD83C[\uDDE6-\uDDFF]){2}\s*/, '');
    
    return `<div class="d-flex align-items-center gap-2">
              <img src="/static/flag/${code}.svg" alt="${code}" style="width: 16px; height: 16px;">
              <span>${name}</span>
            </div>`;
}

let trialSettingModal;
let pendingServerSelection = null;

function parseServerOrderInput(raw) {
    const out = [];
    const seen = new Set();
    (String(raw || "").split(",")).forEach((part) => {
        const t = part.trim();
        if (!/^\d+$/.test(t)) return;
        const id = Number(t);
        if (!seen.has(id)) {
            seen.add(id);
            out.push(id);
        }
    });
    return out;
}

$(document).ready(function() {
    trialSettingModal = new bootstrap.Modal(document.getElementById('trialSettingModal'));
    
    // Инициализация DataTables
    const table = $('#trialSettingsTable').DataTable({
        language: {
            url: "{{ url_for('static', filename='json/datatables-ru.json') }}"
        },
        order: [[0, 'desc']],
        responsive: true,
        autoWidth: false,
        columnDefs: [
            { orderable: false, targets: 5 },
            {
                targets: 3, // Колонка с сервером
                render: function(data, type, row) {
                    if (type === 'display') {
                        return formatServerName(data);
                    }
                    return data;
                }
            }
        ]
    });

    // Загружаем список серверов при открытии модального окна
    $('#trialSettingModal').on('show.bs.modal', loadServers);
});

async function loadServers() {
    try {
        const response = await fetch('/admin/trial-settings/api/servers');
        if (!response.ok) throw new Error('Ошибка получения списка серверов');
        
        const servers = await response.json();
        const select = document.getElementById('serverIds');
        
        // Очищаем текущие опции, оставляя только первую (placeholder)
        select.innerHTML = '';
        
        // Добавляем новые опции
        servers.forEach(server => {
            const option = document.createElement('option');
            option.value = server.id;
            option.textContent = server.name;
            select.appendChild(option);
        });
        if (pendingServerSelection) {
            const selected = new Set((pendingServerSelection.ids || []).map((x) => String(x)));
            Array.from(select.options).forEach((o) => {
                o.selected = selected.has(String(o.value));
            });
            document.getElementById('serverOrder').value = (pendingServerSelection.ids || []).join(',');
            document.getElementById('allServers').checked = !!pendingServerSelection.all;
            setServerSelectDisabled(!!pendingServerSelection.all);
            pendingServerSelection = null;
        }
    } catch (error) {
        console.error('Ошибка:', error);
        alert('Ошибка при загрузке списка серверов');
    }
}

function showCreateTrialModal() {
    document.getElementById('trialSettingModalLabel').textContent = 'Добавить пробный тариф';
    document.getElementById('trialSettingForm').reset();
    document.getElementById('trialSettingId').value = '';
    document.getElementById('isEnable').checked = true;
    document.getElementById('allServers').checked = false;
    document.getElementById('serverOrder').value = '';
    setServerSelectDisabled(false);
    pendingServerSelection = { ids: [], all: false };
    trialSettingModal.show();
}

async function editTrialSetting(id) {
    try {
        const response = await fetch(`/admin/trial-settings/api/trial-settings/${id}`);
        if (!response.ok) throw new Error('Ошибка получения данных пробного тарифа');
        
        const setting = await response.json();
        document.getElementById('trialSettingModalLabel').textContent = 'Редактировать пробный тариф';
        document.getElementById('trialSettingId').value = setting.id;
        document.getElementById('trialName').value = setting.name;
        document.getElementById('leftDay').value = setting.left_day;
        pendingServerSelection = {
            ids: setting.server_ids_list || [],
            all: !!setting.all_servers
        };
        document.getElementById('serverOrder').value = (setting.server_ids_list || []).join(',');
        document.getElementById('isEnable').checked = setting.is_enable;
        
        trialSettingModal.show();
    } catch (error) {
        console.error('Ошибка:', error);
        alert('Ошибка при получении данных пробного тарифа');
    }
}

async function saveTrialSetting() {
    try {
        const settingId = document.getElementById('trialSettingId').value;
        const selectedIds = Array.from(document.getElementById('serverIds').selectedOptions).map(o => Number(o.value));
        const allServers = document.getElementById('allServers').checked;
        const serverOrderIds = parseServerOrderInput(document.getElementById('serverOrder').value);
        if (!allServers && selectedIds.length === 0) {
            alert('Выберите хотя бы один сервер или включите режим "Все активные сервера".');
            return;
        }
        const data = {
            name: document.getElementById('trialName').value,
            left_day: parseInt(document.getElementById('leftDay').value),
            server_ids: selectedIds,
            server_ids_order: serverOrderIds,
            all_servers: allServers,
            is_enable: document.getElementById('isEnable').checked
        };

        const url = settingId ? 
            `/admin/trial-settings/api/trial-settings/${settingId}` : 
            '/admin/trial-settings/api/trial-settings';
        const method = settingId ? 'PUT' : 'POST';

        const response = await fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });

        if (!response.ok) throw new Error('Ошибка сохранения пробного тарифа');

        trialSettingModal.hide();
        window.location.reload();
    } catch (error) {
        console.error('Ошибка:', error);
        alert('Ошибка при сохранении пробного тарифа');
    }
}

async function deleteTrialSetting(id) {
    if (!confirm('Вы уверены, что хотите удалить этот пробный тариф?')) return;

    try {
        const response = await fetch(`/admin/trial-settings/api/trial-settings/${id}`, {
            method: 'DELETE'
        });

        if (!response.ok) throw new Error('Ошибка удаления пробного тарифа');

        window.location.reload();
    } catch (error) {
        console.error('Ошибка:', error);
        alert('Ошибка при удалении пробного тарифа');
    }
}

function setServerSelectDisabled(disabled) {
    const sel = document.getElementById('serverIds');
    const order = document.getElementById('serverOrder');
    sel.disabled = !!disabled;
    order.disabled = !!disabled;
    if (disabled) {
        order.value = '';
    }
}

document.addEventListener('change', (e) => {
    if (e.target && e.target.id === 'allServers') {
        setServerSelectDisabled(e.target.checked);
    }
    if (e.target && e.target.id === 'serverIds') {
        const selectedIds = Array.from(document.getElementById('serverIds').selectedOptions).map(o => Number(o.value));
        if (!document.getElementById('allServers').checked) {
            document.getElementById('serverOrder').value = selectedIds.join(',');
        }
    }
});
</script>
{% endblock %}