{{define "title"}}QFS Мои конфигурации{{end}}

{{define "content"}}
<div class="space-y-4">
    <h1 class="text-2xl font-bold">Мои конфигурации</h1>

    <div id="action-buttons" class="mt-4">
        <button onclick="openCreateModal()" class="w-full sm:w-auto py-3 px-6 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium">
            + Создать новую конфигурацию
        </button>
    </div>

    <div class="mt-4 inline-flex rounded-lg border border-gray-200 overflow-hidden">
        <button id="status-active-btn" onclick="setConfigStatusMode('active')" class="px-4 py-2 text-sm font-medium bg-blue-600 text-white">
            Активные
        </button>
        <button id="status-archived-btn" onclick="setConfigStatusMode('archived')" class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-200">
            Архив
        </button>
    </div>

    <div class="max-w-md">
        <input id="configs-search" type="text" placeholder="Поиск конфигурации по названию"
               class="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
    </div>

    <div id="pricelist-badge" class="mt-4 text-sm text-gray-600 hidden">
        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            Активный прайслист: <span id="pricelist-version">-</span>
        </span>
    </div>

    <div id="configs-list">
        <div class="text-center py-8 text-gray-500">Загрузка...</div>
    </div>

    <!-- Pagination -->
    <div id="pagination" class="flex justify-between items-center mt-4 pt-4 border-t hidden">
        <span id="page-info" class="text-sm text-gray-600"></span>
        <div class="flex gap-2">
            <button onclick="prevPage()" id="btn-prev" class="px-3 py-1 border rounded text-sm disabled:opacity-50">Назад</button>
            <button onclick="nextPage()" id="btn-next" class="px-3 py-1 border rounded text-sm disabled:opacity-50">Вперед</button>
        </div>
    </div>
</div>

<!-- Modal for creating new configuration -->
<div id="create-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
        <h2 class="text-xl font-semibold mb-4">Новая конфигурация</h2>

        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Тип оборудования</label>
                <div id="config-type-buttons" class="inline-flex rounded-lg border border-gray-200 overflow-hidden w-full">
                    <button type="button" data-type="server" onclick="setCreateType('server')"
                            class="flex-1 py-2 text-sm font-medium bg-blue-600 text-white">
                        Сервер
                    </button>
                    <button type="button" data-type="storage" onclick="setCreateType('storage')"
                            class="flex-1 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-200">
                        СХД
                    </button>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Название конфигурации</label>
                <input type="text" id="opportunity-number" placeholder="Например: Сервер для проекта X"
                       class="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Код проекта</label>
                <input id="create-project-input"
                       list="create-project-options"
                       placeholder="Например: OPS-123 (Lenovo)"
                       class="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <datalist id="create-project-options"></datalist>
                <div class="mt-2 flex justify-between items-center gap-3">
                    <button type="button" onclick="clearCreateProjectInput()" class="text-sm text-gray-600 hover:text-gray-800">
                        Без проекта
                    </button>
                </div>
            </div>
        </div>

        <div class="flex justify-end space-x-3 mt-6">
            <button onclick="closeCreateModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
                Отмена
            </button>
            <button onclick="createConfig()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                Создать
            </button>
        </div>
    </div>
</div>

<!-- Modal for renaming configuration -->
<div id="rename-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
        <h2 class="text-xl font-semibold mb-4">Переименовать конфигурацию</h2>

        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Новое название</label>
                <input type="text" id="rename-input" placeholder="Введите новое название"
                       class="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <input type="hidden" id="rename-uuid">
            </div>
        </div>

        <div class="flex justify-end space-x-3 mt-6">
            <button onclick="closeRenameModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
                Отмена
            </button>
            <button onclick="renameConfig()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                Сохранить
            </button>
        </div>
    </div>
</div>

<!-- Modal for cloning configuration -->
<div id="clone-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
        <h2 class="text-xl font-semibold mb-4">Копировать конфигурацию</h2>

        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Название копии</label>
                <input type="text" id="clone-input" placeholder="Введите название"
                       class="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <input type="hidden" id="clone-uuid">
            </div>
        </div>

        <div class="flex justify-end space-x-3 mt-6">
            <button onclick="closeCloneModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
                Отмена
            </button>
            <button onclick="cloneConfig()" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
                Копировать
            </button>
        </div>
    </div>
</div>

<!-- Modal for moving configuration to another project -->
<div id="move-project-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
        <h2 class="text-xl font-semibold mb-4">Перенести в проект</h2>

        <div class="space-y-4">
            <div class="text-sm text-gray-600">
                Конфигурация: <span id="move-project-config-name" class="font-medium text-gray-900"></span>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Проект</label>
                <input id="move-project-input"
                       list="move-project-options"
                       placeholder="Например: OPS-123 (Lenovo)"
                       class="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <datalist id="move-project-options"></datalist>
                <div class="mt-2 flex justify-between items-center gap-3">
                    <button type="button" onclick="clearMoveProjectInput()" class="text-sm text-gray-600 hover:text-gray-800">
                        Без проекта
                    </button>
                </div>
                <input type="hidden" id="move-project-uuid">
            </div>
        </div>

        <div class="flex justify-end space-x-3 mt-6">
            <button onclick="closeMoveProjectModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
                Отмена
            </button>
            <button onclick="confirmMoveProject()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                Перенести
            </button>
        </div>
    </div>
</div>

<!-- Modal for creating project during move -->
<div id="create-project-on-move-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
        <h2 class="text-xl font-semibold mb-3">Проект не найден</h2>
        <p class="text-sm text-gray-600 mb-4">Проект с кодом "<span id="create-project-on-move-code" class="font-medium text-gray-900"></span>" не найден. <span id="create-project-on-move-description">Создать и привязать конфигурацию?</span></p>
        <div class="mb-4">
            <label for="create-project-on-move-name" class="block text-sm font-medium text-gray-700 mb-1">Название проекта</label>
            <input id="create-project-on-move-name" type="text" placeholder="Например: Инфраструктура для OPS-123"
                   class="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="create-project-on-move-variant" class="block text-sm font-medium text-gray-700 mb-1">Вариант (необязательно)</label>
            <input id="create-project-on-move-variant" type="text" placeholder="Например: Lenovo"
                   class="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>
        <div class="flex justify-end space-x-3">
            <button onclick="closeCreateProjectOnMoveModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">Отмена</button>
            <button id="create-project-on-move-confirm-btn" onclick="confirmCreateProjectOnMove()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Создать и привязать</button>
        </div>
    </div>
</div>

<script>
// Pagination state
let currentPage = 1;
let totalPages = 1;
let perPage = 20;
let configStatusMode = 'active';
let configsSearch = '';
let projectsCache = [];
let projectNameByUUID = {};
let projectCodeByUUID = {};
let projectVariantByUUID = {};
let configProjectUUIDByUUID = {};
let configNameByUUID = {};
let pendingMoveConfigUUID = '';
let pendingMoveProjectCode = '';
let pendingCreateConfigName = '';
let pendingCreateProjectCode = '';

function renderConfigs(configs) {
    const emptyText = configStatusMode === 'archived'
        ? 'Архив пуст'
        : 'Нет сохраненных конфигураций';
    if (configs.length === 0) {
        document.getElementById('configs-list').innerHTML =
            '<div class="bg-white rounded-lg shadow p-8 text-center text-gray-500">' + emptyText + '</div>';
        return;
    }

    let html = '<div class="bg-white rounded-lg shadow overflow-hidden"><table class="w-full">';
    html += '<thead class="bg-gray-50"><tr>';
    html += '<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Дата</th>';
    html += '<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Проект</th>';
    html += '<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Название</th>';
    html += '<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Автор</th>';
    html += '<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Цена (за 1 шт)</th>';
    html += '<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Кол-во</th>';
    html += '<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Сумма</th>';
    html += '<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Действия</th>';
    html += '</tr></thead><tbody class="divide-y">';

    configs.forEach(c => {
        const date = new Date(c.created_at).toLocaleDateString('ru-RU');
        const total = c.total_price ? '$' + c.total_price.toLocaleString('ru-RU', {minimumFractionDigits: 2}) : '—';
        const serverCount = c.server_count ? c.server_count : 1;
        const author = c.owner_username || (c.user && c.user.username) || '—';
        const projectName = c.project_uuid && projectNameByUUID[c.project_uuid]
            ? projectNameByUUID[c.project_uuid]
            : 'Без проекта';

        // Calculate price per unit (total / server count)
        let pricePerUnit = '—';
        if (c.total_price && serverCount > 0) {
            const unitPrice = c.total_price / serverCount;
            pricePerUnit = '$' + unitPrice.toLocaleString('ru-RU', {minimumFractionDigits: 2});
        }

        html += '<tr class="hover:bg-gray-50">';
        html += '<td class="px-4 py-3 text-sm text-gray-500">' + date + '</td>';
        if (configStatusMode === 'archived') {
            if (c.project_uuid) {
                html += '<td class="px-4 py-3 text-sm"><a href="/projects/' + c.project_uuid + '" class="text-blue-600 hover:text-blue-800 hover:underline">' + escapeHtml(projectName) + '</a></td>';
            } else {
                html += '<td class="px-4 py-3 text-sm text-gray-500">' + escapeHtml(projectName) + '</td>';
            }
        } else {
            if (c.project_uuid) {
                html += '<td class="px-4 py-3 text-sm"><a href="/projects/' + c.project_uuid + '" class="text-blue-600 hover:text-blue-800 hover:underline">' + escapeHtml(projectName) + '</a></td>';
            } else {
                html += '<td class="px-4 py-3 text-sm text-gray-700">' + escapeHtml(projectName) + '</td>';
            }
        }
        const article = c.article ? escapeHtml(c.article) : '';
        const serverModel = c.server_model ? escapeHtml(c.server_model) : '';
        const subtitle = article || serverModel;
        if (configStatusMode === 'archived') {
            html += '<td class="px-4 py-3 text-sm font-medium text-gray-700">';
            html += '<div>' + escapeHtml(c.name) + '</div>';
            if (subtitle) {
                html += '<div class="text-xs text-gray-500">' + subtitle + '</div>';
            }
            html += '</td>';
        } else {
            html += '<td class="px-4 py-3 text-sm font-medium">';
            html += '<a href="/configurator?uuid=' + c.uuid + '" class="text-blue-600 hover:text-blue-800 hover:underline">' + escapeHtml(c.name) + '</a>';
            if (subtitle) {
                html += '<div class="text-xs text-gray-500">' + subtitle + '</div>';
            }
            html += '</td>';
        }
        html += '<td class="px-4 py-3 text-sm text-gray-500">' + escapeHtml(author) + '</td>';
        html += '<td class="px-4 py-3 text-sm text-gray-500">' + pricePerUnit + '</td>';
        html += '<td class="px-4 py-3 text-sm text-gray-500">' + serverCount + '</td>';
        html += '<td class="px-4 py-3 text-sm text-right">' + total + '</td>';
        html += '<td class="px-4 py-3 text-sm text-right space-x-2">';
        if (configStatusMode === 'archived') {
            html += '<button onclick="reactivateConfig(\'' + c.uuid + '\')" class="text-emerald-600 hover:text-emerald-800" title="Восстановить">';
            html += '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">';
            html += '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>';
            html += '</svg>';
            html += '</button>';
        } else {
            html += '<button onclick="openMoveProjectModal(\'' + c.uuid + '\', \'' + escapeHtml(c.name).replace(/'/g, "\\'") + '\', \'' + (c.project_uuid || '') + '\')" class="text-indigo-600 hover:text-indigo-800" title="Перенести в проект">';
            html += '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">';
            html += '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0l-3 3m3-3l3 3m7 1v12m0 0l-3-3m3 3l3-3"></path>';
            html += '</svg>';
            html += '</button>';
            html += '<button onclick="openCloneModal(\'' + c.uuid + '\', \'' + escapeHtml(c.name).replace(/'/g, "\\'") + '\')" class="text-green-600 hover:text-green-800" title="Копировать">';
            html += '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">';
            html += '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>';
            html += '</svg>';
            html += '</button>';
            html += '<button onclick="openRenameModal(\'' + c.uuid + '\', \'' + escapeHtml(c.name).replace(/'/g, "\\'") + '\')" class="text-blue-600 hover:text-blue-800" title="Переименовать">';
            html += '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">';
            html += '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>';
            html += '</svg>';
            html += '</button>';
            html += '<button onclick="deleteConfig(\'' + c.uuid + '\')" class="text-red-600 hover:text-red-800" title="В архив">';
            html += '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">';
            html += '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>';
            html += '</svg>';
            html += '</button>';
        }
        html += '</td></tr>';
    });

    html += '</tbody></table></div>';
    document.getElementById('configs-list').innerHTML = html;
}

function projectDisplayKey(project) {
    const code = (project.code || '').trim();
    const variant = (project.variant || '').trim();
    if (!code) return '';
    return variant ? (code + ' (' + variant + ')') : code;
}

function findProjectByInput(input) {
    const trimmed = (input || '').trim().toLowerCase();
    if (!trimmed) return null;

    const directMatch = projectsCache.find(p => projectDisplayKey(p).toLowerCase() === trimmed);
    if (directMatch) return directMatch;

    const codeMatches = projectsCache.filter(p => (p.code || '').toLowerCase() === trimmed);
    if (codeMatches.length === 1) {
        return codeMatches[0];
    }
    if (codeMatches.length > 1) {
        alert('У проекта несколько вариантов. Укажите вариант в формате "CODE (variant)".');
    }
    return null;
}

async function resolveUniqueConfigName(baseName, projectUUID, excludeUUID) {
    const cleanedBase = (baseName || '').trim();
    if (!cleanedBase) {
        return {error: 'Введите название'};
    }

    let configs = [];
    if (projectUUID) {
        const resp = await fetch('/api/projects/' + projectUUID + '/configs?status=all');
        if (!resp.ok) {
            return {error: 'Не удалось проверить конфигурации проекта'};
        }
        const data = await resp.json().catch(() => ({}));
        configs = Array.isArray(data.configurations) ? data.configurations : [];
    } else {
        configs = Object.keys(configProjectUUIDByUUID)
            .filter(uuid => !configProjectUUIDByUUID[uuid])
            .map(uuid => ({uuid: uuid, name: configNameByUUID[uuid] || ''}));
    }

    const used = new Set(
        configs
            .filter(cfg => !excludeUUID || cfg.uuid !== excludeUUID)
            .map(cfg => (cfg.name || '').trim().toLowerCase())
    );

    if (!used.has(cleanedBase.toLowerCase())) {
        return {name: cleanedBase, changed: false};
    }

    let candidate = cleanedBase + '_копия';
    let suffix = 2;
    while (used.has(candidate.toLowerCase())) {
        candidate = cleanedBase + '_копия' + suffix;
        suffix++;
    }
    return {name: candidate, changed: true};
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

async function deleteConfig(uuid) {
    if (!confirm('Переместить конфигурацию в архив?')) return;
    await fetch('/api/configs/' + uuid, {
        method: 'DELETE'
    });
    loadConfigs();
}

async function reactivateConfig(uuid) {
    if (!confirm('Восстановить конфигурацию из архива?')) return;
    const resp = await fetch('/api/configs/' + uuid + '/reactivate', {
        method: 'POST'
    });
    if (!resp.ok) {
        alert('Не удалось восстановить конфигурацию');
        return;
    }
    loadConfigs();
}

function openRenameModal(uuid, currentName) {
    document.getElementById('rename-uuid').value = uuid;
    document.getElementById('rename-input').value = currentName;
    document.getElementById('rename-modal').classList.remove('hidden');
    document.getElementById('rename-modal').classList.add('flex');
    document.getElementById('rename-input').focus();
    document.getElementById('rename-input').select();
}

function closeRenameModal() {
    document.getElementById('rename-modal').classList.add('hidden');
    document.getElementById('rename-modal').classList.remove('flex');
}

async function renameConfig() {
    const uuid = document.getElementById('rename-uuid').value;
    const rawName = document.getElementById('rename-input').value.trim();

    if (!rawName) {
        alert('Введите название');
        return;
    }

    try {
        const result = await resolveUniqueConfigName(rawName, configProjectUUIDByUUID[uuid] || '', uuid);
        if (result.error) {
            alert(result.error);
            return;
        }
        const name = result.name;
        if (result.changed) {
            document.getElementById('rename-input').value = name;
        }
        const resp = await fetch('/api/configs/' + uuid + '/rename', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name: name })
        });

        if (!resp.ok) {
            const err = await resp.json();
            alert('Ошибка: ' + (err.error || 'Не удалось переименовать'));
            return;
        }

        closeRenameModal();
        loadConfigs();
    } catch(e) {
        alert('Ошибка переименования');
    }
}

function openCloneModal(uuid, currentName) {
    document.getElementById('clone-uuid').value = uuid;
    document.getElementById('clone-input').value = currentName + '_копия';
    document.getElementById('clone-modal').classList.remove('hidden');
    document.getElementById('clone-modal').classList.add('flex');
    document.getElementById('clone-input').focus();
    document.getElementById('clone-input').select();
}

function closeCloneModal() {
    document.getElementById('clone-modal').classList.add('hidden');
    document.getElementById('clone-modal').classList.remove('flex');
}

async function cloneConfig() {
    const uuid = document.getElementById('clone-uuid').value;
    const rawName = document.getElementById('clone-input').value.trim();

    if (!rawName) {
        alert('Введите название');
        return;
    }

    try {
        const result = await resolveUniqueConfigName(rawName, configProjectUUIDByUUID[uuid] || '', uuid);
        if (result.error) {
            alert(result.error);
            return;
        }
        const name = result.name;
        if (result.changed) {
            document.getElementById('clone-input').value = name;
        }
        const resp = await fetch('/api/configs/' + uuid + '/clone', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name: name })
        });

        if (!resp.ok) {
            const err = await resp.json();
            alert('Ошибка: ' + (err.error || 'Не удалось скопировать'));
            return;
        }

        closeCloneModal();
        loadConfigs();
    } catch(e) {
        alert('Ошибка копирования');
    }
}

let createConfigType = 'server';
let _cfgSettings = null;

async function loadCfgSettings() {
    if (_cfgSettings) return _cfgSettings;
    try {
        const r = await fetch('/api/configurator-settings');
        if (r.ok) _cfgSettings = await r.json();
    } catch(e) { /* use hardcoded fallback */ }
    return _cfgSettings;
}

function renderConfigTypeButtons(types) {
    if (!types || !types.length) return;
    const el = document.getElementById('config-type-buttons');
    if (!el) return;
    el.innerHTML = types
        .sort((a, b) => (a.display_order || 0) - (b.display_order || 0))
        .map((t, i) => {
            const borderClass = i > 0 ? 'border-l border-gray-200' : '';
            return `<button type="button" data-type="${t.code}" onclick="setCreateType('${t.code}')"
                class="flex-1 py-2 text-sm font-medium ${borderClass} bg-white text-gray-700 hover:bg-gray-50">
                ${t.name_ru || t.code}
            </button>`;
        }).join('');
    // activate first type
    const firstCode = types[0].code;
    createConfigType = firstCode;
    setCreateType(firstCode);
}

function setCreateType(type) {
    createConfigType = type;
    document.querySelectorAll('#config-type-buttons button').forEach(btn => {
        const active = btn.dataset.type === type;
        btn.className = 'flex-1 py-2 text-sm font-medium ' +
            (active
                ? 'bg-blue-600 text-white border-l border-gray-200'
                : 'bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-200');
    });
}

function openCreateModal() {
    createConfigType = 'server';
    setCreateType('server');
    loadCfgSettings().then(s => renderConfigTypeButtons(s && s.config_types));
    document.getElementById('opportunity-number').value = '';
    document.getElementById('create-project-input').value = '';
    document.getElementById('create-modal').classList.remove('hidden');
    document.getElementById('create-modal').classList.add('flex');
    document.getElementById('opportunity-number').focus();
}

function closeCreateModal() {
    document.getElementById('create-modal').classList.add('hidden');
    document.getElementById('create-modal').classList.remove('flex');
}

async function createConfig() {
    const name = document.getElementById('opportunity-number').value.trim();

    if (!name) {
        alert('Введите номер Opportunity');
        return;
    }

    const projectCode = document.getElementById('create-project-input').value.trim();
    let projectUUID = '';

    if (projectCode) {
        const matchedProject = findProjectByInput(projectCode);
        if (matchedProject) {
            if (!matchedProject.is_active) {
                alert('Проект с таким кодом находится в архиве. Восстановите его или выберите другой.');
                return;
            }
            projectUUID = matchedProject.uuid;
        } else {
            pendingCreateConfigName = name;
            pendingCreateProjectCode = projectCode;
            openCreateProjectOnCreateModal(projectCode);
            return;
        }
    }

    await createConfigWithProject(name, projectUUID);
}

async function createConfigWithProject(name, projectUUID) {
    try {
        const resp = await fetch('/api/configs', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: name,
                items: [],
                notes: '',
                server_count: 1,
                project_uuid: projectUUID || null,
                config_type: createConfigType
            })
        });

        const config = await resp.json();
        if (!resp.ok) {
            alert('Ошибка: ' + (config.error || 'Не удалось создать'));
            return false;
        }

        window.location.href = '/configurator?uuid=' + config.uuid;
        return true;
    } catch(e) {
        alert('Ошибка создания конфигурации');
        return false;
    }
}

function openMoveProjectModal(uuid, configName, currentProjectUUID) {
    document.getElementById('move-project-uuid').value = uuid;
    document.getElementById('move-project-config-name').textContent = configName;

    const input = document.getElementById('move-project-input');
    const options = document.getElementById('move-project-options');
    options.innerHTML = '';
    projectsCache.forEach(project => {
        if (!project.is_active) return;
        const option = document.createElement('option');
        option.value = projectDisplayKey(project);
        option.label = project.name || '';
        options.appendChild(option);
    });

    if (currentProjectUUID && projectCodeByUUID[currentProjectUUID]) {
        const variant = projectVariantByUUID[currentProjectUUID] || '';
        input.value = variant ? (projectCodeByUUID[currentProjectUUID] + ' (' + variant + ')') : projectCodeByUUID[currentProjectUUID];
    } else {
        input.value = '';
    }

    document.getElementById('move-project-modal').classList.remove('hidden');
    document.getElementById('move-project-modal').classList.add('flex');
}

function closeMoveProjectModal() {
    document.getElementById('move-project-modal').classList.add('hidden');
    document.getElementById('move-project-modal').classList.remove('flex');
}

async function confirmMoveProject() {
    const uuid = document.getElementById('move-project-uuid').value;
    const projectCode = document.getElementById('move-project-input').value.trim();

    if (!uuid) return;
    let projectUUID = '';

    if (projectCode) {
        const matchedProject = findProjectByInput(projectCode);
        if (matchedProject) {
            if (!matchedProject.is_active) {
                alert('Проект с таким кодом находится в архиве. Восстановите его или выберите другой.');
                return;
            }
            projectUUID = matchedProject.uuid;
        } else {
            pendingMoveConfigUUID = uuid;
            pendingMoveProjectCode = projectCode;
            openCreateProjectOnMoveModal(projectCode);
            return;
        }
    }

    await moveConfigToProject(uuid, projectUUID);
}

function clearMoveProjectInput() {
    document.getElementById('move-project-input').value = '';
}

function clearCreateProjectInput() {
    document.getElementById('create-project-input').value = '';
}

function openCreateProjectOnMoveModal(projectName) {
    document.getElementById('create-project-on-move-code').textContent = projectName;
    document.getElementById('create-project-on-move-name').value = projectName;
    document.getElementById('create-project-on-move-variant').value = '';
    document.getElementById('create-project-on-move-description').textContent = 'Создать и привязать конфигурацию?';
    document.getElementById('create-project-on-move-confirm-btn').textContent = 'Создать и привязать';
    document.getElementById('create-project-on-move-modal').classList.remove('hidden');
    document.getElementById('create-project-on-move-modal').classList.add('flex');
}

function openCreateProjectOnCreateModal(projectName) {
    document.getElementById('create-project-on-move-code').textContent = projectName;
    document.getElementById('create-project-on-move-name').value = projectName;
    document.getElementById('create-project-on-move-variant').value = '';
    document.getElementById('create-project-on-move-description').textContent = 'Создать и использовать для новой конфигурации?';
    document.getElementById('create-project-on-move-confirm-btn').textContent = 'Создать и использовать';
    document.getElementById('create-project-on-move-modal').classList.remove('hidden');
    document.getElementById('create-project-on-move-modal').classList.add('flex');
}

function closeCreateProjectOnMoveModal() {
    document.getElementById('create-project-on-move-modal').classList.add('hidden');
    document.getElementById('create-project-on-move-modal').classList.remove('flex');
    pendingMoveConfigUUID = '';
    pendingMoveProjectCode = '';
    pendingCreateConfigName = '';
    pendingCreateProjectCode = '';
    document.getElementById('create-project-on-move-name').value = '';
    document.getElementById('create-project-on-move-variant').value = '';
}

async function confirmCreateProjectOnMove() {
    const projectNameInput = document.getElementById('create-project-on-move-name');
    const projectVariantInput = document.getElementById('create-project-on-move-variant');
    const projectName = (projectNameInput.value || '').trim();
    const projectVariant = (projectVariantInput.value || '').trim();
    if (pendingCreateConfigName && pendingCreateProjectCode) {
        const configName = pendingCreateConfigName;
        const projectCode = pendingCreateProjectCode;
        try {
            const createResp = await fetch('/api/projects', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ name: projectName, code: projectCode, variant: projectVariant })
            });
            if (!createResp.ok) {
                if (createResp.status === 409) {
                    alert('Проект с таким кодом и вариантом уже существует');
                    return;
                }
                const err = await createResp.json();
                alert('Не удалось создать проект: ' + (err.error || 'ошибка'));
                return;
            }

            const newProject = await createResp.json();
            pendingCreateConfigName = '';
            pendingCreateProjectCode = '';
            await loadProjectsForConfigUI();
            const created = await createConfigWithProject(configName, newProject.uuid);
            if (created) {
                closeCreateProjectOnMoveModal();
            } else {
                closeCreateProjectOnMoveModal();
                document.getElementById('create-project-input').value = projectCode;
            }
        } catch (e) {
            alert('Ошибка создания проекта');
        }
        return;
    }

    const configUUID = pendingMoveConfigUUID;
    const projectCode = pendingMoveProjectCode;
    if (!configUUID || !projectCode) {
        closeCreateProjectOnMoveModal();
        return;
    }

    try {
        const createResp = await fetch('/api/projects', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ name: projectName, code: projectCode, variant: projectVariant })
        });
        if (!createResp.ok) {
            if (createResp.status === 409) {
                alert('Проект с таким кодом и вариантом уже существует');
                return;
            }
            const err = await createResp.json();
            alert('Не удалось создать проект: ' + (err.error || 'ошибка'));
            return;
        }

        const newProject = await createResp.json();
        pendingMoveConfigUUID = '';
        pendingMoveProjectCode = '';
        await loadProjectsForConfigUI();
        document.getElementById('move-project-input').value = projectCode;
        const moved = await moveConfigToProject(configUUID, newProject.uuid);
        if (moved) {
            closeCreateProjectOnMoveModal();
        } else {
            closeCreateProjectOnMoveModal();
        }
    } catch (e) {
        alert('Ошибка создания проекта');
    }
}

async function moveConfigToProject(uuid, projectUUID) {
    try {
        const resp = await fetch('/api/configs/' + uuid + '/project', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ project_uuid: projectUUID })
        });
        if (!resp.ok) {
            const err = await resp.json();
            alert('Не удалось перенести конфигурацию: ' + (err.error || 'ошибка'));
            return false;
        }
        closeMoveProjectModal();
        await loadProjectsForConfigUI();
        await loadConfigs();
        return true;
    } catch (e) {
        alert('Ошибка переноса конфигурации');
        return false;
    }
}

// Close modal on outside click
document.getElementById('create-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeCreateModal();
    }
});

document.getElementById('rename-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeRenameModal();
    }
});

document.getElementById('clone-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeCloneModal();
    }
});

document.getElementById('move-project-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeMoveProjectModal();
    }
});

document.getElementById('create-project-on-move-modal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeCreateProjectOnMoveModal();
    }
});

// Close modal on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeCreateModal();
        closeRenameModal();
        closeCloneModal();
        closeMoveProjectModal();
        closeCreateProjectOnMoveModal();
    }
});

// Submit rename on Enter key
document.getElementById('rename-input').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        renameConfig();
    }
});

// Submit clone on Enter key
document.getElementById('clone-input').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        cloneConfig();
    }
});

function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        loadConfigs();
    }
}

function nextPage() {
    if (currentPage < totalPages) {
        currentPage++;
        loadConfigs();
    }
}

function updatePagination(total) {
    totalPages = Math.max(1, Math.ceil(total / perPage));
    document.getElementById('page-info').textContent =
        'Страница ' + currentPage + ' из ' + totalPages + ' (всего: ' + total + ')';
    document.getElementById('btn-prev').disabled = currentPage <= 1;
    document.getElementById('btn-next').disabled = currentPage >= totalPages;
    if (total <= perPage) {
        document.getElementById('pagination').classList.add('hidden');
    } else {
        document.getElementById('pagination').classList.remove('hidden');
    }
}

function setConfigStatusMode(mode) {
    if (mode !== 'active' && mode !== 'archived') return;
    configStatusMode = mode;
    currentPage = 1;
    applyStatusModeUI();
    loadConfigs();
}

function applyStatusModeUI() {
    const activeBtn = document.getElementById('status-active-btn');
    const archivedBtn = document.getElementById('status-archived-btn');
    const actionButtons = document.getElementById('action-buttons');

    if (configStatusMode === 'archived') {
        activeBtn.className = 'px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50';
        archivedBtn.className = 'px-4 py-2 text-sm font-medium bg-blue-600 text-white border-l border-gray-200';
        actionButtons.classList.add('hidden');
    } else {
        activeBtn.className = 'px-4 py-2 text-sm font-medium bg-blue-600 text-white';
        archivedBtn.className = 'px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 border-l border-gray-200';
        actionButtons.classList.remove('hidden');
    }
}

// Load configs with pagination
async function loadConfigs() {
    try {
        const resp = await fetch('/api/configs?page=' + currentPage + '&per_page=' + perPage + '&status=' + configStatusMode + '&search=' + encodeURIComponent(configsSearch));

        if (!resp.ok) {
            document.getElementById('configs-list').innerHTML =
                '<div class="bg-white rounded-lg shadow p-8 text-center text-red-600">Ошибка загрузки</div>';
            return;
        }

        const data = await resp.json();
        configProjectUUIDByUUID = {};
        configNameByUUID = {};
        (data.configurations || []).forEach(cfg => {
            configProjectUUIDByUUID[cfg.uuid] = cfg.project_uuid || '';
            configNameByUUID[cfg.uuid] = cfg.name || '';
        });
        renderConfigs(data.configurations || []);
        updatePagination(data.total);
    } catch(e) {
        document.getElementById('configs-list').innerHTML =
            '<div class="bg-white rounded-lg shadow p-8 text-center text-red-600">Ошибка загрузки</div>';
    }
}

document.addEventListener('DOMContentLoaded', function() {
    applyStatusModeUI();
    loadProjectsForConfigUI().then(loadConfigs);

    // Load latest pricelist version for badge
    loadLatestPricelistVersion();

    // Listen for sync completion events from navbar
    window.addEventListener('sync-completed', function(e) {
        // Reset pagination and reload configurations list
        currentPage = 1;
        loadConfigs();
    });
});

document.getElementById('configs-search').addEventListener('input', function(e) {
    configsSearch = (e.target.value || '').trim();
    currentPage = 1;
    loadConfigs();
});

async function loadProjectsForConfigUI() {
    projectsCache = [];
    projectNameByUUID = {};
    projectCodeByUUID = {};
    projectVariantByUUID = {};
    try {
        // Use /api/projects/all to get all projects without pagination
        const resp = await fetch('/api/projects/all');
        if (!resp.ok) return;
        const data = await resp.json();
        // data is now a simple array of {uuid, name} objects
        const allProjects = Array.isArray(data) ? data : (data.projects || []);

        // For compatibility with rest of code, populate projectsCache but mainly use projectNameByUUID
        projectsCache = allProjects;

        allProjects.forEach(project => {
            const variant = (project.variant || '').trim();
            const baseName = project.name || '';
            projectNameByUUID[project.uuid] = variant ? (baseName + ' (' + variant + ')') : baseName;
            projectCodeByUUID[project.uuid] = project.code || '';
            projectVariantByUUID[project.uuid] = project.variant || '';
        });

        const createOptions = document.getElementById('create-project-options');
        if (createOptions) {
            createOptions.innerHTML = '';
            projectsCache.forEach(project => {
                if (!project.is_active) return;
                const option = document.createElement('option');
                option.value = projectDisplayKey(project);
                option.label = project.name || '';
                createOptions.appendChild(option);
            });
        }
    } catch (e) {
        // keep default behavior without project selection data
    }
}

async function loadLatestPricelistVersion() {
    try {
        const resp = await fetch('/api/pricelists/latest');
        if (resp.ok) {
            const pricelist = await resp.json();
            document.getElementById('pricelist-version').textContent = pricelist.version;
            document.getElementById('pricelist-badge').classList.remove('hidden');
        } else if (resp.status === 404) {
            // No active pricelist (normal in offline mode or when not synced)
            document.getElementById('pricelist-version').textContent = 'Не загружен';
            document.getElementById('pricelist-badge').classList.remove('hidden');
            document.getElementById('pricelist-badge').classList.add('bg-gray-100', 'text-gray-600');
        } else {
            // Real error
            document.getElementById('pricelist-version').textContent = 'Ошибка загрузки';
            document.getElementById('pricelist-badge').classList.remove('hidden');
            document.getElementById('pricelist-badge').classList.add('bg-red-100', 'text-red-800');
        }
    } catch(e) {
        // Network error or other exception
        console.error('Failed to load pricelist version:', e);
        document.getElementById('pricelist-version').textContent = 'Не доступен';
        document.getElementById('pricelist-badge').classList.remove('hidden');
        document.getElementById('pricelist-badge').classList.add('bg-gray-100', 'text-gray-600');
    }
}
</script>
{{end}}

{{template "base" .}}