<template>
    <a-layout class="app-container">
        <a-layout-header class="header">
            <a-flex justify="space-between" align="center" style="height: 100%">
                <div class="logo-title">
                    <!-- <WifiOutlined v-if="isLiveOn" style="color: #52c41a" /> -->
                    <!-- 直播中台控制系统 -->
                </div>
                <a-space :size="20">
                    <a-badge :dot="isConnected">
                        <SettingOutlined class="action-icon" />
                    </a-badge>
                    <a-avatar size="default" style="background-color: #1677ff">
                        <template #icon>
                            <UserOutlined />
                        </template>
                    </a-avatar>
                </a-space>
            </a-flex>
        </a-layout-header>

        <a-layout class="sub-layout">
            <a-layout-sider resizable :width="300" :min-width="250" :max-width="500" class="sider">
                <div class="sider-container">
                    <div class="sider-section top-panel">
                        <div class="section-header">
                            <a-typography-title :level="5" style="margin: 0">岗位列表</a-typography-title>
                            <a-button type="primary" size="small" @click="handleShow" :loading="modelLoading">
                                <template #icon>
                                    <PlusOutlined />
                                </template>添加
                            </a-button>
                        </div>
                        <div class="section-content">
                            <a-list :data-source="positions" item-layout="horizontal" size="small">
                                <template #renderItem="{ item, index }">
                                    <a-list-item class="position-item" @click="setGwDetail(index)">
                                        <div class="item-main">
                                            <span class="item-title">{{ item.title }}</span>
                                        </div>
                                        <template #actions>
                                            <a-space>
                                                <DeleteOutlined class="delete-btn" @click.stop="deletedGw(index)" />
                                                <RightOutlined class="play-btn" @click.stop="sendMessageGwAll(index)" />
                                            </a-space>
                                        </template>
                                    </a-list-item>
                                </template>
                            </a-list>
                        </div>
                    </div>

                    <div class="sider-section bottom-panel">
                        <div class="section-header sticky-header">
                            <a-typography-title :level="5" style="margin: 0">岗位详情</a-typography-title>
                        </div>
                        <div ref="listScrollRef" class="section-content">
                            <a-list :data-source="dutyList" item-layout="horizontal" size="small">
                                <template #renderItem="{ item, index }">
                                    <a-list-item @click="resetSayin" :ref="($el) => insertItemList($el)"
                                        class="detail-item" :class="{ 'highlight-item': index === scrollIndex }">
                                        <div v-if="item.length === 5" class="special-duty">
                                            <StarFilled class="star-icon" />
                                            <span class="bold-text">{{ item }}</span>
                                        </div>
                                        <span v-else class="normal-duty">{{ item }}</span>
                                    </a-list-item>
                                </template>
                            </a-list>
                            <a-empty v-if="dutyList.length === 0" :image="aEmpty.PRESENTED_IMAGE_SIMPLE"
                                description="暂无详情" />
                        </div>
                    </div>
                </div>
            </a-layout-sider>

            <a-layout class="main-content-layout">
                <a-layout-content class="content-scroll-area">
                    <a-space direction="vertical" size="middle" style="display: flex">
                        <a-card title="直播控制" size="small" :bordered="false" class="custom-card">
                            <a-row :gutter="[12, 12]">
                                <a-col :span="8">
                                    <a-button type="primary" block @click="startLive" :loading="loading || isLiveOn">
                                        <template #icon>
                                            <PlayCircleOutlined />
                                        </template>开始直播
                                    </a-button>
                                </a-col>
                                <a-col :span="8">
                                    <a-button danger block @click="stopLive" :loading="loading" :disabled="!isLiveOn">
                                        <template #icon>
                                            <StopOutlined />
                                        </template>结束直播
                                    </a-button>
                                </a-col>
                                <a-col :span="8">
                                    <a-button danger ghost block @click="forceClose">
                                        <template #icon>
                                            <VideoCameraOutlined />
                                        </template>强制关闭
                                    </a-button>
                                </a-col>
                                <a-col :span="8"><a-button block @click="fullScreenInsert"
                                        :disabled="!isLiveOn">全屏插播</a-button></a-col>
                                <a-col :span="8"><a-button block @click="windowInsert"
                                        :disabled="!isLiveOn">窗口插播</a-button></a-col>
                                <a-col :span="8"><a-button block @click="audioInsert"
                                        :disabled="!isLiveOn">音频插入</a-button></a-col>
                            </a-row>
                        </a-card>

                        <a-card title="AI模型管理" size="small" :bordered="false" class="custom-card">
                            <template #extra>
                                <a-button type="link" size="small" @click="refreshModelStatus">
                                    <ReloadOutlined />刷新
                                </a-button>
                            </template>
                            <a-flex justify="space-between" align="center" style="margin-bottom: 16px">
                                <a-space>
                                    <a-tag :color="modelStatus.exists ? 'green' : 'orange'">{{ modelStatus.modelName
                                        }}</a-tag>
                                    <a-badge :status="modelStatus.ollamaRunning ? 'processing' : 'default'"
                                        :text="modelStatus.ollamaRunning ? 'Ollama运行中' : '服务未就绪'" />
                                </a-space>
                                <a-button type="primary" size="small" @click="loadModel"
                                    :loading="modelLoading">加载模型</a-button>
                            </a-flex>

                            <div class="file-drop-zone" @drop="handleFileDrop" @dragover.prevent
                                :class="{ 'is-dragging': fileUploadLoading }">
                                <InboxOutlined class="drop-icon" />
                                <p class="drop-text">拖拽图片或视频至此处自动展示</p>
                            </div>

                            <div v-if="uploadedFiles.length > 0" class="file-list-container">
                                <div v-for="(file, index) in uploadedFiles" :key="index" class="file-item-row">
                                    <div class="file-info">
                                        <FileOutlined /> <span class="file-name">{{ file.name }}</span>
                                        <a-tag size="small" :color="getFileTagColor(file.type)">{{
                                            getFileTypeText(file.type)
                                            }}</a-tag>
                                    </div>
                                    <a-button type="text" danger size="small" @click="removeFile(index)">
                                        <DeleteOutlined />
                                    </a-button>
                                </div>
                            </div>

                            <a-space style="margin-top: 12px">
                                <a-button size="small" @click="clearAllFiles"
                                    :disabled="uploadedFiles.length === 0">清空</a-button>
                                <a-button size="small" type="primary" ghost @click="showFilesInLive"
                                    :disabled="uploadedFiles.length === 0 || !isLiveOn">在直播中展示</a-button>
                            </a-space>
                        </a-card>
                    </a-space>
                </a-layout-content>

                <a-layout-footer class="input-footer">
                    <div class="footer-inner">
                        <a-flex gap="small" vertical>
                            <div class="quick-commands">
                                <span class="label">快捷指令:</span>
                                <a-button v-for="cmd in ['欢迎新观众', '感谢陪伴', '互动提问', '行业分享']" :key="cmd" size="small"
                                    class="cmd-btn" @click="setQuickCommand(cmd)">{{ cmd }}</a-button>
                            </div>
                            <a-space-compact block>
                                <a-textarea v-model:value="inputValue" placeholder="输入指令或内容..."
                                    :auto-size="{ minRows: 1, maxRows: 3 }" @press-enter="sendMessage" />
                                <a-button type="primary" @click="sendMessage" :disabled="!isLiveOn"
                                    style="height: auto">发送</a-button>
                            </a-space-compact>
                            <a-button size="small" class="polish-btn" @click="polishText('inputValue')"
                                :loading="polishLoading">
                                <RotateRightOutlined /> 智能润色
                            </a-button>
                        </a-flex>
                    </div>
                </a-layout-footer>
            </a-layout>
        </a-layout>

        <a-modal v-model:open="showModal" title="新增岗位信息" width="600px" @ok="handleOk">
            <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
                <a-form-item label="详细信息" name="infoin">
                    <a-textarea v-model:value="formData.infoin" :rows="10" placeholder="请输入岗位描述，系统将自动切分段落..." />
                </a-form-item>
                <a-button size="small" @click="polishText('gangwei')" :loading="polishLoading">
                    <RotateRightOutlined />润色内容
                </a-button>
            </a-form>
        </a-modal>
    </a-layout>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, reactive, nextTick, watch } from 'vue';
import { message, Modal, Empty as aEmpty } from 'ant-design-vue';
import SocketClient from '@renderer/utils/socket';
import {
    WifiOutlined,
    SettingOutlined,
    UserOutlined,
    RightOutlined,
    StarFilled,
    PlayCircleOutlined,
    StopOutlined,
    DesktopOutlined,
    FullscreenOutlined,
    HighlightOutlined,
    VideoCameraOutlined,
    InboxOutlined,
    DeleteOutlined,
    MoreOutlined,
    DownloadOutlined,
    ReloadOutlined,
    CheckCircleOutlined,
    ClockCircleOutlined,
    FileOutlined,
    EyeOutlined,
    RotateRightOutlined,
    PlusOutlined
} from '@ant-design/icons-vue';
import { useUserStore } from '@renderer/stores/useUserStore';

// 从 store 获取用户信息
const userStore = useUserStore();

// socket核心变量定义
const WS_URL = 'wss://dmdemo.hx.cn/ws?session_id='; // 你的 WSS 地址
let socketClient = null; // Socket 实例（约束类型）
// 响应式变量（强类型）
const isConnected = ref(false);
const sendMsg = ref('');
const msgList = ref([]); // 消息列表强类型
const dutyList = ref([]);
let liveIsSay = ref(false);

const listScrollRef = ref([])
const listItemRefs = ref([])
const insertItemList = (_this) => {
    listItemRefs.value.push(_this)
}
let scrollIndex = ref(0);//记录现在滚动到哪了
const scrollToIndex = (index) => {
    console.log("listItemRefs.value[index].$el.offsetTop", listItemRefs.value[index].$el.offsetTop)
    scrollIndex.value = index;
    let scrollto = listItemRefs.value[index].$el.offsetTop - listItemRefs.value[0].$el.offsetTop;
    if (scrollto < 0) scrollto = 0;
    nextTick(() => { // 确保 DOM 已渲染完成
        listScrollRef.value.scrollTo({
            top: scrollto,//每次滚动定格其实不好看，就减去一点
            behavior: 'smooth'
        });
    });
};


const resetSayin = () => {
    liveIsSay.value = false;//我说完啦
    //console.info('我说完啦：重置好说话状态，现在没有在说话啦');
}

// 2. 格式化时间
const formatTime = () => {
    const now = new Date();
    return `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
};

// 初始化 WebSocket 连接
const initWebSocket = (_initWebSocket) => {
    if (_initWebSocket) {
        socketClient = new SocketClient(WS_URL + _initWebSocket, {
            heartbeatInterval: 20000,
            // 连接成功回调（类型约束）
            onOpen: () => {
                isConnected.value = true;
                msgList.value.push({
                    time: formatTime(),
                    type: 'system',
                    content: 'Socket 长连接建立成功'
                });
                console.info('Socket 长连接建立成功');
            },
            // 接收消息回调（类型约束）
            onMessage: (data) => {
                console.info('接收回调消息：', data);
                let msg = data;
                // 仅解析字符串类型的 JSON 消息
                if (typeof data === 'string' && data.indexOf("{") == 0) {
                    setTimeout(resetSayin, 500)
                    try {
                        msg = JSON.parse(data);
                    } catch (e) {
                        console.warn('消息非 JSON 格式：', e);
                    }
                }
                msgList.value.push({
                    time: formatTime(),
                    type: 'receive',
                    content: msg
                });
            },
            // 错误回调（类型约束）
            onError: (error) => {
                isConnected.value = false;
                msgList.value.push({
                    time: formatTime(),
                    type: 'system',
                    content: `Socket 错误：${error.message || '未知错误'}`
                });
            },
            // 关闭回调（类型约束）
            onClose: (event) => {
                isConnected.value = false;
                msgList.value.push({
                    time: formatTime(),
                    type: 'system',
                    content: `Socket 断开：${event.reason || '网络波动，正在重连...'}`
                });
            }
        });
    }
};

const sayMessageList = ref([]);
//将职位详情添加到虚拟的待播放队列中
const sendMessageGwAll = (_index) => {
    if (dutyList.value.length == 0) {
        setGwDetail(_index);
    }

    if (dutyList.value) {
        let index = 0;
        for (const oneItem of dutyList.value) {
            const oneMessage = {};
            oneMessage["type"] = "dutyDetail";
            oneMessage["message"] = oneItem;
            oneMessage["dutyIndex"] = index++;
            sayMessageList.value.push(oneMessage);
        }
        console.log("待播放消息列表：", sayMessageList)
    }
}

const setGwDetail = (_index) => {
    const jsonData = getFromLocalStorage('gangweiList');
    while (dutyList.value.length > 0) {
        dutyList.value.splice(0, 1);
    }
    if (jsonData[_index] && jsonData[_index]["infoDetail"]) {
        for (const oneItem of jsonData[_index]["infoDetail"]) {
            dutyList.value.push(oneItem);
        }
    }
}

const initGwData = () => {
    while (positions.value.length > 0) {
        positions.value.splice(0, 1);
    }
    const jsonData = getFromLocalStorage('gangweiList');
    if (jsonData) {
        for (const oneItem of jsonData) {
            const oneTitle = {};
            oneTitle.title = oneItem["gwName"];
            positions.value.push(oneTitle);
        }
    }
}

const deletedGw = (_index) => {
    Modal.confirm({
        title: '是否确认删除岗位信息?',
        content: positions.value[_index]['title'],
        okText: '确认删除',
        cancelText: '取消',
        centered: true,
        width: 400,
        maskClosable: false,
        onOk() {
            const jsonData = getFromLocalStorage('gangweiList');
            jsonData.splice(_index, 1);
            const result = saveToLocalStorage(jsonData, 'gangweiList');
            if (result) {
                positions.value.splice(_index, 1);
                while (dutyList.value.length > 0) {
                    dutyList.value.splice(0, 1);
                }

                message.success('删除成功')
            } else {
                message.error('删除失败')
            }
        },
        onCancel() {
            message.error('取消操作')
        }
    });
}

const doText = () => {
    //遇到句号就切分
    const tempStr1 = (formData.infoin || "")
        .replace(/\n/g, "。")
        .trim();

    formData.infoDetail = tempStr1.split("。").filter(item => {
        // 过滤空项、仅含空格/换行的项
        return item.trim() !== "";
    });
    formData.gwName = formData.infoDetail[0];
}
const doJson = () => {
    try {
        console.log("jsonStr", formData.infoin.replace(/\n/g, "").replace(" ", "").trim())
        const data = JSON.parse(formData.infoin.replace(/\n/g, "").replace(" ", "").trim());
        console.log("data", data)
    } catch (err) {
        message.error("json转换失败");
    }
}

const transText = () => {
    if (textType == "text") {
        doText();
    } else if (textType == "json") {
        doJson();
    }
}

const btn1Type = ref('primary')
const btn2Type = ref('text')
let textType = "text";
const typeChange = (btnKey) => {
    switch (btnKey) {
        case 'btn1':
            btn1Type.value = 'primary';
            btn2Type.value = 'text';
            textType = "text";
            break
        case 'btn2':
            btn2Type.value = 'primary';
            btn1Type.value = 'text';
            textType = "json";
            break
        default:
            break
    }
}

const showModal = ref(false)
const confirmLoading = ref(false)
// 表单引用
const formRef = ref(null)

// 表单数据
const formData = reactive({
    infoin: '',    // 输入内容
    gwName: '',    // 提交时处理岗位名称
    infoDetail: ref([])   // 内容解析
})
const formRules = reactive({
    infoin: [
        { required: true, message: '请输入岗位信息', trigger: 'blur' },
        { min: 20, max: 2000, message: '岗位信息长度需在 20-2000 个字符之间', trigger: 'blur' }
    ],
    /* 提交时自动进行得转换，就校验啦，保留字段是因为不向改变结构，其他地方都得动
    gwName: [ //没有对应的form元素，验证不生效
      { required: true, message: '未进行转换', trigger: 'blur' }
    ],
    infoDetail: [ //动态列表，验证不生效
      { required: true, message: '未进行转换', trigger: 'blur' }
    ]
    */
})
const saveToLocalStorage = (data, key) => {
    try {
        // 存储到localStoragev
        localStorage.setItem(key, JSON.stringify(data));
        console.log('表单数据已成功存储到localStorage！');
        return true;
    } catch (err) {
        // 捕获所有可能的报错（格式错误、大小超限等）
        const errorMsg = `存储失败：${err.message}`;
        console.error('localStorage存储报错：', err);
        return false;
    }
};

const getFromLocalStorage = (key) => {
    try {

        // 步骤1：读取存储的字符串
        const jsonStr = localStorage.getItem(key);

        // 步骤2：判断是否存在数据
        if (!jsonStr) {
            console.error('localStorage中无该表单数据！');
            return null;
        }
        // 步骤3：解析JSON字符串为对象/数组（核心！）
        const data = JSON.parse(jsonStr);

        console.log('表单数据已从localStorage加载！');

        return data;

    } catch (err) {
        const errorMsg = `读取失败：${err.message}（可能是JSON格式错误）`;
        console.error('localStorage读取报错：', err);
        return null;
    }
};

const refreshGwList = async () => {
    const jsonData = getFromLocalStorage('gangweiList');

}

// 确认提交
const handleOk = async () => {
    try {
        // 1. 表单校验
        await formRef.value.validate()
        transText();

        let jsonData = getFromLocalStorage('gangweiList');
        if (jsonData == null) {
            jsonData = []
        }

        jsonData.push({ ...formData });
        // 2. 模拟接口请求（实际项目中替换为真实接口）
        const result = saveToLocalStorage(jsonData, 'gangweiList');
        if (result) {
            const oneTitle = {};
            oneTitle.title = formData.gwName;
            positions.value.push(oneTitle);
            // 3. 提交成功处理
            message.success('提交成功！')
            console.log('提交的表单数据：', { ...formData })
        } else {
            message.success('提交失败')
            //里面已经打印了失败日志
        }
        // 4. 关闭模态框
        showModal.value = false
    } catch (error) {
        // 表单校验失败
        console.error('表单校验失败：', error)
        message.error('请检查输入内容是否符合要求')
    } finally {
        // 关闭加载状态
        confirmLoading.value = false
    }
}

const resetForm = () => {
    formData.infoin = '';    // 输入内容
    formData.gwName = '';    // 提交时处理岗位名称
    formData.infoDetail = [];   // 内容解析
}

const handleShow = () => {
    // 重置表单（清空输入值和校验状态）
    resetForm()
    // 关闭模态框
    showModal.value = true
}

// 取消弹窗
const handleCancel = () => {
    // 重置表单（清空输入值和校验状态）
    formRef.value?.resetFields()
    resetForm()
    // 关闭模态框
    showModal.value = false
}

// 左侧岗位列表数据
const positions = ref([
    { title: '主播岗位', },
    { title: '运营岗位', },
    { title: '场控岗位', },
]);

// UI 状态 - 只负责界面显示
const inputValue = ref('');
const isLiveOn = ref(false);
const loading = ref(false);

// AI模型管理状态
const modelLoading = ref(false);
const modelStatus = ref({
    exists: false,
    ollamaRunning: false,
    modelName: 'qwen3:8b'
});

// 润色功能状态
const polishLoading = ref(false);

// 文件管理状态
const uploadedFiles = ref([]);
const fileUploadLoading = ref(false);

// 从 userStore 获取 userId (固定值 'rs876543')
const currentUserId = computed(() => {
    return userStore.user?.userId || 'rs876543';
});

// 状态同步 - 从主进程获取直播状态
const syncLiveStatus = async () => {
    try {
        //console.log('开始同步直播状态...');
        const result = await window.electron.ipcRenderer.invoke('get-live-status');
        //console.log('状态同步结果:', result);
        if (result.success) {
            const newState = result.data.isLiveOn;
            isLiveOn.value = newState;
        } else {
            console.error('状态同步失败:', result.error);
        }
    } catch (error) {
        console.error('获取直播状态失败:', error);
    }
};

// IPC 通信胶水代码 - 只负责与主进程通信
const startLive = async () => {
    if (loading.value) return;

    loading.value = true;
    try {
        console.log('开始启动直播...');
        const result = await window.electron.ipcRenderer.invoke('start-live', {
            userId: currentUserId.value // 从 userStore 获取固定 userId 'rs876543'
        });

        console.log('直播启动结果:', result);
        const sessionId = result["sessionId"];
        console.log('result["sessionId"]', sessionId)
        if (sessionId) (
            initWebSocket(sessionId) // 同步到sessionId时才进行socket
        )

        if (result.success) {
            // 等待一下确保状态已更新
            await new Promise(resolve => setTimeout(resolve, 500));

            // 立即同步状态
            await syncLiveStatus();

            message.success('直播已开始');
            console.log('直播启动成功，当前状态:', isLiveOn.value);
        } else {
            message.error('启动直播失败: ' + result.error);
            console.error('启动直播失败:', result.error);
        }
    } catch (error) {
        console.error('启动直播出错:', error);
        message.error('启动直播出错: ' + error.message);
    } finally {
        // 确保loading状态被重置
        loading.value = false;
        console.log('loading状态已重置:', loading.value);
    }
};

const stopLive = async () => {
    if (loading.value) return;

    loading.value = true;
    try {
        console.log('开始停止直播...');
        const result = await window.electron.ipcRenderer.invoke('stop-live');
        console.log('停止直播结果:', result);

        if (result.success) {
            // 等待一下确保状态已更新
            await new Promise(resolve => setTimeout(resolve, 300));

            // 立即同步状态
            await syncLiveStatus();

            message.success('直播已结束');
            console.log('直播停止成功，当前状态:', isLiveOn.value);
        } else {
            message.error('结束直播失败: ' + result.error);
            console.error('结束直播失败:', result.error);
        }
    } catch (error) {
        console.error('停止直播出错:', error);
        message.error('停止直播出错: ' + error.message);
    } finally {
        // 确保loading状态被重置
        loading.value = false;
        console.log('stopLive loading状态已重置:', loading.value);
    }
};

// 插播功能 - 直接调用主进程 IPC
const fullScreenInsert = async () => {
    window.electron.ipcRenderer.send('toggle-camera-insert');
    message.info('已切换全屏插播');
};

const windowInsert = async () => {
    window.electron.ipcRenderer.send('insert-camera-video');
    message.info('已开启窗口插播');
};

const audioInsert = async () => {
    window.electron.ipcRenderer.send('insert-video-audio');
    message.info('已插入音频');
};

const forceClose = async () => {
    try {
        console.log('开始强制关闭直播窗口...');
        const result = await window.electron.ipcRenderer.invoke('force-close-live');
        console.log('强制关闭结果:', result);

        if (result.success) {
            // 等待一下确保状态已更新
            await new Promise(resolve => setTimeout(resolve, 300));

            // 立即同步状态
            await syncLiveStatus();

            message.success('直播窗口已强制关闭');
            console.log('强制关闭成功，当前状态:', isLiveOn.value);
        } else {
            message.error('强制关闭失败: ' + result.error);
            console.error('强制关闭失败:', result.error);
        }
    } catch (error) {
        console.error('强制关闭出错:', error);
        message.error('强制关闭出错: ' + error.message);
    }
};

// AI模型管理函数
const checkModelStatus = async () => {
    try {
        console.log('检查模型状态...');
        const ollamaResult = await window.electron.ipcRenderer.invoke('check-ollama-status');
        const modelResult = await window.electron.ipcRenderer.invoke('check-model-exists', modelStatus.value.modelName);

        modelStatus.value.ollamaRunning = ollamaResult;
        if (modelResult.success) {
            modelStatus.value.exists = modelResult.exists;
            console.log('模型状态检查完成:', modelStatus.value);
        } else {
            console.error('模型检查失败:', modelResult.error);
        }
    } catch (error) {
        console.error('检查模型状态出错:', error);
    }
};

const loadModel = async () => {
    if (modelLoading.value) {
        message.warning('模型正在加载中，请稍候...');
        return;
    }

    modelLoading.value = true;
    try {
        console.log('开始加载AI模型...');
        const result = await window.electron.ipcRenderer.invoke('load-model', modelStatus.value.modelName);
        console.log('模型加载结果:', result);

        if (result.success) {
            if (result.downloaded) {
                message.success(`模型 ${modelStatus.value.modelName} 下载并加载成功！`);
            } else {
                message.success(`模型 ${modelStatus.value.modelName} 已就绪`);
            }

            // 重新检查模型状态
            await checkModelStatus();
        } else {
            message.error('加载模型失败: ' + result.message);
        }
    } catch (error) {
        console.error('加载模型出错:', error);
        message.error('加载模型出错: ' + error.message);
    } finally {
        modelLoading.value = false;
    }
};

const refreshModelStatus = async () => {
    await checkModelStatus();
    message.info('模型状态已刷新');
};


const sendMessageHasParam = async (syncliveSay) => {

    if (syncliveSay) {//正说着呢
        //console.info('进入播放语音方法，有人正说着啦', syncliveSay);
        return false;
    }

    if (sayMessageList.value.length == 0) {
        //console.info('进入播放语音方法，待播放内容为空',sayMessageList.value.length);
        return false;
    }

    liveIsSay.value = true; //我准备说啦，后续需要考虑死锁问题
    //console.info('进入播放语音方法，我准备开始说啦,看看对象有什么',sayMessageList.value);

    try {
        const result = await window.electron.ipcRenderer.invoke('push-explain-position', sayMessageList.value[0]["message"]);
        if (sayMessageList.value[0]["type"] == "dutyDetail") {
            //如果是职位详情，播放是高亮，滚动
            scrollToIndex(sayMessageList.value[0]["dutyIndex"]);
        }
        sayMessageList.value.splice(0, 1);
        if (result.success) {
            message.success('消息已发送');
            return true;
        } else {
            message.error('发送失败: ' + result.error);
            return false;
        }
    } catch (error) {
        liveIsSay.value = false;
        console.error('发送消息出错:', error);
        message.error('发送消息出错');
        return false;
    }
}

// 发送消息到数字人
const sendMessage = () => {

    //临时添加也只是先添加到 语音消息队列中
    const oneMessage = { "type": "tempMessage", "dutyIndex": 0, message: inputValue.value };
    sayMessageList.value.unshift(oneMessage);//插播内容添加到开头
    inputValue.value = '';
    console.log("待播放消息列表：sayMessageList", sayMessageList)

};


const polishTextBackStr = async (_inputStr) => {

    if (_inputStr && !_inputStr.trim()) {
        message.warning('请输入需要润色的文本');
        return;
    }

    if (polishLoading.value) {
        message.warning('正在润色中，请稍候...');
        return;
    }

    polishLoading.value = true;

    //加123的测试效果
    // const originalText = _inputStr+123;
    // console.log("originalText",originalText)
    // return originalText;
    const originalText = _inputStr;

    try {
        console.log('开始润色文本:', originalText);
        const result = await window.electron.ipcRenderer.invoke('polish-text', originalText);
        console.log('润色结果:', result);

        if (result.success) {
            const outstr = result.data;
            message.success('文本润色完成');
            return outstr;
        } else {
            message.error('润色失败: ' + result.error);
            console.error('润色失败:', result.error);
            return "";
        }
    } catch (error) {
        console.error('润色文本出错:', error);
        message.error('润色服务出错: ' + error.message);
        return "";
    } finally {
        polishLoading.value = false;
    }

}

// 润色文本功能
const polishText = async (targetInputStr) => {

    if (targetInputStr == 'inputValue') {
        inputValue.value = await polishTextBackStr(inputValue.value);
    } else if (targetInputStr == 'gangwei') {
        console.log("formData.infoin", formData.infoin)
        formData.infoin = await polishTextBackStr(formData.infoin);
    }

    /*
    if (polishLoading.value) {
        message.warning('正在润色中，请稍候...');
        return;
    }

    polishLoading.value = true;
    const originalText = inputValue.value;

    try {
        console.log('开始润色文本:', originalText);
        const result = await window.electron.ipcRenderer.invoke('polish-text', originalText);
        console.log('润色结果:', result);

        if (result.success) {
            inputValue.value = result.data;
            message.success('文本润色完成');
        } else {
            message.error('润色失败: ' + result.error);
            console.error('润色失败:', result.error);
        }
    } catch (error) {
        console.error('润色文本出错:', error);
        message.error('润色服务出错: ' + error.message);
    } finally {
        polishLoading.value = false;
    }
    */
};

// 文件处理函数
const handleFileDrop = async (event) => {
    event.preventDefault();
    const files = Array.from(event.dataTransfer.files);

    if (files.length === 0) {
        message.warning('请选择要上传的文件');
        return;
    }

    // 过滤文件，只保留图片和视频
    const supportedFiles = files.filter(file => {
        const isImage = file.type.startsWith('image/');
        const isVideo = file.type.startsWith('video/');
        return isImage || isVideo;
    });

    const unsupportedFiles = files.filter(file => {
        const isImage = file.type.startsWith('image/');
        const isVideo = file.type.startsWith('video/');
        return !isImage && !isVideo;
    });

    // 如果有不支持的文件，给出提示
    if (unsupportedFiles.length > 0) {
        const unsupportedNames = unsupportedFiles.map(f => f.name).join(', ');
        message.warning(`以下文件类型不支持，已自动过滤: ${unsupportedNames}`);
    }

    if (supportedFiles.length === 0) {
        message.warning('请选择图片或视频文件');
        return;
    }

    fileUploadLoading.value = true;

    try {
        console.log('处理拖拽文件:', supportedFiles);

        for (const file of supportedFiles) {
            // 读取文件为base64或blob URL
            const fileInfo = await processFile(file);
            uploadedFiles.value.push(fileInfo);
        }

        message.success(`成功添加 ${supportedFiles.length} 个图片/视频文件`);

        // 如果正在直播，自动在直播窗口展示
        if (isLiveOn.value) {
            await showFilesInLive();
        }
    } catch (error) {
        console.error('文件处理失败:', error);
        message.error('文件处理失败: ' + error.message);
    } finally {
        fileUploadLoading.value = false;
    }
};

// 处理单个文件
const processFile = async (file) => {
    // 对于大文件，只传输基本信息，不传输完整数据
    // 在Electron环境中，我们可以使用文件路径
    const fileInfo = {
        name: file.name,
        type: file.type,
        size: file.size,
        path: file.path || file.webkitRelativePath || file.name, // 使用文件路径
        // 移除 data 字段，避免大文件导致克隆错误
    };
    return fileInfo;
};

// 获取文件类型文本
const getFileTypeText = (mimeType) => {
    if (mimeType.startsWith('image/')) return '图片';
    if (mimeType.startsWith('video/')) return '视频';
    if (mimeType.startsWith('audio/')) return '音频';
    if (mimeType.includes('pdf')) return 'PDF';
    if (mimeType.includes('word') || mimeType.includes('document')) return '文档';
    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return '表格';
    return '文件';
};

// 获取文件标签颜色
const getFileTagColor = (mimeType) => {
    if (mimeType.startsWith('image/')) return 'green';
    if (mimeType.startsWith('video/')) return 'blue';
    if (mimeType.startsWith('audio/')) return 'purple';
    if (mimeType.includes('pdf')) return 'red';
    return 'default';
};

// 移除单个文件
const removeFile = async (index) => {
    try {
        const removedFile = uploadedFiles.value[index];

        uploadedFiles.value.splice(index, 1);

        // 通知直播窗口移除对应的展示
        if (isLiveOn.value) {
            await window.electron.ipcRenderer.invoke('remove-file-from-live', {
                index,
                fileName: removedFile.name
            });
        }

        message.success('文件已移除');
    } catch (error) {
        console.error('移除文件失败:', error);
        message.error('移除文件失败');
    }
};

// 清空所有文件
const clearAllFiles = async () => {
    try {
        uploadedFiles.value = [];

        // 通知直播窗口清空所有展示
        if (isLiveOn.value) {
            await window.electron.ipcRenderer.invoke('clear-all-files-from-live');
        }

        message.success('已清空所有文件');
    } catch (error) {
        console.error('清空文件失败:', error);
        message.error('清空文件失败');
    }
};

// 在直播中展示文件
const showFilesInLive = async () => {
    if (!isLiveOn.value) {
        message.warning('请先开始直播');
        return;
    }

    if (uploadedFiles.value.length === 0) {
        message.warning('没有可展示的文件');
        return;
    }

    try {
        console.log(uploadedFiles.value)
        console.log('在直播中展示文件:', uploadedFiles.value);

        // 将响应式对象转换为普通对象，避免序列化问题
        const filesData = JSON.parse(JSON.stringify(uploadedFiles.value));

        const result = await window.electron.ipcRenderer.invoke('show-files-in-live', {
            files: filesData
        });

        if (result.success) {
            message.success('文件已在直播窗口展示');
        } else {
            message.error('展示失败: ' + result.error);
        }
    } catch (error) {
        console.error('展示文件失败:', error);
        message.error('展示文件失败');
    }
};

const setQuickCommand = (command) => {
    inputValue.value = command;
};

// 处理直播状态更新
const handleLiveStatusUpdated = (event, data) => {
    console.log('收到直播状态更新:', data);
    if (data.windowLoaded) {
        syncLiveStatus();
    }
};

// 模型加载进度优化
const modelProgressTimer = ref(null);
const lastProgressMessage = ref('');
const progressDebounceDelay = 1000; // 1秒内最多显示一次进度更新

const handleModelLoadProgress = (event, data) => {
    // 清除之前的定时器
    if (modelProgressTimer.value) {
        clearTimeout(modelProgressTimer.value);
    }

    const messageType = data.type || 'info';
    const currentMessage = data.status;

    // 错误、成功、警告消息立即显示
    if (messageType === 'error') {
        message.error(`模型加载错误: ${currentMessage}`);
        return;
    }

    if (messageType === 'success') {
        message.success(currentMessage);
        lastProgressMessage.value = '';
        return;
    }

    if (messageType === 'warning') {
        message.warning(currentMessage);
        return;
    }

    // 下载进度和普通进度消息处理
    if (currentMessage === lastProgressMessage.value) {
        return;
    }

    const delay = messageType === 'download' ? 200 : progressDebounceDelay;
    const duration = messageType === 'download' ? 3 : 2;

    modelProgressTimer.value = setTimeout(() => {
        message.info(currentMessage, duration);
        lastProgressMessage.value = currentMessage;
    }, delay);
};

// 处理模型下载确认请求
const handleModelDownloadConfirm = async (_event, data) => {
    Modal.confirm({
        title: '模型下载确认',
        content: data.message,
        okText: '确认下载',
        cancelText: '取消',
        centered: true,
        width: 400,
        maskClosable: false,
        onOk() {
            window.electron.ipcRenderer.send('model-download-confirm-response', {
                modelName: data.modelName,
                confirmed: true,
                timestamp: new Date().toISOString()
            });
        },
        onCancel() {
            window.electron.ipcRenderer.send('model-download-confirm-response', {
                modelName: data.modelName,
                confirmed: false,
                timestamp: new Date().toISOString()
            });
        }
    });
};

onUnmounted(() => {
    if (socketClient) {
        socketClient.close(1000, '页面卸载');
        msgList.value.push({
            time: formatTime(),
            type: 'system',
            content: '页面卸载，主动关闭 Socket 长连接'
        });
    }
});

// 监听直播状态变化
onMounted(() => {

    setInterval(() => {
        sendMessageHasParam(liveIsSay.value)
    }, 1000);
    initGwData();
    // 初始化时同步状态
    syncLiveStatus();
    checkModelStatus(); // 初始化时检查模型状态

    // 监听窗口加载完成事件
    window.electron.ipcRenderer.on('live-status-updated', handleLiveStatusUpdated);

    // 监听模型加载进度
    window.electron.ipcRenderer.on('model-load-progress', handleModelLoadProgress);

    // 监听模型下载确认请求
    window.electron.ipcRenderer.on('model-download-confirm', handleModelDownloadConfirm);

    // 定期同步状态 (可选)
    const statusInterval = setInterval(syncLiveStatus, 1000);

    // 清理定时器
    onUnmounted(() => {
        clearInterval(statusInterval);
        if (modelProgressTimer.value) {
            clearTimeout(modelProgressTimer.value);
        }
        window.electron.ipcRenderer.off('live-status-updated', handleLiveStatusUpdated);
        window.electron.ipcRenderer.off('model-load-progress', handleModelLoadProgress);
        window.electron.ipcRenderer.off('model-download-confirm', handleModelDownloadConfirm);
    });
});
</script>

<style scoped lang="scss">
/* 布局基座 */
.app-container {
    height: 100vh;
    overflow: hidden;
}

.header {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 20px;
    height: 56px;
    line-height: 56px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    -webkit-app-region: drag;
}

.sub-layout {
    height: calc(100vh - 56px);
}

/* 侧边栏结构优化 */
.sider {
    background: #fff !important;
    border-right: 1px solid #f0f0f0;

    :deep(.ant-layout-sider-children) {
        display: flex;
        flex-direction: column;
    }
}

.sider-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sider-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &.top-panel {
        flex: 4; // 岗位列表占 40%
        border-bottom: 1px solid #f0f0f0;
    }

    &.bottom-panel {
        flex: 6; // 岗位详情占 60%
        background-color: #fafafa;
    }
}

.section-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.section-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        background: #e8e8e8;
        border-radius: 2px;
    }
}

/* 列表项交互样式 */
.position-item {
    padding: 8px 12px !important;
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent !important;

    &:hover {
        background-color: #f0f7ff;
        border-color: #e6f4ff !important;
    }

    .play-btn {
        color: #1677ff;

        &:hover {
            opacity: 0.8;
        }
    }

    .delete-btn {
        color: #bfbfbf;

        &:hover {
            color: #ff4d4f;
        }
    }
}

.detail-item {
    padding: 10px 12px !important;
    border-radius: 4px;
    margin-bottom: 2px;
    background: #fff;
    border-left: 3px solid transparent !important;

    &.highlight-item {
        background-color: #e6f4ff !important;
        border-left-color: #1677ff !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
}

.special-duty {
    display: flex;
    align-items: center;
    color: #1677ff;

    .star-icon {
        margin-right: 8px;
    }

    .bold-text {
        font-weight: 600;
    }
}

/* 主内容与卡片 */
.main-content-layout {
    background: #f5f7fa;
}

.content-scroll-area {
    padding: 16px;
    overflow-y: auto;
}

.custom-card {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    :deep(.ant-card-head) {
        border-bottom: 1px solid #f0f0f0;
        min-height: 40px;
    }
}

/* 文件上传区 */
.file-drop-zone {
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    background: #fff;
    transition: all 0.3s;

    &.is-dragging,
    &:hover {
        border-color: #1677ff;
        background: #f0f7ff;
    }

    .drop-icon {
        font-size: 32px;
        color: #1677ff;
        margin-bottom: 8px;
    }

    .drop-text {
        color: #8c8c8c;
        font-size: 13px;
    }
}

.file-list-container {
    margin-top: 12px;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    max-height: 150px;
    overflow-y: auto;
}

.file-item-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    background: #fff;
    border-bottom: 1px solid #f9f9f9;

    &:last-child {
        border-bottom: none;
    }
}

/* 底部区域 */
.input-footer {
    background: #fff;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    height: auto;
}

.quick-commands {
    display: flex;
    align-items: center;
    gap: 8px;

    .label {
        color: #8c8c8c;
        font-size: 12px;
    }

    .cmd-btn {
        font-size: 12px;
        border-radius: 10px;
        background: #f5f5f5;
        border: none;
    }
}

.polish-btn {
    align-self: flex-start;
    color: #722ed1;
    border-color: #d3adf7;

    &:hover {
        background: #f9f0ff;
    }
}
</style>