{% extends "base.html" %}

{% block title %}{% if is_new %}Новый тариф{% else %}Редактировать тариф{% endif %}{% endblock %}
{% block title_header %}{% if is_new %}Новый тариф{% else %}Редактировать тариф{% endif %}{% endblock %}

{% block content %}
<div class="mb-6" style="max-width: 720px;">
    <a href="{{ editor_back_url }}" class="btn btn-outline-secondary btn-sm mb-3">
        <i class="bi bi-arrow-left me-1"></i>Назад к списку
    </a>

    <div class="card shadow-sm border-0 bg-dark text-white" style="border: 1px solid #3b4659 !important;">
        <div class="card-body p-4">
            <h5 class="card-title mb-4">{% if is_new %}Создание тарифа{% else %}Редактировать тариф{% endif %}</h5>

            <form id="tariffEditorForm" class="needs-validation" novalidate>
                <input type="hidden" id="tariffId" value="{% if not is_new %}{{ tariff.id }}{% endif %}">

                <div class="mb-3">
                    <label for="name" class="form-label">Название тарифа <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="name" required
                           value="{% if is_new %}{{ form_defaults.name }}{% else %}{{ tariff.name|e }}{% endif %}">
                    <div class="form-text">Краткое название (например: «Месяц», «Продлить на 30 дней»).</div>
                    <div class="invalid-feedback">Укажите название</div>
                </div>

                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="is_trial"
                           {% if is_new and form_defaults.is_trial %}checked
                           {% elif not is_new and tariff.is_trial %}checked{% endif %}>
                    <label class="form-check-label" for="is_trial">Пробный тариф (бесплатно, не показывается в платных планах)</label>
                    <div class="form-text">Один активный пробный план: при включении этого тарифа остальные пробные отключаются.</div>
                </div>

                <div class="mb-3">
                    <label for="tariff_kind" class="form-label">Тип продукта</label>
                    <select class="form-select" id="tariff_kind">
                        <option value="vpn" {% if is_new and form_defaults.tariff_kind == 'vpn' %}selected{% elif not is_new and (tariff.tariff_kind or 'vpn') != 'proxy' %}selected{% endif %}>VPN (Xray)</option>
                        <option value="proxy" {% if is_new and form_defaults.tariff_kind == 'proxy' %}selected{% elif not is_new and (tariff.tariff_kind or '') == 'proxy' %}selected{% endif %}>Прокси (MTProto и др.)</option>
                    </select>
                    <div class="form-text">В каталоге бота для пользователей по умолчанию показываются только тарифы VPN.</div>
                </div>

                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="is_admin_only"
                           {% if is_new and form_defaults.is_admin_only %}checked
                           {% elif not is_new and tariff.is_admin_only %}checked{% endif %}>
                    <label class="form-check-label" for="is_admin_only">Только администраторы бота</label>
                    <div class="form-text">Не показывается обычным пользователям; активация без оплаты (список admin_id в настройках бота).</div>
                </div>

                <div class="mb-3 form-check" id="unlimitedDaysWrap">
                    <input type="checkbox" class="form-check-input" id="is_unlimited_days"
                           {% if is_new and form_defaults.is_unlimited_days %}checked
                           {% elif not is_new and tariff.is_unlimited_days %}checked{% endif %}>
                    <label class="form-check-label" for="is_unlimited_days">Без ограничения по сроку</label>
                    <div class="form-text">Подписка в X-UI до 2099 г.; в БД сохраняется техническое значение дней.</div>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-md-4">
                        <label for="left_day" class="form-label">Количество дней <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="left_day" required min="1"
                               value="{% if is_new %}{{ form_defaults.left_day }}{% else %}{{ tariff.left_day }}{% endif %}">
                        <div class="form-text">Срок подписки в днях.</div>
                    </div>
                    <div class="col-md-4" id="priceWrap">
                        <label for="price" class="form-label">Цена <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="price" required step="any" min="0"
                               value="{% if is_new %}{{ form_defaults.price }}{% else %}{{ tariff.price }}{% endif %}">
                        <div class="form-text">Для пробного тарифа не используется (0).</div>
                    </div>
                    <div class="col-md-4">
                        <label for="currency" class="form-label">Валюта</label>
                        <select class="form-select" id="currency">
                            {% for c in currencies %}
                            <option value="{{ c.code }}" {% if (is_new and c.code == form_defaults.currency) or (not is_new and c.code == tariff.currency) %}selected{% endif %}>{{ c.label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label for="sort_order" class="form-label">Порядок сортировки</label>
                        <input type="number" class="form-control" id="sort_order" min="0" step="1"
                               value="{% if is_new %}{{ form_defaults.sort_order }}{% else %}{{ tariff.sort_order }}{% endif %}">
                        <div class="form-text">Меньше число — выше в списке у пользователей.</div>
                    </div>
                    <div class="col-md-6">
                        <label for="device_limit" class="form-label">Лимит устройств</label>
                        <input type="number" class="form-control" id="device_limit" min="0" step="1"
                               value="{% if is_new %}{{ form_defaults.device_limit }}{% else %}{{ tariff.device_limit }}{% endif %}">
                        <div class="form-text">0 — без лимита (в X-UI limit IP = 0).</div>
                    </div>
                </div>

                <div class="row g-3 mb-3" id="trafficLimitRow">
                    <div class="col-md-4">
                        <label for="traffic_limit_value" class="form-label">Лимит трафика</label>
                        <input type="number" class="form-control" id="traffic_limit_value" min="0" step="any"
                               placeholder="пусто = без лимита"
                               value="{% if is_new %}{{ form_defaults.traffic_limit_value or '' }}{% elif tariff.traffic_limit_value is not none %}{{ tariff.traffic_limit_value }}{% endif %}">
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <div class="w-100">
                            <label for="traffic_limit_unit" class="form-label">Единица</label>
                            <select class="form-select" id="traffic_limit_unit">
                                <option value="GB" {% if is_new and (form_defaults.traffic_limit_unit or 'GB') == 'GB' %}selected{% elif not is_new and (tariff.traffic_limit_unit or 'GB') == 'GB' %}selected{% endif %}>ГБ</option>
                                <option value="MB" {% if is_new and form_defaults.traffic_limit_unit == 'MB' %}selected{% elif not is_new and (tariff.traffic_limit_unit or '') == 'MB' %}selected{% endif %}>МБ</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <div class="form-text mb-2">Передаётся в 3X-UI как лимит total GB (малые значения МБ округляются вверх до целых ГБ).</div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="description" class="form-label">Описание</label>
                    <textarea class="form-control" id="description" rows="3">{% if is_new %}{{ form_defaults.description }}{% else %}{{ (tariff.description or '') | e }}{% endif %}</textarea>
                    <div class="form-text">Дополнительный текст для пользователей.</div>
                </div>

                {% if not tariff_payment_cards %}
                <div class="alert alert-warning small mb-3">
                    Нет включённых способов оплаты. Сохранение недоступно: откройте <strong>Настройки → Оплата</strong> и включите нужные методы (пробный тариф доступен всегда).
                </div>
                {% endif %}

                <div class="mb-3" id="paymentMethodWrap">
                    <label for="payment_method" class="form-label">Способ оплаты <span class="text-danger">*</span></label>
                    <select class="form-select" id="payment_method">
                        {% for card in tariff_payment_cards %}
                        <option value="{{ card.key }}" {% if (is_new and card.key == form_defaults.payment_method) or (not is_new and card.key == tariff.payment_method) %}selected{% endif %}>{{ card.title }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="is_enable"
                           {% if is_new and form_defaults.is_enable %}checked
                           {% elif not is_new and tariff.is_enable %}checked{% endif %}>
                    <label class="form-check-label" for="is_enable">Тариф активен</label>
                    <div class="form-text">Неактивные тарифы не показываются пользователям.</div>
                </div>

                <hr class="border-secondary my-4">

                <div class="mb-3">
                    <label for="server_assignment" class="form-label">Серверы</label>
                    <select class="form-select" id="server_assignment">
                        <option value="auto">Авто — все активные сервера</option>
                        <option value="multi">Мульти — выбранные сервера (порядок как в списке)</option>
                    </select>
                    <div class="form-text">
                        <strong>Авто</strong> — тариф действует на все текущие и будущие активные сервера.
                        <strong>Мульти</strong> — только отмеченные ниже; порядок совпадает с порядком строк в списке.
                    </div>
                </div>

                <div class="mb-3">
                    <label for="server_ids" class="form-label">Выбор серверов</label>
                    <select class="form-select" id="server_ids" multiple size="8"></select>
                    <div class="form-text">Несколько серверов: Ctrl/Cmd + клик. Доступно в режиме «Мульти».</div>
                </div>

                <div class="d-flex flex-wrap gap-2 justify-content-between pt-2">
                    <a href="{{ editor_back_url }}" class="btn btn-outline-secondary">Отмена</a>
                    <button type="submit" class="btn btn-success" id="saveTariffBtn">
                        <i class="bi bi-check-lg me-1"></i>Сохранить изменения
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    const initialServerIds = {{ (form_defaults.server_ids_list if is_new else tariff.server_ids_list) | tojson }};
    const initialAssignment = {{ (form_defaults.server_assignment if is_new else tariff.server_assignment) | tojson }};

    function syncServerAssignmentUi() {
        const auto = $('#server_assignment').val() === 'auto';
        $('#server_ids').prop('disabled', auto);
    }

    const servers = {{ servers | tojson }};

    function fillServerSelect() {
        const sel = document.getElementById('server_ids');
        sel.innerHTML = '';
        servers.forEach(s => {
            const o = document.createElement('option');
            o.value = s.id;
            o.textContent = s.name;
            sel.appendChild(o);
        });
        const selected = new Set((initialServerIds || []).map(x => String(x)));
        Array.from(sel.options).forEach(o => { o.selected = selected.has(String(o.value)); });
        $('#server_assignment').val(initialAssignment === 'multi' ? 'multi' : 'auto');
        syncServerAssignmentUi();
    }

    $('#server_assignment').on('change', syncServerAssignmentUi);

    const payToCurrency = {
        yookassa: 'RUB', tgstar: 'XTR', cryptobot: 'TON', yoomoney: 'RUB',
        platega: 'RUB', manual: 'RUB', opens_code: 'RUB', trial: 'RUB'
    };

    function ensureTrialPaymentOption() {
        const $pm = $('#payment_method');
        if ($pm.find('option[value="trial"]').length) return;
        $pm.append($('<option>', { value: 'trial', text: 'Пробный период' }));
    }

    function syncAdminUi() {
        const adm = $('#is_admin_only').is(':checked');
        $('#is_trial').prop('disabled', adm);
        if (adm) {
            $('#is_trial').prop('checked', false);
            $('#price').val('0');
            $('#device_limit').val('0');
        }
    }

    function syncUnlimitedUi() {
        const trial = $('#is_trial').is(':checked');
        const adm = $('#is_admin_only').is(':checked');
        if (adm) {
            $('#unlimitedDaysWrap').show();
            $('#is_unlimited_days').prop('checked', true).prop('disabled', true);
            $('#left_day').val('0').prop('disabled', true).prop('required', false).removeAttr('required');
            return;
        }
        $('#is_unlimited_days').prop('disabled', false);
        $('#unlimitedDaysWrap').toggle(!trial);
        if (trial) {
            $('#is_unlimited_days').prop('checked', false);
            $('#left_day').prop('disabled', false).prop('required', true);
            return;
        }
        const unl = $('#is_unlimited_days').is(':checked');
        if (unl) {
            $('#left_day').val('36525').prop('disabled', true).prop('required', false).removeAttr('required');
        } else {
            $('#left_day').prop('disabled', false).prop('required', true);
        }
    }

    function syncTrialUi() {
        const trial = $('#is_trial').is(':checked');
        if (trial) {
            $('#is_admin_only').prop('checked', false);
            $('#is_unlimited_days').prop('checked', false);
        }
        $('#paymentMethodWrap').toggle(!trial);
        $('#priceWrap').toggle(!trial);
        $('#currency').closest('.col-md-4').toggle(!trial);
        $('#price').prop('required', !trial);
        if (trial) $('#price').removeAttr('required');
        if (trial) {
            ensureTrialPaymentOption();
            $('#payment_method').val('trial');
            $('#price').val('0');
            $('#currency').val('RUB');
        }
        syncAdminUi();
        syncUnlimitedUi();
    }
    $('#is_trial').on('change', syncTrialUi);
    $('#is_admin_only').on('change', function() {
        syncAdminUi();
        syncTrialUi();
        syncUnlimitedUi();
    });
    $('#is_unlimited_days').on('change', syncUnlimitedUi);
    syncTrialUi();
    const payOrder = {{ (tariff_payment_cards | map(attribute='key') | list) | tojson }};

    $('#payment_method').on('change', function() {
        const d = payToCurrency[this.value];
        if (d) $('#currency').val(d);
    });

    fillServerSelect();

    $('#tariffEditorForm').on('submit', async function(e) {
        e.preventDefault();
        const form = this;
        const trialOn = $('#is_trial').is(':checked');
        const adminOn = $('#is_admin_only').is(':checked');
        const unlimitedOn = $('#is_unlimited_days').is(':checked') && !trialOn;
        $('#price').prop('required', !trialOn && !adminOn);
        if (trialOn || adminOn) $('#price').removeAttr('required');
        if (trialOn) ensureTrialPaymentOption();
        if (trialOn) {
            form.classList.remove('was-validated');
            const name = ($('#name').val() || '').trim();
            const ld = parseInt($('#left_day').val(), 10);
            if (!name) {
                $('#name')[0].setCustomValidity('Укажите название');
                form.classList.add('was-validated');
                $('#name')[0].reportValidity();
                $('#name')[0].setCustomValidity('');
                return;
            }
            if (!ld || ld < 1) {
                $('#left_day')[0].setCustomValidity('Укажите число дней не меньше 1');
                form.classList.add('was-validated');
                $('#left_day')[0].reportValidity();
                $('#left_day')[0].setCustomValidity('');
                return;
            }
        } else if (adminOn) {
            form.classList.remove('was-validated');
            const name = ($('#name').val() || '').trim();
            if (!name) {
                $('#name')[0].setCustomValidity('Укажите название');
                form.classList.add('was-validated');
                $('#name')[0].reportValidity();
                $('#name')[0].setCustomValidity('');
                return;
            }
        } else if (!form.checkValidity()) {
            form.classList.add('was-validated');
            return;
        }
        if (!trialOn && !adminOn && !payOrder.length) {
            alert('Включите хотя бы один способ оплаты в настройках.');
            return;
        }
        const assign = $('#server_assignment').val();
        const primaryPay = trialOn ? 'trial' : $('#payment_method').val();
        const d = payToCurrency[primaryPay];
        if (d) $('#currency').val(d);
        const tariffId = $('#tariffId').val();
        const ldVal = adminOn ? 0 : (unlimitedOn ? 36525 : parseInt($('#left_day').val(), 10));
        const payload = {
            name: $('#name').val(),
            description: $('#description').val(),
            price: (trialOn || adminOn) ? 0 : parseFloat($('#price').val()),
            left_day: ldVal,
            is_enable: $('#is_enable').is(':checked'),
            is_trial: trialOn ? 1 : 0,
            payment_method: primaryPay,
            currency: $('#currency').val(),
            sort_order: parseInt($('#sort_order').val(), 10) || 0,
            device_limit: parseInt($('#device_limit').val(), 10) || 0,
            traffic_limit_value: (function() {
                const s = ($('#traffic_limit_value').val() || '').trim();
                if (!s) return null;
                const n = parseFloat(s);
                return (isNaN(n) || n <= 0) ? null : n;
            })(),
            traffic_limit_unit: $('#traffic_limit_unit').val(),
            server_assignment: assign,
            all_servers: assign === 'auto',
            server_ids: Array.from(document.getElementById('server_ids').selectedOptions).map(o => Number(o.value)),
            tariff_kind: $('#tariff_kind').val(),
            is_admin_only: adminOn ? 1 : 0,
            is_unlimited_days: (adminOn || unlimitedOn) ? 1 : 0,
        };
        try {
            const url = tariffId ? `/admin/tariffs/edit/${tariffId}` : '/admin/tariffs/create';
            const res = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const data = await res.json().catch(() => ({}));
            if (!res.ok) throw new Error(data.error || 'Ошибка сохранения');
            window.location.href = {{ editor_back_url | tojson }};
        } catch (err) {
            console.error(err);
            alert(err.message || 'Не удалось сохранить тариф');
        }
    });
})();
</script>
{% endblock %}