import { CONSTANTS } from './constants.js';

export function initTheme() {
    try {
        const savedTheme = localStorage.getItem('theme') ||
            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        return setTheme(savedTheme);
    } catch (error) {
        console.error('初始化主题失败:', error);
        return setTheme('light');
    }
}

export function setTheme(theme) {
    const finalTheme = ['light', 'dark'].includes(theme) ? theme : 'light';
    $('html').attr('data-theme', finalTheme);
    try {
        localStorage.setItem('theme', finalTheme);
    } catch (e) {
        console.warn('无法保存主题偏好:', e);
    }
    return finalTheme;
}

export function ensureProgressOverlay() {
    if ($(CONSTANTS.SELECTORS.progressOverlay).length === 0) {
        $('body').append(`
            <div class="loading-overlay" id="progressOverlay" style="display: none; flex-direction: column; z-index: 9999;">
                <div class="loading-spinner" style="width: 80%; max-width: 400px; text-align: center;">
                    <div style="font-size: 1.1rem; margin-bottom: 15px; color: var(--text-color);" id="progressText">准备上传...</div>
                    <div style="width: 100%; height: 10px; background: rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden; position: relative;">
                         <div id="progressBar" class="progress-bar-animated" style="width: 0%; height: 100%; background-color: var(--primary-color); border-radius: 5px; transition: width 0.2s ease;"></div>
                    </div>
                    <div id="progressPercent" style="margin-top: 8px; font-size: 0.9rem; color: var(--text-secondary);">0%</div>
                </div>
            </div>
        `);
    }
}

export function showLoading(message = '加载中...') {
    const loadingText = $('.loading-spinner .loading-text');
    if (loadingText.length > 0) {
        loadingText.text(message);
    }
    $(CONSTANTS.SELECTORS.loadingOverlay).addClass('active');
}

export function hideLoading() {
    $(CONSTANTS.SELECTORS.loadingOverlay).removeClass('active');
}

export function showProgress(message = '上传中...') {
    ensureProgressOverlay();
    const $overlay = $(CONSTANTS.SELECTORS.progressOverlay);
    $overlay.find('#progressText').text(message);
    $overlay.find('#progressBar').css('width', '0%');
    $overlay.find('#progressPercent').text('0%');
    $overlay.css('display', 'flex').addClass('active');
}

export function updateProgress(percent, message) {
    const $overlay = $(CONSTANTS.SELECTORS.progressOverlay);
    if (message) $overlay.find('#progressText').text(message);
    $overlay.find('#progressBar').css('width', `${percent}%`);
    $overlay.find('#progressPercent').text(`${percent}%`);
}

export function hideProgress() {
    const $overlay = $(CONSTANTS.SELECTORS.progressOverlay);
    $overlay.removeClass('active').fadeOut(200);
}

export function showMessage(message, type = 'info') {
    const messageConfig = CONSTANTS.MESSAGE_TYPES;
    const config = messageConfig[type.toUpperCase()] || messageConfig.INFO;
    const messageId = `message-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

    const alert = $(`
        <div class="toast-message" id="${messageId}" data-type="${type}">
            <div class="toast-content">
                <div class="toast-icon">
                    <i class="fa ${config.icon}"></i>
                </div>
                <div class="toast-text">
                    <div class="toast-message-text">${message}</div>
                </div>
                <button type="button" class="toast-close">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="toast-progress">
                <div class="toast-progress-bar"></div>
            </div>
        </div>
    `);

    alert.css({
        '--toast-color': config.color,
        '--toast-bg-color': config.bgColor,
        '--toast-border-color': config.borderColor,
        '--toast-text-color': config.textColor
    });

    let container = $(CONSTANTS.SELECTORS.toastContainer);
    if (container.length === 0) {
        container = $('<div id="toast-container"></div>');
        $('body').append(container);
    }
    container.append(alert);

    setTimeout(() => alert.addClass('toast-show'), 10);
    setTimeout(() => alert.find('.toast-progress-bar').addClass('toast-progress-active'), 100);

    alert.find('.toast-close').on('click', () => hideMessage(messageId));
    setTimeout(() => hideMessage(messageId), CONSTANTS.DELAYS.TOAST_AUTO_HIDE);
}

export function hideMessage(messageId) {
    const alert = $(`#${messageId}`);
    if (alert.length === 0) return;

    alert.addClass('toast-hide');
    setTimeout(() => {
        alert.remove();
        const container = $(CONSTANTS.SELECTORS.toastContainer);
        if (container.children().length === 0) {
            container.remove();
        }
    }, CONSTANTS.DELAYS.TOAST_HIDE_ANIMATION);
}

export async function withButtonLoading(btn, asyncAction) {
    const $btn = $(btn);
    const originalHtml = $btn.html();

    try {
        $btn.addClass('btn-loading');
        $btn.prop('disabled', true);
        $btn.html(`<i class="fa fa-spinner fa-spin"></i> ${originalHtml}`);
        await asyncAction();
    } finally {
        $btn.prop('disabled', false);
        $btn.removeClass('btn-loading');
        $btn.html(originalHtml);
    }
}

export function updatePageTitle() {
    try {
        const $activeNav = $('nav.member-nav .nav-item.active a');
        let title = '';

        if ($activeNav.length > 0) {
            title = $activeNav.text().trim();
        }

        if (!title) {
            title = '个人中心';
        }

        document.title = `${title} - 个人中心`;
    } catch (error) {
        console.error('更新页面标题失败:', error);
    }
}

export function isMobile() {
    return $(window).width() <= CONSTANTS.BREAKPOINTS.MOBILE;
}

export function toggleMobileMenu() {
    $(CONSTANTS.SELECTORS.memberSidebar).toggleClass('active');
    $(CONSTANTS.SELECTORS.sidebarOverlay).toggleClass('active');
}

export function closeMobileMenu() {
    $(CONSTANTS.SELECTORS.memberSidebar).removeClass('active');
    $(CONSTANTS.SELECTORS.sidebarOverlay).removeClass('active');
}

export function formatFileSize(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
}