function CreateTrainFareApp() {
    const loadMarker = document.getElementById('TrainFareAPP');
    if (loadMarker) {
        DoCreateTrainFareApp();
    }
}

function DoCreateTrainFareApp() {
    trainFareApp = new Vue({
        el: "#TrainFareAPP",
        mixins: [DateMixin, ToastMixin, ApiMixin],
        data: {
            versions: [],
            selectedVersionId: '',
            isEditMode: false,
            
            originStations: [],
            destStations: [],
            fareData: {},
            editFareData: {},
            
            loading: false
        },
        mounted() {
            this.LoadVersions();
        },
        methods: {
            async LoadVersions() {
                try {
                    const result = await this.callApiWithErrorMsg('火車票價維護', 'GetVersions', {}, '載入版本清單');
                    this.versions = result.Data || [];
                    if (!this.selectedVersionId && this.versions.length > 0) {
                        this.selectedVersionId = this.versions[0].Value;
                        this.LoadFareTable();
                    }
                } catch (error) {
                    console.error('LoadVersions error:', error);
                }
            },

            async LoadFareTable() {
                if (!this.selectedVersionId) {
                    this.originStations = [];
                    this.destStations = [];
                    this.fareData = {};
                    return;
                }

                try {
                    this.loading = true;
                    const result = await this.callApiWithErrorMsg(
                        '火車票價維護', 
                        'GetFareTable', 
                        { versionId: this.selectedVersionId }, 
                        '載入票價表'
                    );
                    
                    const data = result.Data || {};
                    this.originStations = data.originStations || [];
                    this.destStations = data.destStations || [];
                    this.fareData = data.fares || {};
                    this.editFareData = JSON.parse(JSON.stringify(this.fareData));
                    this.isEditMode = false;
                } catch (error) {
                    console.error('LoadFareTable error:', error);
                } finally {
                    this.loading = false;
                }
            },

            EnterEditMode() {
                this.editFareData = JSON.parse(JSON.stringify(this.fareData));
                this.isEditMode = true;
            },

            CancelEdit() {
                this.editFareData = {};
                this.isEditMode = false;
            },

            async SaveChanges() {
                if (!this.selectedVersionId) {
                    this.ShowWarning('請先選擇版本');
                    return;
                }

                try {
                    this.loading = true;
                    await this.callApiWithErrorMsg(
                        '火車票價維護',
                        'SaveFareTable',
                        {
                            versionId: this.selectedVersionId,
                            fares: JSON.stringify(this.editFareData)
                        },
                        '儲存'
                    );
                    this.ShowSuccess('儲存成功');
                    this.isEditMode = false;
                    this.LoadVersions();
                    this.LoadFareTable();
                } catch (error) {
                    console.error('SaveChanges error:', error);
                } finally {
                    this.loading = false;
                }
            },

            async DeleteVersion() {
                if (!this.selectedVersionId) {
                    this.ShowWarning('請先選擇版本');
                    return;
                }

                if (!confirm(`確定要刪除版本 ${this.selectedVersionId} 嗎？`)) {
                    return;
                }

                try {
                    this.loading = true;
                    await this.callApiWithErrorMsg(
                        '火車票價維護',
                        'DeleteVersion',
                        { versionId: this.selectedVersionId },
                        '刪除'
                    );
                    this.ShowSuccess('版本刪除成功');
                    this.selectedVersionId = '';
                    this.LoadVersions();
                    this.LoadFareTable();
                } catch (error) {
                    console.error('DeleteVersion error:', error);
                } finally {
                    this.loading = false;
                }
            },

            GetFare(origin, destination) {
                const key = `${origin}_${destination}`;
                return this.fareData[key] || '';
            },

            GetFareInput(origin, destination) {
                if (origin === destination) return null;
                const key = `${origin}_${destination}`;
                return this.editFareData[key] || null;
            },

            SetFareInput(origin, destination, value) {
                if (origin === destination) return;
                const key = `${origin}_${destination}`;
                // 轉換為整數，空值或非數字時設為 0
                const numValue = parseInt(value) || 0;
                this.$set(this.editFareData, key, numValue);
            }
        }
    });
}

function CreateTrainFareImportExportApp() {
    const loadMarker = document.getElementById('TrainFareImportExportAPP');
    if (loadMarker) {
        DoCreateTrainFareImportExportApp();
    }
}

function DoCreateTrainFareImportExportApp() {
const importExportApp = new Vue({
    el: "#TrainFareImportExportAPP",
    mixins: [DateMixin, ToastMixin, ApiMixin, Base64Mixin],
        data: {
            activeTab: 'export',
        versions: [],
        exportVersionId: '',
        exportResponse: null,

        selectedFile: null,
        uploadedFilePath: null,
        importPreviewData: {},
        importOriginStations: [],
        importDestStations: [],
        checkResult: null,

        loading: false
    },
    computed: {
        isImportButtonDisabled() {
            // 匯入按鈕禁用條件：
            // 1. 沒有上傳檔案
            // 2. 沒有驗證結果
            // 3. 驗證失敗
            // 4. 驗證未完成（success 不為 true）
            return !this.uploadedFilePath || 
                   !this.checkResult || 
                   !this.checkResult.success;
        },
        exportOriginStations() {
            return this.exportResponse?.Data?.originStations || [];
        },
        exportDestStations() {
            return this.exportResponse?.Data?.destStations || [];
        },
        exportData() {
            return this.exportResponse?.Data?.fares || {};
        }
    },
    mounted() {
        this.LoadVersions();
    },
    watch: {
        exportVersionId() {
            // 版本選擇改變時，重置匯出數據
            this.exportResponse = null;
        }
    },
        methods: {
            async LoadVersions() {
                try {
                    const result = await this.callApiWithErrorMsg('火車票價維護', 'GetVersions', {}, '載入版本清單');
                    this.versions = result.Data || [];
                } catch (error) {
                    console.error('LoadVersions error:', error);
                }
            },

            async DownloadTemplate() {
                try {
                    const result = await this.callApiWithErrorMsg(
                        '火車票價維護',
                        'GetExcelTemplate',
                        {},
                        '下載範本'
                    );

                    // 下載 Excel 檔案
                    const excelData = result.Data;
                    if (!excelData) {
                        this.ShowError('下載失敗：未取得範本檔案資料');
                        return;
                    }
                    
                    const blob = this.Base64ToBlob(excelData);
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.download = '火車票價_匯入範本.xlsx';
                    link.click();
                    
                    this.ShowSuccess('範本下載成功');
                } catch (error) {
                    console.error('DownloadTemplate error:', error);
                }
            },

            async ExportData() {
                if (!this.exportVersionId) {
                    this.ShowWarning('請選擇版本');
                    return;
                }

                try {
                    this.loading = true;
                    const result = await this.callApiWithErrorMsg(
                        '火車票價維護',
                        'ExportFareData',
                        { versionId: this.exportVersionId },
                        '匯出'
                    );

                    // 儲存完整響應以供計算屬性使用
                    this.exportResponse = result;

                    // 下載 Excel 檔案
                    const excelData = result.ExcelData;
                    if (!excelData) {
                        this.ShowError('匯出失敗：未取得 Excel 檔案資料');
                        return;
                    }
                    
                    const blob = this.Base64ToBlob(excelData);
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.download = `火車票價_版本${this.exportVersionId}_${new Date().getTime()}.xlsx`;
                    link.click();
                    
                    this.ShowSuccess('匯出成功');
                } catch (error) {
                    console.error('ExportData error:', error);
                } finally {
                    this.loading = false;
                }
            },

            OnFileSelected(event) {
                const file = event.target.files[0];
                if (!file) return;

                this.selectedFile = file;
                this.checkResult = null;
                this.importPreviewData = {};
                this.importOriginStations = [];
                this.importDestStations = [];
                
                this.UploadFile(file);
            },

            UploadFile(file) {
                if (!file) {
                    this.ShowError('請選擇檔案');
                    return;
                }

                try {
                    const formData = new FormData();
                    formData.append('file', file);

                    // 使用 .ashx Handler 上傳檔案
                    const uploadUrl = `${API_BASE}/TrainFareUploadHandler.ashx`;

                    fetch(uploadUrl, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.text();
                    })
                    .then(text => {
                        try {
                            const result = JSON.parse(text);
                            
                            if (result && result.Success) {
                                const uploadedFilePath = result.Data;
                                this.ShowSuccess('檔案上傳成功');
                                // 立即驗證上傳的檔案
                                this.ValidateUploadedFile(uploadedFilePath);
                            } else {
                                const errorMsg = result ? result.Message : '上傳失敗';
                                this.ShowError('上傳失敗：' + errorMsg);
                            }
                        } catch (e) {
                            console.error('Parse response error:', e);
                            console.error('Response text:', text);
                            this.ShowError('檔案上傳失敗：回應格式錯誤');
                        }
                    })
                    .catch(error => {
                        console.error('Upload error:', error);
                        this.ShowError('檔案上傳失敗：' + error.message);
                    });
                } catch (error) {
                    console.error('UploadFile error:', error);
                    this.ShowError('檔案上傳出錯：' + error.message);
                }
            },

            async ValidateUploadedFile(filePath) {
                try {
                    const result = await this.callApiWithErrorMsg(
                        '火車票價維護',
                        'ValidateImportFile',
                        { filePath: filePath },
                        '驗證檔案'
                    );

                    this.checkResult = {
                        success: result.Success,
                        errors: result.Data?.Errors || []
                    };

                    if (this.checkResult.success) {
                        // 解析預覽資料
                        this.uploadedFilePath = filePath;
                        this.importPreviewData = result.Data?.Fares || {};
                        this.importOriginStations = result.Data?.OriginStations || [];
                        this.importDestStations = result.Data?.DestStations || [];
                        this.ShowSuccess('檔案驗證成功');
                    } else {
                        this.ShowError('檔案驗證失敗');
                        this.uploadedFilePath = null;
                    }
                } catch (error) {
                    console.error('ValidateUploadedFile error:', error);
                    this.uploadedFilePath = null;
                }
            },

            CancelImport() {
                this.selectedFile = null;
                this.uploadedFilePath = null;
                this.checkResult = null;
                this.importPreviewData = {};
                this.importOriginStations = [];
                this.importDestStations = [];
                const fileInput = document.querySelector('input[type="file"]');
                if (fileInput) {
                    fileInput.value = '';
                }
            },

            async ImportData() {
                // 匯入按鈕已被禁用，不應該執行到這裡
                // 但仍保留安全檢查作為雙重保障
                if (!this.uploadedFilePath || !this.checkResult || !this.checkResult.success) {
                    this.ShowWarning('請先上傳並驗證檔案');
                    return;
                }

                try {
                    this.loading = true;
                    const result = await this.callApiWithErrorMsg(
                        '火車票價維護',
                        'ImportFareData',
                        {
                            mode: 'new',
                            versionId: null,
                            filePath: this.uploadedFilePath
                        },
                        '匯入'
                    );

                    this.ShowSuccess('匯入成功');
                    this.CancelImport();
                    
                    // 更新版本清單
                    if (trainFareApp) {
                        trainFareApp.LoadVersions();
                    }
                    this.LoadVersions();
                } catch (error) {
                    console.error('ImportData error:', error);
                } finally {
                    this.loading = false;
                }
            },

            GetExportFare(origin, destination) {
                const key = `${origin}_${destination}`;
                return this.exportData[key] || '';
            },

            GetImportFare(origin, destination) {
                const key = `${origin}_${destination}`;
                return this.importPreviewData[key] || '';
            }
        }
    });
}

//// 頁面載入時建立 Vue 應用
//document.addEventListener('DOMContentLoaded', function () {
//    CreateTrainFareApp();
//    CreateTrainFareImportExportApp();
//});