<template>
    <div class="add-mcp-server-mask" v-show="show" @click="$emit('keepMcpListShow')">
        <div class="add-mcp-server-modal">
            <div class="top">
                <div style="margin-left: 10px;align-items: center;display: flex;">
                    <div class="icon">
                        <img :src="'icons/warning-yellow.svg'" alt="" style="width: 32px; height: 32px;"/>
                    </div>
                </div>
                <div style="margin-right: 19px;align-items: center;display: flex;" class="close-btn" >
                    <div class="icon" style="width: 16px; height: 16px; cursor: pointer;display: flex;justify-content: center;" @click="$emit('close')">
                        <SvgIcon icon="mcp-list-close"/>
                    </div>
                </div>
            </div>
            <div class="modal-title">
                <span>{{ store.loadTranslations['Add Mcp Server']}}</span>
            </div>
            <div class="modal-editor">
                <codemirror
                    v-model="jsonCode"
                    placeholder=""
                    style="height: 140px;"
                    :autofocus="true"
                    :indent-with-tab="true"
                    :tab-size="2"
                    :extensions="extensions"
                />
            </div>
            <div class="modal-result" v-show="resultMsg.length > 0">
                <span show="resultMsg.length > 0">{{ resultMsg }}</span>
            </div>
            <div class="modal-actions">
                <div class="cancel-btn-main" @click="$emit('close')">{{ store.loadTranslations['Cancel'] }}</div>
                <div class="confirm-btn-line"></div>
                <div class="confirm-btn" @click="handleConfirm">{{ store.loadTranslations['Confirm'] }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, nextTick, computed, onMounted } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { json } from '@codemirror/lang-json'
import { color, oneDark } from '@codemirror/theme-one-dark'
import { EditorView } from "@codemirror/view"
import { indentUnit } from "@codemirror/language"
import { lineNumbers } from "@codemirror/view"
import { useGlobalStore } from "@/store/global";
const store = useGlobalStore()

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    resultMsg: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['close', 'confirm', 'keepMcpListShow', 'jsonFormatError'])

const extensions = [
    json(),
    // oneDark, // 移除深色主题
    indentUnit.of("    "),
    lineNumbers(), // 显示行号
    EditorView.theme({
        "&": {
            fontSize: "14px",
            backgroundColor: "var(--uosai-mcpserver-add-codemirror-bg)",
            color: "var(--uosai-mcpserver-add-codemirror-color)",
            fontSize: "1rem",
            fontWeight: "500",
            opacity: "0.7"
        },
        ".cm-content": {
            backgroundColor: "transparent",
            // padding: "12px 12px 12px 8px" // 内容区域内边距
        },
        ".cm-gutters": {
            backgroundColor: "transparent",
            borderRight: "none",
            paddingRight: "12px", // 行号右侧间距
            position: "static !important" // 让行号列跟随内容滚动
        },
        ".cm-activeLineGutter": {
            backgroundColor: "transparent",
            borderLeft: "none"
        },
        // 去掉所有gutter的边框和背景
        ".cm-gutter, .cm-gutters": {
            borderLeft: "none !important",
            borderRight: "none !important",
            backgroundColor: "transparent !important"
        },
        // 行号样式
        ".cm-gutterElement": {
            backgroundColor: "transparent",
            padding: "0 8px 0 8px",
            minWidth: "20px",
            borderLeft: "none !important",
            
            "&::before, &::after": {
                display: "none !important"
            }
        },
        ".cm-lineNumbers .cm-gutterElement": {
            backgroundColor: "transparent",
            textAlign: "right"
        },
        ".cm-lineNumbers": {
            opacity: "0.8",
            color: "rgba(85, 85, 85, 1)"
        },
        // 语法高亮颜色
        ".cm-string": {
            color: "var(--uosai-mcpserver-add-codemirror-color)" // 字符串颜色
        },
        ".cm-property": {
            color: "var(--uosai-mcpserver-add-codemirror-color)" // 属性名颜色
        },
        ".cm-number": {
            color: "var(--uosai-mcpserver-add-codemirror-color)" // 数字颜色
        },
        ".cm-keyword": {
            color: "var(--uosai-mcpserver-add-codemirror-color)",// 关键字颜色保持一致
        },
        ".ͼe": {
            color: "var(--uosai-mcpserver-add-codemirror-color)"
        },
        // 光标颜色
        ".cm-cursor": {
            borderLeftColor: "var(--uosai-mcpserver-add-codemirror-cursor-color)"
        },
        // 去掉编辑器聚焦时的边框
        "&.cm-focused": {
            outline: "none"
        },
        ".cm-focusVisible": {
            outline: "none"
        },
        // 滚动条样式 - Qt6 WebEngine强制样式
        ".cm-scroller": {
            fontFamily: "inherit",
            scrollbarWidth: "thin",
            outline: "none !important",
            // 强制启用webkit滚动条
            "&::-webkit-scrollbar": {
                width: "8px !important",
                height: "8px !important",
                WebkitAppearance: "none !important"
            }
        },
        "&::-webkit-scrollbar": {
            width: "8px",
            height: "8px"
        },
        "&::-webkit-scrollbar:horizontal": {
            height: "8px"
        },
        "&::-webkit-scrollbar:vertical": {
            width: "8px"
        },
        "&::-webkit-scrollbar-track": {
            backgroundColor: "transparent"
        },
        "&::-webkit-scrollbar-thumb": {
            backgroundColor: "rgba(83, 96, 118, 0.4)",
            borderRadius: "4px",
            outline: "none !important",
            border: "none"
        },
        "&::-webkit-scrollbar-thumb:hover": {
            backgroundColor: "rgba(83, 96, 118, 0.6)"
        },
        "&::-webkit-scrollbar-corner": {
            backgroundColor: "transparent"
        },
        // 隐藏滚动条按钮
        "&::-webkit-scrollbar-button": {
            display: "none !important",
            width: "0 !important",
            height: "0 !important"
        },
        // Qt6 兼容性增强 - 更具体的选择器
        ".cm-scroller::-webkit-scrollbar": {
            width: "8px",
            height: "8px"
        },
        ".cm-scroller::-webkit-scrollbar-track": {
            backgroundColor: "transparent"
        },
        ".cm-scroller::-webkit-scrollbar-thumb": {
            backgroundColor: "rgba(83, 96, 118, 0.4)",
            borderRadius: "4px",
            outline: "none",
            border: "none"
        },
        ".cm-scroller::-webkit-scrollbar-thumb:hover": {
            backgroundColor: "rgba(83, 96, 118, 0.6)"
        },
        ".cm-scroller::-webkit-scrollbar-corner": {
            backgroundColor: "transparent"
        },
        // 隐藏滚动条按钮 - 具体选择器
        ".cm-scroller::-webkit-scrollbar-button": {
            display: "none !important",
            width: "0 !important",
            height: "0 !important"
        },
        // 隐藏代码折叠箭头
        ".cm-foldGutter": {
            display: "none"
        },
        ".cm-foldPlaceholder": {
            display: "none"
        },
        // 去掉活动行的左边标记
        ".cm-activeLine": {
            backgroundColor: "transparent"
        },
        ".cm-activeLineGutter::before": {
            display: "none"
        },
        // 确保没有任何边框
        "*:focus": {
            outline: "none !important"
        }
    })
]

const defaultJson = `{"mcpServers": {}}`

const jsonCode = ref(defaultJson)

const handleConfirm = () => {
    try {
        JSON.parse(jsonCode.value)
        // 模拟添加成功
        emit('confirm', jsonCode.value)
    } catch (e) {
        // 模拟添加失败
        emit('jsonFormatError')  // 通知父组件JSON格式校验失败
    }
}

const resultMsg = computed(() => {
    return props.resultMsg
})

// Qt6 WebEngine滚动条样式修复
const injectScrollbarStyles = () => {
    nextTick(() => {
        // 创建一个唯一的样式标签，避免重复
        const existingStyle = document.getElementById('qt6-scrollbar-fix')
        if (existingStyle) {
            existingStyle.remove()
        }
        
        const style = document.createElement('style')
        style.id = 'qt6-scrollbar-fix'
        style.textContent = `
            .cm-editor .cm-scroller::-webkit-scrollbar {
                width: 8px !important;
                height: 8px !important;
                -webkit-appearance: none !important;
                appearance: none !important;
            }
            .cm-editor .cm-scroller::-webkit-scrollbar-track {
                background: transparent !important;
                border: none !important;
                -webkit-appearance: none !important;
                appearance: none !important;
            }
            .cm-editor .cm-scroller::-webkit-scrollbar-thumb {
                background: rgba(83, 96, 118, 0.4) !important;
                border-radius: 4px !important;
                border: none !important;
                -webkit-appearance: none !important;
                appearance: none !important;
            }
            .cm-editor .cm-scroller::-webkit-scrollbar-thumb:hover {
                background: rgba(83, 96, 118, 0.6) !important;
            }
            .cm-editor .cm-scroller::-webkit-scrollbar-corner {
                background: transparent !important;
                -webkit-appearance: none !important;
                appearance: none !important;
            }
            .cm-editor .cm-scroller::-webkit-scrollbar-button {
                display: none !important;
                width: 0 !important;
                height: 0 !important;
                -webkit-appearance: none !important;
                appearance: none !important;
            }
            /* 确保行号列跟随横向滚动 */
            .cm-editor .cm-gutters {
                position: static !important;
            }
            /* 强制覆盖任何默认样式 */
            .add-mcp-server-modal .cm-editor .cm-scroller::-webkit-scrollbar {
                width: 8px !important;
                height: 8px !important;
            }
            .add-mcp-server-modal .cm-editor .cm-scroller::-webkit-scrollbar-thumb {
                background: rgba(83, 96, 118, 0.4) !important;
                border-radius: 4px !important;
                border: none !important;
            }
        `
        document.head.appendChild(style)
        
        // 直接操作DOM元素应用内联样式
        const applyDirectStyles = () => {
            const scrollers = document.querySelectorAll('.cm-scroller')
            scrollers.forEach(scroller => {
                // 强制设置内联样式
                scroller.style.scrollbarWidth = 'thin'
                scroller.style.scrollbarColor = 'rgba(83, 96, 118, 0.4) transparent'
                
                // 尝试创建伪元素样式
                const styleSheet = document.styleSheets[0]
                if (styleSheet) {
                    try {
                        styleSheet.insertRule(`
                            .cm-scroller::-webkit-scrollbar { 
                                width: 8px !important; 
                                height: 8px !important; 
                                -webkit-appearance: none !important; 
                            }
                        `, styleSheet.cssRules.length)
                        styleSheet.insertRule(`
                            .cm-scroller::-webkit-scrollbar-thumb { 
                                background: rgba(83, 96, 118, 0.4) !important; 
                                border-radius: 4px !important; 
                                border: none !important; 
                            }
                        `, styleSheet.cssRules.length)
                    } catch (e) {
                        console.log('无法插入CSS规则:', e)
                    }
                }
            })
        }
        
        // 立即应用直接样式
        applyDirectStyles()
        
        // 使用MutationObserver监听DOM变化，确保样式持续有效
        const observer = new MutationObserver(() => {
            applyDirectStyles()
        })
        
        // 开始观察
        const modal = document.querySelector('.add-mcp-server-modal')
        if (modal) {
            observer.observe(modal, { 
                childList: true, 
                subtree: true, 
                attributes: true,
                attributeFilter: ['style', 'class']
            })
            
            // 组件销毁时断开观察
            setTimeout(() => observer.disconnect(), 10000)
        }
    })
}

// 监听显示状态变化，注入样式
watch(() => props.show, (newVal) => {
    if (newVal) {
        // 立即注入一次
        injectScrollbarStyles()
        // 延迟注入，确保CodeMirror完全渲染
        setTimeout(() => injectScrollbarStyles(), 100)
        setTimeout(() => injectScrollbarStyles(), 500)
        setTimeout(() => injectScrollbarStyles(), 1000)
    }
})

// 组件挂载后也注入样式
onMounted(() => {
    if (props.show) {
        setTimeout(() => injectScrollbarStyles(), 100)
    }
})

</script>

<style lang="scss" scoped>
.add-mcp-server-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-mcp-server-modal {
    background-color: var(--uosai-mcpserver-add-bg);
    width:380px;
    min-height:290px;
    max-width: 380px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius:18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .top {
        display: flex;
        align-items: center;
        height: 48px;
        justify-content: space-between;

        .icon {
            display: flex;
            align-items: center;
        }

        .close-btn {
            cursor: pointer;
            &:not(.disabled):hover {
                svg {
                    fill: var(--uosai-color-prompt-icon-hover);
                }
            }

            svg {
                fill: var(--uosai-color-prompt-icon);
                width: 16px;
                height: 16px;
            }
        }
    }

    .modal-title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: 500;
        font-style: medium;
        color: var(--uosai-mcpserver-add-title-color);
        height: 20px;
        margin-bottom: 20px;
        span {
            margin-left: 8px;
        }
    }
}

.modal-editor {
    width:360px;
    height:144px;
    border-radius:8px;
    background-color:rgba(0, 0, 0, 0.08);
    margin-left: 10px;
    overflow: hidden;
    
    &:focus-within {
        outline: none !important;
        box-shadow: none !important;
    }

    :deep(.cm-editor) {
        border-radius: 6px;
        overflow: hidden;
        border: none !important;
        outline: none !important;
        height: 100%;
        
        &:focus, &.cm-focused {
            outline: none !important;
            box-shadow: none !important;
        }
        
        // 确保滚动条样式生效
        .cm-scroller {
            overflow-x: auto;   // 显示水平滚动条
            overflow-y: auto;   // 保留垂直滚动条
            outline: none !important;
            
            &:focus {
                outline: none !important;
            }
            
            &::-webkit-scrollbar {
                width: 8px !important;
                height: 8px !important; // 显示水平滚动条
            }
            
            &::-webkit-scrollbar-track {
                background: transparent !important;
                outline: none;
            }
            
            &::-webkit-scrollbar-thumb {
                background: rgba(83, 96, 118, 0.4) !important;
                border-radius: 4px !important;
                outline: none;
                border: none !important;
                
                &:hover {
                    background: rgba(83, 96, 118, 0.6) !important;
                }
                
                &:focus {
                    outline: none;
                    border: none;
                }
            }
            
            &::-webkit-scrollbar-corner {
                background: transparent !important;
            }
            
            &::-webkit-scrollbar-button {
                display: none !important;
                width: 0 !important;
                height: 0 !important;
            }
        }
        
        // 隐藏所有的折叠控件
        .cm-foldGutter, .cm-foldPlaceholder {
            display: none !important;
        }
        
        // 去掉所有可能的装饰线
        .cm-line::before,
        .cm-line::after,
        .cm-lineNumbers::before,
        .cm-lineNumbers::after,
        .cm-gutter::before,
        .cm-gutter::after {
            display: none !important;
        }
    }

    
}

.modal-result {
    min-height: 20px;
    line-height: 1.2;
    padding: 10px 24px 0 24px;
    color:rgba(255, 87, 54, 1);
    font-size:1rem;
    font-weight:500;
}
.modal-actions {
    margin-left: 10px;
    margin-top: 13px;
    margin-bottom: 10px;
    width: 360px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    .cancel-btn-main, .confirm-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 170px;
        height: 36px;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        box-shadow:0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    }
    .cancel-btn-main {
        background: var(--uosai-mcpserver-add-cancelbtn-bg);
        color: var(--uosai-mcpserver-add-cancelbtn-color);
    }

    .confirm-btn-line {
        margin-left: 10px;
        margin-right: 9px;
        width:1px;
        height:28px;
        background-color: var(--uosai-color-split-line);
    }

    .confirm-btn {
        background: var(--activityMcpserverAddConfirmbtnBg);
        color: var(--uosai-mcpserver-add-confirmbtn-color);
    }    
}

/* Qt6 兼容性样式 - 全局滚动条样式增强 */
.modal-editor {
    /* 强制应用滚动条样式到所有子元素 */
    :deep(*) {
        &::-webkit-scrollbar {
            width: 8px !important;
            height: 8px !important;
        }
        
        &::-webkit-scrollbar-track {
            background: transparent !important;
        }
        
        &::-webkit-scrollbar-thumb {
            background: rgba(83, 96, 118, 0.4) !important;
            border-radius: 4px !important;
            border: none !important;
            
            &:hover {
                background: rgba(83, 96, 118, 0.6) !important;
            }
        }
        
        &::-webkit-scrollbar-corner {
            background: transparent !important;
        }
        
        &::-webkit-scrollbar-button {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }
    }
}

</style>

<style>
/* 非scoped样式 - 确保Qt6环境下的最高优先级 */
.add-mcp-server-modal .modal-editor .cm-editor .cm-scroller::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.add-mcp-server-modal .modal-editor .cm-editor .cm-scroller::-webkit-scrollbar-track {
    background: transparent !important;
}

.add-mcp-server-modal .modal-editor .cm-editor .cm-scroller::-webkit-scrollbar-thumb {
    background: rgba(83, 96, 118, 0.4) !important;
    border-radius: 4px !important;
    border: none !important;
}

.add-mcp-server-modal .modal-editor .cm-editor .cm-scroller::-webkit-scrollbar-thumb:hover {
    background: rgba(83, 96, 118, 0.6) !important;
}

.add-mcp-server-modal .modal-editor .cm-editor .cm-scroller::-webkit-scrollbar-corner {
    background: transparent !important;
}

.add-mcp-server-modal .modal-editor .cm-editor .cm-scroller::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 确保行号列跟随横向滚动 */
.add-mcp-server-modal .modal-editor .cm-editor .cm-gutters {
    position: static !important;
}

/* 隐藏选中删除提示 */
.cm-editor .cm-announced div {
    display: none !important;
}

</style> 