<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref, defineAsyncComponent} from "vue";
import {t} from "../lang";
import {TabContentScroller} from "../lib/ui";
// 🔧 使用动态导入延迟加载组件，只在标签页被点击时才初始化
const SettingBasic = defineAsyncComponent(() =>
    import("../components/Setting/SettingBasic.vue")
);
const SettingEnv = defineAsyncComponent(() =>
    import("../components/Setting/SettingEnv.vue")
);
const SettingAbout = defineAsyncComponent(() =>
    import("../components/Setting/SettingAbout.vue")
);
const SettingFontManager = defineAsyncComponent(() =>
    import("../components/Setting/SettingFontManager.vue")
);
const SettingSystemTemplates = defineAsyncComponent(() =>
    import("../components/Setting/SettingSystemTemplates.vue")
);
const DataConfigDialogButton = defineAsyncComponent(() =>
    import("../components/common/DataConfigDialogButton.vue")
);

import {LiveBlackWordContent} from "./Live/config/blackWord";
import {LiveReplyGenerateContent} from "./Live/config/replyGenerate";
import {
    SoundAsrResultOptimizedPrompt,
    SoundGenerateTextFormItems,
    SoundGenerateTextPrompt
} from "./Sound/config/prompt";
import {SoundGenerateReplaceContent} from "./Sound/config/replaceContent";
import { useDevMode } from '../composables/useDevMode';

// 🔧 检查开发模式
const { isDev } = useDevMode();

// 🔧 跟踪当前活跃的标签页
const activeTab = ref('basic');

let tabContentScroller: TabContentScroller | null = null;
const contentContainer = ref<HTMLElement | null>(null);
const tabContainer = ref<HTMLElement | null>(null);

// 🔧 直接处理标签页点击
const selectTab = (tabName: string) => {
    activeTab.value = tabName;
    // 同时更新菜单的 active 状态
    const tabs = tabContainer.value?.querySelectorAll('[data-section]');
    if (tabs) {
        tabs.forEach(tab => {
            const sectionName = tab.getAttribute('data-section');
            if (sectionName === tabName) {
                tab.classList.add('menu-active');
            } else {
                tab.classList.remove('menu-active');
            }
        });
    }
    // 滚动到对应内容
    const content = contentContainer.value?.querySelector(`[data-section="${tabName}"]`);
    if (content) {
        content.scrollIntoView({ behavior: 'smooth' });
    }
};

onMounted(() => {
    tabContentScroller = new TabContentScroller(
        tabContainer.value as HTMLElement,
        contentContainer.value as HTMLElement,
        {
            activeClass: "menu-active",
            onSectionChange: (section) => {
                // 🔧 监听标签页变化，更新活跃状态
                activeTab.value = section;
            }
        }
    );
    // 🔧 初始化时设置为 basic
    activeTab.value = 'basic';
});
onBeforeUnmount(() => {
    tabContentScroller?.destroy();
});
</script>

<style lang="less" scoped>
.setting-container {
    background: linear-gradient(180deg, #1a1d25 0%, #151820 100%);
    color: #e5e7eb;
}

.setting-sidebar {
    background: linear-gradient(180deg, #1c1c21 0%, #141418 100%);
    border-color: #2a2a30;
}

.setting-menu-item {
    color: #b8b8c8;
    border: 1px solid transparent;
    transition: all 0.3s ease;

    &:hover {
        color: #ffffff;
        background-color: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.3);
    }
}

.menu-active {
    background-color: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
}

.setting-content {
    background: linear-gradient(180deg, #1a1d25 0%, #151820 100%);
    color: #e5e7eb;
}

.setting-divider {
    border-color: rgba(59, 130, 246, 0.2);
}

/* 确保所有文字可见 - 提高对比度 */
:deep(.arco-form-item-label-col) {
    color: #f3f4f6 !important;
}

:deep(.arco-radio) {
    color: #f3f4f6 !important;
}

:deep(.arco-radio-label) {
    color: #f3f4f6 !important;
}

:deep(.arco-form-item-label) {
    color: #f3f4f6 !important;
}

:deep(.text-xs) {
    color: #d1d5db !important;
}

:deep(.text-sm) {
    color: #e5e7eb !important;
}

:deep(.font-medium) {
    color: #f3f4f6 !important;
}

:deep(.text-base) {
    color: #f3f4f6 !important;
}

:deep(.text-lg) {
    color: #f3f4f6 !important;
}

:deep(.font-bold) {
    color: #f3f4f6 !important;
}

:deep(.text-2xl) {
    color: #f3f4f6 !important;
}

:deep(.arco-card-header-title) {
    color: #f3f4f6 !important;
}

/* 字体管理页面特殊样式 */
:deep(.arco-space) {
    color: #f3f4f6;
}

:deep(.arco-col) {
    color: #f3f4f6;
}

:deep(.arco-descriptions-item-label) {
    color: #d1d5db !important;
}

:deep(.arco-descriptions-item-value) {
    color: #f3f4f6 !important;
}

:deep(.space-y-2) {
    color: #f3f4f6;
}

:deep(.flex-1) {
    color: #f3f4f6;
}

:deep(code) {
    color: #60a5fa !important;
    background-color: rgba(40, 45, 55, 0.8) !important;
}

[data-theme="dark"] {
    .menu-active {
        background-color: rgba(59, 130, 246, 0.2);
        border-color: #3b82f6;
        color: #ffffff;
    }
}

[data-theme="soft-light"] {
    .setting-container {
        background: linear-gradient(180deg, rgba(248, 246, 255, 0.98) 0%, rgba(237, 239, 255, 0.98) 100%);
        color: #1d2547;
    }

    .setting-sidebar {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(243, 244, 255, 0.97) 100%);
        border-color: rgba(132, 142, 220, 0.22);
        box-shadow: inset -1px 0 0 rgba(255,255,255,0.68), 0 14px 30px rgba(104,110,170,0.08);
    }

    .setting-content {
        background: linear-gradient(180deg, rgba(248, 246, 255, 0.92) 0%, rgba(239, 241, 255, 0.96) 100%);
        color: #1d2547;
    }

    .setting-menu-item {
        color: #5b6792;
        border-color: transparent;
        background: rgba(255, 255, 255, 0.44);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    .setting-menu-item:hover {
        color: #1f2749;
        background: linear-gradient(135deg, rgba(116, 126, 255, 0.12) 0%, rgba(196, 150, 255, 0.1) 100%);
        border-color: rgba(106, 116, 247, 0.26);
        box-shadow: 0 10px 22px rgba(104,110,170,0.10);
    }

    .menu-active {
        color: #1f2749;
        background: linear-gradient(135deg, rgba(106, 116, 247, 0.18) 0%, rgba(185, 133, 255, 0.12) 100%);
        border-color: rgba(106, 116, 247, 0.32);
        box-shadow: 0 14px 28px rgba(104,110,170,0.14);
    }

    .setting-menu-item .text-sm,
    .setting-menu-item .text-xs,
    .setting-menu-item .iconfont,
    .setting-menu-item :deep(svg) {
        color: #44507d !important;
        opacity: 1 !important;
        font-weight: 600;
    }

    .setting-menu-item:hover .text-sm,
    .setting-menu-item:hover .text-xs,
    .setting-menu-item:hover .iconfont,
    .setting-menu-item:hover :deep(svg),
    .menu-active .text-sm,
    .menu-active .text-xs,
    .menu-active .iconfont,
    .menu-active :deep(svg) {
        color: #202a52 !important;
        opacity: 1 !important;
    }

    .setting-divider {
        border-color: rgba(132, 142, 220, 0.22);
    }

    :deep(.arco-form-item-label-col),
    :deep(.arco-form-item-label),
    :deep(.arco-radio),
    :deep(.arco-radio-label),
    :deep(.arco-checkbox),
    :deep(.arco-card-header-title),
    :deep(.arco-descriptions-item-value),
    :deep(.font-medium),
    :deep(.font-bold),
    :deep(.text-base),
    :deep(.text-lg),
    :deep(.text-2xl) {
        color: #1f2749 !important;
    }

    :deep(.text-xs),
    :deep(.text-sm),
    :deep(.arco-form-item-message),
    :deep(.arco-descriptions-item-label),
    :deep(.text-gray-600),
    :deep(.text-gray-500),
    :deep(.text-gray-400) {
        color: #617098 !important;
    }

    :deep(.arco-card),
    :deep(.bg-gray-50),
    :deep(.bg-gray-100),
    :deep(.bg-white),
    :deep(.border),
    :deep(.border-gray-200),
    :deep(.border-gray-300) {
        background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(244,245,255,0.97) 100%) !important;
        border-color: rgba(132, 142, 220, 0.22) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.84), 0 10px 24px rgba(104,110,170,0.08) !important;
    }

    :deep(.hover\:bg-gray-100:hover) {
        background: rgba(106, 116, 247, 0.08) !important;
    }

    :deep(.text-link),
    :deep(a:not(.arco-btn)) {
        color: #4f63e8 !important;
    }

    :deep([class~="text-white"]),
    :deep([class~="text-gray-800"]),
    :deep([class~="text-gray-900"]),
    :deep([style*="color: #f3f4f6"]),
    :deep([style*="color:#f3f4f6"]),
    :deep([style*="color: #e5e7eb"]),
    :deep([style*="color:#e5e7eb"]) {
        color: #1f2749 !important;
    }

    :deep(code) {
        color: #4966e6 !important;
        background-color: rgba(106, 116, 247, 0.08) !important;
    }
}
</style>

<template>
    <div class="setting-container flex select-none">
        <div
            ref="tabContainer"
            class="setting-sidebar p-6 w-56 flex-shrink-0 border-r border-solid"
        >
            <div data-section="basic" class="setting-menu-item p-3 rounded-lg mb-2 cursor-pointer transition-all" :class="{ 'menu-active': activeTab === 'basic' }" @click="selectTab('basic')">
                <div class="text-sm flex items-center">
                    <icon-settings class="mr-2"/>
                    {{ t("基础设置") }}
                </div>
            </div>
            <div data-section="font" class="setting-menu-item p-3 rounded-lg mb-2 cursor-pointer transition-all" :class="{ 'menu-active': activeTab === 'font' }" @click="selectTab('font')">
                <div class="text-sm flex items-center">
                    <icon-font-colors class="mr-2"/>
                    {{ t("字体管理") }}
                </div>
            </div>
            <div data-section="env" class="setting-menu-item p-3 rounded-lg mb-2 cursor-pointer transition-all" :class="{ 'menu-active': activeTab === 'env' }" @click="selectTab('env')">
                <div class="text-sm flex items-center">
                    <icon-code class="mr-2"/>
                    {{ t("环境设置") }}
                </div>
            </div>
            <div data-section="about" class="setting-menu-item p-3 rounded-lg mb-2 cursor-pointer transition-all" :class="{ 'menu-active': activeTab === 'about' }" @click="selectTab('about')">
                <div class="text-sm flex items-center">
                    <icon-user class="mr-2"/>
                    {{ t("关于软件") }}
                </div>
            </div>
        </div>
        <div class="flex-grow setting-content">
            <div
                ref="contentContainer"
                class="overflow-y-auto p-8 leading-8"
                style="height: calc(100vh - var(--window-header-height))"
            >
                <!-- 🔧 使用 v-if 延迟初始化组件，只在标签页被激活时才创建 -->
                <div data-section="basic" class="scroll-mt-4">
                    <div class="text-lg font-bold mb-4">{{ t("基础设置") }}</div>
                    <div>
                        <SettingBasic v-if="activeTab === 'basic' || activeTab === ''"/>
                    </div>
                </div>
                <div class="setting-divider border-b border-solid my-6"></div>
                <div data-section="font" class="scroll-mt-4">
                    <div class="text-lg font-bold mb-4">{{ t("字体管理") }}</div>
                    <div>
                        <SettingFontManager v-if="activeTab === 'font'"/>
                    </div>
                </div>
                <div class="setting-divider border-b border-solid my-6"></div>
                <div data-section="env" class="scroll-mt-4">
                    <div class="text-lg font-bold mb-4">{{ t("环境设置") }}</div>
                    <div>
                        <SettingEnv v-if="activeTab === 'env'"/>
                    </div>
                </div>
                <div class="setting-divider border-b border-solid my-6"></div>
                <div data-section="about" class="scroll-mt-4">
                    <div class="text-lg font-bold mb-4">
                        {{ t("关于软件") }}
                    </div>
                    <div class="">
                        <SettingAbout v-if="activeTab === 'about'"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
