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

const POLLING_INTERVAL = 5000;
let updateInterval = null;
let configChanged = false;

const $content = () => $('#statistics-content');

const createStatusCard = (title, status, buttons = [], resourceStatsHtml = '', customStatusContent = null, extraClass = '') => {
    const warningStatuses = ['Обновляется', 'Обнаружено', 'Готово к установке'];
    const statusClass = warningStatuses.includes(status) ? 'text-yellow-500' : 'text-green-500';
    const statusSection = customStatusContent || `
            <p class="status-line">
                Статус: <span class="${statusClass}">${status}</span>
            </p>
        `;
    const buttonsHtml = buttons.length
        ? `<div class="button-group">${buttons.map(({ id, label, disabled, isLoading = false, loadingLabel = 'Обновление...' }) => `
                <button id="${id}" class="btn-secondary" ${disabled || isLoading ? 'disabled' : ''}>
                    ${isLoading ? loadingLabel : label}
                </button>
            `).join('')}</div>`
        : '';

    return `
        <div class="stat-card ${extraClass}">
            <h3>${title}</h3>
            ${statusSection}
            ${buttonsHtml}
            ${resourceStatsHtml} 
        </div>
    `;
};

const createResourceStatsHtml = (resources) => {
    return `
        <div class="resource-group">
            <h4>Ресурсы:</h4>
            <div class="resource-row">
                ${createResourceBadge("Домены", resources.domains.length)}
                ${createResourceBadge("ASN", resources.ASN.length)}
                ${createResourceBadge("Подсети", resources.subnets.length)}
            </div>
        </div>
    `;
};

const createResourceBadge = (title, count) => {
    return `
        <div class="resource-badge">
            <span class="resource-count small-count">${count}</span> 
            <span class="resource-title">${title}</span>
        </div>
    `;
};

async function getSubscriptionCount() {
    try {
        const subscribedResources = await JSONRPC.SubscriptionManager.getSubscribedResources();
        return (subscribedResources && subscribedResources.length) || 0;
    } catch (e) {
        console.error('Ошибка при получении subscribedResources:', e);
        return 0;
    }
}

async function getNetworkResources() {
    try {
        const resources = await JSONRPC.NetworkManager.getOutputResources();
        return {
            domains: resources.domains || [],
            ASN: resources.ASN || [],
            subnets: resources.subnets || []
        };
    } catch (e) {
        console.error('Ошибка при получении ресурсов:', e);
        return { domains: [], ASN: [], subnets: [] };
    }
}

async function renderSystemAndManagerStatus() {
    const dataHtml = [];

    const versionInfo = await JSONRPC.System.getVersionInfo();
    const availableVersion = (versionInfo && versionInfo.available) || '';
    const currentVersion = (versionInfo && versionInfo.current) || '';
    const downloadedVersion = (versionInfo && versionInfo.downloaded) || '';
    configChanged = await JSONRPC.System.isConfigChanged();
    const hasAvailableUpdate = availableVersion && availableVersion !== currentVersion;
    const isDownloaded = hasAvailableUpdate && downloadedVersion === availableVersion;
    const updateButtonDisabled = !hasAvailableUpdate || isDownloaded;
    const systemStatus = (() => {
        if (!hasAvailableUpdate) {
            return 'Нет обновлений';
        }
        if (isDownloaded) {
            return 'Готово к установке';
        }
        return 'Обнаружено';
    })();
    const versionStatusHtml = `
        <div class="status-line version-line">
            <span>Текущая версия: <span class="${hasAvailableUpdate ? 'text-yellow-500' : 'text-green-500'}">${currentVersion || '-'}</span></span><br />
            <span class="last-version">Последняя версия: <span class="${hasAvailableUpdate ? 'text-yellow-500' : 'text-green-500'}">${availableVersion || '-'}</span></span>
        </div>
        <p class="status-line ${configChanged ? 'text-yellow-500' : 'text-green-500'}">
            Конфигурация: ${configChanged ? 'изменена' : 'актуальна'}
        </p>
    `;
    const isSubUpdating = await JSONRPC.SubscriptionManager.isUpdating();
    const isNetUpdating = await JSONRPC.NetworkManager.isUpdating();
    const subCount = await getSubscriptionCount();
    const networkResources = await getNetworkResources();

    dataHtml.push(createStatusCard(
        'Обновление ПО',
        systemStatus,
        [
            {
                id: 'update-software-btn',
                label: 'Обновить',
                disabled: updateButtonDisabled
            },
            {
                id: 'restart-system-btn',
                label: 'Перезагрузить',
                loadingLabel: 'Перезагрузка...'
            },
            {
                id: 'save-config-btn',
                label: 'Сохранить настройки',
                disabled: !configChanged,
                loadingLabel: 'Сохранение...'
            }
        ],
        '',
        versionStatusHtml,
        configChanged ? 'stat-card-highlight' : ''
    ));

    const subStatsHtml = `<div class="resource-group" style="margin-top: 20px;">
                                <h4>Подписки:</h4>
                                <div class="resource-row">
                                    ${createResourceBadge("Активно", subCount)}
                                </div>
                            </div>`;
    dataHtml.push(createStatusCard(
        'Менеджер Подписок',
        isSubUpdating ? 'Обновляется' : 'Активен',
        [
            {
                id: 'update-sub-btn',
                label: 'Обновить',
                isLoading: isSubUpdating,
                loadingLabel: 'Обновление...'
            }
        ],
        subStatsHtml
    ));

    const netResourcesHtml = createResourceStatsHtml(networkResources);
    dataHtml.push(createStatusCard(
        'Менеджер Сетей',
        isNetUpdating ? 'Обновляется' : 'Активен',
        [
            {
                id: 'update-net-btn',
                label: 'Обновить',
                isLoading: isNetUpdating,
                loadingLabel: 'Обновление...'
            }
        ],
        netResourcesHtml
    ));

    $content().html(`<div class="stats-grid status-grid">${dataHtml.join('')}</div>`);

    attachEventHandlers();
}

function stopPolling() {
    if (updateInterval) {
        console.log('clear interval');
        clearInterval(updateInterval);
        updateInterval = null;
    }
}

function attachEventHandlers() {
    $('#update-sub-btn').off('click').on('click', async function () {
        const $btn = $(this);
        $btn.prop('disabled', true).text('Обновление...');

        try {
            await JSONRPC.SubscriptionManager.triggerUpdate();
            alert('Обновление подписок запущено!');
            renderSystemAndManagerStatus();
        } catch (e) {
            alert('Ошибка при запуске обновления подписок!');
            $btn.prop('disabled', false).text('Обновить');
        }
    });

    $('#update-net-btn').off('click').on('click', async function () {
        const $btn = $(this);
        $btn.prop('disabled', true).text('Обновление...');

        try {
            await JSONRPC.NetworkManager.triggerUpdate(true);
            alert('Обновление сетей запущено!');
            renderSystemAndManagerStatus();
        } catch (e) {
            alert('Ошибка при запуске обновления сетей!');
            $btn.prop('disabled', false).text('Обновить');
        }
    });

    $('#update-software-btn').off('click').on('click', async function () {
        const $btn = $(this);
        if ($btn.prop('disabled')) {
            return;
        }

        $btn.prop('disabled', true).text('Обновление...');

        try {
            await JSONRPC.System.doUpdate();
            alert('Обновление ПО запущено!');
            await renderSystemAndManagerStatus();
        } catch (e) {
            alert('Ошибка при запуске обновления ПО!');
            $btn.prop('disabled', false).text('Обновить');
        }
    });

    $('#restart-system-btn').off('click').on('click', async function () {
        const $btn = $(this);

        $btn.prop('disabled', true).text('Перезагрузка...');

        try {
            await JSONRPC.System.restart();
            alert('Перезагрузка системы инициирована!');
            setTimeout(() => {
                window.location.reload();
            }, 10000);
        } catch (e) {
            alert('Ошибка при перезагрузке системы!');
            $btn.prop('disabled', false).text('Перезагрузить');
        }
    });

    $('#save-config-btn').off('click').on('click', async function () {
        const $btn = $(this);
        if ($btn.prop('disabled')) {
            return;
        }

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

        try {
            await JSONRPC.System.saveConfig();
            alert('Конфигурация сохранена!');
            await renderSystemAndManagerStatus();
        } catch (e) {
            alert('Ошибка при сохранении конфигурации!');
            $btn.prop('disabled', false).text('Сохранить настройки');
        }
    });
}

async function mountStatisticsPage() {
    stopPolling();
    await renderSystemAndManagerStatus();
    console.log('start interval');
    updateInterval = setInterval(renderSystemAndManagerStatus, POLLING_INTERVAL);
}

export const StatisticsPage = {
    render: () => `
        <h1 class="page-title">Статистика</h1>
        <div id="statistics-content">
            Загрузка данных...
        </div>
    `,
    mount: () => {
        mountStatisticsPage();
    },
    unmount: stopPolling
};