<template>
  <div>
    <!-- Header -->
    <div class="page-header">
      <div>
        <h2 class="page-title">上游管理</h2>
        <p class="page-desc">管理 API 上游服务，支持多种认证方式和定时监听</p>
      </div>
      <el-button type="primary" @click="openCreate">
        <el-icon><Plus /></el-icon> 新增上游
      </el-button>
    </div>

    <!-- Table -->
    <div class="card">
      <el-table :data="list" v-loading="tableLoading" row-key="id" style="width:100%">
        <el-table-column label="名称" min-width="140">
          <template #default="{ row }">
            <div class="cell-name">{{ row.name }}</div>
            <div class="cell-url">{{ row.base_url }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="110">
          <template #default="{ row }">
            <span :class="['status-badge', row.last_status]">
              <span class="dot"></span>
              {{ statusLabel(row.last_status) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="启用" width="80">
          <template #default="{ row }">
            <el-switch v-model="row.enabled" @change="toggleEnabled(row)" />
          </template>
        </el-table-column>
        <el-table-column label="检测间隔" width="100">
          <template #default="{ row }">{{ row.check_interval_seconds }}s</template>
        </el-table-column>
        <el-table-column label="最近检测" min-width="145">
          <template #default="{ row }">
            <span v-if="row.last_checked_at" class="time-text">{{ fmtTime(row.last_checked_at) }}</span>
            <span v-else class="muted">未检测</span>
          </template>
        </el-table-column>
        <el-table-column label="最近错误" min-width="160">
          <template #default="{ row }">
            <el-tooltip v-if="row.last_error" :content="row.last_error" placement="top" :show-after="300">
              <span class="error-text">{{ row.last_error.substring(0, 40) }}…</span>
            </el-tooltip>
            <span v-else class="muted">—</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <div class="action-row">
              <el-button size="small" text @click="openEdit(row)" title="编辑"><el-icon><Edit /></el-icon></el-button>
              <el-button size="small" text type="success" @click="testUpstream(row)" :loading="row._testing">测试</el-button>
              <el-button size="small" text type="primary" @click="checkNow(row)" :loading="row._checking">检测</el-button>
              <el-button size="small" text type="info" @click="openDetail(row)">
                <el-icon style="margin-right:2px"><List /></el-icon>详情
              </el-button>
              <el-button size="small" text type="danger" @click="confirmDelete(row)" title="删除"><el-icon><Delete /></el-icon></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ======= Create / Edit Drawer ======= -->
    <el-drawer
      v-model="drawerVisible"
      :title="editingId ? '编辑上游' : '新增上游'"
      size="480px"
      destroy-on-close
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="top">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="例：ai98pro" />
        </el-form-item>
        <el-form-item label="Base URL" prop="base_url">
          <el-input v-model="form.base_url" placeholder="https://example.com" />
        </el-form-item>
        <el-form-item label="API Prefix">
          <el-input v-model="form.api_prefix" placeholder="/api/v1" />
        </el-form-item>
        <el-form-item label="认证方式">
          <el-select v-model="form.auth_type" style="width:100%">
            <el-option label="无认证" value="none" />
            <el-option label="Bearer Token" value="bearer" />
            <el-option label="API Key" value="api_key" />
            <el-option label="邮箱密码登录" value="login_password" />
          </el-select>
        </el-form-item>
        <template v-if="form.auth_type === 'bearer'">
          <el-form-item label="Bearer Token">
            <el-input v-model="form.auth_config.token" type="password" show-password placeholder="***" />
          </el-form-item>
        </template>
        <template v-else-if="form.auth_type === 'api_key'">
          <el-form-item label="API Key">
            <el-input v-model="form.auth_config.key" type="password" show-password placeholder="***" />
          </el-form-item>
          <el-form-item label="Header 名称">
            <el-input v-model="form.auth_config.header" placeholder="Authorization" />
          </el-form-item>
        </template>
        <template v-else-if="form.auth_type === 'login_password'">
          <el-form-item label="登录邮箱">
            <el-input v-model="form.auth_config.email" placeholder="admin@example.com" />
          </el-form-item>
          <el-form-item label="登录密码">
            <el-input v-model="form.auth_config.password" type="password" show-password placeholder="***" />
          </el-form-item>
          <el-form-item label="登录接口路径">
            <el-input v-model="form.auth_config.login_path" placeholder="/auth/login" />
          </el-form-item>
        </template>
        <el-form-item label="分组接口">
          <el-input v-model="form.groups_endpoint" placeholder="/groups/available" />
        </el-form-item>
        <el-form-item label="倍率接口">
          <el-input v-model="form.rate_endpoint" placeholder="/groups/rates" />
        </el-form-item>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="检测间隔（秒）">
              <el-input-number v-model="form.check_interval_seconds" :min="60" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="超时（秒）">
              <el-input-number v-model="form.timeout_seconds" :min="5" :max="120" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="启用">
          <el-switch v-model="form.enabled" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="drawerVisible = false">取消</el-button>
        <el-button type="primary" :loading="saving" @click="handleSave">保存</el-button>
      </template>
    </el-drawer>

    <!-- ======= Detail Drawer ======= -->
    <el-drawer
      v-model="detailVisible"
      :title="`检测详情 — ${detailUpstream?.name || ''}`"
      size="700px"
      destroy-on-close
      @open="loadSnapshots"
    >
      <!-- Info cards -->
      <div v-if="detailUpstream" class="info-cards">
        <div class="info-card">
          <div class="info-label">状态</div>
          <span :class="['status-badge', detailUpstream.last_status]">
            <span class="dot"></span>{{ statusLabel(detailUpstream.last_status) }}
          </span>
        </div>
        <div class="info-card">
          <div class="info-label">最近检测</div>
          <div class="info-value">{{ detailUpstream.last_checked_at ? fmtTimeFull(detailUpstream.last_checked_at) : '未检测' }}</div>
        </div>
        <div class="info-card">
          <div class="info-label">检测间隔</div>
          <div class="info-value">{{ detailUpstream.check_interval_seconds }}s</div>
        </div>
        <div class="info-card">
          <div class="info-label">超时</div>
          <div class="info-value">{{ detailUpstream.timeout_seconds }}s</div>
        </div>
      </div>
      <div v-if="detailUpstream?.last_error" class="error-box">
        <el-icon><Warning /></el-icon> {{ detailUpstream.last_error }}
      </div>

      <!-- Snapshot history -->
      <div class="section-title">
        <el-icon><Clock /></el-icon> 检测历史
        <span class="section-sub">最近 {{ snapshots.length }} 条</span>
      </div>

      <div v-loading="snapshotLoading" class="snapshot-list">
        <div
          v-for="snap in snapshots"
          :key="snap.id"
          class="snap-item"
          :class="{ expanded: expandedId === snap.id }"
        >
          <!-- Row header -->
          <div class="snap-header" @click="toggleExpand(snap)">
            <div class="snap-left">
              <el-icon class="expand-icon"><ArrowRight /></el-icon>
              <span class="snap-time">{{ fmtTimeFull(snap.captured_at) }}</span>
            </div>
            <div class="snap-right">
              <el-tag size="small" type="info">{{ snap.snapshot._groups_count }} 个分组</el-tag>
              <template v-if="snap.snapshot._changes_count !== null && snap.snapshot._changes_count !== undefined">
                <el-tag size="small" :type="snap.snapshot._changes_count > 0 ? 'warning' : 'success'">
                  {{ snap.snapshot._changes_count > 0 ? `${snap.snapshot._changes_count} 处变化` : '无变化' }}
                </el-tag>
              </template>
              <el-tag v-else size="small" type="primary">初始快照</el-tag>
            </div>
          </div>

          <!-- Expanded rate table -->
          <div v-if="expandedId === snap.id" class="snap-body">
            <el-table
              :data="groupRows(snap.snapshot)"
              size="small"
              :header-cell-style="{ background: 'var(--bg-elevated)', color: 'var(--text-secondary)' }"
              :cell-style="{ background: 'var(--bg-card)', color: 'var(--text-primary)' }"
            >
              <el-table-column prop="group_name" label="分组名称" min-width="140" />
              <el-table-column prop="platform" label="平台" width="100" />
              <el-table-column label="当前倍率" width="100">
                <template #default="{ row }">
                  <span class="rate-value">{{ row.rate || '—' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="default_rate" label="默认倍率" width="100" />
              <el-table-column prop="override_rate" label="覆盖倍率" width="100">
                <template #default="{ row }">
                  <span v-if="row.override_rate" class="override-value">{{ row.override_rate }}</span>
                  <span v-else class="muted">—</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div v-if="!snapshotLoading && snapshots.length === 0" class="empty-hint">
          暂无检测历史，请先触发「立即检测」
        </div>
      </div>

      <!-- Pagination -->
      <div v-if="snapshots.length > 0 || snapshotOffset > 0" class="snap-pagination">
        <el-button size="small" :disabled="snapshotOffset === 0" @click="prevSnapPage">上一页</el-button>
        <span class="page-info">第 {{ snapshotOffset / snapshotLimit + 1 }} 页</span>
        <el-button size="small" :disabled="snapshots.length < snapshotLimit" @click="nextSnapPage">下一页</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import dayjs from 'dayjs'
import { upstreamsApi, type UpstreamData } from '@/api'

// ---- list state ----
const list = ref<(UpstreamData & { _testing?: boolean; _checking?: boolean })[]>([])
const tableLoading = ref(false)

// ---- create/edit drawer ----
const drawerVisible = ref(false)
const saving = ref(false)
const editingId = ref<number | null>(null)
const formRef = ref<FormInstance>()

const defaultForm = () => ({
  name: '',
  base_url: '',
  api_prefix: '/api/v1',
  auth_type: 'login_password',
  auth_config: { email: '', password: '', login_path: '/auth/login' } as Record<string, any>,
  rate_endpoint: '/groups/rates',
  groups_endpoint: '/groups/available',
  enabled: true,
  check_interval_seconds: 600,
  timeout_seconds: 30,
})
const form = ref(defaultForm())
const rules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  base_url: [{ required: true, message: '请输入 Base URL', trigger: 'blur' }],
}

// ---- detail drawer ----
const detailVisible = ref(false)
const detailUpstream = ref<UpstreamData | null>(null)
const snapshots = ref<any[]>([])
const snapshotLoading = ref(false)
const expandedId = ref<number | null>(null)
const snapshotOffset = ref(0)
const snapshotLimit = 20

// ---- helpers ----
const statusLabel = (s: string) => ({ healthy: '健康', unhealthy: '异常', unknown: '未知' }[s] || s)
// Treat server timestamps as UTC (add Z if no timezone info present)
const toUTC = (t: string) => /[Z+\-]\d*$/.test(t.trim()) ? t : t + 'Z'
const fmtTime = (t: string) => dayjs(toUTC(t)).format('MM-DD HH:mm:ss')
const fmtTimeFull = (t: string) => dayjs(toUTC(t)).format('YYYY-MM-DD HH:mm:ss')


function groupRows(snapshot: any) {
  if (!snapshot?.groups) return []
  return Object.values(snapshot.groups) as any[]
}

// ---- load list ----
async function loadList() {
  tableLoading.value = true
  try {
    const res = await upstreamsApi.list()
    list.value = res.data
  } finally {
    tableLoading.value = false
  }
}

// ---- create / edit ----
function openCreate() {
  editingId.value = null
  form.value = defaultForm()
  drawerVisible.value = true
}

function openEdit(row: UpstreamData) {
  editingId.value = row.id
  form.value = {
    name: row.name,
    base_url: row.base_url,
    api_prefix: row.api_prefix,
    auth_type: row.auth_type,
    auth_config: { ...(row.auth_config_masked as Record<string, any>) },
    rate_endpoint: row.rate_endpoint,
    groups_endpoint: row.groups_endpoint,
    enabled: row.enabled,
    check_interval_seconds: row.check_interval_seconds,
    timeout_seconds: row.timeout_seconds,
  }
  drawerVisible.value = true
}

async function handleSave() {
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return
  saving.value = true
  try {
    if (editingId.value) {
      await upstreamsApi.update(editingId.value, form.value)
      ElMessage.success('保存成功')
    } else {
      await upstreamsApi.create(form.value as any)
      ElMessage.success('创建成功')
    }
    drawerVisible.value = false
    loadList()
  } catch (e: any) {
    ElMessage.error(e.response?.data?.detail || '保存失败')
  } finally {
    saving.value = false
  }
}

// ---- toggle enabled ----
async function toggleEnabled(row: UpstreamData) {
  try {
    await upstreamsApi.update(row.id, { enabled: row.enabled })
    ElMessage.success(row.enabled ? '已启用' : '已停用')
  } catch {
    row.enabled = !row.enabled
    ElMessage.error('操作失败')
  }
}

// ---- test / check-now ----
async function testUpstream(row: any) {
  row._testing = true
  try {
    const res = await upstreamsApi.test(row.id)
    if (res.data.success) ElMessage.success(res.data.message)
    else ElMessage.error(res.data.detail || res.data.message)
  } finally {
    row._testing = false
  }
}

async function checkNow(row: any) {
  row._checking = true
  try {
    const res = await upstreamsApi.checkNow(row.id)
    ElMessage[res.data.success ? 'success' : 'error'](res.data.message)
    loadList()
  } finally {
    row._checking = false
  }
}

// ---- detail drawer ----
function openDetail(row: UpstreamData) {
  detailUpstream.value = row
  snapshots.value = []
  snapshotOffset.value = 0
  expandedId.value = null
  detailVisible.value = true
}

async function loadSnapshots() {
  if (!detailUpstream.value) return
  snapshotLoading.value = true
  try {
    const res = await upstreamsApi.listSnapshots(detailUpstream.value.id, snapshotLimit, snapshotOffset.value)
    snapshots.value = res.data
    // auto-expand the first (latest) snapshot
    if (res.data.length > 0 && expandedId.value === null) {
      expandedId.value = res.data[0].id
    }
  } catch {
    ElMessage.error('加载历史失败')
  } finally {
    snapshotLoading.value = false
  }
}

function toggleExpand(snap: any) {
  expandedId.value = expandedId.value === snap.id ? null : snap.id
}

function prevSnapPage() {
  snapshotOffset.value = Math.max(0, snapshotOffset.value - snapshotLimit)
  expandedId.value = null
  loadSnapshots()
}

function nextSnapPage() {
  snapshotOffset.value += snapshotLimit
  expandedId.value = null
  loadSnapshots()
}

// ---- delete ----
async function confirmDelete(row: UpstreamData) {
  try {
    await ElMessageBox.confirm(`确认删除上游 "${row.name}" ？`, '删除确认', { type: 'warning' })
    await upstreamsApi.delete(row.id)
    ElMessage.success('已删除')
    loadList()
  } catch {}
}

onMounted(loadList)
</script>

<style scoped>
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.page-desc { font-size: 13px; color: var(--text-muted); }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}
.cell-name { font-weight: 500; font-size: 14px; }
.cell-url { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.muted { color: var(--text-muted); font-size: 12px; }
.time-text { font-size: 12px; color: var(--text-secondary); }
.error-text { font-size: 12px; color: var(--color-danger); cursor: pointer; }
.status-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block;
}
.action-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}

/* Detail drawer */
.info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.info-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
}
.info-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.info-value { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.error-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--color-danger);
  font-size: 13px;
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.section-sub { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }

/* Snapshot list */
.snapshot-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}
.snap-item {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.snap-item.expanded { border-color: var(--color-primary); }

.snap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--bg-elevated);
  transition: background 0.12s;
}
.snap-header:hover { background: var(--bg-surface); }

.snap-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.expand-icon {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.snap-item.expanded .expand-icon { transform: rotate(90deg); }
.snap-time { font-size: 13px; color: var(--text-primary); font-weight: 500; font-family: monospace; }

.snap-right { display: flex; align-items: center; gap: 6px; }

.snap-body {
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
}

.rate-value { font-weight: 600; color: var(--color-primary); font-family: monospace; }
.override-value { color: var(--color-warning); font-family: monospace; }

.empty-hint {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 13px;
}

.snap-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
}
.page-info { font-size: 13px; color: var(--text-secondary); }
</style>
