<template>
  <ElCard shadow="never" class="active-payment-settings-widget">
    <template #header>
      <div class="card-header">
        <div class="header-left">
          <span class="header-title">当前生效支付配置</span>
          <ElTag v-if="activeConfig" type="success" effect="dark" size="small">生效中</ElTag>
          <ElTag v-else type="info" effect="plain" size="small">未配置</ElTag>
        </div>
        <div v-if="activeConfig" class="header-right">
          <span class="creator-info">更新于 {{ formatDateTime(activeConfig.updated_at) }}</span>
        </div>
      </div>
    </template>
    <div v-if="activeConfig" class="config-info">
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        >
          <i class="el-icon">📝</i>
        </div>
        <div class="info-content">
          <div class="info-label">配置名称</div>
          <div class="info-value">{{ activeConfig.name }}</div>
        </div>
      </div>
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
        >
          <i class="el-icon">💳</i>
        </div>
        <div class="info-content">
          <div class="info-label">支付渠道类型</div>
          <div class="info-value">{{ getProviderTypeText(activeConfig.provider_type) }}</div>
        </div>
      </div>
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
        >
          <i class="el-icon">🏪</i>
        </div>
        <div class="info-content">
          <div class="info-label">商户号</div>
          <div class="info-value">{{ getMerchantId(activeConfig) }}</div>
        </div>
      </div>
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
        >
          <i class="el-icon">✅</i>
        </div>
        <div class="info-content">
          <div class="info-label">激活状态</div>
          <div class="info-value">{{ activeConfig.is_active ? '已激活' : '未激活' }}</div>
        </div>
      </div>
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
        >
          <i class="el-icon">🔔</i>
        </div>
        <div class="info-content">
          <div class="info-label">支付回调地址</div>
          <div class="info-value">{{ getNotifyUrl(activeConfig) }}</div>
        </div>
      </div>
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%)"
        >
          <i class="el-icon">🔐</i>
        </div>
        <div class="info-content">
          <div class="info-label">凭证状态</div>
          <div class="info-value">{{ getCredentialStatus(activeConfig) }}</div>
        </div>
      </div>
    </div>
    <div v-else class="empty-content">
      <i class="el-icon-info" style="font-size: 48px; color: var(--el-text-color-placeholder)"></i>
      <p>暂无生效的支付配置</p>
    </div>
  </ElCard>
</template>

<script setup lang="ts">
  import { PaymentSettingsService } from '@/api/modules'
  import { ElTag } from 'element-plus'
  import type { PaymentSettings } from '@/types/api'
  import { formatDateTime } from '@/utils/business/format'
  import {
    getPaymentConfigStatus,
    getPaymentMerchantId,
    getPaymentNotifyUrl,
    getPaymentProviderText
  } from '@/utils/business/paymentConfig'
  import { usePermission } from '@/composables/usePermission'

  defineOptions({ name: 'ActivePaymentSettingsWidget' })

  const { hasPermission } = usePermission()

  // 当前生效的支付配置
  const activeConfig = ref<PaymentSettings | null>(null)

  const getProviderTypeText = (type: PaymentSettings['provider_type']): string => {
    return getPaymentProviderText(type)
  }

  const getMerchantId = (config: PaymentSettings): string => {
    return getPaymentMerchantId(config)
  }

  const getNotifyUrl = (config: PaymentSettings): string => {
    return getPaymentNotifyUrl(config)
  }

  const getCredentialStatus = (config: PaymentSettings): string => {
    if (config.provider_type === 'wechat' || config.provider_type === 'wechat_v2') {
      const certStatus = getPaymentConfigStatus(config.wx_cert_content)
      const keyStatus = getPaymentConfigStatus(config.wx_key_content)
      if (certStatus === '已配置' && keyStatus === '已配置') {
        return '证书/密钥已配置'
      }
      if (certStatus === '未配置' && keyStatus === '未配置') {
        return '未配置'
      }
      return '部分配置'
    }

    if (config.provider_type === 'fuiou') {
      const privateKeyStatus = getPaymentConfigStatus(config.fy_private_key)
      const publicKeyStatus = getPaymentConfigStatus(config.fy_public_key)
      if (privateKeyStatus === '已配置' && publicKeyStatus === '已配置') {
        return '富友密钥已配置'
      }
      if (privateKeyStatus === '未配置' && publicKeyStatus === '未配置') {
        return '未配置'
      }
      return '部分配置'
    }

    return '-'
  }

  // 加载当前生效配置
  const loadActiveConfig = async () => {
    // 检查权限，没有权限不调用接口
    if (!hasPermission('dashboard_analysis:payment_settings')) {
      return
    }

    try {
      const res = await PaymentSettingsService.getActivePaymentSettings()
      if (res.code === 0 && res.data) {
        activeConfig.value = res.data
      }
    } catch (error) {
      console.error('获取当前生效支付配置失败:', error)
    }
  }

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

<style lang="scss" scoped>
  .active-payment-settings-widget {
    :deep(.el-card__header) {
      padding: 18px 20px;
      background: var(--el-fill-color-light);
      border-bottom: 1px solid var(--el-border-color-lighter);
    }

    :deep(.el-card__body) {
      padding: 20px;
    }

    .card-header {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: space-between;

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

        .header-title {
          font-size: 15px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }

      .header-right {
        .creator-info {
          font-size: 13px;
          color: var(--el-text-color-secondary);
        }
      }
    }

    .config-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;

      .info-card {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 16px;
        background: var(--el-fill-color-blank);
        border-radius: 8px;

        .info-icon {
          display: flex;
          flex-shrink: 0;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          font-size: 20px;
          border-radius: 8px;
        }

        .info-content {
          flex: 1;
          min-width: 0;

          .info-label {
            margin-bottom: 4px;
            font-size: 13px;
            color: var(--el-text-color-secondary);
          }

          .info-value {
            overflow: hidden;
            font-size: 16px;
            font-weight: 600;
            color: var(--el-text-color-primary);
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .empty-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      color: var(--el-text-color-secondary);

      p {
        margin-top: 12px;
        font-size: 14px;
      }
    }
  }

  @media (width <= 768px) {
    .active-payment-settings-widget {
      .card-header {
        .header-left,
        .header-right {
          width: 100%;
        }
      }

      .config-info {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
  }
</style>
