import $ from 'jquery';
import { handleLogin, handleLogout } from './auth.js';
import { setAuthenticated } from './app.js';
import { renderPage, getFilteredMenuItems } from './router.js';
import { JSONRPC } from '@/json-rpc.js';

let configIndicatorInterval = null;


// Функция рендеринга формы авторизации
export function renderLoginForm() {
    const html = `
        <div id="login-container" class="full-screen flex-center">
            <div class="card" style="width: 380px;">
                <h2 style="margin-top: 0; color: var(--color-text);">Авторизация</h2>
                <form id="login-form">
                    <div class="form-group">
                        <label for="password-input">Пароль</label>
                        <input type="password" id="password-input" class="form-control" placeholder="Введите пароль">
                    </div>
                    <div class="form-group" style="display: flex; align-items: center;">
                        <input type="checkbox" id="remember-me" style="margin-right: 10px;">
                        <label for="remember-me" style="margin-bottom: 0; font-weight: normal; cursor: pointer;">Запомнить меня</label>
                    </div>

                    <button type="submit" id="login-button" class="btn-primary">Войти</button>
                    <div id="login-error" class="error-message" style="display: none;"></div>
                </form>
            </div>
        </div>
    `;

    $('#app').html(html);

    // Прикрепление событий jQuery
    $('#login-form').on('submit', async function(e) {
        e.preventDefault();

        const $button = $('#login-button');
        const $error = $('#login-error');
        const password = $('#password-input').val();
        // Получение флага rememberMe
        const rememberMe = $('#remember-me').prop('checked');

        $error.hide().text('');
        $button.prop('disabled', true).text('Вход...');

        try {
            // Передача флага rememberMe
            const success = await handleLogin(password, rememberMe);
            if (success) {
                setAuthenticated(true);
            } else {
                $error.text('Ошибка входа: Неверный пароль.').show();
            }
        } catch (err) {
            $error.text('Произошла ошибка при попытке входа.').show();
        } finally {
            $button.prop('disabled', false).text('Войти');
        }
    });
}


// Функция рендеринга рабочего стола (Dashboard)
async function fetchConfigChanged() {
    try {
        return await JSONRPC.System.isConfigChanged();
    } catch (error) {
        console.error('Ошибка при проверке изменения конфигурации:', error);
        return false;
    }
}

async function updateStatisticsIndicator() {
    const hasChanges = await fetchConfigChanged();
    const $statsLink = $('#main-nav .menu-item[data-path="stats"]');
    if (!$statsLink.length) {
        return;
    }

    const $indicator = $statsLink.find('.menu-indicator');
    if (hasChanges) {
        if (!$indicator.length) {
            $statsLink.append('<span class="menu-indicator"></span>');
        }
    } else {
        $indicator.remove();
    }
}

export async function renderDashboard() {
    // Используем функцию из роутера для получения актуального списка меню
    const menuItems = getFilteredMenuItems();
    const configChanged = await fetchConfigChanged();

    const sidebarHtml = menuItems.map(item => {
        const isStatistics = item.path === 'stats';
        const indicator = isStatistics && configChanged
            ? '<span class="menu-indicator"></span>'
            : '';
        return `<a href="#${item.path}" class="menu-item" data-path="${item.path}">${item.label}${indicator}</a>`;
    }).join('');

    const html = `
        <div id="dashboard-container" style="display: flex; min-height: 100vh;">
            <div id="sidebar" class="sidebar">
                <h2 class="sidebar-title" style="display: flex; align-items: center; gap: 10px; padding-left: 12px;">
                    <img src="/favicon.png" alt="pfSDN" style="width: 16px; height: 16px;">
                    pfSDN
                </h2>
                <nav id="main-nav">
                    ${sidebarHtml}
                    <a href="#" id="logout-btn" class="menu-item logout-btn">Выход</a>
                </nav>
            </div>

            <main id="content-area" class="content-area">
            </main>
        </div>
    `;

    $('#app').html(html);

    if (configIndicatorInterval) {
        clearInterval(configIndicatorInterval);
    }
    configIndicatorInterval = setInterval(updateStatisticsIndicator, 3000);

    // Прикрепляем события для выхода
    $('#logout-btn').on('click', async function(e) {
        e.preventDefault();
        await handleLogout();
        setAuthenticated(false);
    });

    // Запускаем роутер с текущим хешем (или 'stats' по умолчанию)
    renderPage(window.location.hash || '#stats');

    // Прикрепляем события для меню (роутер)
    $('#main-nav').on('click', '.menu-item', function(e) {
        e.preventDefault();

        const path = $(this).data('path');
        if (path) {
            window.location.hash = path;
            renderPage(path);
        }
    });
}