<template>
  <div class="single-card-page">
    <!-- 资产查询区域 -->
    <AssetSearchCard
      ref="assetSearchCardRef"
      :has-card-info="!!cardInfo"
      @search="handleSearch"
      @refresh="handleRefresh"
    />

    <!-- 卡片内容区域 -->
    <div v-if="cardInfo" class="card-content-area slide-in">
      <div class="main-content-layout">
        <!-- 第一行：基本信息 -->
        <div class="row full-width">
          <BasicInfoCard
            :card-info="cardInfo"
            :device-realtime="deviceRealtime"
            v-model:polling-enabled="pollingEnabled"
            @enable-card="handleEnableCard"
            @disable-card="handleDisableCard"
            @manual-deactivate="handleManualDeactivate"
            @reboot-device="handleRebootDevice"
            @reset-device="handleResetDevice"
            @show-switch-card="showSwitchCardDialog"
            @show-set-wifi="showSetWiFiDialog"
            @enable-binding-card="handleEnableBindingCard"
            @disable-binding-card="handleDisableBindingCard"
            @navigate-to-card="handleNavigateToCard"
          />
        </div>

        <!-- 第二行：当前生效套餐 -->
        <div class="row full-width">
          <CurrentPackageCard
            :current-package="currentPackage"
            :loading="currentPackageLoading"
            :error-msg="currentPackageErrorMsg"
            @show-recharge="showRechargeDialog"
          />
        </div>

        <!-- 第三行：钱包概况和套餐列表 -->
        <div class="row two-columns">
          <div class="col">
            <WalletOverviewCard :wallet-info="walletInfo" :loading="walletLoading" />
          </div>
          <div class="col">
            <PackageListCard
              :package-list="packageList"
              @show-daily-records="handleShowDailyRecords"
            />
          </div>
        </div>

        <!-- 第四行：钱包流水 -->
        <div class="row full-width">
          <WalletTransactionCard :asset-identifier="cardInfo.identifier" />
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <ElCard v-else shadow="never" class="empty-state-card">
      <div class="empty-state">
        <ElEmpty description="请输入资产标识符进行查询" />
      </div>
    </ElCard>

    <!-- 对话框组件 -->
    <SwitchCardDialog
      v-model="switchCardDialogVisible"
      :device-id="cardInfo?.id"
      @confirm="handleConfirmSwitchCard"
    />
    <WiFiConfigDialog v-model="setWiFiDialogVisible" @confirm="handleConfirmSetWiFi" />
    <PackageRechargeDialog
      v-model="rechargeDialogVisible"
      :asset-identifier="cardInfo?.identifier"
      :asset-type="cardInfo?.asset_type"
      :series-id="cardInfo?.series_id"
      @success="handleRechargeSuccess"
    />
    <DailyRecordsDialog
      v-model="dailyRecordsDialogVisible"
      :package-usage-id="selectedPackageUsageId"
    />
    <OrderHistoryDialog
      v-model="orderHistoryDialogVisible"
      :asset-identifier="cardInfo?.identifier"
      :asset-type="cardInfo?.asset_type"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import { ElMessage, ElCard, ElEmpty } from 'element-plus'

  // 引入子组件
  import AssetSearchCard from './components/AssetSearchCard.vue'
  import BasicInfoCard from './components/BasicInfoCard.vue'
  import CurrentPackageCard from './components/CurrentPackageCard.vue'
  import WalletOverviewCard from './components/WalletOverviewCard.vue'
  import PackageListCard from './components/PackageListCard.vue'
  import WalletTransactionCard from './components/WalletTransactionCard.vue'

  // 引入对话框组件
  import {
    SwitchCardDialog,
    WiFiConfigDialog,
    PackageRechargeDialog,
    DailyRecordsDialog,
    OrderHistoryDialog
  } from './components/dialogs'

  // 引入 composables
  import { useAssetInfo } from './composables/useAssetInfo'
  import { useAssetOperations } from './composables/useAssetOperations'

  // 引入类型
  import type { SwitchCardForm, WiFiForm } from './types'

  defineOptions({ name: 'SingleCard' })

  const route = useRoute()

  // ========== 组件引用 ==========
  const assetSearchCardRef = ref<InstanceType<typeof AssetSearchCard>>()

  // ========== 核心数据状态（使用 composable） ==========
  const {
    cardInfo,
    deviceRealtime,
    currentPackage,
    currentPackageLoading,
    currentPackageErrorMsg,
    packageList,
    walletInfo,
    walletLoading,
    fetchAssetDetail,
    loadPackageList,
    loadCurrentPackage,
    loadRealtimeStatus,
    loadAssetWallet,
    refreshAsset
  } = useAssetInfo()

  // ========== 资产操作方法（使用 composable） ==========
  const {
    enableCard: enableCardOp,
    disableCard: disableCardOp,
    manualDeactivateCard: manualDeactivateCardOp,
    rebootDevice: rebootDeviceOp,
    resetDevice: resetDeviceOp,
    switchCard: switchCardOp,
    setWiFi: setWiFiOp,
    updatePollingStatus
  } = useAssetOperations(cardInfo, async () => {
    if (cardInfo.value) {
      await loadRealtimeStatus(cardInfo.value.identifier, cardInfo.value.asset_type)
    }
  })

  // ========== 对话框状态 ==========
  const switchCardDialogVisible = ref(false)
  const setWiFiDialogVisible = ref(false)
  const rechargeDialogVisible = ref(false)
  const dailyRecordsDialogVisible = ref(false)
  const orderHistoryDialogVisible = ref(false)
  const selectedPackageUsageId = ref<number | null>(null)

  // ========== 轮询状态 ==========
  const pollingEnabled = ref(false)
  watch(pollingEnabled, async (val) => {
    await updatePollingStatus(val)
  })

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

  /**
   * 处理资产搜索
   */
  const handleSearch = async ({ identifier }: { identifier: string }) => {
    // 更新搜索框的值
    assetSearchCardRef.value?.updateSearchValue(identifier)

    // fetchAssetDetail 内部已经会并行加载所有相关数据，不需要重复调用
    await fetchAssetDetail(identifier)
  }

  /**
   * 处理刷新
   */
  const handleRefresh = async () => {
    if (!cardInfo.value) return
    await refreshAsset(cardInfo.value.identifier, cardInfo.value.asset_type)
  }

  /**
   * IoT卡操作 - 启用卡
   */
  const handleEnableCard = async () => {
    await enableCardOp()
    await handleRefresh()
  }

  /**
   * IoT卡操作 - 停用卡
   */
  const handleDisableCard = async () => {
    await disableCardOp()
    await handleRefresh()
  }

  /**
   * IoT卡操作 - 手动停用
   */
  const handleManualDeactivate = async () => {
    await manualDeactivateCardOp()
    await handleRefresh()
  }

  /**
   * 设备操作 - 重启设备
   */
  const handleRebootDevice = async () => {
    await rebootDeviceOp()
    await handleRefresh()
  }

  /**
   * 设备操作 - 恢复出厂
   */
  const handleResetDevice = async () => {
    await resetDeviceOp()
    await handleRefresh()
  }

  /**
   * 显示切卡对话框
   */
  const showSwitchCardDialog = () => {
    switchCardDialogVisible.value = true
  }

  /**
   * 确认切卡
   */
  const handleConfirmSwitchCard = async (form: SwitchCardForm) => {
    await switchCardOp(form)
    switchCardDialogVisible.value = false
    await handleRefresh()
  }

  /**
   * 显示WiFi配置对话框
   */
  const showSetWiFiDialog = () => {
    setWiFiDialogVisible.value = true
  }

  /**
   * 确认WiFi配置
   */
  const handleConfirmSetWiFi = async (form: WiFiForm) => {
    await setWiFiOp(form)
    setWiFiDialogVisible.value = false
    await handleRefresh()
  }

  /**
   * 绑定卡操作 - 启用绑定卡
   */
  const handleEnableBindingCard = async (payload: { card: any }) => {
    const { card } = payload
    try {
      const { CardService } = await import('@/api/modules')
      await CardService.enableIotCard(card.iccid)
      ElMessage.success('启用成功')
      // 刷新资产信息
      await handleRefresh()
    } catch (error: any) {
      console.error('启用绑定卡失败:', error)
      ElMessage.error(error?.message || '启用失败')
    }
  }

  /**
   * 绑定卡操作 - 停用绑定卡
   */
  const handleDisableBindingCard = async (payload: { card: any }) => {
    const { card } = payload
    try {
      const { CardService } = await import('@/api/modules')
      await CardService.disableIotCard(card.iccid)
      ElMessage.success('停用成功')
      // 刷新资产信息
      await handleRefresh()
    } catch (error: any) {
      console.error('停用绑定卡失败:', error)
      ElMessage.error(error?.message || '停用失败')
    }
  }

  /**
   * 显示套餐充值对话框
   */
  const showRechargeDialog = () => {
    rechargeDialogVisible.value = true
  }

  /**
   * 充值成功回调
   */
  const handleRechargeSuccess = async () => {
    rechargeDialogVisible.value = false
    if (cardInfo.value) {
      await Promise.all([
        loadPackageList(cardInfo.value.identifier),
        loadCurrentPackage(cardInfo.value.identifier),
        loadAssetWallet(cardInfo.value.identifier)
      ])
    }
    ElMessage.success('充值成功')
  }

  /**
   * 显示流量详单
   */
  const handleShowDailyRecords = (packageRow: any) => {
    selectedPackageUsageId.value = packageRow.package_usage_id
    dailyRecordsDialogVisible.value = true
  }

  /**
   * 跳转到绑定卡信息
   */
  const handleNavigateToCard = async (iccid: string) => {
    await handleSearch({ identifier: iccid })
  }

  /**
   * URL参数自动加载
   */
  onMounted(() => {
    autoLoadFromQuery()
  })

  /**
   * 监听路由查询参数变化
   */
  watch(
    () => route.query,
    () => {
      autoLoadFromQuery()
    }
  )

  /**
   * 从URL参数自动加载资产
   */
  const autoLoadFromQuery = () => {
    const iccid = route.query.iccid as string
    const virtualNo = route.query.virtual_no as string
    const deviceNo = route.query.device_no as string

    const identifier = iccid || virtualNo || deviceNo
    if (identifier) {
      handleSearch({ identifier })
    }
  }
</script>

<style lang="scss" scoped>
  // 套餐名称链接样式
  .package-name-link {
    text-decoration: underline;

    &:hover {
      text-decoration: underline;
    }
  }

  .single-card-page {
    padding: 20px;

    // 资产查询卡片
    .search-card {
      margin-bottom: 20px;
      overflow: visible;
      background: var(--el-bg-color, #fff);

      :deep(.el-card__header) {
        padding: 16px 20px;
        background: var(--el-fill-color-light);
        border-bottom: 1px solid var(--el-border-color-lighter);
      }

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

      .iccid-search {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-start;
        overflow: visible;

        .iccid-input-wrapper {
          position: relative;
          display: inline-block;

          // 放大显示区域
          .iccid-magnifier {
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            z-index: 1000;
            white-space: nowrap;

            // 三角箭头 - 上边框样式
            .magnifier-arrow {
              position: absolute;
              top: -9px;
              left: 80px;
              width: 16px;
              height: 16px;
              background-color: var(--el-bg-color, #fff);
              border-top: 2px solid var(--el-color-primary);
              border-left: 2px solid var(--el-color-primary);
              transform: rotate(45deg);
            }

            // 内容区域
            .magnifier-content {
              display: inline-block;
              padding: 16px 24px;
              font-family: 'Courier New', Courier, monospace;
              font-size: 28px;
              font-weight: 600;
              line-height: 1.4;
              color: var(--el-color-primary);
              text-align: center;
              letter-spacing: 2px;
              white-space: nowrap;
              background-color: var(--el-bg-color, #fff);
              border: 2px solid var(--el-color-primary);
              border-radius: 8px;
              box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
            }
          }
        }

        // 操作按钮组
        .operation-button-group {
          display: flex;
          gap: 10px;
          margin-left: auto;
        }
      }
    }

    // 内容区域
    .card-content-area,
    .empty-state {
      transition: all 0.3s ease;
    }

    // 移动端
    @media (width <= 768px) {
      padding: 16px;

      .search-card {
        top: 16px;
        margin-bottom: 16px;

        :deep(.el-card__header) {
          padding: 12px 16px;
        }

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

    // 放大效果的过渡动画
    .zoom-fade-enter-active,
    .zoom-fade-leave-active {
      transition: all 0.2s ease;
    }

    .zoom-fade-enter-from {
      opacity: 0;
      transform: scale(0.8) translateY(-10px);
    }

    .zoom-fade-leave-to {
      opacity: 0;
      transform: scale(0.8) translateY(-10px);
    }

    .zoom-fade-enter-to,
    .zoom-fade-leave-from {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    // 卡片内容区域
    .card-content-area {
      &.slide-in {
        animation: slideInUp 0.6s ease-out;
      }
    }

    // 主内容布局
    .main-content-layout {
      display: flex;
      flex-direction: column;
      gap: 24px;

      // 行布局
      .row {
        display: flex;
        gap: 24px;

        &.full-width {
          .info-card {
            margin-bottom: 0;
          }
        }

        &.two-columns {
          .col {
            display: flex;
            flex: 1;
            flex-direction: column;

            .info-card {
              height: 100%;
              margin-bottom: 0;
            }
          }
        }
      }

      // 响应式调整
      @media (width <= 1200px) {
        .row.two-columns {
          flex-direction: column;
          gap: 16px;

          .col {
            .info-card {
              height: auto;
            }
          }
        }

        // 钱包和套餐两栏在小屏幕也改为垂直布局
        .wallet-package-row {
          flex-direction: column;

          .wallet-col,
          .package-col {
            flex: 1;
            min-width: 100%;
          }
        }
      }

      @media (width <= 768px) {
        gap: 16px;

        .row {
          gap: 16px;
        }
      }
    }

    // 信息卡片通用样式
    .info-card {
      width: 100%;

      :deep(.el-card__header) {
        padding: 20px 24px 16px;

        .card-header {
          display: flex;
          gap: 8px;
          align-items: center;
          justify-content: space-between;
          font-size: 16px;
          font-weight: 600;
          color: var(--el-text-color-primary, #1f2937);

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

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

            .polling-switch-wrapper {
              display: flex;
              gap: 10px;
              align-items: center;

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

              :deep(.el-switch) {
                height: 26px;

                .el-switch__core {
                  height: 26px;
                  min-width: 50px;

                  .el-switch__inner {
                    font-size: 13px;
                  }
                }

                .el-switch__action {
                  width: 20px;
                  height: 20px;
                }
              }
            }
          }

          .header-title {
            color: var(--el-text-color-primary);
          }

          .package-series-value {
            font-weight: 500;
            color: var(--el-color-primary);
          }

          i {
            font-size: 18px;
            color: #667eea;
          }
        }
      }

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

    // 当前套餐卡片
    .current-package-card {
      .package-actions {
        margin-top: 16px;
        text-align: right;
      }

      .traffic-progress-wrapper {
        padding: 20px;
        margin-top: 24px;
        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-regular);
          }

          .progress-percentage {
            font-size: 24px;
            font-weight: 700;
            color: var(--el-text-color-primary);
          }
        }

        .flow-stats {
          display: flex;
          gap: 12px;
          justify-content: space-between;
          margin-bottom: 12px;

          .stat-item {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 4px;
            padding: 12px;
            text-align: center;
            background: var(--el-bg-color, #fff);
            border-radius: 6px;

            .stat-label {
              font-size: 12px;
              color: var(--el-text-color-secondary);
            }

            .stat-value {
              font-size: 15px;
              font-weight: 600;
              color: var(--el-text-color-primary);

              &.used {
                color: var(--el-color-warning);
              }
            }
          }
        }

        :deep(.el-progress) {
          margin: 0;
        }
      }
    }

    // 流量信息卡片
    .traffic-info {
      // 流量概览
      .traffic-overview {
        display: flex;
        flex-direction: column;
        gap: 20px;

        // 流量进度条区域
        .traffic-progress-section {
          display: flex;
          flex-direction: column;

          .progress-bar-wrapper {
            display: flex;
            flex-direction: column;
            gap: 12px;

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

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

              .progress-percentage {
                font-size: 24px;
                font-weight: 700;
                color: var(--el-text-color-primary);
              }
            }

            :deep(.el-progress) {
              margin: 4px 0;
            }

            .progress-stats {
              display: flex;
              gap: 12px;
              justify-content: space-between;
              margin-top: 8px;

              .stat-item {
                display: flex;
                flex: 1;
                flex-direction: column;
                gap: 4px;
                padding: 12px;
                text-align: center;
                background: var(--el-fill-color-light);
                border-radius: 6px;

                .stat-label {
                  font-size: 12px;
                  color: var(--el-text-color-secondary);
                }

                .stat-value {
                  font-size: 15px;
                  font-weight: 600;
                  color: var(--el-text-color-primary);

                  &.used {
                    color: var(--el-color-warning);
                  }

                  &.remaining {
                    color: var(--el-color-success);
                  }
                }
              }
            }
          }
        }

        // 额外流量信息
        .extra-traffic-info {
          display: flex;
          gap: 16px;

          .info-item {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 4px;
            padding: 12px;
            text-align: center;
            background: var(--el-fill-color-light);
            border-radius: 8px;

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

            .value {
              font-size: 16px;
              font-weight: 600;
              color: var(--el-text-color-primary);
            }
          }
        }
      }
    }

    // 钱包概况和套餐列表两栏布局
    .wallet-package-row {
      align-items: stretch;

      .wallet-col {
        flex: 0 0 380px;
        min-width: 320px;
        max-width: 400px;
      }

      .package-col {
        flex: 1;
        min-width: 0;
      }

      .info-card {
        display: flex;
        flex-direction: column;
        height: 100%;

        :deep(.el-card__body) {
          display: flex;
          flex: 1;
          flex-direction: column;
          overflow: hidden;
        }
      }
    }

    // 套餐信息卡片
    .package-info {
      .package-table-wrapper {
        flex: 1;
        overflow: auto;

        .package-table {
          :deep(.el-table__header) {
            th {
              font-weight: 600;
              color: var(--el-text-color-primary, #374151);
            }
          }
        }
      }
    }

    // 钱包概况卡片
    .wallet-overview-card {
      .wallet-balance-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .balance-card {
          display: flex;
          gap: 10px;
          align-items: center;
          padding: 10px 14px;
          background: var(--el-fill-color-light);
          border: 1px solid var(--el-border-color-lighter);
          border-radius: 4px;
          transition: all 0.3s ease;

          &:hover {
            border-color: var(--el-color-primary);
            box-shadow: 0 2px 6px rgb(0 0 0 / 6%);
            transform: translateX(2px);
          }

          .balance-icon {
            flex-shrink: 0;
            font-size: 20px;
            line-height: 1;
          }

          .balance-info {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 2px;

            .balance-label {
              font-size: 11px;
              font-weight: 500;
              color: var(--el-text-color-secondary);
            }

            .balance-value {
              font-size: 16px;
              font-weight: 600;
              line-height: 1.2;
              color: var(--el-text-color-primary);
            }
          }

          &.total {
            .balance-value {
              color: var(--el-color-primary);
            }
          }

          &.available {
            .balance-value {
              color: var(--el-color-success);
            }
          }

          &.frozen {
            .balance-value {
              color: var(--el-color-warning);
            }
          }
        }
      }
    }

    // 钱包流水卡片
    .wallet-info {
      .wallet-header {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
        justify-content: space-between;

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

        .filter-section {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          align-items: center;
        }
      }

      .wallet-table-wrapper {
        .wallet-table {
          :deep(.el-table__header) {
            th {
              font-weight: 600;
              color: var(--el-text-color-primary, #374151);
            }
          }

          .reference-no-link {
            color: var(--el-color-primary);
            text-decoration: underline;
            text-decoration-style: dashed;
            text-underline-offset: 2px;
            cursor: pointer;

            &:hover {
              color: var(--el-color-primary-light-3);
              text-decoration-style: solid;
            }
          }
        }

        .pagination-wrapper {
          display: flex;
          justify-content: flex-end;
          margin-top: 20px;
        }
      }
    }

    // 加载和空状态
    .loading-state,
    .empty-state {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 24px auto;
      background: var(--el-bg-color, #fff);
      border-radius: 16px;
    }

    // 响应式设计
    @media (width <= 768px) {
      padding: 16px;

      .main-content-layout {
        gap: 16px;

        .row {
          gap: 16px;

          &.two-columns {
            flex-direction: column;
          }
        }
      }

      .info-card {
        :deep(.el-card__body) {
          padding: 16px;
        }

        :deep(.el-card__header) {
          padding: 16px 16px 12px;
        }
      }

      .traffic-info .traffic-overview {
        .progress-stats {
          flex-direction: column;
          gap: 8px;
        }

        .extra-traffic-info {
          flex-direction: column;
          gap: 12px;
        }
      }

      //.operation-card .operations-grid .operation-group .operation-buttons {
      //  grid-template-columns: 1fr;
      //}
    }

    @media (width <= 480px) {
      .traffic-info .traffic-overview {
        .progress-percentage {
          font-size: 20px;
        }

        .progress-stats .stat-item {
          padding: 10px;

          .stat-value {
            font-size: 14px;
          }
        }
      }
    }

    // 动画效果
    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    // 加载动画
    .loading-state {
      :deep(.el-skeleton) {
        width: 100%;
      }
    }

    // 深色模式特定样式
    html.dark & {
      background: var(--el-bg-color-page);

      .traffic-details .info-item {
        background: var(--el-fill-color);
      }
    }
  }

  // 往期订单样式
  .generation-section {
    padding: 16px;
    background: var(--el-fill-color-lighter);
    border-radius: 8px;

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }
</style>
