<script setup>
import { q } from "#imports";
import { Loading, Notify } from "quasar";
import { ref, onMounted } from "vue";
const isDownloading = ref(false);
const databaseInfo = ref(null);
const fetchDatabaseInfo = async () => {
  try {
    const info = await q({
      system: {
        database: {
          type: true,
          sizeBytes: true,
          version: true
        }
      }
    });
    databaseInfo.value = info.system.database;
  } catch (e) {
    console.error("Failed to fetch database info:", e);
  }
};
const onClickDownload = async () => {
  isDownloading.value = true;
  Loading.show({ message: "\u6B63\u5728\u532F\u51FA\u8CC7\u6599\u5EAB\uFF0C\u8ACB\u7A0D\u5019..." });
  try {
    const data = await q({
      system: {
        database: {
          export: true
        }
      }
    });
    const timestamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/:/g, "-");
    const filename = `database-backup-${timestamp}.sql`;
    const blob = new Blob([data.system.database.export], { type: "text/plain;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.download = filename;
    a.href = url;
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 1e3);
    Notify.create({
      type: "positive",
      message: "\u8CC7\u6599\u5EAB\u5099\u4EFD\u5DF2\u6210\u529F\u4E0B\u8F09\uFF01",
      position: "top"
    });
  } catch (e) {
    Notify.create({
      type: "negative",
      message: "\u4E0B\u8F09\u5931\u6557\uFF0C\u8ACB\u7A0D\u5F8C\u518D\u8A66\u3002",
      position: "top"
    });
  } finally {
    Loading.hide();
    isDownloading.value = false;
  }
};
onMounted(() => {
  fetchDatabaseInfo();
});
</script>

<template>
    <l-page title="資料庫備份">
        <div class="backup-container">
            <!-- 頁面說明 -->
            <l-card class="info-card">
                <div class="card-header">
                    <h5 class="card-title">
                        <q-icon name="sym_o_info" class="text-primary" />
                        備份說明
                    </h5>
                </div>
                <div class="card-content">
                    <p class="description">
                        資料庫備份功能可以將整個資料庫匯出為 SQL 檔案，包含所有資料表結構和資料。
                        建議定期進行備份以確保資料安全。
                    </p>
                </div>
            </l-card>

            <!-- 備份資訊 -->
            <l-card class="status-card">
                <div class="card-header">
                    <h5 class="card-title">
                        <q-icon name="sym_o_database" class="text-secondary" />
                        資料庫資訊
                    </h5>
                </div>
                <div class="card-content">
                    <div class="info-grid">
                        <div class="info-item" v-if="databaseInfo">
                            <q-icon name="sym_o_storage" class="info-icon" />
                            <div class="info-content">
                                <span class="info-label">資料庫類型</span>
                                <span class="info-value">{{ databaseInfo.type || '未知' }}</span>
                            </div>
                        </div>
                        <div class="info-item" v-if="databaseInfo">
                            <q-icon name="sym_o_storage" class="info-icon" />
                            <div class="info-content">
                                <span class="info-label">資料庫大小</span>
                                <span class="info-value">{{ databaseInfo.sizeBytes ? (databaseInfo.sizeBytes / 1024 /
                                    1024).toFixed(2) + ' MB' : '計算中...' }}</span>
                            </div>
                        </div>
                        <div class="info-item" v-if="databaseInfo && databaseInfo.version">
                            <q-icon name="sym_o_info" class="info-icon" />
                            <div class="info-content">
                                <span class="info-label">資料庫版本</span>
                                <span class="info-value">{{ databaseInfo.version }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </l-card>

            <!-- 安全提醒 -->
            <l-alert type="warning" class="security-alert">
                <template #prefix>
                    <q-icon name="sym_o_security" />
                </template>
                <strong>安全提醒：</strong>備份檔案包含敏感資料，請妥善保管並避免在不安全的環境中傳輸。
            </l-alert>

            <!-- 下載按鈕區域 -->
            <div class="download-section">
                <l-btn :label="isDownloading ? '正在備份中...' : '開始備份'" icon="sym_o_download" color="primary" size="lg"
                    :loading="isDownloading" :disable="isDownloading" @click="onClickDownload" class="download-btn" />
                <p class="download-hint">
                    點擊按鈕將會下載包含完整資料庫內容的 SQL 檔案
                </p>
            </div>
        </div>
    </l-page>
</template>

<style scoped>
.backup-container{display:flex;flex-direction:column;gap:24px;margin:0 auto;max-width:800px;padding:20px}.info-card,.status-card{border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.card-header{padding:20px 24px 0}.card-title{align-items:center;color:#2c3e50;display:flex;font-weight:600;gap:8px;margin:0}.card-content{padding:16px 24px 24px}.description{color:#5a6c7d;line-height:1.6;margin:0}.info-grid{display:grid;gap:16px}.info-item{align-items:center;background:#f8f9fa;border-radius:8px;display:flex;gap:12px;padding:12px}.info-icon{color:#6c757d;font-size:24px}.info-content{display:flex;flex-direction:column;gap:4px}.info-label{color:#6c757d;font-size:14px;font-weight:500}.info-value{color:#2c3e50;font-size:16px;font-weight:600}.security-alert{border-radius:8px}.download-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #dee2e6;border-radius:16px;padding:32px 24px;text-align:center}.download-btn{border-radius:8px;box-shadow:0 4px 12px rgba(0,123,255,.3);font-size:16px;font-weight:600;height:48px;margin-bottom:12px;min-width:200px;transition:all .3s ease}.download-btn:hover{box-shadow:0 6px 20px rgba(0,123,255,.4);transform:translateY(-2px)}.download-hint{color:#6c757d;font-size:14px;margin:0 auto;max-width:400px}@media (max-width:768px){.backup-container{gap:20px;padding:16px}.card-content{padding:12px 20px 20px}.download-section{padding:24px 20px}.download-btn{min-width:100%}}
</style>
