{% extends "ewoooc_base.html" %}

{% block title %}系統設定與資料匯入 - EwoooC{% endblock %}

{% block extra_css %}
<style>
.system-import-page {
    display: grid;
    gap: var(--momo-space-4, 16px);
}

.system-import-page .system-import-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--momo-space-4, 16px);
    padding: var(--momo-space-4, 16px) var(--momo-space-5, 24px);
    background: var(--momo-bg-surface);
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
}

.system-import-page .system-import-head h1 {
    margin: 0;
    color: var(--momo-text-primary);
    font-family: var(--momo-font-display);
    font-size: var(--momo-text-headline);
    font-weight: 700;
    line-height: var(--momo-line-height-tight);
    letter-spacing: 0;
}

.system-import-page .system-import-head p {
    margin: var(--momo-space-1, 4px) 0 0;
    color: var(--momo-text-secondary);
    font-size: var(--momo-text-body-sm);
}

.system-import-page .table-container {
    padding: var(--momo-space-5, 24px);
    background: var(--momo-bg-surface);
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
}

.system-import-page .table-container h5 {
    color: var(--momo-text-primary);
    font-family: var(--momo-font-display);
    font-size: var(--momo-text-title);
    font-weight: 700;
}

.system-import-page .import-panel {
    padding: var(--momo-space-4, 16px);
    background: var(--momo-bg-paper);
    border: 1px solid var(--momo-border-light);
    border-radius: var(--momo-radius-md);
}

.system-import-page .system-version-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 24px;
    padding: 4px 10px;
    background: var(--momo-tag-terra-bg);
    border: 1px solid var(--momo-tag-terra-border);
    border-radius: var(--momo-radius-sm);
    color: var(--momo-tag-terra-text);
    font-family: var(--momo-font-mono, monospace);
    font-size: var(--momo-text-label);
    font-weight: 800;
}

@media (max-width: 760px) {
    .system-import-page .system-import-head,
    .system-import-page .table-container .d-flex {
        flex-direction: column;
    }

    .system-import-page .table-container {
        padding: var(--momo-space-4, 16px);
    }
}
</style>
{% endblock %}

{% block content %}
<div class="system-import-page">
    <header class="system-import-head">
        <div>
            <h1><i class="fas fa-cogs me-2"></i>系統設定與資料匯入</h1>
            <p>集中管理備份、月總表、即時業績與一般 Excel 匯入。</p>
        </div>
        <span class="system-version-pill">版本 {{ system_version }}</span>
    </header>

    <div class="table-container">
        <h5 class="mb-3">系統維護</h5>
        <div class="d-flex align-items-center justify-content-between gap-3">
            <div>
                <h6 class="fw-bold mb-1">完整備份</h6>
                <p class="text-muted mb-0 small">將目前的系統程式碼與資料庫打包存檔。</p>
            </div>
            <button class="btn btn-outline-secondary" onclick="triggerBackup()">
                <i class="fas fa-file-archive me-2"></i>建立備份
            </button>
        </div>
    </div>

    <div class="table-container">
        <h5 class="mb-3 text-primary"><i class="fas fa-file-import me-2"></i>月份總表數據分析匯入</h5>
        <div class="import-panel">
            <div class="row align-items-center g-3">
                <div class="col-md-9">
                    <h6 class="fw-bold mb-1">月份業績匯總分析 (42 欄位版)</h6>
                    <p class="text-muted small mb-3">此功能專用於匯入「月份總表數據分析」Excel。系統會自動根據「年」與「月」欄位，<strong class="text-danger">覆蓋更新</strong>該月份之歷史數據，適合大批量資料。</p>
                    <input class="form-control" type="file" id="monthlySummaryFile" accept=".xlsx, .xls">
                </div>
                <div class="col-md-3 text-end">
                    <button class="btn btn-primary w-100 py-2 mt-3 mt-md-0" onclick="uploadMonthlySummary()">
                        <i class="fas fa-upload me-2"></i>執行大批量匯入
                    </button>
                </div>
            </div>
            <div id="monthlyImportProgress" class="mt-3 d-none">
                <div class="progress" style="height: 10px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
                </div>
                <p class="text-center small text-primary mt-2 mb-0">資料處理中，請稍候...</p>
            </div>
        </div>
    </div>

    <div class="table-container">
        <h5 class="mb-3"><i class="fas fa-file-invoice-dollar me-2"></i>即時業績(全月)匯入</h5>
        <div class="import-panel">
            <div class="row align-items-center g-3">
                <div class="col-md-9">
                    <h6 class="fw-bold mb-1">匯入即時業績 (全月版)</h6>
                    <p class="text-muted small mb-3">請上傳檔名包含「即時業績」且為「全月」版本之 Excel。資料將自動匯入至專屬分析明細表。</p>
                    <input class="form-control" type="file" id="salesReportFile" accept=".xlsx, .xls">
                </div>
                <div class="col-md-3 text-end">
                    <button class="btn btn-outline-primary w-100 py-2 mt-3 mt-md-0" onclick="uploadSalesReport()">
                        <i class="fas fa-upload me-2"></i>執行業績匯入
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="table-container">
        <h5 class="mb-3">一般 Excel 匯入 (自動建表)</h5>
        <div class="row align-items-end g-3">
            <div class="col-md-8">
                <label for="excelFile" class="form-label text-muted small">選擇任何 Excel 檔，系統將依據檔名自動建立新資料表；若表名重複將會覆蓋。</label>
                <input class="form-control" type="file" id="excelFile" accept=".xlsx, .xls">
            </div>
            <div class="col-md-4">
                <button class="btn btn-primary w-100" onclick="uploadExcel()">
                    <i class="fas fa-table me-2"></i>匯入並建立通用資料表
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function getCSRFToken() {
    return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
}

function triggerBackup() {
    if (confirm('確定要執行系統完整備份嗎？\n這將會打包所有程式碼與資料庫檔案。')) {
        fetch('/api/backup', {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCSRFToken()
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert(data.message);
                    if (data.download_url) {
                        window.location.href = data.download_url;
                    }
                } else {
                    alert('錯誤: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('備份請求失敗，請檢查日誌。');
            });
    }
}

function uploadSalesReport() {
    const fileInput = document.getElementById('salesReportFile');
    const file = fileInput.files[0];

    if (!file) {
        alert('請先選擇一個業績報表檔案');
        return;
    }

    if (!file.name.includes('即時業績') || !file.name.includes('全月')) {
        if (!confirm('檔案名稱似乎不符合「即時業績(全月)」的格式，確定要繼續匯入嗎？\n系統將嘗試根據檔名建立資料表。')) {
            return;
        }
    } else if (!confirm('確定要匯入此份業績報表嗎？\n資料將會累加至 `realtime_sales_monthly` 資料表的現有內容中。')) {
        return;
    }

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

    const btn = document.querySelector('button[onclick="uploadSalesReport()"]');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>匯入中...';
    btn.disabled = true;

    fetch('/api/import_excel', {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCSRFToken()
        },
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                if (data.table === 'realtime_sales_monthly') {
                    alert('業績報表匯入成功！\n資料表: ' + data.table + '\n共 ' + data.rows + ' 筆資料已累加寫入。');
                } else {
                    alert('匯入操作完成。\n注意: 系統偵測到的資料表名稱為「' + data.table + '」，而非預期的 `realtime_sales_monthly`。\n共寫入 ' + data.rows + ' 筆資料。');
                }
                fileInput.value = '';
            } else {
                alert('匯入失敗: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('發生系統錯誤，請檢查日誌');
        })
        .finally(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
        });
}

function uploadExcel() {
    const fileInput = document.getElementById('excelFile');
    const file = fileInput.files[0];

    if (!file) {
        alert('請先選擇一個 Excel 檔案');
        return;
    }

    if (!confirm('確定要匯入嗎？\n這將會建立一張新的資料表 (若名稱相同則會覆蓋)。')) {
        return;
    }

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

    const btn = document.querySelector('button[onclick="uploadExcel()"]');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>處理中...';
    btn.disabled = true;

    fetch('/api/import_excel', {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCSRFToken()
        },
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('匯入成功！\n已建立資料表: ' + data.table + '\n共寫入 ' + data.rows + ' 筆資料。');
                fileInput.value = '';
            } else {
                alert('匯入失敗: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('發生系統錯誤，請檢查日誌');
        })
        .finally(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
        });
}

function uploadMonthlySummary() {
    const fileInput = document.getElementById('monthlySummaryFile');
    const file = fileInput.files[0];
    const progress = document.getElementById('monthlyImportProgress');

    if (!file) {
        alert('請先選擇一個月份總表 Excel 檔案');
        return;
    }

    if (!confirm(`確定要匯入「${file.name}」嗎？\n資料庫將根據檔案中的年月份自動覆蓋既有數據。\n處理大量資料可能需要較長時間，請勿關閉視窗。`)) {
        return;
    }

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

    const btn = document.querySelector('button[onclick="uploadMonthlySummary()"]');
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>匯入中...';
    btn.disabled = true;
    progress.classList.remove('d-none');

    fetch('/api/import/monthly_summary', {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCSRFToken()
        },
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('匯入完成：' + data.message);
                fileInput.value = '';
            } else {
                alert('匯入失敗: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('發生連線錯誤或系統超時，請檢查背景處理狀態。');
        })
        .finally(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
            progress.classList.add('d-none');
        });
}
</script>
{% endblock %}