(() => {
    'use strict';

    new Vue({
        el: '#messageAccountManageApp',
        data: {
            // API
            apiName: 'MessageAccountManage',
            // 搜尋條件
            search: {
                projectName: '',
                platformCode: ''
            },
            // 搜尋結果
            accountList: [],
            loading: false,
            // 分頁
            currentPage: 1,
            pageSize: 10,
            totalCount: 0,
            // 搜尋專案自動完成
            projectSuggestions: [],
            showProjectSuggestions: false,
            projectSearchTimeout: null,
            // 彈窗
            showModal: false,
            isNewMode: true,
            editItem: {
                ID: 0,
                ProjectID: '',
                MMSAccount: '',
                MMSPassword: '',
                PlatformCode: '',
                projectName: '',
                DB_APPNO: 0
            },
            // 編輯模式專案自動完成
            editProjectSuggestions: [],
            showEditProjectSuggestions: false,
            editProjectSearchTimeout: null,
            // 驗證錯誤訊息
            validationErrors: {
                ProjectID: '',
                MMSAccount: '',
                MMSPassword: ''
            },
            // 編輯狀態
            showPassword: false,
            // 平台
            platforms: [],
            currentPlatform: null,
            showPlatformSettings: false,
            showSwitchPanel: false,
            switchPlatformCode: ''
        },
        computed: {
            totalPages() {
                return Math.ceil(this.totalCount / this.pageSize);
            }
        },
        mounted() {
            console.log('[MessageAccountManage] Vue app mounted');
            // 初始載入資料
            this.performSearch();
            this.loadPlatforms();
            this.loadCurrentPlatform();
        },
        methods: {
            /**
             * 依 PlatformCode 取得平台顯示名稱
             */
            getPlatformName(platformCode) {
                if (!platformCode) return '系統預設';
                const p = this.platforms.find(function(x) { return x.PlatformCode === platformCode; });
                return p ? p.PlatformName + '（' + p.PlatformCode + '）' : platformCode;
            },

            /**
             * 執行搜尋
             */
            async performSearch() {
                this.currentPage = 1;
                await this.loadAccounts();
            },

            /**
             * 載入簡訊帳號資料
             */
            async loadAccounts() {
                this.loading = true;
                try {
                    const response = await this.$api.call(this.apiName, 'Search', {
                        pageNo: this.currentPage,
                        pageSize: this.pageSize,
                        projectID: this.search.projectID || '',
                        platformCode: this.search.platformCode || ''
                    });

                    if (response.Success) {
                        this.accountList = response.Data || [];
                        this.totalCount = response.TotalCount || 0;

                        // 初始化密碼隱藏狀態 (使用 $set 確保響應式)
                        this.accountList.forEach(item => {
                            this.$set(item, 'showPassword', false);
                        });

                        console.log('[MessageAccountManage] 載入成功，共 ' + this.totalCount + ' 筆');
                    } else {
                        this.$message.error(response.Message || '查詢失敗');
                        this.accountList = [];
                        this.totalCount = 0;
                    }
                } catch (error) {
                    console.error('[MessageAccountManage] 載入錯誤:', error);
                    this.$message.error('載入資料發生錯誤');
                    this.accountList = [];
                    this.totalCount = 0;
                } finally {
                    this.loading = false;
                }
            },

            /**
             * 清除搜尋條件
             */
            clearSearch() {
                this.search = {
                    projectName: '',
                    platformCode: ''
                };
                this.projectSuggestions = [];
                this.showProjectSuggestions = false;
                this.performSearch();
            },

            /**
             * 搜尋計畫 (搜尋區自動完成)
             */
            searchProjects() {
                // 清除之前的超時
                if (this.projectSearchTimeout) {
                    clearTimeout(this.projectSearchTimeout);
                }

                const keyword = this.search.projectName.trim();

                // 如果輸入為空，清空建議和ProjectID
                if (!keyword) {
                    this.projectSuggestions = [];
                    this.search.projectID = '';
                    return;
                }

                // 延遲搜尋以避免過多API呼叫
                this.projectSearchTimeout = setTimeout(async () => {
                    try {
                        const response = await this.$api.call(this.apiName, 'SearchProjects', {
                            keyword: keyword
                        });

                        if (response.Success) {
                            this.projectSuggestions = response.Data || [];
                            this.showProjectSuggestions = this.projectSuggestions.length > 0;
                        } else {
                            this.projectSuggestions = [];
                            this.showProjectSuggestions = false;
                        }
                    } catch (error) {
                        console.error('[MessageAccountManage] 搜尋計畫錯誤:', error);
                        this.projectSuggestions = [];
                        this.showProjectSuggestions = false;
                    }
                }, 300);
            },

            /**
             * 選擇計畫 (搜尋區)
             */
            selectProject(suggestion) {
                this.search.projectID = suggestion.Value;
                this.search.projectName = `${suggestion.Value} - ${suggestion.Name}`;
                this.projectSuggestions = [];
                this.showProjectSuggestions = false;
            },

            /**
             * 隱藏計畫建議 (搜尋區 - 延遲隱藏以允許點擊)
             */
            hideProjectSuggestions() {
                setTimeout(() => {
                    this.showProjectSuggestions = false;
                }, 200);
            },

            /**
             * 搜尋編輯模式的計畫 (自動完成)
             */
            searchEditProjectSuggestions() {
                // 清除之前的超時
                if (this.editProjectSearchTimeout) {
                    clearTimeout(this.editProjectSearchTimeout);
                }

                const keyword = this.editItem.projectName.trim();

                // 如果輸入為空，清空建議和ProjectID
                if (!keyword) {
                    this.editProjectSuggestions = [];
                    this.editItem.ProjectID = '';
                    return;
                }

                // 延遲搜尋以避免過多API呼叫
                this.editProjectSearchTimeout = setTimeout(async () => {
                    try {
                        const response = await this.$api.call(this.apiName, 'SearchProjects', {
                            keyword: keyword
                        });

                        if (response.Success) {
                            this.editProjectSuggestions = response.Data || [];
                            this.showEditProjectSuggestions = this.editProjectSuggestions.length > 0;
                        } else {
                            this.editProjectSuggestions = [];
                            this.showEditProjectSuggestions = false;
                        }
                    } catch (error) {
                        console.error('[MessageAccountManage] 搜尋編輯模式計畫錯誤:', error);
                        this.editProjectSuggestions = [];
                        this.showEditProjectSuggestions = false;
                    }
                }, 300);
            },

            /**
             * 選擇編輯模式的計畫
             */
            selectEditProject(suggestion) {
                this.editItem.ProjectID = suggestion.Value;
                this.editItem.projectName = `${suggestion.Value} - ${suggestion.Name}`;
                this.editProjectSuggestions = [];
                this.showEditProjectSuggestions = false;
            },

            /**
             * 隱藏編輯模式的計畫建議 (延遲隱藏以允許點擊)
             */
            hideEditProjectSuggestions() {
                setTimeout(() => {
                    this.showEditProjectSuggestions = false;
                }, 200);
            },

            /**
             * 換頁
             */
            goToPage(page) {
                if (page < 1 || page > this.totalPages) return;
                this.currentPage = page;
                this.loadAccounts();
            },

            /**
             * 上一頁
             */
            previousPage() {
                if (this.currentPage > 1) {
                    this.goToPage(this.currentPage - 1);
                }
            },

            /**
             * 下一頁
             */
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.goToPage(this.currentPage + 1);
                }
            },

            /**
             * 開啟新增彈窗
             */
            openAddModal() {
                this.isNewMode = true;
                this.editItem = {
                    ID: 0,
                    ProjectID: '',
                    MMSAccount: '',
                    MMSPassword: '',
                    PlatformCode: this.currentPlatform ? this.currentPlatform.PlatformCode : '',
                    projectName: '',
                    DB_APPNO: 0
                };
                this.showEditProjectSuggestions = false;
                this.showPassword = false;
                this.clearValidationErrors();
                this.showModal = true;
            },

            /**
             * 開啟編輯彈窗
             */
            openEditModal(item) {
                this.isNewMode = false;
                this.editItem = {
                    ID: item.ID,
                    ProjectID: item.ProjectID,
                    MMSAccount: item.MMSAccount,
                    MMSPassword: item.MMSPassword,
                    PlatformCode: item.PlatformCode || '',
                    projectName: item.ProjectName ? `${item.ProjectID} - ${item.ProjectName}` : item.ProjectID,
                    DB_APPNO: item.DB_APPNO
                };
                this.editProjectSuggestions = [];
                this.showEditProjectSuggestions = false;
                this.showPassword = false;
                this.clearValidationErrors();
                this.showModal = true;
            },

            /**
             * 關閉彈窗
             */
            closeModal() {
                this.showModal = false;
            },

            /**
             * 清除驗證錯誤訊息
             */
            clearValidationErrors() {
                this.validationErrors = {
                    ProjectID: '',
                    MMSAccount: '',
                    MMSPassword: ''
                };
            },

            /**
             * 驗證輸入
             */
            validateInput() {
                this.clearValidationErrors();
                let isValid = true;

                // 驗證計畫代號
                if (!this.editItem.ProjectID || this.editItem.ProjectID.trim() === '') {
                    this.validationErrors.ProjectID = '計畫代號為必填欄位';
                    isValid = false;
                } else if (this.editItem.ProjectID.length > 20) {
                    this.validationErrors.ProjectID = '計畫代號最長 20 個字元';
                    isValid = false;
                }

                // 驗證簡訊帳號
                if (!this.editItem.MMSAccount || this.editItem.MMSAccount.trim() === '') {
                    this.validationErrors.MMSAccount = '簡訊帳號為必填欄位';
                    isValid = false;
                } else if (this.editItem.MMSAccount.length > 50) {
                    this.validationErrors.MMSAccount = '簡訊帳號最長 50 個字元';
                    isValid = false;
                }

                // 驗證簡訊密碼
                if (!this.editItem.MMSPassword || this.editItem.MMSPassword.trim() === '') {
                    this.validationErrors.MMSPassword = '簡訊密碼為必填欄位';
                    isValid = false;
                } else if (this.editItem.MMSPassword.length > 50) {
                    this.validationErrors.MMSPassword = '簡訊密碼最長 50 個字元';
                    isValid = false;
                }

                return isValid;
            },

            /**
             * 儲存簡訊帳號
             */
            async saveAccount() {
                if (!this.validateInput()) return;

                try {
                    // 準備資料
                    const item = {
                        ID: this.editItem.ID,
                        ProjectID: this.editItem.ProjectID.trim(),
                        MMSAccount: this.editItem.MMSAccount.trim(),
                        MMSPassword: this.editItem.MMSPassword.trim(),
                        PlatformCode: this.editItem.PlatformCode.trim(),
                        DB_APPNO: this.editItem.DB_APPNO
                    };

                    const response = await this.$api.call(this.apiName, 'Save', {
                        isNew: this.isNewMode,
                        item: item
                    });

                    if (response.Success) {
                        this.$message.success(response.Message || '儲存成功');
                        this.closeModal();
                        this.loadAccounts();
                    } else {
                        this.$message.error(response.Message || '儲存失敗');
                    }
                } catch (error) {
                    console.error('[MessageAccountManage] 儲存錯誤:', error);
                    this.$message.error('儲存發生錯誤');
                }
            },

            /**
             * 刪除簡訊帳號
             */
            async deleteAccount(item) {
                if (!confirm(`確定要刪除計畫「${item.ProjectID}」的簡訊帳號設定嗎？`)) {
                    return;
                }

                try {
                    const response = await this.$api.call(this.apiName, 'Delete', {
                        id: item.ID,
                        dbAppNo: item.DB_APPNO
                    });

                    if (response.Success) {
                        this.$message.success(response.Message || '刪除成功');
                        this.loadAccounts();
                    } else {
                        this.$message.error(response.Message || '刪除失敗');
                    }
                } catch (error) {
                    console.error('[MessageAccountManage] 刪除錯誤:', error);
                    this.$message.error('刪除發生錯誤');
                }
            },

            /**
             * 切換密碼顯示/隱藏
             */
            togglePasswordDisplay(item) {
                this.$set(item, 'showPassword', !item.showPassword);
            },

            /**
             * 切換編輯模式密碼顯示/隱藏
             */
            toggleEditPasswordDisplay() {
                this.showPassword = !this.showPassword;
            },

            /**
             * 載入所有平台清單
             */
            async loadPlatforms() {
                try {
                    const res = await this.$api.call(this.apiName, 'GetPlatforms', {});
                    if (res.Success && res.Data) {
                        this.platforms = res.Data.map(p => Object.assign({ showPwd: false }, p));
                        if (!this.switchPlatformCode && this.platforms.length > 0) {
                            this.switchPlatformCode = this.platforms[0].PlatformCode;
                        }
                    }
                } catch (e) {
                    console.error('[loadPlatforms]', e);
                }
            },

            /**
             * 載入目前預設平台
             */
            async loadCurrentPlatform() {
                try {
                    const res = await this.$api.call(this.apiName, 'GetCurrentPlatform', {});
                    if (res.Success) this.currentPlatform = res.Data;
                } catch (e) {
                    console.error('[loadCurrentPlatform]', e);
                }
            },

            /**
             * 儲存單一平台帳號設定
             */
            async savePlatformSetting(platform) {
                try {
                    const res = await this.$api.call(this.apiName, 'SavePlatform', {
                        item: {
                            ID: platform.ID,
                            PlatformCode: platform.PlatformCode,
                            PlatformName: platform.PlatformName,
                            Account: platform.Account,
                            Password: platform.Password,
                            Remark: platform.Remark
                        }
                    });
                    if (res.Success) {
                        this.$message.success(res.Message || '儲存成功');
                    } else {
                        this.$message.error(res.Message || '儲存失敗');
                    }
                } catch (e) {
                    console.error('[savePlatformSetting]', e);
                    this.$message.error('儲存發生錯誤');
                }
            },

            /**
             * 切換預設平台
             */
            async setCurrentPlatform() {
                try {
                    const res = await this.$api.call(this.apiName, 'SetCurrentPlatform', { platformCode: this.switchPlatformCode });
                    if (res.Success) {
                        this.$message.success(res.Message || '切換成功');
                        this.showSwitchPanel = false;
                        await this.loadCurrentPlatform();
                    } else {
                        this.$message.error(res.Message || '切換失敗');
                    }
                } catch (e) {
                    console.error('[setCurrentPlatform]', e);
                    this.$message.error('切換發生錯誤');
                }
            }
        }
    });
})();