<template>
  <div class="page-container">
    <PageHeader title="代理列表" :icon="Document" />

    <el-card class="filter-card" shadow="hover">
      <el-form :inline="true" :model="filterForm" class="form-row">
        <el-form-item label="协议类型">
          <el-select 
            v-model="filterForm.protocol" 
            placeholder="全部" 
            clearable 
            style="width: 120px" 
            @change="handleSearch"
          >
            <el-option label="全部" value="" />
            <el-option label="HTTP" value="http" />
            <el-option label="HTTPS" value="https" />
            <el-option label="SOCKS4" value="socks4" />
            <el-option label="SOCKS5" value="socks5" />
          </el-select>
        </el-form-item>
        <el-form-item label="最低分数">
          <el-input-number 
            v-model="filterForm.minScore" 
            :min="0" 
            :max="100" 
            style="width: 120px" 
            @change="handleSearch" 
          />
        </el-form-item>
        <el-form-item label="排序方式">
          <el-select v-model="filterForm.sortBy" style="width: 140px" @change="handleSearch">
            <el-option label="更新时间" value="last_check" />
            <el-option label="分数" value="score" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">
            <el-icon class="header-icon"><List /></el-icon>
            代理详情
          </span>
          <div class="header-actions">
            <el-button-group>
              <el-button 
                type="danger" 
                @click="handleBatchDelete" 
                :disabled="selectedProxies.length === 0"
              >
                <el-icon class="btn-icon"><Delete /></el-icon>
                批量删除
              </el-button>
              <el-dropdown trigger="click" @command="handleExport">
                <el-button type="success">
                  <el-icon class="btn-icon"><Download /></el-icon>
                  导出
                  <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="txt">TXT格式</el-dropdown-item>
                    <el-dropdown-item command="csv">CSV格式</el-dropdown-item>
                    <el-dropdown-item command="json">JSON格式</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-button-group>
          </div>
        </div>
      </template>
      
      <el-table 
        :data="proxyStore.proxies" 
        style="width: 100%" 
        v-loading="proxyStore.loading"
        @selection-change="handleSelectionChange"
        :row-style="{ cursor: 'pointer' }"
        empty-text="暂无数据"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="ip" label="IP地址" width="150" />
        <el-table-column prop="port" label="端口" width="100" />
        <el-table-column prop="protocol" label="协议" width="100">
          <template #default="{ row }">
            <el-tag :type="getProtocolType(row.protocol)" effect="light" size="small">
              {{ row.protocol.toUpperCase() }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="分数" width="100">
          <template #default="{ row }">
            <span class="score-value" :class="{ 'score-high': row.score >= 8, 'score-medium': row.score >= 5 && row.score < 8, 'score-low': row.score < 5 }">
              {{ row.score || 0 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="last_check" label="最后检查时间" min-width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.last_check) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              @click.stop="handleCopy(row)"
            >
              <el-icon class="btn-icon"><CopyDocument /></el-icon>
              复制
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              @click.stop="handleDelete(row)"
            >
              <el-icon class="btn-icon"><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="PAGE_SIZE_OPTIONS"
          :total="proxyStore.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, ArrowDown, List, Delete, Download, CopyDocument } from '@element-plus/icons-vue'
import { useProxyStore } from '../stores/proxy'
import { formatDateTime } from '../utils/format'
import { confirmDelete, confirmBatchDelete } from '../utils/confirm'
import { copyProxy } from '../utils/clipboard'
import PageHeader from '../components/PageHeader.vue'

/** 分页选项 */
const PAGE_SIZE_OPTIONS = [10, 20, 50, 100]
/** 默认分页大小 */
const DEFAULT_PAGE_SIZE = 20

const proxyStore = useProxyStore()

// ==================== 状态 ====================
const currentPage = ref(1)
const pageSize = ref(DEFAULT_PAGE_SIZE)
const selectedProxies = ref([])
let abortController = null

const filterForm = reactive({
  protocol: '',
  minScore: 0,
  sortBy: 'last_check',
  sortOrder: 'DESC'
})

// ==================== 协议类型映射 ====================
const PROTOCOL_TYPE_MAP = {
  http: 'info',
  https: 'success',
  socks4: 'warning',
  socks5: 'primary'
}

function getProtocolType(protocol) {
  return PROTOCOL_TYPE_MAP[protocol] || 'info'
}

// ==================== 数据获取 ====================
async function fetchProxies() {
  // 取消之前的请求
  if (abortController) {
    abortController.abort()
  }
  abortController = new AbortController()
  
  try {
    const success = await proxyStore.fetchProxies({
      page: currentPage.value,
      page_size: pageSize.value,
      protocol: filterForm.protocol || null,
      min_score: filterForm.minScore,
      sort_by: filterForm.sortBy,
      sort_order: filterForm.sortOrder
    }, abortController.signal)
    
    if (!success) {
      ElMessage.error('获取代理列表失败')
    }
  } catch (error) {
    if (error.name === 'AbortError') {
      // 用户主动取消，不提示错误
      return
    }
    throw error
  } finally {
    abortController = null
  }
}

// ==================== 事件处理 ====================
function handleSearch() {
  currentPage.value = 1
  fetchProxies()
}

function handleSelectionChange(selection) {
  selectedProxies.value = selection.map(item => ({ ip: item.ip, port: item.port }))
}

async function handleCopy(proxy) {
  await copyProxy(proxy)
}

async function handleDelete(proxy) {
  const confirmed = await confirmDelete(`代理 ${proxy.ip}:${proxy.port}`)
  if (!confirmed) return
  
  const filters = {
    protocol: filterForm.protocol || null,
    min_score: filterForm.minScore,
    sort_by: filterForm.sortBy,
    sort_order: filterForm.sortOrder
  }
  const success = await proxyStore.deleteProxy(proxy.ip, proxy.port, currentPage.value, pageSize.value, filters)
  if (success) {
    ElMessage.success('删除成功')
  }
}

async function handleBatchDelete() {
  const count = selectedProxies.value.length
  if (!count) return
  
  const confirmed = await confirmBatchDelete(count, '代理')
  if (!confirmed) return
  
  const filters = {
    protocol: filterForm.protocol || null,
    min_score: filterForm.minScore,
    sort_by: filterForm.sortBy,
    sort_order: filterForm.sortOrder
  }
  const deletedCount = await proxyStore.batchDeleteProxies(selectedProxies.value, currentPage.value, pageSize.value, filters)
  if (deletedCount > 0) {
    ElMessage.success(`已删除 ${deletedCount} 个代理`)
    selectedProxies.value = []
  }
}

async function handleExport(format) {
  const success = await proxyStore.exportProxies(format, filterForm.protocol || null)
  if (success) {
    ElMessage.success(`导出 ${format.toUpperCase()} 格式成功`)
  }
}

function handleSizeChange(size) {
  pageSize.value = size
  currentPage.value = 1
  fetchProxies()
}

function handleCurrentChange(page) {
  currentPage.value = page
  fetchProxies()
}

// ==================== 生命周期 ====================
onMounted(() => {
  fetchProxies()
})

onUnmounted(() => {
  if (abortController) {
    abortController.abort()
    abortController = null
  }
})
</script>

<style scoped>
.filter-card {
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.table-card {
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.table-card:hover,
.filter-card:hover {
  border-color: var(--border-light);
}

.header-icon {
  margin-right: 8px;
  color: var(--primary);
}

.header-actions {
  display: flex;
  gap: 10px;
}

.score-value {
  font-weight: 600;
  font-size: 14px;
}

.score-high {
  color: var(--success);
}

.score-medium {
  color: var(--warning);
}

.score-low {
  color: var(--danger);
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
</style>
