<template>
  <div class="dev-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div>
        <h2 class="page-title">🏷️ 版本管理</h2>
        <p class="page-desc">管理应用版本发布、回滚和更新日志</p>
      </div>
      <a-button type="primary" @click="showVersionModal = true">
        <template #icon><PlusOutlined /></template>
        新增版本
      </a-button>
    </div>

    <!-- 选择应用 -->
    <div class="panel mb-4">
      <div class="panel-header">
        <span class="panel-title">📦 选择应用</span>
      </div>
      <div class="p-4">
        <div v-if="loading.apps" class="loading-state">
          <a-spin size="small" />
          <span class="ml-2">正在加载应用列表...</span>
        </div>
        <a-select
          v-model:value="selectedAppId"
          style="width: 300px"
          placeholder="选择要管理的应用"
          :loading="loading.apps"
          :disabled="loading.apps"
          @change="handleAppChange"
        >
          <a-select-option v-for="app in apps" :key="app.productId" :value="app.productId">
            <div class="select-app-option">
              <img v-if="app.icon" :src="app.icon" class="select-app-icon" />
              <span v-else class="select-app-icon-placeholder">{{ (app.productName || 'A').charAt(0) }}</span>
              <span>{{ app.productName }}</span>
            </div>
          </a-select-option>
        </a-select>
      </div>
    </div>

    <!-- 版本列表 -->
    <div class="panel" v-if="selectedAppId">
      <div class="panel-header">
        <span class="panel-title">📋 版本历史</span>
        <a-space>
          <a-radio-group v-model:value="versionFilter" size="small" @change="loadVersions">
            <a-radio-button value="">全部</a-radio-button>
            <a-radio-button value="1">已发布</a-radio-button>
            <a-radio-button value="0">构建中</a-radio-button>
          </a-radio-group>
        </a-space>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading.versions" class="loading-state">
        <div class="loading-dots">
          <span class="loading-dot"></span>
          <span class="loading-dot"></span>
          <span class="loading-dot"></span>
        </div>
        <div class="loading-text">正在加载版本记录...</div>
      </div>

      <!-- 版本时间线 -->
      <a-timeline v-else-if="versions.length > 0" class="version-timeline">
        <a-timeline-item
          v-for="version in versions"
          :key="version.id"
          :color="versionColor(version.status)"
        >
          <div class="version-card" :class="{ 'is-current': version.isCurrent }">
            <!-- 版本头部 -->
            <div class="version-header">
              <div class="version-info">
                <span class="version-number">v{{ version.versionNo }}</span>
                <a-tag v-if="version.versionName">{{ version.versionName }}</a-tag>
                <a-tag :color="statusTagColor(version.status)">{{ statusText(version.status) }}</a-tag>
                <a-tag v-if="version.isCurrent" color="blue">当前版本</a-tag>
              </div>
              <div class="version-actions">
                <!-- 构建中 → 发布 -->
                <a-button
                  v-if="version.status === 0"
                  type="primary"
                  size="small"
                  @click="handlePublish(version)"
                >
                  发布
                </a-button>
                <!-- 已发布 → 回滚 -->
                <a-popconfirm
                  v-if="version.status === 1 && version.isCurrent"
                  title="回滚操作不可撤销，确定要回滚此版本吗？"
                  @confirm="handleRollback(version)"
                >
                  <a-button
                    danger
                    size="small"
                    :loading="rollbackLoading && rollbackTarget?.id === version.id"
                  >
                    回滚
                  </a-button>
                </a-popconfirm>
                <!-- 非 0/1 状态可删除 -->
                <a-popconfirm
                  v-if="version.status !== 1 && version.status !== 0"
                  title="确定要删除此版本记录吗？"
                  @confirm="handleDelete(version)"
                >
                  <a-button danger size="small">删除</a-button>
                </a-popconfirm>
                <!-- 任何状态都可删除非当前版本 -->
                <a-popconfirm
                  v-if="version.status === 1 && !version.isCurrent"
                  title="确定要删除此版本记录吗？"
                  @confirm="handleDelete(version)"
                >
                  <a-button size="small">删除</a-button>
                </a-popconfirm>
              </div>
            </div>

            <!-- 版本详情 -->
            <div class="version-body">
              <div v-if="version.changelog" class="version-desc">{{ version.changelog }}</div>
              <div v-if="version.remark" class="version-desc">{{ version.remark }}</div>
              <div v-if="!version.changelog && !version.remark" class="version-desc text-gray-400">暂无更新说明</div>

              <!-- 版本元信息 -->
              <div class="version-meta">
                <span v-if="version.publishBy">发布者ID：{{ version.publishBy }}</span>
                <span v-if="version.publishTime">发布时间：{{ version.publishTime }}</span>
                <span v-if="version.packageSize">包大小：{{ formatFileSize(version.packageSize) }}</span>
                <span v-if="version.env">环境：{{ envText(version.env) }}</span>
                <span v-if="version.packageUrl">
                  <a :href="version.packageUrl" target="_blank" rel="noopener noreferrer">下载安装包</a>
                </span>
                <span>创建时间：{{ version.createTime }}</span>
              </div>
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>

      <!-- 空状态 -->
      <div v-else class="empty-state">
        <div class="empty-icon">📋</div>
        <div class="empty-title">暂无版本记录</div>
        <div class="empty-desc">新增版本后，版本记录将在此处显示</div>
        <a-button type="primary" class="mt-4" @click="showVersionModal = true">新增版本</a-button>
      </div>

      <!-- 分页 -->
      <div v-if="pagination.total > 0" class="pagination-wrapper">
        <a-pagination
          v-model:current="pagination.current"
          v-model:pageSize="pagination.pageSize"
          :total="pagination.total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          size="small"
          @change="handlePageChange"
        />
      </div>
    </div>

    <!-- 未选择应用提示 -->
    <div v-else class="panel">
      <div class="empty-state">
        <a-empty description="请先选择要管理的应用">
          <template #image>
            <div class="empty-icon">📦</div>
          </template>
        </a-empty>
      </div>
    </div>

    <!-- 新增版本弹窗 -->
    <a-modal
      v-model:open="showVersionModal"
      title="新增版本"
      width="600px"
      :confirm-loading="submitLoading"
      @ok="handleSubmitVersion"
      @cancel="resetVersionForm"
    >
      <a-form :model="versionForm" layout="vertical">
        <a-form-item label="版本号" required>
          <a-input v-model:value="versionForm.versionNo" placeholder="如：1.2.0" />
        </a-form-item>

        <a-form-item label="版本名称">
          <a-input v-model:value="versionForm.versionName" placeholder="如：新春特惠版" />
        </a-form-item>

        <a-form-item label="环境" required>
          <a-radio-group v-model:value="versionForm.env">
            <a-radio value="development">开发</a-radio>
            <a-radio value="staging">测试</a-radio>
            <a-radio value="production">生产</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="安装包地址">
          <a-input v-model:value="versionForm.packageUrl" placeholder="安装包下载地址（可选）" />
        </a-form-item>

        <a-form-item label="更新说明">
          <a-textarea v-model:value="versionForm.changelog" :rows="4" placeholder="描述此版本的主要更新内容" />
        </a-form-item>

        <a-form-item label="备注">
          <a-input v-model:value="versionForm.remark" placeholder="备注信息（可选）" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { getDeveloperApps } from '@/api/app/appProduct'
import type { AppProduct } from '@/api/app/appProduct/model'
import {
  pageAppVersion,
  addAppVersion,
  publishAppVersion,
  rollbackAppVersion,
  removeAppVersion,
} from '@/api/app/appVersion'
import type { AppVersion, AppVersionParam } from '@/api/app/appVersion/model'

definePageMeta({ layout: 'developer' })
useHead({ title: '版本管理 - 开发者中心' })

const userId = import.meta.client ? localStorage.getItem('UserId') : null

// 状态
const loading = ref({
  apps: true,
  versions: false,
})
const apps = ref<AppProduct[]>([])
const selectedAppId = ref<number | undefined>()
const versionFilter = ref<string>('')
const versions = ref<AppVersion[]>([])
const rollbackLoading = ref(false)
const rollbackTarget = ref<AppVersion | null>(null)

// 分页
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
})

// 弹窗
const showVersionModal = ref(false)
const submitLoading = ref(false)

// 表单
const versionForm = reactive({
  appId: undefined as number | undefined,
  versionNo: '',
  versionName: '',
  env: 'production' as string,
  changelog: '',
  remark: '',
  packageUrl: '',
})

// ========== 辅助函数 ==========

function versionColor(status?: number) {
  const map: Record<number, string> = {
    0: 'blue',    // 构建中
    1: 'green',   // 已发布
    2: 'orange',  // 已回滚
    3: 'red',     // 构建失败
  }
  return (status !== undefined) ? (map[status] || 'gray') : 'gray'
}

function statusText(status?: number) {
  const map: Record<number, string> = {
    0: '构建中',
    1: '已发布',
    2: '已回滚',
    3: '构建失败',
  }
  return (status !== undefined) ? (map[status] || '未知') : '未知'
}

function statusTagColor(status?: number) {
  const map: Record<number, string> = {
    0: 'processing',
    1: 'success',
    2: 'warning',
    3: 'error',
  }
  return (status !== undefined) ? (map[status] || 'default') : 'default'
}

function envText(env?: string) {
  const map: Record<string, string> = {
    development: '开发',
    staging: '测试',
    production: '生产',
  }
  return map[env || ''] || env || ''
}

function formatFileSize(bytes?: number): string {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// ========== 加载数据 ==========

async function loadApps() {
  loading.value.apps = true
  try {
    const queryUserId = userId ? Number(userId) : undefined
    const res = await getDeveloperApps({
      page: 1,
      limit: 100,
      userId: queryUserId,
    })
    // getDeveloperApps 返回的可能是 res.data.data.records 格式
    if (Array.isArray(res)) {
      apps.value = res
    } else if (res && (res as any).data && Array.isArray((res as any).data?.records)) {
      apps.value = (res as any).data.records
    } else {
      apps.value = []
    }

    if (apps.value.length > 0 && !selectedAppId.value) {
      selectedAppId.value = apps.value[0].productId
      await loadVersions()
    }
  } catch (e) {
    console.error('加载应用列表失败:', e)
    message.error('加载应用列表失败')
  } finally {
    loading.value.apps = false
  }
}

async function loadVersions() {
  if (!selectedAppId.value) return
  loading.value.versions = true
  try {
    const params: AppVersionParam = {
      appId: selectedAppId.value,
      page: pagination.current,
      limit: pagination.pageSize,
    }
    if (versionFilter.value !== '') {
      params.status = Number(versionFilter.value)
    }
    const res = await pageAppVersion(params)
    versions.value = res?.list || []
    pagination.total = res?.count || 0
  } catch (error: any) {
    console.error('加载版本列表失败:', error)
    message.error(error?.message || '加载版本列表失败')
  } finally {
    loading.value.versions = false
  }
}

// ========== 事件处理 ==========

function handleAppChange(value: number) {
  selectedAppId.value = value
  pagination.current = 1
  loadVersions()
}

function handlePageChange(page: number, pageSize: number) {
  pagination.current = page
  pagination.pageSize = pageSize
  loadVersions()
}

async function handlePublish(version: AppVersion) {
  try {
    await publishAppVersion(version.id!)
    message.success('版本发布成功')
    await loadVersions()
  } catch (error: any) {
    message.error(error?.message || '版本发布失败，请稍后重试')
  }
}

async function handleRollback(version: AppVersion) {
  rollbackTarget.value = version
  rollbackLoading.value = true
  try {
    await rollbackAppVersion(version.id!)
    message.success('版本回滚成功')
    rollbackTarget.value = null
    await loadVersions()
  } catch (error: any) {
    message.error(error?.message || '版本回滚失败，请稍后重试')
  } finally {
    rollbackLoading.value = false
  }
}

async function handleDelete(version: AppVersion) {
  try {
    await removeAppVersion(version.id!)
    message.success('版本删除成功')
    await loadVersions()
  } catch (error: any) {
    message.error(error?.message || '删除失败，请稍后重试')
  }
}

async function handleSubmitVersion() {
  if (!versionForm.versionNo) {
    message.error('请填写版本号')
    return
  }
  submitLoading.value = true
  try {
    await addAppVersion({
      appId: selectedAppId.value,
      versionNo: versionForm.versionNo,
      versionName: versionForm.versionName || undefined,
      env: versionForm.env,
      changelog: versionForm.changelog || undefined,
      remark: versionForm.remark || undefined,
      packageUrl: versionForm.packageUrl || undefined,
    })
    message.success('版本创建成功（构建中），创建后可点击"发布"按钮正式发布')
    showVersionModal.value = false
    resetVersionForm()
    await loadVersions()
  } catch (error: any) {
    message.error(error?.message || '版本创建失败，请稍后重试')
  } finally {
    submitLoading.value = false
  }
}

function resetVersionForm() {
  versionForm.appId = undefined
  versionForm.versionNo = ''
  versionForm.versionName = ''
  versionForm.env = 'production'
  versionForm.changelog = ''
  versionForm.remark = ''
  versionForm.packageUrl = ''
}

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

<style scoped>
.dev-page {
  min-height: 100%;
  padding: 20px 24px 28px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
}

.page-desc {
  font-size: 13px;
  color: #9ca3af;
  margin: 2px 0 0;
}

/* 面板 */
.panel {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f5f5f5;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

/* 选择应用 */
.select-app-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-app-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}

.select-app-icon-placeholder {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #4e6ef2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

/* 版本时间线 */
.version-timeline {
  padding: 20px;
}

.version-card {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s;
}

.version-card.is-current {
  background: #f0f9ff;
  border-color: #91caff;
}

.version-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.version-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.version-number {
  font-size: 18px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
}

.version-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.version-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.version-desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  white-space: pre-wrap;
}

/* 版本元信息 */
.version-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  padding-top: 12px;
  border-top: 1px dashed #e8e8e8;
}

/* 分页 */
.pagination-wrapper {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
}

/* 空状态 */
.empty-state {
  padding: 60px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.mb-4 { margin-bottom: 16px; }

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.loading-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4f46e5;
  animation: pulse 1.4s ease-in-out infinite;
}

.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.loading-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.ml-2 { margin-left: 8px; }
.mt-4 { margin-top: 16px; }
</style>
