import $ from 'jquery';
import { JSONRPC } from '@/json-rpc.js';

// --- Глобальное состояние для страницы ---
let availableResources = {};
let subscribedKeys = [];

/** Загружает все необходимые данные для страницы */
async function loadSubscriptionData() {
    try {
        subscribedKeys = await JSONRPC.SubscriptionManager.getSubscribedResources();
        availableResources = await JSONRPC.SubscriptionManager.getAvailableResources();

    } catch (e) {
        console.error("Ошибка при загрузке данных подписок:", e);
        availableResources = {};
        subscribedKeys = [];
        return false;
    }
    return true;
}

/** Рендеринг HTML списка */
function renderSubscriptionList() {
    const $listContainer = $('#subscription-list-container');
    const availableKeys = Object.keys(availableResources).sort();

    if (availableKeys.length === 0) {
        $listContainer.html('<p>Нет доступных ресурсов для подписки.</p>');
        return;
    }

    let listHtml = availableKeys.map(key => {
        const details = availableResources[key];
        const isChecked = subscribedKeys.includes(key);

        // 🔥 Обновлено: Используем description и меняем структуру
        const description = details.description || 'Нет описания';

        // Формируем строку с деталями (теперь на новой строке)
        const detailText = `
            Доменов: ${details.domains ? details.domains.length : 0}, 
            ASN: ${details.ASN ? details.ASN.length : 0}, 
            Подсетей: ${details.subnets ? details.subnets.length : 0}
        `;

        return `
            <li class="subscription-item">
                <label>
                    <input type="checkbox" class="subscription-checkbox" value="${key}" ${isChecked ? 'checked' : ''}>
                    <div class="resource-info">
                        <div class="resource-main-line">
                            <span class="resource-description">${description}</span> 
                            <span class="resource-key">(${key})</span>
                        </div>
                        <div class="resource-details">${detailText}</div>
                    </div>
                </label>
            </li>
        `;
    }).join('');

    const html = `
        <ul class="subscription-list">${listHtml}</ul>
        <button id="save-subscriptions-btn" class="btn-primary" style="width: 250px; margin-top: 30px;">Сохранить</button>
        <div id="subscription-status-message" class="error-message" style="display: none;"></div>
    `;

    $listContainer.html(html);
    attachEventHandlers();
}

/** Обработчик кнопки "Сохранить" (остается без изменений) */
function attachEventHandlers() {
    $('#save-subscriptions-btn').on('click', async function() {
        const $btn = $(this);
        const $message = $('#subscription-status-message');
        $message.hide().removeClass('success-message').addClass('error-message');

        const newSubscribedKeys = $('.subscription-checkbox:checked').map(function() {
            return $(this).val();
        }).get();

        $btn.prop('disabled', true).text('Сохранение...');

        try {
            await JSONRPC.SubscriptionManager.setSubscribedResources(newSubscribedKeys);

            subscribedKeys = newSubscribedKeys;

            $message.text('Настройки подписок успешно сохранены!').addClass('success-message').show();

        } catch (e) {
            console.error('Ошибка сохранения подписок:', e);
            $message.text('Ошибка при сохранении подписок.').show();
        } finally {
            $btn.prop('disabled', false).text('Сохранить');
            setTimeout(() => $message.fadeOut(), 5000);
        }
    });
}

// ... (SubscriptionsPage, loadSubscriptionData остаются без изменений) ...

export const SubscriptionsPage = {
    render: () => {
        return `
            <h1 class="page-title">Управление Подписками</h1>
            <div id="subscription-list-container">
                <p>Загрузка доступных ресурсов...</p>
            </div>
        `;
    },
    mount: async () => {
        const success = await loadSubscriptionData();
        if (success) {
            renderSubscriptionList();
        } else {
            $('#subscription-list-container').html('<p class="error-message">Не удалось загрузить данные. Проверьте соединение с сервером.</p>');
        }
    },
    unmount: () => {
        availableResources = {};
        subscribedKeys = [];
    }
};