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

let availableComponents = [];
let enabledComponents = [];

function getShortName(fullName) {
    const lastDotIndex = fullName.lastIndexOf('.');
    if (lastDotIndex > -1 && lastDotIndex < fullName.length - 1) {
        return fullName.substring(lastDotIndex + 1);
    }
    return fullName;
}

async function loadComponentData() {
    try {
        enabledComponents = await JSONRPC.System.getEnabledComponents();
        availableComponents = await JSONRPC.System.getAvailableComponents();
        availableComponents.sort();
    } catch (e) {
        console.error('Ошибка при загрузке данных компонентов:', e);
        availableComponents = [];
        enabledComponents = [];
        return false;
    }
    return true;
}

function renderComponentList() {
    const $listContainer = $('#component-list-container');

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

    const listHtml = availableComponents.map(fullName => {
        const shortName = getShortName(fullName);
        const isChecked = enabledComponents.includes(fullName);

        return `
            <li class="subscription-item">
                <label>
                    <input type="checkbox" class="component-checkbox" value="${fullName}" ${isChecked ? 'checked' : ''}>
                    <span class="resource-key">${shortName}</span> 
                    <span class="resource-details" style="margin-left: 10px;">(${fullName})</span> 
                </label>
            </li>
        `;
    }).join('');

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

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

function attachEventHandlers() {
    $('#save-components-btn').on('click', async function () {
        const $btn = $(this);
        const $message = $('#component-status-message');
        $message.hide().removeClass('success-message').addClass('error-message');

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

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

        try {
            await JSONRPC.System.setEnabledComponents(newEnabledComponents);
            enabledComponents = newEnabledComponents;
            $message.text('Настройки компонентов успешно сохранены! Перезагрузка...').addClass('success-message').show();
            window.setTimeout(() => {
                window.location.reload();
            }, 800);
        } catch (e) {
            console.error('Ошибка сохранения компонентов:', e);
            $message.text('Ошибка при сохранении компонентов.').show();
        } finally {
            $btn.prop('disabled', false).text('Сохранить');
            setTimeout(() => {
                if ($message.hasClass('success-message')) {
                    return;
                }
                $message.fadeOut();
            }, 5000);
        }
    });
}

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