{% extends 'br_compensations/base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Settings" %}{% endblock %}

{% block extra_css %}
<link href="/static/br_compensations/css/style.css" rel="stylesheet">
<style>
    .nav-link.active { font-weight: 600; }
    .json-editor {
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.85rem;
        min-height: 200px;
        background: #1e1e1e;
        color: #d4d4d4;
        border: 1px solid #444;
        border-radius: 4px;
        padding: 12px;
        resize: vertical;
    }
    .json-editor:focus { border-color: #0d6efd; outline: none; }
    .json-error { color: #dc3545; font-size: 0.85rem; margin-top: 4px; display: none; }
    .help-text { color: #6c757d; font-size: 0.8rem; margin-top: 4px; }
    .insurance-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 8px;
    }
    .insurance-row { display: flex; align-items: center; gap: 8px; }
    .insurance-row label { flex: 1; font-size: 0.9rem; white-space: nowrap; }
    .insurance-row input { width: 140px; text-align: right; }
    .rules-table th { font-size: 0.85rem; }
    .rules-table td { vertical-align: middle; }
    .rule-filter-tag {
        display: inline-block; padding: 2px 8px; margin: 1px;
        border-radius: 4px; font-size: 0.78rem; background: #e9ecef;
    }
    .rule-filter-tag.class { background: #cfe2ff; color: #084298; }
    .rule-filter-tag.tier { background: #d1e7dd; color: #0f5132; }
    .rule-filter-tag.group { background: #fff3cd; color: #664d03; }
    .rule-filter-tag.ships { background: #f8d7da; color: #842029; }

    /* Tag Input Control */
    .tag-input-container {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 8px;
        min-height: 38px;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        background: #fff;
        cursor: text;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        align-items: center;
    }
    .tag-input-container:focus-within {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    .tag-input-container .tag-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.82rem;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1.4;
    }
    .tag-input-container .tag-badge.ships {
        background: #f8d7da;
        color: #842029;
    }
    .tag-input-container .tag-badge.groups {
        background: #e2e3e5;
        color: #41464b;
    }
    .tag-input-container .tag-badge .tag-remove {
        cursor: pointer;
        font-size: 0.7rem;
        opacity: 0.6;
        line-height: 1;
        padding: 0 2px;
    }
    .tag-input-container .tag-badge .tag-remove:hover {
        opacity: 1;
    }
    .tag-input-container .tag-text-input {
        flex: 1;
        min-width: 100px;
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.875rem;
        padding: 2px 0;
    }
    .tag-input-container .tag-text-input::placeholder {
        color: #6c757d;
    }
    .tag-autocomplete {
        position: fixed;
        z-index: 1060;
        max-height: 200px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        display: none;
        min-width: 200px;
    }
    .tag-autocomplete .tag-ac-item {
        padding: 6px 12px;
        cursor: pointer;
        font-size: 0.85rem;
    }
    .tag-autocomplete .tag-ac-item:hover,
    .tag-autocomplete .tag-ac-item.active {
        background: #e9ecef;
    }
    .tag-autocomplete .tag-ac-item .tag-ac-highlight {
        font-weight: 600;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3><i class="fa-solid fa-gear"></i> {% trans "Настройки плагина" %}</h3>
        <a href="/br_compensations/dashboard/" class="btn btn-outline-secondary">
            <i class="fa-solid fa-arrow-left"></i> {% trans "Назад к дашборду" %}
        </a>
    </div>

    <ul class="nav nav-tabs mb-4" id="settingsTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabRules" type="button" role="tab">
                <i class="fa-solid fa-coins"></i> {% trans "Правила компенсаций" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabInsurance" type="button" role="tab">
                <i class="fa-solid fa-shield-halved"></i> {% trans "Страховые выплаты" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabProxy" type="button" role="tab">
                <i class="fa-solid fa-network-wired"></i> {% trans "Прокси" %}
            </button>
        </li>
        {% comment %} <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabDoctrine" type="button" role="tab">
                <i class="fa-solid fa-bullseye"></i> {% trans "Доктрины" %}
            </button>
        </li> {% endcomment %}
    </ul>

    

        <div class="tab-content" id="settingsTabContent">
            <!-- TAB: Rules -->
            <div class="tab-pane fade show active" id="tabRules" role="tabpanel">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><i class="fa-solid fa-coins"></i> {% trans "Правила компенсаций" %}</span>
                        <button type="button" class="btn btn-sm btn-primary" id="btnAddRule">
                            <i class="fa-solid fa-plus"></i> {% trans "Добавить" %}
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover rules-table" id="rulesTable">
                                <thead><tr>
                                    <th>#</th><th>{% trans "Название" %}</th><th>{% trans "Операция" %}</th>
                                    <th>{% trans "Фильтр" %}</th><th>{% trans "Лимит" %}</th>
                                    <th>{% trans "Приоритет" %}</th><th>{% trans "Активно" %}</th><th></th>
                                </tr></thead>
                                <tbody id="rulesBody"></tbody>
                            </table>
                        </div>
                        <div id="noRulesMsg" class="text-muted text-center py-3" style="display:none;">
                            {% trans "Правил пока нет." %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB: Insurance -->
            <div class="tab-pane fade" id="tabInsurance" role="tabpanel">
                <div class="card">
                    <div class="card-header">
                        <i class="fa-solid fa-shield-halved"></i> {% trans "Страховые выплаты" %} <span class="text-muted ms-2">(ISK)</span>
                    </div>
                    <div class="card-body">
                        <div class="insurance-grid" id="insuranceGrid"></div>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-header" data-bs-toggle="collapse" data-bs-target="#insuranceJsonCollapse" style="cursor:pointer;">
                        <i class="fa-solid fa-code"></i> {% trans "JSON" %}
                        <i class="fa-solid fa-chevron-down float-end"></i>
                    </div>
                    <div id="insuranceJsonCollapse" class="collapse">
                        <div class="card-body">
                            <textarea class="json-editor w-100" id="insuranceJsonEditor" rows="10" spellcheck="false"></textarea>
                            <div class="json-error" id="insuranceJsonError"></div>
                            <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="btnApplyInsuranceJson">
                                <i class="fa-solid fa-check"></i> {% trans "Применить" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB: Proxy -->
            <div class="tab-pane fade" id="tabProxy" role="tabpanel">
                <div class="card">
                    <div class="card-header"><i class="fa-solid fa-network-wired"></i> {% trans "Настройки прокси" %}</div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">{% trans "HTTP Proxy" %}</label>
                                {{ form.http_proxy }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{% trans "HTTPS Proxy" %}</label>
                                {{ form.https_proxy }}
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">{% trans "SOCKS5 Proxy" %}</label>
                                {{ form.socks5_proxy }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- TAB: Doctrine -->
            <div class="tab-pane fade" id="tabDoctrine" role="tabpanel">
                <div class="card">
                    <div class="card-header"><i class="fa-solid fa-bullseye"></i> {% trans "Стандарты доктрин" %}</div>
                    <div class="card-body">
                        <div id="doctrineContainer"></div>
                        <button type="button" class="btn btn-sm btn-outline-primary mt-3" id="btnAddDoctrine">
                            <i class="fa-solid fa-plus"></i> {% trans "Добавить корабль" %}
                        </button>
                        <div id="doctrineAddForm" class="input-group mt-3" style="max-width:400px; display:none;">
                            <input type="text" class="form-control" id="doctrineShipInput"
                                   placeholder="{% trans 'Название корабля...' %}"
                                   list="doctrineShipList" autocomplete="off">
                            <button type="button" class="btn btn-primary" id="btnConfirmDoctrine">
                                <i class="fa-solid fa-check"></i> {% trans "Добавить" %}
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="btnCancelDoctrine">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                        <datalist id="doctrineShipList"></datalist>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-header" data-bs-toggle="collapse" data-bs-target="#doctrineJsonCollapse" style="cursor:pointer;">
                        <i class="fa-solid fa-code"></i> {% trans "JSON" %}
                        <i class="fa-solid fa-chevron-down float-end"></i>
                    </div>
                    <div id="doctrineJsonCollapse" class="collapse">
                        <div class="card-body">
                            <textarea class="json-editor w-100" id="doctrineJsonEditor" rows="8" spellcheck="false"></textarea>
                            <div class="json-error" id="doctrineJsonError"></div>
                            <button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="btnApplyDoctrineJson">
                                <i class="fa-solid fa-check"></i> {% trans "Применить" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
<form method="post" id="settingsForm" class="container mt-4">
    {% csrf_token %}
    <input type="hidden" name="insurance_payouts" id="insurancePayoutsHidden">
    <input type="hidden" name="compensation_caps" id="compensationCapsHidden">
    <input type="hidden" name="doctrine_standards" id="doctrineStandardsHidden">
    <div class="mt-4 mb-4" id="saveBtnContainer">
        <button type="submit" class="btn btn-primary btn-lg">
            <i class="fa-solid fa-floppy-disk"></i> {% trans "Сохранить" %}
        </button>
    </div>
</form>

<!-- Rule Modal -->
<div class="modal fade" id="ruleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ruleModalTitle">{% trans "Правило" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="ruleId">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">{% trans "Название" %} *</label>
                        <input type="text" class="form-control" id="ruleName" maxlength="200" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{% trans "Операция" %} *</label>
                        <select class="form-select" id="ruleOpType">
                            <option value="ALL">{% trans "Все" %}</option>
                            <option value="C">CTA</option>
                            <option value="H">HOMEDEF</option>
                            <option value="O">ROAM</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{% trans "Лимит (ISK)" %} *</label>
                        <input type="number" class="form-control" id="ruleMaxComp" min="0" step="1000000" value="0">
                        <div class="help-text">0 = {% trans "без лимита" %}</div>
                    </div>
                </div>
                <hr>
                <h6>{% trans "Фильтр кораблей" %}</h6>
                <p class="text-muted" style="font-size:0.85rem;">{% trans "Оставьте пустым для всех кораблей." %}</p>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label">{% trans "Класс" %}</label>
                        <select class="form-select" id="ruleShipClass">
                            <option value="">{% trans "Любой" %}</option>
                            <option value="Frigate">{% trans "Фрегат" %}</option>
                            <option value="Destroyer">{% trans "Эсминец" %}</option>
                            <option value="Cruiser">{% trans "Крейсер" %}</option>
                            <option value="Battlecruiser">{% trans "Батлкрейсер" %}</option>
                            <option value="Battleship">{% trans "Линкор" %}</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{% trans "Тир" %}</label>
                        <select class="form-select" id="ruleShipTier">
                            <option value="">{% trans "Любой" %}</option>
                            <option value="T1">T1</option>
                            <option value="T2">T2</option>
                            <option value="Faction">{% trans "Фракция" %}</option>
                            <option value="T3">T3</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">{% trans "Группа SDE" %}</label>
                        <input type="text" class="form-control" id="ruleShipGroup" placeholder="Recon Ship"
                               list="sdeGroupList" autocomplete="off">
                        <div class="help-text">{% trans "Точное название группы из EVE SDE" %}</div>
                        <datalist id="sdeGroupList">
                            <option value="Frigate">
                            <option value="Assault Frigate">
                            <option value="Logistics Frigate">
                            <option value="Covert Ops">
                            <option value="Interceptor">
                            <option value="Electronic Attack Ship">
                            <option value="Destroyer">
                            <option value="Interdictor">
                            <option value="Command Destroyer">
                            <option value="Cruiser">
                            <option value="Attack Cruiser">
                            <option value="Heavy Interdictor">
                            <option value="Logistics">
                            <option value="Recon Ship">
                            <option value="Strategic Cruiser">
                            <option value="Battlecruiser">
                            <option value="Command Ship">
                            <option value="Battleship">
                            <option value="Black Ops">
                            <option value="Marauder">
                            <option value="Elite Battleship">
                        </datalist>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">{% trans "Корабли" %}</label>
                        <input type="hidden" id="ruleShips" value="">
                        <div class="tag-input-container" id="ruleShipsContainer" data-placeholder="Введите название корабля...">
                        </div>
                        <div class="tag-autocomplete" id="ruleShipsAC"></div>
                        <div class="help-text">{% trans "Точные названия кораблей (Enter или запятая для добавления)" %}</div>
                        <div class="form-text" style="font-size:0.75rem;">
                            {% trans "Примеры:" %} Nightmare, Barghest, Vindicator, Machariel, Rattlesnake, Panther, Redeemer, Moros, Nyx
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{% trans "Исключить группы" %}</label>
                        <input type="hidden" id="ruleExcludeGroup" value="">
                        <div class="tag-input-container" id="ruleExcludeGroupContainer" data-placeholder="Введите название группы...">
                        </div>
                        <div class="tag-autocomplete" id="ruleExcludeGroupAC"></div>
                        <div class="help-text">{% trans "Группы через запятую (корабли из этих групп не попадут под правило)" %}</div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label class="form-label">{% trans "Приоритет" %}</label>
                        <input type="number" class="form-control" id="rulePriority" value="0">
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="ruleActive" checked>
                            <label class="form-check-label" for="ruleActive">{% trans "Активно" %}</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Отмена" %}</button>
                <button type="button" class="btn btn-primary" id="btnSaveRule">{% trans "Сохранить" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
{% verbatim %}<script>
document.addEventListener('DOMContentLoaded', function() {
    const API_BASE = '/br_compensations/api/compensation-rules/';
    const csrfToken = window.csrfToken || document.querySelector('[name=csrfmiddlewaretoken]')?.value;

    // XSS helper
    function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML;}

    // ── Tag Input Control ──
    class TagInput {
        constructor(containerEl, hiddenInputEl, acEl, suggestions, tagClass) {
            this.container = containerEl;
            this.hiddenInput = hiddenInputEl;
            this.acEl = acEl;
            this.suggestions = suggestions || [];
            this.tagClass = tagClass || 'ships';
            this.tags = [];
            this.acIndex = -1;
            this._init();
        }

        _init() {
            this.input = document.createElement('input');
            this.input.type = 'text';
            this.input.className = 'tag-text-input';
            this.input.placeholder = this.container.dataset.placeholder || 'Введите значение...';
            this.input.autocomplete = 'off';
            this.container.appendChild(this.input);

            // Move autocomplete to body to avoid modal overflow clipping
            if (this.acEl.parentElement !== document.body) {
                document.body.appendChild(this.acEl);
            }

            this.container.addEventListener('click', () => this.input.focus());

            this.input.addEventListener('keydown', (e) => this._onKeydown(e));
            this.input.addEventListener('input', () => this._onInput());
            this.input.addEventListener('blur', () => {
                setTimeout(() => this._hideAC(), 150);
            });
            this.input.addEventListener('paste', (e) => {
                e.preventDefault();
                const text = (e.clipboardData || window.clipboardData).getData('text');
                if (text) {
                    text.split(/[,;]+/).forEach(val => {
                        const trimmed = val.trim();
                        if (trimmed) this._addTag(trimmed);
                    });
                    this.input.value = '';
                    this._hideAC();
                }
            });
            this.input.addEventListener('focus', () => {
                if (this.input.value.trim()) this._showAC();
            });

            this.acEl.addEventListener('mousedown', (e) => {
                e.preventDefault();
                const item = e.target.closest('.tag-ac-item');
                if (item) {
                    this._addTag(item.dataset.value);
                    this.input.value = '';
                    this._hideAC();
                }
            });

            this._syncFromHidden();
        }

        _onKeydown(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                if (this.acIndex >= 0 && this.acEl.children.length > 0) {
                    const item = this.acEl.children[this.acIndex];
                    if (item) this._addTag(item.dataset.value);
                } else if (this.input.value.trim()) {
                    this._addTag(this.input.value.trim());
                }
                this.input.value = '';
                this._hideAC();
            } else if (e.key === ',') {
                e.preventDefault();
                if (this.input.value.trim()) {
                    this._addTag(this.input.value.trim());
                }
                this.input.value = '';
                this._hideAC();
            } else if (e.key === 'Backspace' && !this.input.value && this.tags.length > 0) {
                this._removeTag(this.tags.length - 1);
            } else if (e.key === 'ArrowDown') {
                e.preventDefault();
                this._navigateAC(1);
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                this._navigateAC(-1);
            } else if (e.key === 'Escape') {
                this._hideAC();
            }
        }

        _onInput() {
            const val = this.input.value.trim().toLowerCase();
            if (val.length === 0) {
                this._hideAC();
                return;
            }
            const filtered = this.suggestions.filter(s =>
                s.toLowerCase().includes(val) && !this.tags.includes(s)
            );
            if (filtered.length === 0) {
                this._hideAC();
                return;
            }
            this.acIndex = -1;
            this.acEl.innerHTML = '';
            filtered.forEach(s => {
                const div = document.createElement('div');
                div.className = 'tag-ac-item';
                div.dataset.value = s;
                const regex = new RegExp('(' + val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'gi');
                div.innerHTML = s.replace(regex, '<span class="tag-ac-highlight">$1</span>');
                this.acEl.appendChild(div);
            });
            this._showAC();
        }

        _showAC() {
            const rect = this.container.getBoundingClientRect();
            this.acEl.style.left = rect.left + 'px';
            this.acEl.style.top = rect.bottom + 'px';
            this.acEl.style.width = rect.width + 'px';
            this.acEl.style.display = 'block';
        }

        _hideAC() {
            this.acEl.style.display = 'none';
            this.acIndex = -1;
            this.acEl.innerHTML = '';
        }

        _navigateAC(dir) {
            if (this.acEl.style.display !== 'block') return;
            const items = this.acEl.querySelectorAll('.tag-ac-item');
            if (!items.length) return;
            items.forEach(i => i.classList.remove('active'));
            this.acIndex += dir;
            if (this.acIndex < 0) this.acIndex = items.length - 1;
            if (this.acIndex >= items.length) this.acIndex = 0;
            items[this.acIndex].classList.add('active');
            items[this.acIndex].scrollIntoView({ block: 'nearest' });
        }

        _addTag(value) {
            const normalized = value.trim();
            if (!normalized || this.tags.includes(normalized)) return;
            this.tags.push(normalized);
            this._renderTags();
            this._syncToHidden();
        }

        _removeTag(index) {
            this.tags.splice(index, 1);
            this._renderTags();
            this._syncToHidden();
        }

        _renderTags() {
            const badge = this.container.querySelectorAll('.tag-badge');
            badge.forEach(b => b.remove());
            this.tags.forEach((tag, i) => {
                const span = document.createElement('span');
                span.className = `tag-badge ${this.tagClass}`;
                const text = document.createTextNode(tag + ' ');
                span.appendChild(text);
                const remove = document.createElement('span');
                remove.className = 'tag-remove';
                remove.dataset.index = i;
                remove.innerHTML = '&times;';
                span.appendChild(remove);
                this.container.insertBefore(span, this.input);
            });
            this.container.querySelectorAll('.tag-remove').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    this._removeTag(parseInt(btn.dataset.index));
                });
            });
        }

        _syncToHidden() {
            this.hiddenInput.value = this.tags.join(', ');
        }

        _syncFromHidden() {
            const val = this.hiddenInput.value;
            if (val && val.trim()) {
                this.tags = val.split(',').map(s => s.trim()).filter(Boolean);
                this._renderTags();
            }
        }

        setTags(tagsArray) {
            this.tags = [...new Set((tagsArray || []).filter(Boolean))];
            this._renderTags();
            this._syncToHidden();
        }

        getTags() {
            return [...this.tags];
        }

        clear() {
            this.tags = [];
            this._renderTags();
            this.hiddenInput.value = '';
            this.input.value = '';
        }
    }

    // ── Initialize Tag Inputs ──
    const SHIP_SUGGESTIONS = [
        'Nightmare', 'Barghest', 'Vindicator', 'Machariel', 'Rattlesnake', 'Panther',
        'Redeemer', 'Moros', 'Nyx', 'Hel', 'Avatar', 'Erebus', 'Thanatos',
        'Archon', 'Chimera', 'Aeon', 'Revenant', 'Vendetta', 'Abraddon',
        'Paladin', 'Kronos', 'Golem', 'Vargur', 'Hyperion', 'Megathron',
        'Dominix', 'Apocalypse', 'Armageddon', 'Rokh', 'Scorpion', 'Typhoon',
        'Tempest', 'Maelstrom', 'Praxis', 'Leviathan', 'Eidolon', 'Wyvern',
        'Nidhoggur', 'Kratos', 'Naglfar', 'Revelation', 'Phoenix',
        'Bhaalgorn', 'Absolution', 'Damnation', 'Sleipnir', 'Hurricane',
        'Claymore', 'Nighthawk', 'Cyclone', 'Tornado', 'Talos', 'Oracle', 'Naga'
    ];
    const GROUP_SUGGESTIONS = [
        'Command Ship', 'Strategic Cruiser', 'Recon Ship', 'Black Ops', 'Marauder',
        'Frigate', 'Assault Frigate', 'Logistics Frigate', 'Covert Ops', 'Interceptor',
        'Electronic Attack Ship', 'Destroyer', 'Interdictor', 'Command Destroyer',
        'Cruiser', 'Attack Cruiser', 'Heavy Interdictor', 'Logistics',
        'Battlecruiser', 'Battleship', 'Elite Battleship', 'Titan', 'Supercarrier',
        'Carrier', 'Dreadnought', 'Force Auxiliary', 'Mining Barge', 'Exhumer'
    ];

    const tagShips = new TagInput(
        document.getElementById('ruleShipsContainer'),
        document.getElementById('ruleShips'),
        document.getElementById('ruleShipsAC'),
        SHIP_SUGGESTIONS,
        'ships'
    );
    const tagExcludeGroup = new TagInput(
        document.getElementById('ruleExcludeGroupContainer'),
        document.getElementById('ruleExcludeGroup'),
        document.getElementById('ruleExcludeGroupAC'),
        GROUP_SUGGESTIONS,
        'groups'
    );

    // ── Insurance ──
    const INS_DEFAULTS = {
        "Frigate_T1":100000,"Destroyer_T1":200000,"Destroyer_T2":500000,
        "Cruiser_T1":3000000,"Cruiser_T2":16000000,"Cruiser_T3":56000000,
        "Battlecruiser_T1":17000000,"Battlecruiser_T2":26000000,
        "Battleship_T1":44000000,"Marauder_T2":108000000,"Battleship_Faction":58000000
    };
    const INS_LABELS = {
        "Frigate_T1":"Фрегат T1","Destroyer_T1":"Эсминец T1","Destroyer_T2":"Эсминец T2",
        "Cruiser_T1":"Крейсер T1","Cruiser_T2":"Крейсер T2","Cruiser_T3":"Крейсер T3",
        "Battlecruiser_T1":"Батлкрейсер T1","Battlecruiser_T2":"Батлкрейсер T2",
        "Battleship_T1":"Линкор T1","Marauder_T2":"Мародёр T2","Battleship_Faction":"Фракционный Линкор"
    };
    let insuranceData = JSON.parse(document.getElementById('insurancePayoutsHidden').value||'{}');
    for(const[k,v]of Object.entries(INS_DEFAULTS)){if(!(k in insuranceData))insuranceData[k]=v;}

    function renderInsuranceGrid(){
        const g=document.getElementById('insuranceGrid');g.innerHTML='';
        for(const[k,v]of Object.entries(INS_DEFAULTS)){
            const val=insuranceData[k]||v;
            const d=document.createElement('div');d.className='insurance-row';
            d.innerHTML=`<label>${INS_LABELS[k]||k}</label><input type="number" class="form-control form-control-sm" data-key="${k}" value="${val}" min="0" step="100000">`;
            g.appendChild(d);
        }
        g.querySelectorAll('input').forEach(i=>{i.addEventListener('input',function(){insuranceData[this.dataset.key]=parseInt(this.value)||0;});});
    }
    renderInsuranceGrid();
    document.getElementById('insuranceJsonEditor').value=JSON.stringify(insuranceData,null,2);
    document.getElementById('btnApplyInsuranceJson').addEventListener('click',function(){
        try{insuranceData=JSON.parse(this.previousElementSibling.previousElementSibling.value);document.getElementById('insuranceJsonError').style.display='none';renderInsuranceGrid();}
        catch(e){const el=document.getElementById('insuranceJsonError');el.textContent='JSON: '+e.message;el.style.display='block';}
    });

    // ── Rules ──
    let rulesData=[];
    const OP_LABELS={'ALL':'Все','C':'CTA','H':'HOMEDEF','O':'ROAM'};

    function buildFilterTags(f){
        if(!f||!Object.keys(f).length)return'<span class="text-muted">Все корабли</span>';
        let t='';
        if(f.class)t+=`<span class="rule-filter-tag class">${esc(f.class)}</span>`;
        if(f.tier)t+=`<span class="rule-filter-tag tier">${esc(f.tier)}</span>`;
        if(f.group)t+=`<span class="rule-filter-tag group">${esc(f.group)}</span>`;
        if(f.ships)f.ships.forEach(s=>{t+=`<span class="rule-filter-tag ships">${esc(s)}</span>`;});
        if(f.exclude_group)f.exclude_group.forEach(g=>{t+=`<span class="rule-filter-tag" style="background:#e2e3e5;color:#41464b;">!${esc(g)}</span>`;});
        return t||'<span class="text-muted">Все корабли</span>';
    }

    function renderRulesTable(){
        const tb=document.getElementById('rulesBody'),nm=document.getElementById('noRulesMsg');
        tb.innerHTML='';if(!rulesData.length){nm.style.display='block';return;}nm.style.display='none';
        rulesData.forEach(r=>{
            const tr=document.createElement('tr');
            const bc=r.operation_type==='C'?'danger':r.operation_type==='H'?'primary':r.operation_type==='O'?'secondary':'info';
            tr.innerHTML=`<td>${r.priority||0}</td><td><strong>${esc(r.name)}</strong></td>
                <td><span class="badge bg-${bc}">${OP_LABELS[r.operation_type]||r.operation_type}</span></td>
                <td>${buildFilterTags(r.ship_filter)}</td>
                <td>${r.max_compensation?Number(r.max_compensation).toLocaleString('ru-RU')+' ISK':'<em>0</em>'}</td>
                <td>${r.priority||0}</td>
                <td><i class="fa-solid fa-${r.is_active?'check text-success':'xmark text-danger'}"></i></td>
                <td><button class="btn btn-sm btn-outline-primary btn-edit-rule" data-id="${r.id}"><i class="fa-solid fa-pen"></i></button>
                <button class="btn btn-sm btn-outline-danger btn-del-rule" data-id="${r.id}"><i class="fa-solid fa-trash"></i></button></td>`;
            tb.appendChild(tr);
        });
        tb.querySelectorAll('.btn-edit-rule').forEach(b=>{b.addEventListener('click',function(){loadRuleForEdit(this.dataset.id);});});
        tb.querySelectorAll('.btn-del-rule').forEach(b=>{b.addEventListener('click',function(){deleteRule(this.dataset.id);});});
    }

    function loadRules(){
        fetch(API_BASE,{headers:{'X-CSRFToken':csrfToken}}).then(r=>r.json()).then(d=>{rulesData=d.results||d;renderRulesTable();});
    }

    function resetRuleModal(){
        document.getElementById('ruleId').value='';document.getElementById('ruleName').value='';
        document.getElementById('ruleOpType').value='ALL';document.getElementById('ruleMaxComp').value='0';
        document.getElementById('ruleShipClass').value='';document.getElementById('ruleShipTier').value='';
        document.getElementById('ruleShipGroup').value='';
        document.getElementById('rulePriority').value='0';
        document.getElementById('ruleActive').checked=true;
        tagShips.clear();
        tagExcludeGroup.clear();
    }

    function loadRuleForEdit(id){
        const r=rulesData.find(x=>String(x.id)===String(id));if(!r)return;
        document.getElementById('ruleId').value=r.id;document.getElementById('ruleName').value=r.name;
        document.getElementById('ruleOpType').value=r.operation_type;
        document.getElementById('ruleMaxComp').value=r.max_compensation||0;
        document.getElementById('rulePriority').value=r.priority||0;
        document.getElementById('ruleActive').checked=r.is_active;
        const f=r.ship_filter||{};
        document.getElementById('ruleShipClass').value=f.class||'';
        document.getElementById('ruleShipTier').value=f.tier||'';
        document.getElementById('ruleShipGroup').value=f.group||'';
        tagShips.setTags(f.ships || []);
        tagExcludeGroup.setTags(f.exclude_group || []);
        document.getElementById('ruleModalTitle').textContent='Редактировать правило';
        bootstrap.Modal.getOrCreateInstance(document.getElementById('ruleModal')).show();
    }

    function saveRule(){
        const id=document.getElementById('ruleId').value;
        const sf={};const cls=document.getElementById('ruleShipClass').value;
        const tier=document.getElementById('ruleShipTier').value;
        const grp=document.getElementById('ruleShipGroup').value.trim();
        const ships=tagShips.getTags();
        const excludeGroups=tagExcludeGroup.getTags();
        if(cls)sf.class=cls;if(tier)sf.tier=tier;if(grp)sf.group=grp;
        if(ships.length)sf.ships=ships;
        if(excludeGroups.length)sf.exclude_group=excludeGroups;
        const payload={
            name:document.getElementById('ruleName').value.trim(),
            operation_type:document.getElementById('ruleOpType').value,
            max_compensation:parseInt(document.getElementById('ruleMaxComp').value)||0,
            ship_filter:sf,priority:parseInt(document.getElementById('rulePriority').value)||0,
            is_active:document.getElementById('ruleActive').checked,
        };
        if(!payload.name){alert('Заполните название');return;}
        const url=id?`${API_BASE}${id}/`:API_BASE;
        const method=id?'PUT':'POST';
        fetch(url,{method,headers:{'Content-Type':'application/json','X-CSRFToken':csrfToken},body:JSON.stringify(payload)})
        .then(r=>{if(!r.ok)return r.json().then(e=>{throw e;});return r.json();})
        .then(()=>{bootstrap.Modal.getInstance(document.getElementById('ruleModal')).hide();loadRules();})
        .catch(e=>alert('Ошибка: '+(e.detail||JSON.stringify(e))));
    }

    function deleteRule(id){
        if(!confirm('Удалить?'))return;
        fetch(`${API_BASE}${id}/`,{method:'DELETE',headers:{'X-CSRFToken':csrfToken}})
        .then(r=>{if(r.ok||r.status===204)loadRules();});
    }

    document.getElementById('btnAddRule').addEventListener('click',function(){
        resetRuleModal();document.getElementById('ruleModalTitle').textContent='Добавить правило';
        bootstrap.Modal.getOrCreateInstance(document.getElementById('ruleModal')).show();
    });
    document.getElementById('btnSaveRule').addEventListener('click',saveRule);
    loadRules();



    document.querySelectorAll('#settingsTabs .nav-link').forEach(function(tab) {
        tab.addEventListener('shown.bs.tab', function() {
            sessionStorage.setItem('settings_active_tab', this.getAttribute('data-bs-target'));
        });
    });

    // Restore active tab after page reload
    var savedTab = sessionStorage.getItem('settings_active_tab');
    if (savedTab) {
        var tabBtn = document.querySelector('#settingsTabs button[data-bs-target="' + savedTab + '"]');
        if (tabBtn) {
            bootstrap.Tab.getOrCreateInstance(tabBtn).show();
        }
    }
    
    // Hide autocomplete dropdowns when modal closes
    document.getElementById('ruleModal').addEventListener('hidden.bs.modal', function() {
        tagShips._hideAC();
        tagExcludeGroup._hideAC();
    });

    // ── Doctrine ──
    let doctrineData=JSON.parse(document.getElementById('doctrineStandardsHidden').value||'{}');
    function renderDoctrine(){
        const c=document.getElementById('doctrineContainer');c.innerHTML='';
        for(const[n,v]of Object.entries(doctrineData)){addDoctrineRow(n,v);}
    }
    function addDoctrineRow(name,val){
        const c=document.getElementById('doctrineContainer');const r=document.createElement('div');
        r.className='input-group mb-2';
        r.innerHTML=`<span class="input-group-text" style="min-width:160px;">${name}</span>
            <input type="number" class="form-control doctrine-value" data-ship="${name}" value="${val||0}" min="0" step="100000000">
            <span class="input-group-text">ISK</span>
            <button type="button" class="btn btn-outline-danger btn-rm-doctrine" data-ship="${name}"><i class="fa-solid fa-trash"></i></button>`;
        c.appendChild(r);
        r.querySelector('.doctrine-value').addEventListener('input',function(){doctrineData[this.dataset.ship]=parseInt(this.value)||0;});
        r.querySelector('.btn-rm-doctrine').addEventListener('click',function(){delete doctrineData[this.dataset.ship];r.remove();});
    }
    // Doctrine add form with autocomplete
    const doctrineAddForm = document.getElementById('doctrineAddForm');
    const doctrineShipInput = document.getElementById('doctrineShipInput');
    const doctrineShipList = document.getElementById('doctrineShipList');

    // Populate datalist from SHIP_SUGGESTIONS
    SHIP_SUGGESTIONS.forEach(name => {
        const opt = document.createElement('option');
        opt.value = name;
        doctrineShipList.appendChild(opt);
    });

    function confirmAddDoctrine() {
        const val = doctrineShipInput.value.trim();
        if (!val) { doctrineAddForm.style.display = 'none'; return; }
        const exists = Object.keys(doctrineData).some(k => k.toLowerCase() === val.toLowerCase());
        if (!exists) {
            doctrineData[val] = 0;
            addDoctrineRow(val, 0);
        }
        doctrineShipInput.value = '';
        doctrineAddForm.style.display = 'none';
    }

    document.getElementById('btnAddDoctrine').addEventListener('click', function() {
        doctrineAddForm.style.display = doctrineAddForm.style.display === 'none' ? 'flex' : 'none';
        doctrineShipInput.value = '';
        doctrineShipInput.focus();
    });
    document.getElementById('btnConfirmDoctrine').addEventListener('click', confirmAddDoctrine);
    document.getElementById('btnCancelDoctrine').addEventListener('click', function() {
        doctrineAddForm.style.display = 'none';
        doctrineShipInput.value = '';
    });
    doctrineShipInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') { confirmAddDoctrine(); }
        if (e.key === 'Escape') { doctrineAddForm.style.display = 'none'; doctrineShipInput.value = ''; }
    });
    renderDoctrine();
    document.getElementById('doctrineJsonEditor').value=JSON.stringify(doctrineData,null,2);
    document.getElementById('btnApplyDoctrineJson').addEventListener('click',function(){
        try{doctrineData=JSON.parse(document.getElementById('doctrineJsonEditor').value);document.getElementById('doctrineJsonError').style.display='none';doctrineAddForm.style.display='none';doctrineShipInput.value='';renderDoctrine();}
        catch(e){const el=document.getElementById('doctrineJsonError');el.textContent='JSON: '+e.message;el.style.display='block';}
    });

    // ── Form submit ──
    document.getElementById('settingsForm').addEventListener('submit',function(){
        document.getElementById('insurancePayoutsHidden').value=JSON.stringify(insuranceData);
        document.getElementById('compensationCapsHidden').value='{}';
        document.getElementById('doctrineStandardsHidden').value=JSON.stringify(doctrineData);
    });
});
</script>{% endverbatim %}
{% endblock %}