<template>
  <ElCard shadow="never" class="info-card current-package-card">
    <template #header>
      <div class="card-header">
        <div class="card-header-left">
          <span class="header-title">当前生效套餐</span>
          <ElTag
            v-if="currentPackage"
            :type="getPackageStatusTagType(currentPackage.status)"
            size="small"
          >
            {{ currentPackage?.status_name || '-' }}
          </ElTag>
        </div>
        <div v-if="currentPackage" class="card-header-right">
          <ElButton type="primary" size="small" @click="handleShowRecharge"> 套餐充值 </ElButton>
        </div>
      </div>
    </template>

    <!-- 显示错误信息 -->
    <ElAlert v-if="errorMsg" :title="errorMsg" type="warning" :closable="false" />

    <!-- 显示套餐详情 -->
    <div v-else-if="currentPackage">
      <ElDescriptions :column="3" border>
        <!-- 套餐基本信息 -->
        <ElDescriptionsItem label="套餐名称">
          {{ currentPackage.package_name || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="套餐价格">
          {{ formatAmount(currentPackage.package_price) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="套餐总量">
          {{ formatDataSize(currentPackage.package_total_data || 0) }}
        </ElDescriptionsItem>

        <!-- 套餐时长 -->
        <ElDescriptionsItem v-if="currentPackage.duration_days" label="套餐时长" :span="3">
          {{ currentPackage.duration_days }}天
        </ElDescriptionsItem>
      </ElDescriptions>

      <!-- 真流量进度 -->
      <div class="traffic-progress-wrapper">
        <div class="progress-info">
          <span class="progress-label">真流量</span>
          <span class="progress-text">
            已用 {{ formatDataSize(currentPackage.real_data_used || 0) }} / 剩余
            {{ formatDataSize(currentPackage.real_data_remaining || 0) }} / 总量
            {{ formatDataSize(currentPackage.real_data_total || 0) }}
          </span>
        </div>
        <ElProgress
          :percentage="
            getUsageProgress(
              currentPackage.real_data_used || 0,
              currentPackage.real_data_total || 0
            )
          "
          :color="
            getProgressColorByPercentage(
              getUsageProgress(
                currentPackage.real_data_used || 0,
                currentPackage.real_data_total || 0
              )
            )
          "
          :stroke-width="20"
        />
      </div>

      <!-- 虚流量进度 -->
      <div class="traffic-progress-wrapper">
        <div class="progress-info">
          <span class="progress-label">虚流量</span>
          <span class="progress-text">
            已用 {{ formatDataSize(currentPackage.virtual_data_used || 0) }} / 剩余
            {{ formatDataSize(currentPackage.virtual_data_remaining || 0) }} / 总量
            {{ formatDataSize(currentPackage.virtual_data_total || 0) }}
          </span>
        </div>
        <ElProgress
          :percentage="
            getUsageProgress(
              currentPackage.virtual_data_used || 0,
              currentPackage.virtual_data_total || 0
            )
          "
          :color="
            getProgressColorByPercentage(
              getUsageProgress(
                currentPackage.virtual_data_used || 0,
                currentPackage.virtual_data_total || 0
              )
            )
          "
          :stroke-width="20"
        />
      </div>

      <!-- 时间信息 -->
      <ElDescriptions :column="3" border style="margin-top: 16px">
        <ElDescriptionsItem label="开始时间">
          {{ formatDateTime(currentPackage.start_time) || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="到期时间">
          {{ formatDateTime(currentPackage.expire_time) || '-' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="状态">
          <ElTag :type="getPackageStatusTagType(currentPackage.status)" size="small">
            {{ currentPackage.status_name || '-' }}
          </ElTag>
        </ElDescriptionsItem>
      </ElDescriptions>
    </div>

    <!-- 空状态 -->
    <ElEmpty v-else-if="!loading" :description="errorMsg || '暂无当前生效套餐'" :image-size="100" />
  </ElCard>
</template>

<script setup lang="ts">
  import {
    ElCard,
    ElTag,
    ElButton,
    ElDescriptions,
    ElDescriptionsItem,
    ElProgress,
    ElEmpty,
    ElAlert
  } from 'element-plus'
  import { useAssetFormatters } from '../composables/useAssetFormatters'
  import { formatDateTime } from '@/utils/business/format'
  import type { PackageInfo } from '../types'

  // Use formatters
  const {
    formatAmount,
    formatDataSize,
    getPackageStatusTagType,
    getUsageProgress,
    getProgressColorByPercentage
  } = useAssetFormatters()

  // Props
  interface Props {
    currentPackage: PackageInfo | null
    loading?: boolean
    errorMsg?: string
  }

  withDefaults(defineProps<Props>(), {
    loading: false,
    errorMsg: ''
  })

  // Emits
  const emit = defineEmits<{
    showRecharge: []
  }>()

  // Methods
  const handleShowRecharge = () => {
    emit('showRecharge')
  }
</script>

<style scoped lang="scss">
  .current-package-card {
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .card-header-left {
        display: flex;
        gap: 12px;
        align-items: center;

        .header-title {
          font-size: 16px;
          font-weight: 500;
        }
      }

      .card-header-right {
        display: flex;
        gap: 8px;
        align-items: center;
      }
    }

    .traffic-progress-wrapper {
      padding: 16px;
      margin-top: 16px;
      background: var(--el-fill-color-light);
      border-radius: 8px;

      .progress-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .progress-label {
          font-size: 15px;
          font-weight: 500;
          color: var(--el-text-color-primary);
        }

        .progress-text {
          font-size: 13px;
          color: var(--el-text-color-regular);
        }
      }
    }

    .package-actions {
      margin-top: 16px;
      text-align: right;
    }
  }
</style>
