<template>
  <ElCard shadow="never" class="info-card basic-info">
    <template #header>
      <div class="card-header">
        <div class="card-header-left">
          <span>{{ cardInfo?.asset_type === 'card' ? '卡信息' : '设备信息' }}</span>
          <ElTag :type="cardInfo?.asset_type === 'card' ? 'success' : 'primary'" size="small">
            {{ cardInfo?.asset_type === 'card' ? 'IoT卡' : '设备' }}
          </ElTag>
        </div>
        <div class="card-header-right">
          <ElTooltip content="开启后系统将自动轮询更新资产状态" placement="top">
            <div v-if="canShowPolling" class="polling-switch-wrapper">
              <span class="polling-label">自动轮询</span>
              <ElSwitch
                :model-value="pollingEnabled"
                @update:model-value="handlePollingChange"
                active-text="开"
                inactive-text="关"
                inline-prompt
                size="default"
              />
            </div>
          </ElTooltip>
        </div>
      </div>
    </template>
    <ElDescriptions :column="descriptionsColumn" border>
      <!-- 卡专属字段 -->
      <template v-if="cardInfo?.asset_type === 'card'">
        <ElDescriptionsItem label="ICCID">{{ cardInfo?.iccid || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="IMEI">{{
          cardInfo?.gateway_card_imei || '-'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="运营商账户">{{ carrierAccountDisplay }}</ElDescriptionsItem>
        <ElDescriptionsItem label="实名状态">
          <ElTag :type="getRealNameStatusType(cardInfo?.real_name_status)" size="small">
            {{ getRealNameStatusName(cardInfo?.real_name_status) }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="canShowSensitiveFields" label="实名认证策略">
          {{ getRealnamePolicyName(cardInfo?.realname_policy) }}
        </ElDescriptionsItem>

        <ElDescriptionsItem label="店铺">{{ cardInfo?.shop_name || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="套餐系列">{{ cardInfo?.series_name || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="虚拟号">{{ cardInfo?.virtual_no || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="网络状态">
          <ElTag :type="cardInfo?.network_status === 1 ? 'success' : 'danger'" size="small">
            {{ cardInfo?.network_status === 1 ? '正常' : '停机' }}
          </ElTag>
        </ElDescriptionsItem>

        <ElDescriptionsItem v-if="canShowCardMonthUsage" label="本月已用流量">{{
          formatDataSize(cardInfo?.current_month_usage_mb || 0)
        }}</ElDescriptionsItem>
        <ElDescriptionsItem v-if="canShowCardMonthUsage" label="运营商周期月内已用流量">{{
          formatDataSize(cardInfo?.last_gateway_reading_mb || 0)
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="实名时间">{{
          cardInfo?.real_name_at ? formatDateTime(cardInfo.real_name_at) : '-'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="实名同步时间">{{
          formatDateTime(cardInfo?.last_real_name_check_at) || '-'
        }}</ElDescriptionsItem>

        <ElDescriptionsItem label="MSISDN">{{ cardInfo?.msisdn || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="资产状态">
          <ElTag :type="getAssetStatusType(cardInfo?.status)" size="small">
            {{ getAssetStatusName(cardInfo?.status) }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="卡状态同步时间">{{
          formatDateTime(cardInfo?.last_card_status_check_at) || '-'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="流量同步时间">{{
          formatDateTime(cardInfo?.last_data_check_at) || '-'
        }}</ElDescriptionsItem>

        <ElDescriptionsItem label="运营商状态" :span="1">
          <span class="gateway-extend-text">{{ cardInfo?.gateway_extend || '-' }}</span>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="所有套餐已用量">
          {{ formatUsageSummaryMb(cardInfo?.total_virtual_used_mb) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="所有套餐剩余量">
          {{ formatUsageSummaryMb(cardInfo?.total_virtual_remaining_mb) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="预计套餐到期时间">
          <span
            :class="{ 'expiry-estimate--expiring': cardInfo?.is_expiring }"
            :title="getExpiryEstimateTooltip(cardInfo)"
          >
            {{ getExpiryEstimateText(cardInfo) }}
          </span>
        </ElDescriptionsItem>

        <template v-if="cardInfo?.bound_device_id">
          <ElDescriptionsItem label="绑定设备号">
            <ElButton
              type="primary"
              link
              @click="emit('navigateToDevice', cardInfo!.bound_device_no!)"
            >
              {{ cardInfo?.bound_device_no || '-' }}
            </ElButton>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="绑定设备名称">
            {{ cardInfo?.bound_device_name || '-' }}
          </ElDescriptionsItem>
        </template>
      </template>

      <!-- 设备专属字段 -->
      <template v-if="cardInfo?.asset_type === 'device'">
        <ElDescriptionsItem label="IMEI">{{ cardInfo?.imei || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="设备名称">{{ cardInfo?.device_name || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="店铺">{{ cardInfo?.shop_name || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="设备状态">
          <ElTag :type="getAssetStatusType(cardInfo?.status)" size="small">
            {{ getAssetStatusName(cardInfo?.status) }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="实名状态">
          <ElTag
            v-if="selectedDeviceStatusCard"
            :type="getRealNameStatusType(selectedDeviceStatusCard.real_name_status)"
            size="small"
          >
            {{ getRealNameStatusName(selectedDeviceStatusCard.real_name_status) }}
          </ElTag>
          <span v-else>-</span>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="激活状态">
          {{ cardInfo?.activation_status_name || '-' }}
        </ElDescriptionsItem>

        <ElDescriptionsItem label="设备型号">{{
          cardInfo?.device_model || '-'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="实名时间">{{
          selectedDeviceStatusCard?.real_name_at
            ? formatDateTime(selectedDeviceStatusCard.real_name_at)
            : '-'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="在线状态">
          <ElTag
            v-if="cardInfo?.online_status !== undefined"
            :type="getOnlineStatusType(cardInfo?.online_status)"
            size="small"
          >
            {{ getOnlineStatusName(cardInfo?.online_status) }}
          </ElTag>
          <span v-else>-</span>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="虚拟号">{{ cardInfo?.virtual_no || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="切卡模式">{{
          getSwitchModeName(cardInfo?.switch_mode)
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="已绑定卡数">{{
          cardInfo?.bound_card_count || 0
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="最大卡槽数">{{
          cardInfo?.max_sim_slots || '-'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem v-if="canShowSensitiveFields" label="实名认证策略">
          {{ getRealnamePolicyName(cardInfo?.realname_policy) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="设备类型">{{ cardInfo?.device_type || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem v-if="canShowSensitiveFields" label="制造商">{{
          cardInfo?.manufacturer || '-'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="最后在线时间">{{
          formatDateTime(cardInfo?.last_online_time) || '-'
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="SN">{{ cardInfo?.sn || '-' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="所有套餐已用量">
          {{ formatUsageSummaryMb(cardInfo?.total_virtual_used_mb) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="所有套餐剩余量">
          {{ formatUsageSummaryMb(cardInfo?.total_virtual_remaining_mb) }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="预计套餐到期时间">
          <span
            :class="{ 'expiry-estimate--expiring': cardInfo?.is_expiring }"
            :title="getExpiryEstimateTooltip(cardInfo)"
          >
            {{ getExpiryEstimateText(cardInfo) }}
          </span>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="最后同步时间">{{
          formatDateTime(deviceRealtime?.last_sync_time) || '-'
        }}</ElDescriptionsItem>
      </template>
    </ElDescriptions>

    <ElDivider content-position="left">同步状态</ElDivider>
    <ElDescriptions :column="descriptionsColumn" border>
      <ElDescriptionsItem label="轮询状态">
        <ElTag
          v-if="cardInfo?.polling"
          :type="cardInfo.polling.enabled ? 'success' : 'info'"
          size="small"
        >
          {{ cardInfo.polling.enabled ? '已启用' : '未启用' }}
        </ElTag>
        <span v-else>-</span>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="最后活跃时间">
        {{ formatDateTime(cardInfo?.polling?.last_activity_at) || '-' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="同步轨迹">
        <ElButton
          v-permission="'asset_info:view_sync_trail'"
          type="primary"
          link
          @click="emit('viewSyncTrail')"
        >
          查看同步轨迹
        </ElButton>
      </ElDescriptionsItem>
    </ElDescriptions>

    <template v-if="previousExchangeAsset || nextExchangeAsset">
      <ElDivider content-position="left">换货链路</ElDivider>
      <ElDescriptions :column="descriptionsColumn" border>
        <ElDescriptionsItem v-if="previousExchangeAsset" label="前代资产">
          <div class="exchange-asset">
            <ElTag type="success" size="small">换货新资产</ElTag>
            <ElButton
              v-if="previousExchangeAsset.can_view"
              type="primary"
              link
              @click="handleNavigateToExchangeAsset(previousExchangeAsset)"
            >
              {{ previousExchangeAsset.identifier }}
            </ElButton>
            <span v-else>{{ previousExchangeAsset.identifier }}</span>
            <span v-if="previousExchangeAsset.exchange_no" class="exchange-no">
              换货单：{{ previousExchangeAsset.exchange_no }}
            </span>
          </div>
        </ElDescriptionsItem>
        <ElDescriptionsItem v-if="nextExchangeAsset" label="后代资产">
          <div class="exchange-asset">
            <ElTag type="warning" size="small">已换出旧资产</ElTag>
            <ElButton
              v-if="nextExchangeAsset.can_view"
              type="primary"
              link
              @click="handleNavigateToExchangeAsset(nextExchangeAsset)"
            >
              {{ nextExchangeAsset.identifier }}
            </ElButton>
            <span v-else>{{ nextExchangeAsset.identifier }}</span>
            <span v-if="nextExchangeAsset.exchange_no" class="exchange-no">
              换货单：{{ nextExchangeAsset.exchange_no }}
            </span>
          </div>
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>

    <!-- 设备绑定卡列表 -->
    <template v-if="cardInfo?.asset_type === 'device'">
      <ElDivider content-position="left">绑定卡列表</ElDivider>
      <ElTable
        v-if="cardInfo.cards && cardInfo.cards.length > 0"
        :data="sortedDeviceCards"
        border
        style="width: 100%; margin-top: 16px"
      >
        <ElTableColumn label="ICCID" width="220" show-overflow-tooltip>
          <template #default="scope">
            <div style="display: flex; align-items: center; justify-content: space-between">
              <ElButton type="primary" link @click="handleNavigateToCardInfo(scope.row.iccid)">
                {{ scope.row.iccid }}
              </ElButton>
              <el-icon
                class="copy-icon"
                @click="handleCopyICCID(scope.row.iccid)"
                style="color: var(--el-color-primary); cursor: pointer"
              >
                <CopyDocument />
              </el-icon>
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="msisdn" label="MSISDN" min-width="150" showOverflowTooltip />

        <ElTableColumn prop="carrier_name" label="运营商" min-width="120" showOverflowTooltip />
        <ElTableColumn prop="slot_position" label="卡槽位置" width="130">
          <template #default="scope">
            <div style="display: flex; gap: 10px">
              <span>SIM-{{ scope.row.slot_position }}</span>
              <ElTag v-if="scope.row.is_current" type="primary" size="small">当前</ElTag>
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="网络状态" width="100">
          <template #default="scope">
            <ElTag :type="scope.row.network_status === 1 ? 'success' : 'danger'" size="small">
              {{ scope.row.network_status === 1 ? '正常' : '停机' }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="实名状态" width="100">
          <template #default="scope">
            <ElTag :type="getRealNameStatusType(scope.row.real_name_status)" size="small">
              {{ getRealNameStatusName(scope.row.real_name_status) }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="实名认证策略" width="120" showOverflowTooltip>
          <template #default="scope">
            {{ getRealnamePolicyName(scope.row.realname_policy) }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="实名时间" width="170">
          <template #default="scope">
            {{ scope.row.real_name_at ? formatDateTime(scope.row.real_name_at) : '-' }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="运营商停机原因" min-width="220" showOverflowTooltip>
          <template #default="scope">
            {{ scope.row.gateway_extend || '-' }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" width="180" fixed="right">
          <template #default="scope">
            <!-- 根据网络状态显示启用或停用按钮 -->
            <ElButton
              v-if="scope.row.network_status === 0"
              type="success"
              size="small"
              link
              :disabled="isBindingStartDisabled(scope.row)"
              @click="handleEnableBindingCard(scope.row)"
              v-permission="'iot_info:start'"
            >
              {{ getBindingStartButtonText(scope.row) }}
            </ElButton>
            <ElButton
              v-if="scope.row.network_status === 1"
              type="warning"
              size="small"
              link
              :disabled="isBindingStopDisabled(scope.row)"
              @click="handleDisableBindingCard(scope.row)"
              v-permission="'iot_info:stop'"
            >
              {{ getBindingStopButtonText(scope.row) }}
            </ElButton>
            <ElButton
              type="primary"
              size="small"
              link
              @click="handleUpdateBindingCardRealnameStatus(scope.row)"
              v-permission="'bound_card:update_realname_status'"
            >
              更新实名状态
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElEmpty v-else description="暂无绑定卡" :image-size="80" style="margin-top: 16px" />

      <!-- 设备实时信息 -->
      <ElDivider content-position="left">设备实时信息</ElDivider>
      <div v-if="hasDeviceRealtimeSection" v-loading="realtimeLoading" style="margin-top: 16px">
        <ElDescriptions :column="descriptionsColumn" border>
          <!-- 基本状态 -->
          <ElDescriptionsItem label="在线状态">
            <ElTag :type="getOnlineStatusType(deviceRealtime?.online_status)" size="small">
              {{ getOnlineStatusName(deviceRealtime?.online_status) }}
            </ElTag>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="电量">
            {{
              deviceRealtime?.battery_level !== null && deviceRealtime?.battery_level !== undefined
                ? `${deviceRealtime?.battery_level}%`
                : '-'
            }}
          </ElDescriptionsItem>

          <!-- 时间信息 -->
          <ElDescriptionsItem label="本次开机时长">
            {{ formatDuration(deviceRealtime?.run_time) }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="本次联网时长">
            {{ formatDuration(deviceRealtime?.connect_time) }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="最后在线时间">
            {{ formatDateTime(deviceRealtime?.last_online_time) || '-' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="实名同步时间">
            {{ formatDateTime(cardInfo?.last_real_name_check_at) || '-' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="卡状态同步时间">
            {{ formatDateTime(cardInfo?.last_card_status_check_at) || '-' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="流量同步时间">
            {{ formatDateTime(cardInfo?.last_data_check_at) || '-' }}
          </ElDescriptionsItem>

          <!-- 信号信息 -->
          <ElDescriptionsItem label="信号综合判断">
            <ElTag :type="getSignalQualityType(deviceRealtime?.signal_quality)" size="small">
              {{ getSignalQualityText(deviceRealtime?.signal_quality) }}
            </ElTag>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="信号较弱原因" :span="3">
            {{ getSignalBadReasonText(deviceRealtime?.signal_bad_reason) }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="已连接设备数">
            {{ deviceRealtime?.client_number ?? '-' }} / {{ deviceRealtime?.max_clients ?? '-' }}
          </ElDescriptionsItem>

          <!-- WiFi 信息 -->
          <ElDescriptionsItem label="WiFi 状态">
            <ElTag :type="deviceRealtime?.wifi_enabled ? 'success' : 'info'" size="small">
              {{
                deviceRealtime?.wifi_enabled === undefined
                  ? '-'
                  : deviceRealtime.wifi_enabled
                    ? '已开启'
                    : '已关闭'
              }}
            </ElTag>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="WiFi 名称">
            {{ deviceRealtime?.ssid || '-' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="WiFi 密码">
            {{ deviceRealtime?.wifi_password || '-' }}
          </ElDescriptionsItem>

          <!-- 网络信息 -->
          <ElDescriptionsItem label="WAN IP">
            {{ deviceRealtime?.wan_ip || '-' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="LAN IP">
            {{ deviceRealtime?.lan_ip || '-' }}
          </ElDescriptionsItem>

          <ElDescriptionsItem label="MAC 地址">
            {{ deviceRealtime?.mac_address || '-' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="IMSI">
            {{ deviceRealtime?.imsi || '-' }}
          </ElDescriptionsItem>

          <!-- 设备配置 -->
          <ElDescriptionsItem label="限速">
            {{
              deviceRealtime?.limit_speed === undefined
                ? '-'
                : deviceRealtime.limit_speed
                  ? `${deviceRealtime.limit_speed} KB/s`
                  : '不限速'
            }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="固件版本">
            {{ deviceRealtime?.software_version || '-' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="切卡模式">
            {{
              deviceRealtime?.switch_mode === '0'
                ? '自动'
                : deviceRealtime?.switch_mode === '1'
                  ? '手动'
                  : '-'
            }}
          </ElDescriptionsItem>

          <ElDescriptionsItem label="上报周期">
            {{ deviceRealtime?.sync_interval ? `${deviceRealtime.sync_interval} 秒` : '-' }}
          </ElDescriptionsItem>
          <ElDescriptionsItem label="信息更新时间">
            {{ formatDateTime(deviceRealtime?.last_update_time) || '-' }}
          </ElDescriptionsItem>
        </ElDescriptions>
      </div>
      <ElEmpty v-else description="暂无实时信息" :image-size="80" style="margin-top: 16px" />
    </template>

    <!-- IoT卡操作按钮 -->
    <ElAlert
      v-if="startErrorMessage"
      :title="startErrorMessage"
      type="error"
      :closable="false"
      show-icon
      style="margin-top: 16px"
    />
    <div
      v-if="cardInfo?.asset_type === 'card'"
      class="card-operations"
      style="margin-top: 16px; text-align: right"
    >
      <ElButton
        v-if="cardInfo?.network_status === 0"
        v-permission="'iot_info:start'"
        type="success"
        :disabled="startDisabled"
        @click="handleEnableCard"
      >
        {{ startRemainingText ? `启用此卡(${startRemainingText})` : '启用此卡' }}
      </ElButton>
      <ElButton
        v-if="cardInfo?.network_status === 1"
        v-permission="'iot_info:stop'"
        type="warning"
        :disabled="stopDisabled"
        @click="handleDisableCard"
      >
        {{ stopRemainingText ? `停用此卡(${stopRemainingText})` : '停用此卡' }}
      </ElButton>
      <!--<ElButton type="danger" v-permission="'iot_info:handler_stop'" @click="handleManualDeactivate"> 手动停用 </ElButton>-->
      <!-- 手动停用暂时不开放 -->
      <ElButton
        v-if="canShowRealnamePolicy"
        v-permission="'asset:card_realname_policy'"
        type="primary"
        @click="handleShowRealnamePolicy"
      >
        实名认证策略
      </ElButton>
      <ElButton
        v-permission="'iot_info:update_realname_status'"
        type="primary"
        @click="handleShowUpdateRealnameStatus"
      >
        更新实名状态
      </ElButton>
    </div>

    <!-- 设备操作按钮 -->
    <div v-else class="device-operations" style="margin-top: 16px; text-align: right">
      <ElButton v-permission="'device_info:switch_mode'" type="info" @click="handleShowSwitchMode"
        >设置切卡模式</ElButton
      >
      <ElButton v-permission="'device_info:reboot'" type="primary" @click="handleRebootDevice">
        重启设备
      </ElButton>
      <ElButton v-permission="'device_info:reset'" type="warning" @click="handleResetDevice">
        恢复出厂
      </ElButton>
      <ElButton
        v-permission="'device_info:switch_card'"
        type="success"
        @click="handleShowSwitchCard"
      >
        切换SIM卡
      </ElButton>
      <ElButton v-permission="'device_info:set_wifi'" type="primary" @click="handleShowSetWiFi">
        设置WiFi
      </ElButton>
      <ElButton
        v-if="canShowRealnamePolicy"
        v-permission="'asset_info:device_realname_policy'"
        type="primary"
        @click="handleShowRealnamePolicy"
      >
        实名认证策略
      </ElButton>
    </div>
  </ElCard>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useWindowSize } from '@vueuse/core'
  import {
    ElCard,
    ElDescriptions,
    ElDescriptionsItem,
    ElTag,
    ElTooltip,
    ElSwitch,
    ElDivider,
    ElTable,
    ElTableColumn,
    ElButton,
    ElAlert,
    ElEmpty,
    ElMessageBox,
    ElMessage
  } from 'element-plus'
  import { CopyDocument } from '@element-plus/icons-vue'
  import type {
    AssetExchangeTrace,
    AssetExchangeTraceAsset,
    AssetPollingStatus,
    ExpiryEstimateStatus
  } from '@/types/api'
  import { useAssetFormatters } from '../composables/useAssetFormatters'
  import { useAuth } from '@/composables/useAuth'
  import { useUserStore } from '@/store/modules/user'
  import { formatDateTime } from '@/utils/business/format'
  import { getExpiryEstimateText, getExpiryEstimateTooltip } from '@/utils/business/expiryEstimate'

  // Props
  interface BindingCard {
    id: number
    iccid: string
    msisdn?: string
    carrier_name?: string
    slot_position?: number
    is_current: boolean
    network_status?: number
    real_name_status?: number
    real_name_at?: string | null
    realname_policy?: string
    gateway_extend?: string
    last_data_check_at?: string | null
    last_real_name_check_at?: string | null
    last_card_status_check_at?: string | null
  }

  interface AssetInfo {
    asset_type: 'card' | 'device'
    iccid?: string
    imei?: string
    msisdn?: string
    carrier_type?: string
    carrier_name?: string
    real_name_status?: number
    activation_status_name?: string
    realname_policy?: string
    network_status?: number
    current_month_usage_mb?: number
    last_gateway_reading_mb?: number
    device_type?: string
    device_name?: string
    device_model?: string
    virtual_no?: string
    sn?: string
    cards?: BindingCard[]
    status?: number
    shop_name?: string
    series_name?: string
    real_name_at?: string | null
    supplier?: string
    gateway_card_imei?: string
    gateway_extend?: string
    total_virtual_used_mb?: number | null
    total_virtual_remaining_mb?: number | null
    estimated_final_expires_at?: string | null
    days_until_final_expiry?: number | null
    expiry_estimate_status?: ExpiryEstimateStatus
    expiry_estimate_status_name?: string | null
    is_expiring?: boolean
    last_sync_time?: string | null
    last_data_check_at?: string | null
    last_real_name_check_at?: string | null
    last_card_status_check_at?: string | null
    polling?: AssetPollingStatus | null
    exchange_trace?: AssetExchangeTrace | null
    bound_device_id?: number
    bound_device_no?: string
    bound_device_name?: string
    bound_card_count?: number
    max_sim_slots?: number
    activated_at?: string
    online_status?: number
    software_version?: string
    switch_mode?: string
    last_online_time?: string
    manufacturer?: string
  }

  interface DeviceRealtimeInfo {
    online_status?: number
    status?: number
    battery_level?: number | null
    run_time?: string
    connect_time?: string
    last_online_time?: string | null
    client_number?: number
    max_clients?: number
    current_iccid?: string
    signal_quality?: string
    signal_bad_reason?: string
    wifi_enabled?: boolean | number
    ssid?: string
    wifi_password?: string
    ip_address?: string
    wan_ip?: string
    lan_ip?: string
    mac_address?: string
    imei?: string
    imsi?: string
    limit_speed?: number
    software_version?: string
    switch_mode?: string
    sync_interval?: number
    device_id?: string
    last_sync_time?: string | null
    last_update_time?: string | null
  }

  interface Props {
    cardInfo: AssetInfo
    deviceRealtime: DeviceRealtimeInfo | null
    pollingEnabled: boolean
    realtimeLoading?: boolean
    startDisabled?: boolean
    startErrorMessage?: string
    stopDisabled?: boolean
    startRemainingText?: string
    stopRemainingText?: string
    getStartRemainingText?: (identifier: string) => string
    getStopRemainingText?: (identifier: string) => string
    isStartDisabled?: (identifier: string) => boolean
    isStopDisabled?: (identifier: string) => boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    realtimeLoading: false,
    startDisabled: false,
    startErrorMessage: '',
    stopDisabled: false,
    startRemainingText: '',
    stopRemainingText: ''
  })

  const { hasAuth } = useAuth()
  const userStore = useUserStore()
  const { width } = useWindowSize()

  const CARD_MONTH_USAGE_PERMISSION = 'asset_info:view_card_month_usage'

  const realnamePolicyPermission = computed(() => {
    return props.cardInfo?.asset_type === 'card'
      ? 'asset:card_realname_policy'
      : 'asset:device_realname_policy'
  })

  const canShowRealnamePolicy = computed(() => hasAuth(realnamePolicyPermission.value))

  const pollingPermission = computed(() => {
    return props.cardInfo?.asset_type === 'card'
      ? 'iot_info:auto_polling'
      : 'device_info:auto_polling'
  })

  const canShowPolling = computed(() => hasAuth(pollingPermission.value))

  const canShowCardMonthUsage = computed(() => {
    const userType = Number(userStore.info.user_type ?? 0)
    return ![3, 4].includes(userType) && hasAuth(CARD_MONTH_USAGE_PERMISSION)
  })

  const isAgentOrEnterpriseAccount = computed(() => {
    const userType = Number(userStore.info.user_type ?? 0)
    return [3, 4].includes(userType)
  })

  const canShowSensitiveFields = computed(() => {
    return !isAgentOrEnterpriseAccount.value
  })

  const carrierAccountDisplay = computed(() => {
    if (isAgentOrEnterpriseAccount.value) {
      return getCarrierTypeName(props.cardInfo?.carrier_type)
    }
    return props.cardInfo?.carrier_name || '-'
  })

  const descriptionsColumn = computed(() => {
    if (width.value <= 640) return 1
    if (width.value <= 1024) return 2
    return 4
  })

  // Emits
  interface Emits {
    (e: 'update:pollingEnabled', value: boolean): void
    (e: 'enableCard'): void
    (e: 'disableCard'): void
    (e: 'manualDeactivate'): void
    (e: 'rebootDevice'): void
    (e: 'resetDevice'): void
    (e: 'showSpeedLimit'): void
    (e: 'showSwitchCard'): void
    (e: 'showSwitchMode'): void
    (e: 'show-set-wifi'): void
    (e: 'showRealnamePolicy'): void
    (e: 'showUpdateRealnameStatus'): void
    (e: 'enableBindingCard', payload: { card: BindingCard }): void
    (e: 'disableBindingCard', payload: { card: BindingCard }): void
    (e: 'updateBindingCardRealnameStatus', payload: { card: BindingCard }): void
    (e: 'navigateToCard', iccid: string): void
    (e: 'navigateToDevice', deviceNo: string): void
    (e: 'navigateToAsset', identifier: string): void
    (e: 'viewSyncTrail'): void
  }

  const emit = defineEmits<Emits>()

  // 使用格式化工具
  const {
    formatDataSize,
    formatDuration,
    getRealNameStatusName,
    getRealNameStatusType,
    getRealnamePolicyName,
    getCarrierTypeName,
    getAssetStatusName,
    getAssetStatusType,
    getOnlineStatusName,
    getOnlineStatusType,
    getSignalQualityText,
    getSignalQualityType,
    getSignalBadReasonText,
    getSwitchModeName
  } = useAssetFormatters()

  // 排序后的设备卡列表（按卡槽位置排序，当前卡排在最前面）
  const sortedDeviceCards = computed(() => {
    if (!props.cardInfo?.cards || props.cardInfo.cards.length === 0) {
      return []
    }
    const cards = [...props.cardInfo.cards]
    return cards.sort((a, b) => {
      if (a.is_current && !b.is_current) return -1
      if (!a.is_current && b.is_current) return 1
      return (a.slot_position ?? 0) - (b.slot_position ?? 0)
    })
  })

  const previousExchangeAsset = computed(
    () => props.cardInfo.exchange_trace?.previous_asset ?? null
  )
  const nextExchangeAsset = computed(() => props.cardInfo.exchange_trace?.next_asset ?? null)

  // 设备详情里的实名状态和实名时间从选中的绑定卡取值：
  // 只有一张卡时直接取该卡，多张卡时仅取 is_current=true 的卡。
  const selectedDeviceStatusCard = computed(() => {
    if (!props.cardInfo?.cards || props.cardInfo.cards.length === 0) {
      return null
    }

    if (props.cardInfo.cards.length === 1) {
      return props.cardInfo.cards[0]
    }

    return props.cardInfo.cards.find((card: BindingCard) => card.is_current) || null
  })

  const hasDeviceRealtimeSection = computed(
    () =>
      Boolean(props.deviceRealtime) ||
      props.cardInfo?.last_data_check_at !== undefined ||
      props.cardInfo?.last_real_name_check_at !== undefined ||
      props.cardInfo?.last_card_status_check_at !== undefined
  )

  const formatUsageSummaryMb = (value?: number | null) => {
    if (value === undefined || value === null) return '-'
    return formatDataSize(value)
  }

  // 处理轮询开关变化
  const handlePollingChange = (value: string | number | boolean) => {
    emit('update:pollingEnabled', Boolean(value))
  }

  // 跳转到卡片信息
  const handleNavigateToCardInfo = (iccid: string) => {
    // 触发搜索事件，让父组件处理
    emit('navigateToCard', iccid)
  }

  const handleNavigateToExchangeAsset = (asset: AssetExchangeTraceAsset) => {
    if (!asset.can_view) return
    emit('navigateToAsset', asset.identifier)
  }

  // 复制ICCID
  const handleCopyICCID = async (iccid: string) => {
    try {
      await navigator.clipboard.writeText(iccid)
      ElMessage.success('ICCID已复制')
    } catch {
      ElMessage.error('复制失败')
    }
  }

  // 卡操作
  const handleEnableCard = () => {
    if (props.startDisabled) return
    emit('enableCard')
  }

  const handleDisableCard = () => {
    if (props.stopDisabled) return
    emit('disableCard')
  }

  // 设备操作
  const handleRebootDevice = () => {
    emit('rebootDevice')
  }

  const handleResetDevice = () => {
    emit('resetDevice')
  }

  const handleShowSwitchCard = () => {
    emit('showSwitchCard')
  }

  const handleShowSwitchMode = () => {
    emit('showSwitchMode')
  }

  const handleShowSetWiFi = () => {
    emit('show-set-wifi')
  }

  const handleShowRealnamePolicy = () => {
    emit('showRealnamePolicy')
  }

  const handleShowUpdateRealnameStatus = () => {
    emit('showUpdateRealnameStatus')
  }

  // 绑定卡操作
  const getBindingStartRemainingText = (card: BindingCard) =>
    props.getStartRemainingText?.(card.iccid) || ''

  const getBindingStopRemainingText = (card: BindingCard) =>
    props.getStopRemainingText?.(card.iccid) || ''

  const isBindingStartDisabled = (card: BindingCard) => props.isStartDisabled?.(card.iccid) || false

  const isBindingStopDisabled = (card: BindingCard) => props.isStopDisabled?.(card.iccid) || false

  const getBindingStartButtonText = (card: BindingCard) => {
    const remainingText = getBindingStartRemainingText(card)
    return remainingText ? `启用此卡(${remainingText})` : '启用此卡'
  }

  const getBindingStopButtonText = (card: BindingCard) => {
    const remainingText = getBindingStopRemainingText(card)
    return remainingText ? `停用此卡(${remainingText})` : '停用此卡'
  }

  const handleEnableBindingCard = (card: BindingCard) => {
    if (isBindingStartDisabled(card)) return
    ElMessageBox.confirm(`确定要启用此卡（${card.iccid}）吗？`, '启用确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        emit('enableBindingCard', { card })
      })
      .catch(() => {})
  }

  const handleDisableBindingCard = (card: BindingCard) => {
    if (isBindingStopDisabled(card)) return
    ElMessageBox.confirm(`确定要停用此卡（${card.iccid}）吗？`, '停用确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        emit('disableBindingCard', { card })
      })
      .catch(() => {})
  }

  const handleUpdateBindingCardRealnameStatus = (card: BindingCard) => {
    emit('updateBindingCardRealnameStatus', { card })
  }
</script>

<style scoped lang="scss">
  .info-card {
    &.basic-info {
      .gateway-extend-text {
        word-break: break-all;
      }

      .expiry-estimate--expiring {
        font-weight: 500;
        color: var(--el-color-danger);
      }

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

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

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

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

      :deep(.el-descriptions__body) {
        overflow-x: auto;
      }

      :deep(.el-descriptions__cell) {
        word-break: break-word;
      }

      :deep(.el-table) {
        min-width: 760px;
      }

      .card-operations,
      .device-operations {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;

        .el-button {
          margin-left: 0;
        }
      }

      .exchange-asset {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;

        .exchange-no {
          color: var(--el-text-color-secondary);
        }
      }

      @media (width <= 768px) {
        .card-header {
          flex-direction: column;
          align-items: flex-start;

          .card-header-left,
          .card-header-right {
            width: 100%;
          }

          .card-header-right {
            display: flex;
            justify-content: flex-start;
          }
        }

        .card-operations,
        .device-operations {
          justify-content: stretch;

          .el-button {
            flex: 1 1 120px;
          }
        }
      }
    }
  }
</style>
