<template>
  <div class="cleanup-section">
    <el-card class="config-card">
      <template #header><span>🧹 存储清理</span></template>
      <div class="cleanup-grid">
        <!-- 列1: ⏱ 基础清理策略 -->
        <div class="cleanup-group">
          <div class="cleanup-group-label">⏱ 基础清理策略</div>
          <el-form label-width="120px" label-position="left" size="small">
            <el-form-item label="自动清理">
              <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                <el-switch v-model="cleanupEnabled" size="small" />
                <span class="cleanup-hint">每天自动检查一次，删除过期日志、移入回收站文件</span>
              </div>
            </el-form-item>
            <el-form-item label="清空回收站">
              <div style="display: flex; align-items: center; gap: 10px;">
                <el-switch v-model="cleanupEmptyTrash" size="small" />
                <span class="cleanup-hint">清理时一并清空各网盘回收站</span>
              </div>
            </el-form-item>
            <el-form-item label="白名单目录">
              <div style="width: 100%;">
                <div style="display: flex; gap: 6px;">
                  <el-input v-model="newWhitelistDir" placeholder="输入目录名" size="small" style="width: 160px" @keyup.enter="addWhitelistDir" />
                  <el-button type="primary" size="small" @click="addWhitelistDir">添加</el-button>
                </div>
                <div style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;" v-if="whitelistDirs.length">
                  <el-tag v-for="(dir, i) in whitelistDirs" :key="i" closable size="small" @close="removeWhitelistDir(i)">{{ dir }}</el-tag>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <!-- 列2: 📦 保留设置 -->
        <div class="cleanup-group">
          <div class="cleanup-group-label">📦 保留设置</div>
          <el-form label-width="120px" label-position="left" size="small">
            <el-form-item label="文件保留">
              <div style="display: flex; align-items: center; gap: 8px;">
                <el-input-number v-model="cleanupFileRetentionDays" :min="1" :max="365" style="width: 100px" size="small" />
                <span>天</span>
              </div>
            </el-form-item>
            <el-form-item label="日志保留">
              <div style="display: flex; align-items: center; gap: 8px;">
                <el-input-number v-model="cleanupLogRetentionDays" :min="1" :max="365" style="width: 100px" size="small" />
                <span>天</span>
              </div>
            </el-form-item>
            <el-form-item label="Cookie检测">
              <div style="display: flex; align-items: center; gap: 8px;">
                <el-input-number v-model="verifyIntervalMinutes" :min="5" :max="1440" :step="5" style="width: 100px" size="small" />
                <span>分钟</span>
              </div>
            </el-form-item>
            <el-form-item label="空间校准">
              <div style="display: flex; align-items: center; gap: 8px;">
                <el-input-number v-model="storageRefreshIntervalMinutes" :min="5" :max="1440" :step="5" style="width: 100px" size="small" />
                <span>分钟</span>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <!-- 列3: 📊 空间阈值自动清理 -->
        <div class="cleanup-group">
          <div class="cleanup-group-label">📊 空间阈值自动清理</div>
          <el-form label-width="120px" label-position="left" size="small">
            <el-form-item label="启用">
              <el-switch v-model="cleanupSpaceThresholdEnabled" size="small" />
              <span class="cleanup-hint" style="margin-left: 8px;">已用空间超过阈值时，按比例删除最旧的转存文件</span>
            </el-form-item>
            <el-form-item v-if="cleanupSpaceThresholdEnabled" label="使用阈值">
              <el-slider v-model="cleanupSpaceThresholdPercent" :min="50" :max="99" style="width: 140px" show-input size="small" />
            </el-form-item>
            <el-form-item v-if="cleanupSpaceThresholdEnabled" label="删除比例">
              <el-slider v-model="cleanupSpaceThresholdDeletePercent" :min="5" :max="50" :step="5" style="width: 140px" show-input size="small" />
            </el-form-item>
          </el-form>
        </div>

        <!-- 列4: 🔗 分享链接复用 -->
        <div class="cleanup-group">
          <div class="cleanup-group-label">🔗 分享链接复用</div>
          <el-form label-width="120px" label-position="left" size="small">
            <el-form-item label="复用">
              <el-switch v-model="saveReuseEnabled" size="small" />
              <span class="cleanup-hint" style="margin-left: 8px;">相同原始链接不再重复转存，复用已有分享链接（会自动验证原链接有效性；60秒内重复请求直接返回已有链接）</span>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 底部：手动操作（跨列全宽） -->
      <div class="cleanup-actions">
        <div class="cleanup-actions-buttons">
          <el-button type="primary" :loading="cleanupSaving" @click="handleSaveCleanupConfigs">💾 保存清理配置</el-button>
          <el-button type="danger" :loading="cleanupRunning" @click="handleRunCleanup">{{ cleanupRunning ? '清理中...' : '🗑️ 立即清理' }}</el-button>
          <el-button type="warning" :loading="emptyTrashRunning" @click="handleEmptyTrash">{{ emptyTrashRunning ? '清空中...' : '🧹 清空回收站' }}</el-button>
        </div>
        <div v-if="lastCleanupTime" class="cleanup-info">
          ⏰ 上次清理：{{ lastCleanupTime }}
          <span v-if="lastCleanupStats" style="margin-left: 12px;">📊 {{ lastCleanupStats }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getSystemConfigs, updateSystemConfigs, runCleanup, emptyAllTrash } from '../../api'

interface ConfigMap {
  [key: string]: string | number
}
const sysConfigs = reactive<ConfigMap>({})

const cleanupRunning = ref(false)
const emptyTrashRunning = ref(false)
const cleanupSaving = ref(false)

const lastCleanupTime = computed(() => String(sysConfigs.cleanup_last_run || ''))
const lastCleanupStats = computed(() => {
  const raw = String(sysConfigs.cleanup_last_stats || '')
  if (!raw) return ''
  try {
    const s = JSON.parse(raw)
    const parts = []
    if (s.filesTrashed > 0) parts.push(`移入回收站 ${s.filesTrashed} 个文件夹`)
    if (s.logsDeleted > 0) parts.push(`删除 ${s.logsDeleted} 条日志`)
    if (s.trashEmptied) parts.push(`已清空回收站`)
    if (s.errors > 0) parts.push(`⚠️ ${s.errors} 个错误`)
    return parts.join(' / ') || '无操作'
  } catch { return '' }
})

const cleanupEnabled = computed({
  get: () => String(sysConfigs.cleanup_enabled) === 'true',
  set: (val: boolean) => { sysConfigs.cleanup_enabled = val ? 'true' : 'false' },
})
const cleanupEmptyTrash = computed({
  get: () => String(sysConfigs.cleanup_empty_trash) !== 'false',
  set: (val: boolean) => { sysConfigs.cleanup_empty_trash = val ? 'true' : 'false' },
})
const cleanupFileRetentionDays = computed({
  get: () => Number(sysConfigs.cleanup_file_retention_days ?? 7),
  set: (val: number) => { sysConfigs.cleanup_file_retention_days = val },
})
const cleanupLogRetentionDays = computed({
  get: () => Number(sysConfigs.cleanup_log_retention_days ?? 30),
  set: (val: number) => { sysConfigs.cleanup_log_retention_days = val },
})
const cleanupSpaceThresholdEnabled = computed({
  get: () => String(sysConfigs.cleanup_space_threshold_enabled) === 'true',
  set: (val: boolean) => { sysConfigs.cleanup_space_threshold_enabled = val ? 'true' : 'false' },
})
const cleanupSpaceThresholdPercent = computed({
  get: () => Number(sysConfigs.cleanup_space_threshold_percent ?? 90),
  set: (val: number) => { sysConfigs.cleanup_space_threshold_percent = val },
})
const cleanupSpaceThresholdDeletePercent = computed({
  get: () => Number(sysConfigs.cleanup_space_threshold_delete_percent ?? 10),
  set: (val: number) => { sysConfigs.cleanup_space_threshold_delete_percent = val },
})
const saveReuseEnabled = computed({
  get: () => String(sysConfigs.save_reuse_enabled) !== 'false',
  set: (val: boolean) => { sysConfigs.save_reuse_enabled = val ? 'true' : 'false' },
})

// 白名单
const whitelistDirs = ref<string[]>([])
const newWhitelistDir = ref('')

function loadWhitelistDirs() {
  try {
    const raw = String(sysConfigs.cleanup_whitelist_dirs || '[]')
    whitelistDirs.value = JSON.parse(raw)
  } catch {
    whitelistDirs.value = []
  }
}

function addWhitelistDir() {
  const name = newWhitelistDir.value.trim()
  if (!name) return
  if (whitelistDirs.value.includes(name)) {
    ElMessage.warning('该目录已在白名单中')
    return
  }
  whitelistDirs.value.push(name)
  newWhitelistDir.value = ''
}

function removeWhitelistDir(index: number) {
  whitelistDirs.value.splice(index, 1)
}

// Cookie检测间隔 + 空间校准间隔
const verifyIntervalMinutes = computed({
  get: () => Number(sysConfigs.cleanup_verify_interval ?? 30),
  set: (val: number) => { sysConfigs.cleanup_verify_interval = val },
})
const storageRefreshIntervalMinutes = computed({
  get: () => Number(sysConfigs.storage_refresh_interval ?? 180),
  set: (val: number) => { sysConfigs.storage_refresh_interval = val },
})

async function loadCleanupConfigs() {
  try {
    const raw = await getSystemConfigs()
    for (const cfg of raw) {
      sysConfigs[cfg.key] = cfg.value
    }
    loadWhitelistDirs()
  } catch (e) {
    console.error('加载清理配置失败', e)
  }
}

async function handleSaveCleanupConfigs() {
  cleanupSaving.value = true
  try {
    const keys = [
      'cleanup_enabled', 'cleanup_file_retention_days', 'cleanup_log_retention_days',
      'cleanup_empty_trash',
      'cleanup_space_threshold_enabled', 'cleanup_space_threshold_percent', 'cleanup_space_threshold_delete_percent',
      'save_reuse_enabled',
      'cleanup_verify_interval', 'storage_refresh_interval',
    ]
    const entries = keys.map(key => ({ key, value: String(sysConfigs[key] ?? '') }))
    entries.push({ key: 'cleanup_whitelist_dirs', value: JSON.stringify(whitelistDirs.value) })
    await updateSystemConfigs(entries)
    ElMessage.success('清理配置已保存')
  } catch (e: any) {
    ElMessage.error(e.response?.data?.error || '保存失败')
  } finally {
    cleanupSaving.value = false
  }
}

async function handleRunCleanup() {
  cleanupRunning.value = true
  try {
    const result = await runCleanup()
    if (result.success) {
      ElMessage.success(result.message)
    } else {
      ElMessage.warning(result.message)
    }
    await loadCleanupConfigs()
  } catch (e: any) {
    ElMessage.error(e.response?.data?.error || '清理失败')
  } finally {
    cleanupRunning.value = false
  }
}

async function handleEmptyTrash() {
  emptyTrashRunning.value = true
  try {
    const result = await emptyAllTrash()
    if (result.success) {
      ElMessage.success(result.message)
    } else {
      ElMessage.warning(result.message)
    }
  } catch (e: any) {
    ElMessage.error(e.response?.data?.error || '清空回收站失败')
  } finally {
    emptyTrashRunning.value = false
  }
}

onMounted(() => {
  loadCleanupConfigs()
})
</script>

<style scoped>
.cleanup-section .config-card {
  /* 全宽展示，没有max-width限制 */
}
.cleanup-section :deep(.el-card__header) {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

/* ── 2列网格布局 ── */
.cleanup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cleanup-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: var(--bg-card);
  transition: box-shadow 0.2s;
}
.cleanup-group:hover {
  box-shadow: var(--shadow-sm);
}
.cleanup-group-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-light);
}
.cleanup-hint {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

/* ── 底部操作栏（跨列全宽） ── */
.cleanup-actions {
  margin-top: 20px;
  padding: 16px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cleanup-actions-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cleanup-info {
  font-size: 13px;
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── 响应式：窄屏时改为单列 ── */
@media (max-width: 900px) {
  .cleanup-grid {
    grid-template-columns: 1fr;
  }
}
</style>
