<template>
  <div class="utp-panel">
    <!-- 头部：标题 + 刷新 + 统计标签 一行搞定 -->
    <div class="utp-header">
      <span class="utp-title">上传任务</span>
      <div class="utp-header-right">
        <span v-if="polling" class="utp-polling"><LoadingOutlined class="spin" /></span>
        <button class="utp-refresh" :disabled="loading" @click="$emit('refresh')" title="刷新">
          <ReloadOutlined />
        </button>
        <button
          v-for="s in statBtns"
          :key="s.key"
          :class="['utp-stat', { active: statusFilter === s.key }]"
          @click="$emit('update:statusFilter', s.key)"
        >{{ s.label }}({{ stats[s.key] }})</button>
      </div>
    </div>

    <!-- 工具栏 -->
    <div class="utp-toolbar">
      <input
        class="utp-search"
        placeholder="搜索文件名..."
        :value="searchQuery"
        @input="$emit('update:searchQuery', $event.target.value)"
      />
      <span v-if="polling" class="utp-polling-text">自动刷新</span>
    </div>

    <!-- 列表 -->
    <div class="utp-list">
      <div v-if="loading && !paginatedTasks.length" class="utp-empty"><LoadingOutlined class="spin" /> 加载中</div>
      <div v-else-if="!paginatedTasks.length" class="utp-empty">暂无任务</div>

      <template v-else>
        <UploadTaskItem
          v-for="t in paginatedTasks" :key="t.id"
          :task="t" :vector-status="parseVectorStatus(t)"
        />

        <div v-if="totalFilteredPages > 1" class="utp-page">
          <button :disabled="currentPage <= 1" @click="$emit('update:currentPage', currentPage - 1)">&lt;</button>
          <span>{{ currentPage }}/{{ totalFilteredPages }}</span>
          <button :disabled="currentPage >= totalFilteredPages" @click="$emit('update:currentPage', currentPage + 1)">&gt;</button>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import UploadTaskItem from './UploadTaskItem.vue'
import { ReloadOutlined, LoadingOutlined } from '@ant-design/icons-vue'

defineProps({
  stats: { type: Object, required: true },
  statusFilter: { type: String, default: 'all' },
  searchQuery: { type: String, default: '' },
  currentPage: { type: Number, default: 1 },
  paginatedTasks: { type: Array, default: () => [] },
  totalFilteredPages: { type: Number, default: 0 },
  loading: { type: Boolean, default: false },
  polling: { type: Boolean, default: false },
  parseVectorStatus: { type: Function, required: true }
})

defineEmits(['refresh', 'update:statusFilter', 'update:searchQuery', 'update:currentPage'])

const statBtns = [
  { key: 'all', label: '全部' }, { key: 'processing', label: '处理中' },
  { key: 'success', label: '成功' }, { key: 'failed', label: '失败' }
]
</script>

<style scoped>
@import '../../design-tokens.css';

.utp-panel {
  background: var(--bg-container);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.utp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}

.utp-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
}

.utp-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.utp-refresh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: none; cursor: pointer;
  color: var(--text-secondary); padding: 0; font-size: var(--font-md);
  transition: all var(--transition-fast);
}
.utp-refresh:hover:not(:disabled) { border-color: var(--text-primary); color: var(--text-primary); }
.utp-refresh:disabled { opacity: 0.4; cursor: not-allowed; }

.utp-stat {
  padding: 2px 8px; border: none; border-radius: var(--radius-sm);
  background: var(--bg-card); cursor: pointer; font-size: var(--font-xs);
  font-weight: var(--weight-medium); color: var(--text-secondary);
  transition: all var(--transition-fast); white-space: nowrap;
}
.utp-stat:hover:not(.active) { background: var(--bg-hover); color: var(--text-primary); }
.utp-stat.active { background: var(--text-primary); color: var(--text-inverse); }
.utp-stat.active:nth-child(3) { background: #1971C2; }
.utp-stat.active:nth-child(4) { background: #2B8A3E; }
.utp-stat.active:nth-child(5) { background: #C92A2A; }

.utp-polling { display: inline-flex; align-items: center; }
.utp-polling .spin { font-size: 12px; color: #1971C2; }

.utp-toolbar {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: 6px 14px; border-bottom: 1px solid var(--border-light);
}

.utp-search {
  flex: 1; max-width: 200px; padding: 4px 8px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  font-size: var(--font-md); outline: none; box-sizing: border-box;
}
.utp-search:focus { border-color: var(--border-focus); }

.utp-polling-text {
  font-size: var(--font-xs); color: #1971C2; white-space: nowrap;
  font-weight: var(--weight-medium);
}

.utp-list {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 14px; min-height: 80px;
}

.utp-empty {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 24px 0; color: var(--text-disabled); font-size: var(--font-md);
}

.utp-page {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light);
}

.utp-page button {
  width: 24px; height: 24px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: none; cursor: pointer;
  color: var(--text-secondary); font-size: var(--font-xs); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.utp-page button:hover:not(:disabled) { border-color: var(--text-primary); color: var(--text-primary); }
.utp-page button:disabled { opacity: 0.35; cursor: not-allowed; }

.utp-page span { font-size: var(--font-xs); color: var(--text-disabled); min-width: 32px; text-align: center; }

.spin { animation: utp-spin 1s linear infinite; }
@keyframes utp-spin { to { transform: rotate(360deg); } }
</style>
