<template>
  <div class="dedup-container">
    <el-row :gutter="24">
      <!-- 任务配置卡片 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="10">
        <el-card class="config-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><Setting /></el-icon>
              <span class="card-title">任务配置</span>
            </div>
          </template>

          <el-form :model="form" label-width="100px" label-position="left">
            <el-form-item label="音乐库目录" required>
              <el-input
                v-model="form.libraryDir"
                placeholder="音乐库根目录（递归扫描）"
                clearable
              >
                <template #prefix>
                  <el-icon><Folder /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="回收站目录" required>
              <el-input
                v-model="form.trashDir"
                placeholder="重复文件移动/复制目录"
                clearable
              >
                <template #prefix>
                  <el-icon><FolderOpened /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="去重策略">
              <el-checkbox v-model="form.useMd5">启用 MD5 去重</el-checkbox>
              <el-checkbox v-model="form.useMetadata">启用元数据匹配</el-checkbox>
            </el-form-item>

            <el-form-item label="执行模式">
              <el-radio-group v-model="form.mode" size="default">
                <el-radio-button value="copy">
                  <el-icon><DocumentCopy /></el-icon>
                  <span style="margin-left: 4px">复制模式</span>
                </el-radio-button>
                <el-radio-button value="move">
                  <el-icon><Right /></el-icon>
                  <span style="margin-left: 4px">移动模式</span>
                </el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                :loading="submitting"
                :disabled="!canStart"
                @click="startTask"
                size="large"
                style="width: 100%"
              >
                <el-icon v-if="!submitting"><VideoPlay /></el-icon>
                <span style="margin-left: 4px">{{ submitting ? '去重中...' : '开始去重' }}</span>
              </el-button>
            </el-form-item>

            <el-form-item>
              <el-button @click="reset" size="default" style="width: 100%">
                <el-icon><Refresh /></el-icon>
                <span style="margin-left: 4px">重置</span>
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 任务进度卡片 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="14">
        <el-card class="progress-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><DataLine /></el-icon>
              <span class="card-title">任务进度</span>
              <el-tag
                v-if="progress.taskId && progress.completed"
                type="info"
                size="small"
                effect="plain"
                class="connection-tag"
              >
                <el-icon class="connection-icon"><CircleCheck /></el-icon>
                <span class="connection-text">已结束</span>
              </el-tag>
              <el-tag
                v-else-if="progress.taskId && wsConnected"
                type="success"
                size="small"
                effect="plain"
                class="connection-tag"
              >
                <el-icon class="connection-icon"><Connection /></el-icon>
                <span class="connection-text">已连接</span>
              </el-tag>
              <el-tag
                v-else-if="progress.taskId && !wsConnected && !progress.completed"
                type="warning"
                size="small"
                effect="plain"
                class="connection-tag"
              >
                <el-icon class="connection-icon"><Loading /></el-icon>
                <span class="connection-text">连接中</span>
              </el-tag>
            </div>
          </template>

          <div v-if="!progress.taskId" class="empty-state">
            <el-icon class="empty-icon"><Document /></el-icon>
            <p class="empty-text">等待开始任务...</p>
          </div>

          <div v-else class="progress-content">
            <!-- 统计信息 -->
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-label">扫描文件数</div>
                <div class="stat-value">{{ progress.scanned }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">重复组数量</div>
                <div class="stat-value success">{{ progress.duplicateGroups }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">移动/复制文件数</div>
                <div class="stat-value success">{{ progress.moved }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">完成状态</div>
                <div class="stat-value" :class="{ success: progress.completed }">
                  {{ progress.completed ? '已完成' : '进行中' }}
                </div>
              </div>
            </div>

            <!-- 进度条 -->
            <div class="progress-section">
              <el-progress
                :percentage="percentage"
                :status="progress.completed ? 'success' : undefined"
                :stroke-width="12"
                :show-text="true"
              />
            </div>

            <!-- 消息提示 -->
            <div v-if="progress.message" class="message-section">
              <el-alert
                :type="progress.completed ? 'success' : 'info'"
                :closable="false"
                show-icon
              >
                <template #title>
                  <span>{{ progress.message }}</span>
                </template>
              </el-alert>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import {
  Setting,
  Folder,
  FolderOpened,
  DocumentCopy,
  Right,
  VideoPlay,
  Refresh,
  DataLine,
  Connection,
  CircleCheck,
  Loading,
  Document
} from '@element-plus/icons-vue';
import { startDedup } from '../api/dedup';
import { getProgress } from '../api/progress';
import { useWebSocket, type ProgressMessage } from '../composables/useWebSocket';

const form = reactive({
  libraryDir: '',
  trashDir: '',
  useMd5: true,
  useMetadata: true,
  mode: 'copy' as 'copy' | 'move'
});

const submitting = ref(false);
const wsConnected = ref(false);

const progress = reactive({
  taskId: '' as string | null,
  scanned: 0,
  duplicateGroups: 0,
  moved: 0,
  completed: false,
  message: ''
});

const canStart = computed(() => {
  return (
    form.libraryDir.trim() !== '' &&
    form.trashDir.trim() !== '' &&
    (form.useMd5 || form.useMetadata) &&
    !submitting.value
  );
});

const scannedTotal = ref(0);
const scannedProcessed = ref(0);

const percentage = computed(() => {
  if (!scannedTotal.value) return 0;
  return Math.round((scannedProcessed.value / scannedTotal.value) * 100);
});

let wsDisconnect: (() => void) | null = null;
let pollTimer: number | null = null;

function startPolling(taskId: string) {
  stopPolling();
  pollTimer = window.setInterval(async () => {
    try {
      const latest = await getProgress(taskId);
      if (latest) {
        handleProgressMessage(latest);
        if (latest.completed) {
          stopPolling();
        }
      }
    } catch {
      // 忽略轮询错误
    }
  }, 1000);
}

function stopPolling() {
  if (pollTimer) {
    clearInterval(pollTimer);
    pollTimer = null;
  }
}

function handleProgressMessage(msg: ProgressMessage) {
  if (msg.type !== 'dedup') {
    return;
  }

  // 字段映射：见后端 DedupService 注释
  scannedTotal.value = msg.total;
  scannedProcessed.value = msg.processed;

  progress.scanned = msg.total;
  progress.duplicateGroups = msg.success;
  progress.moved = msg.failed;
  progress.completed = msg.completed;
  progress.message = msg.message ?? '';
}

watch(
  () => progress.taskId,
  (newTaskId) => {
    if (wsDisconnect) {
      wsDisconnect();
      wsDisconnect = null;
    }
    wsConnected.value = false;

    if (newTaskId) {
      const { connect, disconnect, connected } = useWebSocket(newTaskId, handleProgressMessage);
      wsDisconnect = disconnect;
      watch(connected, (val) => (wsConnected.value = val), { immediate: true });
      connect();
      startPolling(newTaskId);
    }
  }
);

async function startTask() {
  const libraryDir = form.libraryDir.trim();
  const trashDir = form.trashDir.trim();

  if (!libraryDir || !trashDir) {
    ElMessage.warning('请填写音乐库目录和回收站目录');
    return;
  }

  if (!form.useMd5 && !form.useMetadata) {
    ElMessage.warning('请至少选择一种去重策略');
    return;
  }

  submitting.value = true;
  progress.taskId = null;
  progress.scanned = 0;
  progress.duplicateGroups = 0;
  progress.moved = 0;
  progress.completed = false;
  progress.message = '';
  scannedTotal.value = 0;
  scannedProcessed.value = 0;

  try {
    const res = await startDedup({
      libraryDir,
      trashDir,
      useMd5: form.useMd5,
      useMetadata: form.useMetadata,
      mode: form.mode
    });

    progress.taskId = res.taskId;
    ElMessage.success('去重任务已启动');
  } catch (e: unknown) {
    submitting.value = false;
    ElMessage.error(e instanceof Error ? e.message : '启动去重任务失败');
  }
}

watch(
  () => progress.completed,
  (done) => {
    if (done) {
      submitting.value = false;
      stopPolling();
      if (wsDisconnect) {
        wsDisconnect();
        wsDisconnect = null;
      }
    }
  }
);

onUnmounted(() => {
  stopPolling();
  if (wsDisconnect) {
    wsDisconnect();
    wsDisconnect = null;
  }
});

function reset() {
  stopPolling();
  if (wsDisconnect) {
    wsDisconnect();
    wsDisconnect = null;
  }
  form.libraryDir = '';
  form.trashDir = '';
  form.useMd5 = true;
  form.useMetadata = true;
  form.mode = 'copy';
  progress.taskId = null;
  progress.scanned = 0;
  progress.duplicateGroups = 0;
  progress.moved = 0;
  progress.completed = false;
  progress.message = '';
  scannedTotal.value = 0;
  scannedProcessed.value = 0;
  submitting.value = false;
  wsConnected.value = false;
}
</script>

<style scoped>
.dedup-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.config-card,
.progress-card {
  height: 100%;
  min-height: 500px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.connection-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.2;
  height: auto;
}

.connection-icon {
  font-size: 12px;
  margin-right: 2px;
}

.connection-text {
  font-size: 12px;
  white-space: nowrap;
}

.header-icon {
  font-size: 18px;
  color: var(--el-color-primary);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--el-text-color-secondary);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  font-size: 14px;
}

.progress-content {
  padding: 8px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: var(--el-bg-color-page);
  border-radius: 8px;
  transition: all 0.3s;
}

.stat-item:hover {
  background: var(--el-bg-color);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.stat-value.success {
  color: var(--el-color-success);
}

.progress-section {
  margin-bottom: 20px;
}

.message-section {
  margin-top: 16px;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>

