<template>
  <div class="certificates-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>我的证书</h2>
      <p class="subtitle">记录您的学习成就与荣誉</p>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card" v-for="stat in stats" :key="stat.type">
        <div class="stat-icon" :class="stat.type">
          <el-icon><component :is="stat.icon" /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ stat.count }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
    </div>
    
    <!-- 筛选区 -->
    <div class="filter-bar">
      <el-radio-group v-model="filterType" @change="handleFilterChange">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="course">课程证书</el-radio-button>
        <el-radio-button label="exam">考试证书</el-radio-button>
        <el-radio-button label="achievement">成就证书</el-radio-button>
      </el-radio-group>
    </div>
    
    <!-- 证书列表 -->
    <div class="certificates-list" v-loading="loading">
      <div 
        v-for="cert in certificates" 
        :key="cert.id" 
        class="certificate-card"
        :class="cert.type"
        @click="viewCertificate(cert)"
      >
        <div class="cert-header">
          <div class="cert-type-badge" :class="cert.type">
            {{ cert.type_name }}
          </div>
          <div class="cert-date">{{ formatDate(cert.issued_at) }}</div>
        </div>
        
        <div class="cert-body">
          <h3 class="cert-title">{{ cert.title }}</h3>
          <p class="cert-description">{{ cert.description }}</p>
          
          <div class="cert-info" v-if="cert.score || cert.completion_rate">
            <span v-if="cert.score" class="info-item">
              <el-icon><Trophy /></el-icon>
              成绩：{{ cert.score }}分
            </span>
            <span v-if="cert.completion_rate" class="info-item">
              <el-icon><Select /></el-icon>
              完成率：{{ cert.completion_rate }}%
            </span>
          </div>
        </div>
        
        <div class="cert-footer">
          <span class="cert-no">{{ cert.certificate_no }}</span>
          <div class="cert-actions">
            <el-button text type="primary" @click.stop="shareCertificate(cert)">
              <el-icon><Share /></el-icon>
              分享
            </el-button>
            <el-button text type="primary" @click.stop="downloadCertificate(cert)">
              <el-icon><Download /></el-icon>
              下载
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <el-empty 
        v-if="!loading && certificates.length === 0" 
        description="暂无证书"
        :image-size="120"
      >
        <template #description>
          <p>完成课程或考试后即可获得证书</p>
        </template>
      </el-empty>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more" v-if="hasMore && certificates.length > 0">
      <el-button text @click="loadMore" :loading="loadingMore">
        加载更多
      </el-button>
    </div>
    
    <!-- 证书预览弹窗 -->
    <el-dialog
      v-model="previewVisible"
      :title="currentCert?.title || '证书详情'"
      width="600px"
      class="certificate-preview-dialog"
    >
      <div class="preview-content" v-if="currentCert">
        <div class="preview-image">
          <img 
            v-if="previewImageUrl" 
            :src="previewImageUrl" 
            alt="证书图片"
            @error="handleImageError"
          />
          <div v-else class="preview-placeholder">
            <el-icon :size="48"><Document /></el-icon>
            <p>正在生成证书图片...</p>
          </div>
        </div>
        
        <div class="preview-info">
          <div class="info-row">
            <span class="label">证书编号</span>
            <span class="value">{{ currentCert.certificate_no }}</span>
          </div>
          <div class="info-row">
            <span class="label">证书类型</span>
            <span class="value">{{ currentCert.type_name }}</span>
          </div>
          <div class="info-row">
            <span class="label">颁发日期</span>
            <span class="value">{{ formatDate(currentCert.issued_at) }}</span>
          </div>
          <div class="info-row" v-if="currentCert.score">
            <span class="label">考试成绩</span>
            <span class="value highlight">{{ currentCert.score }}分</span>
          </div>
          <div class="info-row" v-if="currentCert.completion_rate">
            <span class="label">完成率</span>
            <span class="value highlight">{{ currentCert.completion_rate }}%</span>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="previewVisible = false">关闭</el-button>
          <el-button type="primary" @click="shareCertificate(currentCert!)">
            <el-icon><Share /></el-icon>
            分享
          </el-button>
          <el-button type="success" @click="downloadCertificate(currentCert!)">
            <el-icon><Download /></el-icon>
            下载
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Trophy, Select, Share, Download, Document,
  Reading, Medal, Star
} from '@element-plus/icons-vue'
import { 
  getMyCertificates, 
  getCertificateImageUrl,
  getCertificateDownloadUrl,
  type Certificate, 
  type CertificateType 
} from '@/api/certificate'

// 状态
const loading = ref(false)
const loadingMore = ref(false)
const certificates = ref<Certificate[]>([])
const total = ref(0)
const offset = ref(0)
const limit = 12
const filterType = ref<CertificateType | ''>('')

// 预览弹窗
const previewVisible = ref(false)
const currentCert = ref<Certificate | null>(null)
const previewImageUrl = ref('')

// 统计数据
const stats = computed(() => {
  const allCerts = certificates.value
  return [
    {
      type: 'total',
      icon: 'Medal',
      label: '全部证书',
      count: total.value
    },
    {
      type: 'course',
      icon: 'Reading',
      label: '课程证书',
      count: allCerts.filter(c => c.type === 'course').length
    },
    {
      type: 'exam',
      icon: 'Trophy',
      label: '考试证书',
      count: allCerts.filter(c => c.type === 'exam').length
    },
    {
      type: 'achievement',
      icon: 'Star',
      label: '成就证书',
      count: allCerts.filter(c => c.type === 'achievement').length
    }
  ]
})

// 是否有更多
const hasMore = computed(() => offset.value + limit < total.value)

// 获取证书列表
const fetchCertificates = async (append = false) => {
  if (append) {
    loadingMore.value = true
  } else {
    loading.value = true
    offset.value = 0
  }
  
  try {
    const res = await getMyCertificates({
      cert_type: filterType.value || undefined,
      offset: offset.value,
      limit
    })
    
    if (res.code === 200 && res.data) {
      if (append) {
        certificates.value.push(...res.data.items)
      } else {
        certificates.value = res.data.items
      }
      total.value = res.data.total
    }
  } catch (error) {
    console.error('获取证书列表失败:', error)
    ElMessage.error('获取证书列表失败')
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

// 筛选变化
const handleFilterChange = () => {
  fetchCertificates()
}

// 加载更多
const loadMore = () => {
  offset.value += limit
  fetchCertificates(true)
}

// 查看证书
const viewCertificate = (cert: Certificate) => {
  currentCert.value = cert
  previewImageUrl.value = getCertificateImageUrl(cert.id)
  previewVisible.value = true
}

// 分享证书
const shareCertificate = async (cert: Certificate) => {
  const shareUrl = `${window.location.origin}/certificates/verify/${cert.certificate_no}`
  
  try {
    await navigator.clipboard.writeText(shareUrl)
    ElMessage.success('证书链接已复制到剪贴板')
  } catch (e) {
    // 如果剪贴板API不可用，显示链接让用户手动复制
    ElMessage({
      message: `请手动复制链接: ${shareUrl}`,
      type: 'info',
      duration: 5000
    })
  }
}

// 下载证书
const downloadCertificate = (cert: Certificate) => {
  const downloadUrl = getCertificateDownloadUrl(cert.id)
  
  // 创建隐藏的 a 标签进行下载
  const link = document.createElement('a')
  link.href = downloadUrl
  link.download = `certificate_${cert.certificate_no}.png`
  link.target = '_blank'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  
  ElMessage.success('证书下载中...')
}

// 图片加载失败
const handleImageError = () => {
  previewImageUrl.value = ''
}

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 初始化
onMounted(() => {
  fetchCertificates()
})
</script>

<style lang="scss" scoped>
.certificates-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  margin-bottom: 32px;
  
  h2 {
    font-size: 28px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
  }
  
  .subtitle {
    color: #909399;
    font-size: 14px;
  }
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  
  .stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    
    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .el-icon {
        font-size: 24px;
        color: #fff;
      }
      
      &.total {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      &.course {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      
      &.exam {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
      
      &.achievement {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }
    }
    
    .stat-info {
      .stat-value {
        font-size: 24px;
        font-weight: 600;
        color: #303133;
      }
      
      .stat-label {
        font-size: 13px;
        color: #909399;
        margin-top: 4px;
      }
    }
  }
}

.filter-bar {
  margin-bottom: 24px;
  
  :deep(.el-radio-button__inner) {
    border-radius: 20px;
    padding: 8px 20px;
    border: none;
    background: #f5f7fa;
    
    &:hover {
      color: #667eea;
    }
  }
  
  :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }
}

.certificates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  min-height: 200px;
}

.certificate-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  
  .cert-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    
    .cert-type-badge {
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      
      &.course {
        background: #e6f7ff;
        color: #1890ff;
      }
      
      &.exam {
        background: #f6ffed;
        color: #52c41a;
      }
      
      &.achievement {
        background: #fff7e6;
        color: #fa8c16;
      }
    }
    
    .cert-date {
      font-size: 12px;
      color: #909399;
    }
  }
  
  .cert-body {
    padding: 20px;
    
    .cert-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .cert-description {
      font-size: 13px;
      color: #606266;
      line-height: 1.5;
      margin-bottom: 12px;
    }
    
    .cert-info {
      display: flex;
      gap: 16px;
      
      .info-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        color: #667eea;
        font-weight: 500;
        
        .el-icon {
          font-size: 14px;
        }
      }
    }
  }
  
  .cert-footer {
    padding: 12px 20px;
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .cert-no {
      font-size: 11px;
      color: #909399;
      font-family: monospace;
    }
    
    .cert-actions {
      display: flex;
      gap: 8px;
      
      .el-button {
        padding: 4px 8px;
        font-size: 12px;
      }
    }
  }
}

.load-more {
  text-align: center;
  padding: 24px 0;
}

// 预览弹窗样式
.certificate-preview-dialog {
  :deep(.el-dialog__body) {
    padding: 0;
  }
  
  .preview-content {
    .preview-image {
      background: #f5f7fa;
      padding: 20px;
      text-align: center;
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      img {
        max-width: 100%;
        max-height: 400px;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }
      
      .preview-placeholder {
        color: #909399;
        
        .el-icon {
          margin-bottom: 12px;
        }
      }
    }
    
    .preview-info {
      padding: 20px;
      
      .info-row {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .label {
          color: #909399;
          font-size: 14px;
        }
        
        .value {
          color: #303133;
          font-size: 14px;
          font-weight: 500;
          
          &.highlight {
            color: #667eea;
          }
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

// 响应式
@media (max-width: 768px) {
  .certificates-page {
    padding: 16px;
  }
  
  .page-header {
    text-align: center;
    
    h2 {
      font-size: 22px;
    }
  }
  
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    
    .stat-card {
      padding: 14px;
      
      .stat-icon {
        width: 40px;
        height: 40px;
        
        .el-icon {
          font-size: 20px;
        }
      }
      
      .stat-info {
        .stat-value {
          font-size: 20px;
        }
        
        .stat-label {
          font-size: 12px;
        }
      }
    }
  }
  
  .filter-bar {
    overflow-x: auto;
    
    .el-radio-group {
      display: flex;
      flex-wrap: nowrap;
    }
    
    :deep(.el-radio-button__inner) {
      padding: 6px 14px;
      font-size: 13px;
      white-space: nowrap;
    }
  }
  
  .certificates-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .certificate-card {
    .cert-body {
      padding: 16px;
      
      .cert-title {
        font-size: 15px;
      }
    }
    
    .cert-footer {
      flex-direction: column;
      gap: 10px;
      
      .cert-actions {
        width: 100%;
        justify-content: flex-end;
      }
    }
  }
}

@media (max-width: 480px) {
  .stats-cards {
    grid-template-columns: 1fr 1fr;
    
    .stat-card {
      flex-direction: column;
      text-align: center;
      gap: 10px;
    }
  }
  
  .certificate-preview-dialog {
    :deep(.el-dialog) {
      width: 95% !important;
      margin: 5vh auto !important;
    }
    
    .dialog-footer {
      flex-direction: column;
      
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
