/**
 * common.js - 统一公共JavaScript函数
 * 用于所有页面的初始化和通用功能
 */

/**
 * 主色调选项（来自 Tabler）
 */
var allThemeColors = {
    'blue': '#0054a6',
    'azure': '#4299e1',
    'indigo': '#4263eb',
    'purple': '#ae3ec9',
    'pink': '#d6336c',
    'red': '#d63939',
    'orange': '#f76707',
    'yellow': '#f59f00',
    'lime': '#74b816',
    'green': '#2fb344',
    'teal': '#0ca678',
    'cyan': '#17a2b8'
};

/**
 * 主题配置
 *
 * 使用方式：
 * 1. allowedColors 控制允许出现的主色，颜色名必须来自 allThemeColors
 * 2. allowDarkModeToggle 控制是否显示亮/暗切换按钮
 *
 * 规则：
 * 1. allowedColors 只有 1 个颜色时，不显示主色切换按钮，等于固定主色
 * 2. allowedColors 有多个颜色时，显示主色切换按钮
 * 3. allowDarkModeToggle 为 false 时，隐藏亮/暗切换按钮
 * 4. 如果 localStorage 里保存的颜色已经不在 allowedColors 中，会自动回退到第一个允许的颜色
 *
 * 常见示例：
 * 1. 固定绿色，但允许亮/暗切换
 *    allowedColors: ['green']
 *    allowDarkModeToggle: true
 *
 * 2. 只给客户 3 个主题可选，并允许亮/暗切换
 *    allowedColors: ['green', 'cyan', 'orange']
 *    allowDarkModeToggle: true
 *
 * 3. 固定绿色，且不允许亮/暗切换
 *    allowedColors: ['green']
 *    allowDarkModeToggle: false
 *
 * 4. 保留全部主题
 *    allowedColors: Object.keys(allThemeColors)
 *    allowDarkModeToggle: true
 */
var themeConfig = {
    allowedColors: Object.keys(allThemeColors),
    allowDarkModeToggle: true
};

var themeColors = buildThemeColors();

function buildThemeColors() {
    var colors = {};
    var allowedColors = themeConfig.allowedColors || [];

    if (!allowedColors.length) {
        return allThemeColors;
    }

    allowedColors.forEach(function(colorName) {
        if (allThemeColors[colorName]) {
            colors[colorName] = allThemeColors[colorName];
        }
    });

    return Object.keys(colors).length ? colors : allThemeColors;
}

function getThemeColorNames() {
    return Object.keys(themeColors);
}

function getDefaultPrimaryColor() {
    var colorNames = getThemeColorNames();
    return colorNames.length ? colorNames[0] : 'green';
}

function isValidPrimaryColor(color) {
    return !!themeColors[color];
}

/**
 * 统一页面初始化
 * @param {string} menuCategory - 菜单分类 ('system', 'encode', etc.)
 * @param {string} menuItem - 菜单项名称
 */
function initPage(menuCategory, menuItem) {
    // i18n国际化初始化
    if (typeof i18n !== 'undefined' && typeof i18n.init === 'function') {
        i18n.init();
    }

    // 菜单初始化
    if (typeof showMenu === 'function') {
        showMenu(menuCategory, menuItem);
    }

    // 主题初始化
    initTheme();

    // 注入主题切换UI
    injectThemeSwitcher();
}

function formatRuntimeDisplay(runtimeText) {
    if (!runtimeText) return runtimeText;

    runtimeText = String(runtimeText).trim();
    var totalSeconds = parseRuntimeSeconds(runtimeText);
    if (totalSeconds === null) return runtimeText;

    var days = Math.floor(totalSeconds / 86400);
    var hours = Math.floor((totalSeconds % 86400) / 3600);
    var minutes = Math.floor((totalSeconds % 3600) / 60);
    var seconds = totalSeconds % 60;
    var timeText = padRuntimeNumber(hours) + ':' + padRuntimeNumber(minutes) + ':' + padRuntimeNumber(seconds);

    if (days <= 0) return timeText;

    if (typeof i18n !== 'undefined' && i18n && typeof i18n.t === 'function') {
        var formatted = i18n.t('status.runtimeDayWithTime', [days, timeText]);
        if (formatted !== 'status.runtimeDayWithTime') return formatted;
    }

    return days + 'd ' + timeText;
}

function parseRuntimeSeconds(runtimeText) {
    var match = runtimeText.match(/^(\d+):(\d{2}):(\d{2})$/);
    if (match) {
        return parseInt(match[1], 10) * 3600 + parseInt(match[2], 10) * 60 + parseInt(match[3], 10);
    }

    match = runtimeText.match(/^(\d+)d\s+(\d{2}):(\d{2}):(\d{2})$/i);
    if (match) {
        return parseInt(match[1], 10) * 86400 + parseInt(match[2], 10) * 3600 + parseInt(match[3], 10) * 60 + parseInt(match[4], 10);
    }

    match = runtimeText.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2}):(\d{2})$/);
    if (!match) return null;

    var year = parseInt(match[1], 10);
    var month = parseInt(match[2], 10);
    var day = parseInt(match[3], 10);
    var hour = parseInt(match[4], 10);
    var minute = parseInt(match[5], 10);
    var second = parseInt(match[6], 10);

    var end = Date.UTC(1970 + year, month, day + 1, hour, minute, second);
    var start = Date.UTC(1970, 0, 1, 0, 0, 0);
    if (!isFinite(end) || end < start) return null;

    return Math.floor((end - start) / 1000);
}

function padRuntimeNumber(value) {
    value = parseInt(value, 10);
    return value < 10 ? '0' + value : String(value);
}

/**
 * 基础灰色调选项（来自 Tabler）
 * 可选值: slate, gray, zinc, neutral, stone
 */
var themeBaseColors = ['slate', 'gray', 'zinc', 'neutral', 'stone'];

/**
 * 初始化主题（从localStorage读取）
 */
function initTheme() {
    var theme = localStorage.getItem('theme') || 'light';
    var primaryColor = getDefaultPrimaryColor();
    var storedColor = localStorage.getItem('primaryColor');
    var baseColor = localStorage.getItem('baseColor') || 'slate';  // 默认使用 slate 灰色调

    if (isValidPrimaryColor(storedColor)) {
        primaryColor = storedColor;
    }

    document.documentElement.setAttribute('data-bs-theme', theme);
    document.documentElement.setAttribute('data-bs-theme-primary', primaryColor);

    // 设置基础灰色调（如果指定了的话）
    if (baseColor && themeBaseColors.indexOf(baseColor) !== -1) {
        document.documentElement.setAttribute('data-bs-theme-base', baseColor);
    } else {
        document.documentElement.removeAttribute('data-bs-theme-base');
    }
}

/**
 * 切换暗色/亮色模式
 */
function toggleDarkMode() {
    var html = document.documentElement;
    var currentTheme = html.getAttribute('data-bs-theme');
    var newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    html.setAttribute('data-bs-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    updateThemeIcon(newTheme);
}

/**
 * 设置主色调
 * @param {string} color - 颜色名称
 */
function setPrimaryColor(color) {
    if (!isValidPrimaryColor(color)) {
        color = getDefaultPrimaryColor();
    }

    document.documentElement.setAttribute('data-bs-theme-primary', color);
    localStorage.setItem('primaryColor', color);
    updateColorIndicator(color);
}

/**
 * 设置基础灰色调
 * @param {string} base - 灰色调名称 (slate/gray/zinc/neutral/stone) 或空字符串恢复默认
 */
function setBaseColor(base) {
    if (base && themeBaseColors.indexOf(base) !== -1) {
        document.documentElement.setAttribute('data-bs-theme-base', base);
        localStorage.setItem('baseColor', base);
    } else {
        document.documentElement.removeAttribute('data-bs-theme-base');
        localStorage.removeItem('baseColor');
    }
}

/**
 * 更新主题图标（太阳/月亮）
 * @param {string} theme - 当前主题
 */
function updateThemeIcon(theme) {
    var icon = document.getElementById('theme-toggle-icon');
    if (!icon) return;

    if (theme === 'dark') {
        // 太阳图标
        icon.innerHTML = '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />';
    } else {
        // 月亮图标
        icon.innerHTML = '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />';
    }
}

/**
 * 更新颜色指示器
 * @param {string} color - 当前颜色
 */
function updateColorIndicator(color) {
    var indicator = document.getElementById('color-indicator');
    if (!indicator) return;

    if (!isValidPrimaryColor(color)) {
        color = getDefaultPrimaryColor();
    }

    indicator.style.backgroundColor = themeColors[color];

    // 更新选中状态
    var options = document.querySelectorAll('.color-option');
    options.forEach(function(opt) {
        opt.classList.remove('active');
        if (opt.getAttribute('data-color') === color) {
            opt.classList.add('active');
        }
    });
}

/**
 * 注入主题切换UI到页面
 */
function injectThemeSwitcher() {
    var container = document.querySelector('.page-header .d-flex.align-items-center.gap-3');
    if (!container) return;

    // 查找并移除旧的主题切换按钮
    var oldButton = container.querySelector('button[onclick="toggleDarkMode()"]');
    if (oldButton) {
        oldButton.remove();
    }

    // 检查是否已经注入过
    if (container.querySelector('.theme-switcher')) {
        return;
    }

    // 简单的 i18n 封装：如果有 i18n.t 就用，没有就用中文默认值
    var t = (typeof i18n !== 'undefined' && typeof i18n.t === 'function')
        ? i18n.t.bind(i18n)
        : function (key) { return key; };

    function translateWithFallback(key, fallback) {
        var value = t(key);
        return value && value !== key ? value : fallback;
    }

    var choosePrimaryTitle = translateWithFallback('encoding.choosePrimaryColor', '选择主色调');
    var toggleThemeTitle = translateWithFallback('encoding.toggleTheme', '切换主题');

    // 获取当前主题和颜色
    var currentTheme = localStorage.getItem('theme') || 'light';
    var storedColor = localStorage.getItem('primaryColor');
    var currentColor = isValidPrimaryColor(storedColor) ? storedColor : getDefaultPrimaryColor();
    var colorNames = getThemeColorNames();
    var showColorSwitcher = colorNames.length > 1;
    var showDarkModeToggle = themeConfig.allowDarkModeToggle !== false;

    if (!showColorSwitcher && !showDarkModeToggle) {
        return;
    }

    var themeIconPath = currentTheme === 'dark'
        ? '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />'
        : '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />';

    // 创建主题切换UI HTML
    var themeSwitcherHTML = '<div class="theme-switcher">';

    if (showColorSwitcher) {
        var colorOptionsHTML = '';
        colorNames.forEach(function(colorName) {
            var isActive = colorName === currentColor ? ' active' : '';
            colorOptionsHTML += '<div class="color-option' + isActive + '" data-color="' + colorName + '" style="background-color: ' + themeColors[colorName] + ';" onclick="setPrimaryColor(\'' + colorName + '\')"></div>';
        });

        themeSwitcherHTML += '<div class="dropdown">' +
            '<button class="btn btn-ghost-secondary btn-icon" data-bs-toggle="dropdown" title="' + choosePrimaryTitle + '">' +
                '<span id="color-indicator" class="color-indicator" style="background-color: ' + themeColors[currentColor] + ';"></span>' +
            '</button>' +
            '<div class="dropdown-menu dropdown-menu-end color-picker-dropdown">' +
                colorOptionsHTML +
            '</div>' +
        '</div>';
    }

    if (showDarkModeToggle) {
        themeSwitcherHTML += '<button class="btn btn-ghost-secondary btn-icon" onclick="toggleDarkMode()" title="' + toggleThemeTitle + '">' +
            '<svg id="theme-toggle-icon" xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">' +
                themeIconPath +
            '</svg>' +
        '</button>';
    }

    themeSwitcherHTML += '</div>';

    // 插入新的主题切换UI
    container.insertAdjacentHTML('beforeend', themeSwitcherHTML);
}

/**
 * 复制文本到剪贴板
 * @param {string} text - 要复制的文本
 * @param {HTMLElement} button - 触发复制的按钮元素
 */
function copyToClipboard(text, button) {
    // 复制成功后的回调
    function onSuccess() {
        button.classList.add('copied');
        var originalHTML = button.innerHTML;
        button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
        setTimeout(function() {
            button.classList.remove('copied');
            button.innerHTML = originalHTML;
        }, 2000);
    }

    // 回退方案：使用 execCommand (兼容 HTTP 环境)
    function fallbackCopy() {
        var textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.left = '-9999px';
        textarea.style.top = '0';
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
        try {
            var success = document.execCommand('copy');
            if (success) {
                onSuccess();
            } else {
                console.error('复制失败');
            }
        } catch (err) {
            console.error('复制失败:', err);
        }
        document.body.removeChild(textarea);
    }

    // 优先使用 Clipboard API，不支持则回退
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(text).then(onSuccess).catch(fallbackCopy);
    } else {
        fallbackCopy();
    }
}

/**
 * 为 URL 元素添加复制按钮
 * @param {string} elementId - 包含 URL 的元素 ID
 */
function addCopyButton(elementId) {
    var element = document.getElementById(elementId);
    if (!element) return;

    // 检查是否已经添加过复制按钮
    if (element.querySelector('.btn-copy')) return;

    // 获取 URL 文本（排除标签部分）
    var urlText = element.textContent;
    var colonIndex = urlText.indexOf('：');
    if (colonIndex === -1) colonIndex = urlText.indexOf(':');
    if (colonIndex !== -1) {
        urlText = urlText.substring(colonIndex + 1).trim();
    }

    // 获取禁用状态的翻译文本
    var disabledText = (typeof i18n !== 'undefined' && typeof i18n.t === 'function')
        ? i18n.t('status.disabled')
        : '已禁用';

    // 如果是 "已禁用" 或为空，不添加按钮
    if (!urlText || urlText === disabledText || urlText.indexOf('://') === -1) {
        return;
    }

    // 只提取纯 URL（去除括号内的状态信息）
    var pureUrl = urlText.split(' ')[0].split('(')[0].trim();

    // 获取复制按钮提示文本
    var copyTitle = (typeof i18n !== 'undefined' && typeof i18n.t === 'function')
        ? (i18n.t('common.copy') || '复制')
        : '复制';

    // 创建复制按钮
    var copyBtn = document.createElement('button');
    copyBtn.className = 'btn-copy';
    copyBtn.title = copyTitle;
    copyBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
    copyBtn.onclick = function(e) {
        e.preventDefault();
        copyToClipboard(pureUrl, this);
    };

    // 添加到父元素 (status-item) 末尾，确保在所有兄弟元素之后
    var parent = element.closest('.status-item') || element.parentElement;
    if (parent && parent !== element) {
        parent.appendChild(copyBtn);
    } else {
        element.appendChild(copyBtn);
    }
}

/**
 * 为状态页面所有 URL 添加复制按钮
 */
function addAllCopyButtons() {
    // 基础 URL（格式：prefix + portid + '_' + output）
    var urlIds = [
        'ts0_url', 'flv0_url', 'hls0_url', 'hls_fmp40_url', 'fmp40_url',
        'rtsp0_url', 'rtmp_url', 'multicast_url', 'srt_url', 'srt_push_url',
        'hls_push_url', 'webrtc_p2p_url', 'mjpg0_url', 'jpg0_url',
        'whip_publish_token', 'icecast_publish_uri', 'shoutcast_publish_uri'
    ];

    // 获取端口数量（如果有定义）
    var maxInput = (typeof max_input !== 'undefined') ? max_input : 1;
    var maxOutput = (typeof max_output !== 'undefined') ? max_output : 4;

    for (var portid = 0; portid < maxInput; portid++) {
        for (var output = 0; output < maxOutput; output++) {
            urlIds.forEach(function(prefix) {
                addCopyButton(prefix + portid + '_' + output);
            });
            // RTMP PUSH URL（格式：rtmp_push_url + portid + '_' + output + '_' + pushIndex）
            for (var j = 0; j < 3; j++) {
                addCopyButton('rtmp_push_url' + portid + '_' + output + '_' + j);
            }
        }
    }
}

//先加载css
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "css/style.css";
document.head.appendChild(link);


document.addEventListener("DOMContentLoaded", function () {

    const page = document.querySelector(".page");
    const logo = document.querySelector(".navbar-brand");
    const pageHeader = document.querySelector(".page-header");

    if (!page || !logo || !pageHeader) return;

    // 创建 header
    const header = document.createElement("div");
    header.className = "header";

    const headerInner = document.createElement("div");
    headerInner.className = "header_b";

    header.appendChild(headerInner);

    // 插入到 page 前
    page.parentNode.insertBefore(header, page);

    // 移动元素（不改变 class）
    headerInner.appendChild(logo);
    headerInner.appendChild(pageHeader);

});


// logo switch
function Getinput() {
    var logoElement = document.querySelector(".navbar-brand-image");
    if (!logoElement) return;

    // 从 sessionStorage 获取缓存
    var cachedLogo = sessionStorage.getItem("logo");
    var cachedSignal = sessionStorage.getItem("hasSignal");

    // 如果缓存存在，直接使用缓存 logo
    if (cachedLogo && cachedSignal !== null) {
        logoElement.src = cachedLogo;
    }

    // 发起请求获取最新设备状态
    $.ajax({
        type: "GET",
        url: "/get_status",
        dataType: "xml",
        cache: false,
        success: function(data) {		
            // 获取各个信号输入的值，默认值是 "0" 表示没有信号
            var cvbs_input = $(data).find("cvbs_input").text().trim() || "0";
            var sdi_input  = $(data).find("sdi_input").text().trim() || "0";
            var vga_input  = $(data).find("vga_input").text().trim() || "0";

            // 判断是否有信号（只要有一个信号输入为 "1" 就算有信号）
            var hasSignal = (vga_input === "1") || (sdi_input === "1") || (cvbs_input === "1");

            // 根据有无信号选择 logo
            var newLogo = hasSignal ? "images/new-logo.png" : "images/logo.png";

            // 获取当前 logo 的文件路径（只比较文件名部分）
            var currentLogoPath = new URL(logoElement.src).pathname;

            // 只有在 logo 路径变化时才更新，避免闪烁
            if (currentLogoPath !== newLogo) {
                logoElement.src = newLogo;
            }

            // 更新 sessionStorage
            sessionStorage.setItem("logo", newLogo);
            sessionStorage.setItem("hasSignal", hasSignal.toString());
        }
    });
}

// DOM加载完成后执行
document.addEventListener("DOMContentLoaded", Getinput);