<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getAssetDetail, getAssetPackages, getCurrentPackage, getAssetHistory, stopAsset, startAsset } from '@/api/assets'
import type { AssetType, CardInfo, DeviceInfo, AssetPackage, HistoryRecord } from '@/api/assets'

// 资产类型
const assetType = ref<AssetType>('card')

// 资产标识符 (ICCID 或 VirtualNo)
const assetIdentifier = ref('')

// 资产详情数据
const assetDetail = ref<CardInfo | DeviceInfo | null>(null)

// 实时状态数据
const realtimeStatus = ref<any>(null)

// 套餐列表
const packageList = ref<AssetPackage[]>([])

// 历史记录列表
const historyList = ref<HistoryRecord[]>([])

// 当前套餐
const currentPackage = ref<AssetPackage | null>(null)

// 加载状态
const loading = ref(false)
const refreshing = ref(false)
const operating = ref(false)

// 当前Tab
const activeTab = ref<'info' | 'package' | 'history'>('info')

// Tab选项
const tabs = [
  { key: 'info', label: '基本信息', icon: 'i-mdi-information' },
  { key: 'package', label: '套餐信息', icon: 'i-mdi-package-variant' },
  { key: 'history', label: '操作历史', icon: 'i-mdi-history' },
]

// 状态文本
const statusText = computed(() => {
  if (!realtimeStatus.value)
    return '未知'
  return realtimeStatus.value.status === 'active' ? '正常' : '停机'
})

// 状态颜色
const statusColor = computed(() => {
  if (!realtimeStatus.value)
    return { bg: '#f5f5f5', text: '#999' }
  return realtimeStatus.value.status === 'active'
    ? { bg: '#e8f5e9', text: '#2e7d32' }
    : { bg: '#ffebee', text: '#c62828' }
})

// 页面加载
onMounted(() => {
  // 从路由参数获取 assetType 和 assetIdentifier
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1] as any
  assetType.value = currentPage.options.type as AssetType
  assetIdentifier.value = currentPage.options.id

  loadAssetDetail()
})

// 加载资产详情
async function loadAssetDetail() {
  loading.value = true

  try {
    // 调用资产详情接口
    const detailData = await getAssetDetail(assetType.value, assetId.value)

    // 根据类型提取详情
    if (assetType.value === 'card' && detailData.card) {
      assetDetail.value = detailData.card
      realtimeStatus.value = {
        status: detailData.card.status,
        data_usage: detailData.card.data_usage,
        data_total: detailData.card.data_total,
        last_update: new Date().toLocaleString('zh-CN'),
      }
    }
    else if (assetType.value === 'device' && detailData.device) {
      assetDetail.value = detailData.device
      realtimeStatus.value = {
        status: detailData.device.status,
        card_count: detailData.device.card_count,
        last_online_time: detailData.device.last_online_time,
        last_update: new Date().toLocaleString('zh-CN'),
      }
    }

    // 加载套餐列表
    await loadPackages()

    // 加载历史记录
    if (activeTab.value === 'history') {
      await loadHistory()
    }
  }
  catch (error: any) {
    console.error('加载资产详情失败:', error)
    // 如果是前端逻辑错误（非 API 错误），需要手动显示提示
    if (error instanceof Error && error.message && !error.statusCode) {
      uni.$u.toast(error.message)
    }
    // API 请求错误已由拦截器统一处理
  }
  finally {
    loading.value = false
  }
}

// 加载套餐列表
async function loadPackages() {
  try {
    // 1. 调用当前生效套餐接口
    try {
      const current = await getCurrentPackage(assetIdentifier.value)
      currentPackage.value = current
    } catch (error) {
      console.warn('获取当前套餐失败:', error)
      currentPackage.value = null
    }

    // 2. 调用套餐列表接口
    const packagesData = await getAssetPackages(assetIdentifier.value, {
      page: 1,
      page_size: 50
    })
    packageList.value = packagesData.items || []

    // 如果没有获取到当前套餐,从列表中查找生效中的套餐
    if (!currentPackage.value && packageList.value.length > 0) {
      currentPackage.value = packageList.value.find(pkg => pkg.status === 1) || null
    }
  }
  catch (error: any) {
    console.error('加载套餐列表失败:', error)
  }
}

// 加载历史记录
async function loadHistory() {
  try {
    const historyData = await getAssetHistory(assetIdentifier.value, {
      page: 1,
      pageSize: 20,
    })
    historyList.value = historyData.list
  }
  catch (error: any) {
    console.error('加载历史记录失败:', error)
  }
}

// 刷新状态
async function refreshStatus() {
  refreshing.value = true

  try {
    // 重新加载数据
    await loadAssetDetail()

    uni.showToast({
      title: '刷新成功',
      icon: 'success',
    })
  }
  catch (error: any) {
    // 如果是前端逻辑错误（非 API 错误），需要手动显示提示
    if (error instanceof Error && error.message && !error.statusCode) {
      uni.$u.toast(error.message)
    }
    // API 请求错误已由拦截器统一处理
  }
  finally {
    refreshing.value = false
  }
}

// 切换Tab时加载对应数据
async function handleTabChange(tab: 'info' | 'package' | 'history') {
  activeTab.value = tab

  if (tab === 'history' && historyList.value.length === 0) {
    await loadHistory()
  }
}

// 停机
async function handleStopAsset() {
  uni.showModal({
    title: '确认停机',
    content: '停机后将无法使用网络服务，确定要停机吗？',
    success: async (res) => {
      if (res.confirm) {
        operating.value = true
        try {
          // 调用统一停机接口
          await stopAsset(assetIdentifier.value)

          uni.showToast({
            title: '停机成功',
            icon: 'success',
          })

          await loadAssetDetail()
        }
        catch (error: any) {
          console.error('停机失败:', error)
          uni.showToast({
            title: error.msg || '停机失败',
            icon: 'none',
          })
        }
        finally {
          operating.value = false
        }
      }
    },
  })
}

// 复机
async function handleStartAsset() {
  uni.showModal({
    title: '确认复机',
    content: '复机后将恢复网络服务，确定要复机吗？',
    success: async (res) => {
      if (res.confirm) {
        operating.value = true
        try {
          // 调用统一复机接口
          await startAsset(assetIdentifier.value)

          uni.showToast({
            title: '复机成功',
            icon: 'success',
          })

          await loadAssetDetail()
        }
        catch (error: any) {
          console.error('复机失败:', error)
          uni.showToast({
            title: error.msg || '复机失败',
            icon: 'none',
          })
        }
        finally {
          operating.value = false
        }
      }
    },
  })
}

// 查看钱包 (仅代理端)
function viewWallet() {
  // 跳转到钱包页面
  uni.navigateTo({
    url: `/pages/agent-system/asset-wallet/index?type=${assetType.value}&id=${assetIdentifier.value}`,
  })
}
</script>

<template>
  <view class="bg-[#fafafa] min-h-screen pb-safe">
    <!-- 加载中 -->
    <view v-if="loading" class="pt-20 center">
      <i class="i-mdi-loading animate-spin text-40px text-[#999]" />
    </view>

    <!-- 内容区域 -->
    <view v-else-if="assetDetail" class="px-4 pt-4">
      <!-- 状态卡片 -->
      <view class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] overflow-hidden mb-3">
        <!-- 顶部信息 -->
        <view class="px-4 pt-4 pb-3 border-b-1px border-[#f5f5f5]">
          <view class="flex items-center justify-between mb-3">
            <view class="flex items-center gap-2">
              <i
                :class="[
                  'text-28px',
                  assetType === 'card' ? 'i-mdi-sim' : 'i-mdi-devices',
                  'text-[#212121]',
                ]"
              />
              <view>
                <text class="text-18px font-700 text-[#212121] block">
                  {{ assetType === 'card' ? '物联网卡' : '物联网设备' }}
                </text>
                <text class="text-12px text-[#999]">
                  ID: {{ assetDetail.id || '-' }}
                </text>
              </view>
            </view>
            <view
              :style="{
                backgroundColor: statusColor.bg,
                color: statusColor.text,
              }"
              class="px-3 py-1 rounded-8px text-13px font-600"
            >
              {{ statusText }}
            </view>
          </view>

          <text class="text-13px text-[#999]">
            {{ assetDetail.operator || '-' }}
          </text>
        </view>

        <!-- 实时状态 -->
        <view class="px-4 py-4">
          <text class="text-14px font-600 text-[#212121] block mb-3">
            实时状态
          </text>

          <view class="grid grid-cols-2 gap-3">
            <!-- 流量使用 -->
            <view class="bg-[#f5f5f5] rounded-12px p-3">
              <text class="text-12px text-[#999] block mb-1">
                流量使用
              </text>
              <text class="text-16px font-700 text-[#212121] block">
                {{ realtimeStatus?.data_usage || '-' }}
              </text>
              <text class="text-11px text-[#999]">
                / {{ realtimeStatus?.data_total || '-' }}
              </text>
            </view>

            <!-- 语音使用 -->
            <view class="bg-[#f5f5f5] rounded-12px p-3">
              <text class="text-12px text-[#999] block mb-1">
                语音使用
              </text>
              <text class="text-16px font-700 text-[#212121] block">
                {{ realtimeStatus?.voice_usage || '-' }}
              </text>
              <text class="text-11px text-[#999]">
                / {{ realtimeStatus?.voice_total || '-' }}
              </text>
            </view>
          </view>

          <text class="text-11px text-[#999] block mt-3">
            最后更新: {{ realtimeStatus?.last_update || '-' }}
          </text>
        </view>
      </view>

      <!-- Tab切换 -->
      <view class="flex items-center gap-2 mb-3">
        <view
          v-for="tab in tabs"
          :key="tab.key"
          :class="[
            'flex-1 py-3 rounded-12px center flex-col gap-1',
            'transition-all duration-200',
            activeTab === tab.key
              ? 'bg-[#212121] shadow-[0_2px_12px_rgba(0,0,0,0.1)]'
              : 'bg-white shadow-[0_2px_12px_rgba(0,0,0,0.06)]',
          ]"
          @click="handleTabChange(tab.key)"
        >
          <i
            :class="[
              tab.icon,
              'text-20px',
              activeTab === tab.key ? 'text-white' : 'text-[#666]',
            ]"
          />
          <text
            :class="[
              'text-12px font-600',
              activeTab === tab.key ? 'text-white' : 'text-[#666]',
            ]"
          >
            {{ tab.label }}
          </text>
        </view>
      </view>

      <!-- 基本信息 -->
      <view v-if="activeTab === 'info'" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 space-y-3">
        <view class="flex items-start justify-between">
          <text class="text-13px text-[#999] w-90px">ICCID</text>
          <text class="flex-1 text-14px text-[#212121] text-right break-all">
            {{ assetDetail.iccid || '-' }}
          </text>
        </view>

        <view class="flex items-start justify-between">
          <text class="text-13px text-[#999] w-90px">虚拟号</text>
          <text class="flex-1 text-14px text-[#212121] text-right">
            {{ assetDetail.virtual_number || '-' }}
          </text>
        </view>

        <view class="flex items-start justify-between">
          <text class="text-13px text-[#999] w-90px">IMEI</text>
          <text class="flex-1 text-14px text-[#212121] text-right break-all">
            {{ assetDetail.imei || '-' }}
          </text>
        </view>

        <view class="flex items-start justify-between">
          <text class="text-13px text-[#999] w-90px">运营商</text>
          <text class="flex-1 text-14px text-[#212121] text-right">
            {{ assetDetail.operator || '-' }}
          </text>
        </view>

        <view class="flex items-start justify-between">
          <text class="text-13px text-[#999] w-90px">创建时间</text>
          <text class="flex-1 text-14px text-[#212121] text-right">
            {{ assetDetail.create_time || '-' }}
          </text>
        </view>

        <view class="flex items-start justify-between">
          <text class="text-13px text-[#999] w-90px">激活时间</text>
          <text class="flex-1 text-14px text-[#212121] text-right">
            {{ assetDetail.activate_time || '-' }}
          </text>
        </view>
      </view>

      <!-- 套餐信息 -->
      <view v-if="activeTab === 'package'" class="space-y-3">
        <!-- 当前套餐 -->
        <view v-if="currentPackage" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4">
          <view class="flex items-center justify-between mb-3">
            <text class="text-14px font-600 text-[#212121]">
              当前套餐
            </text>
            <view class="px-3 py-1 rounded-8px bg-[#e8f5e9] text-12px font-600 text-[#2e7d32]">
              {{ currentPackage.status_name || '-' }}
            </view>
          </view>

          <text class="text-16px font-700 text-[#212121] block mb-2">
            {{ currentPackage.package_name || '-' }}
          </text>
          <text class="text-14px text-[var(--brand-primary)] font-600 block mb-3">
            已用: {{ currentPackage.virtual_used_mb || 0 }}MB / 总量: {{ currentPackage.virtual_limit_mb || 0 }}MB
          </text>

          <view class="flex items-center justify-between text-12px text-[#999]">
            <text v-if="currentPackage.activated_at && currentPackage.expires_at">
              {{ currentPackage.activated_at }} ~ {{ currentPackage.expires_at }}
            </text>
            <text v-else>-</text>
          </view>
        </view>

        <!-- 所有套餐列表 -->
        <view v-if="packageList.length > 0" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4">
          <text class="text-14px font-600 text-[#212121] block mb-3">
            套餐列表
          </text>

          <view
            v-for="pkg in packageList"
            :key="pkg.package_usage_id"
            class="py-3 border-t-1px border-[#f5f5f5] first:border-t-0 first:pt-0"
          >
            <view class="flex items-center justify-between mb-2">
              <text class="text-15px font-600 text-[#212121]">
                {{ pkg.package_name || '-' }}
              </text>
              <view
                class="px-2 py-0.5 rounded text-11px"
                :style="{
                  backgroundColor: pkg.status === 1 ? '#e8f5e9' : '#f5f5f5',
                  color: pkg.status === 1 ? '#2e7d32' : '#999'
                }"
              >
                {{ pkg.status_name || '-' }}
              </view>
            </view>
            <view class="flex items-center justify-between mb-1">
              <text class="text-12px text-[#666]">
                已用: {{ pkg.virtual_used_mb || 0 }}MB / {{ pkg.virtual_limit_mb || 0 }}MB
              </text>
              <text class="text-11px text-[#999]">
                优先级: {{ pkg.priority || '-' }}
              </text>
            </view>
            <text class="text-11px text-[#999]">
              {{ pkg.activated_at || '-' }} ~ {{ pkg.expires_at || '-' }}
            </text>
          </view>
        </view>

        <!-- 暂无套餐 -->
        <view v-else class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4 py-12 center flex-col">
          <i class="i-mdi-package-variant-closed text-60px text-[#ddd] mb-2" />
          <text class="text-13px text-[#999]">
            暂无套餐数据
          </text>
        </view>
      </view>

      <!-- 操作历史 -->
      <view v-if="activeTab === 'history'" class="bg-white rounded-16px shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-4">
        <text class="text-14px font-600 text-[#212121] block mb-3">
          操作记录
        </text>

        <!-- 暂无数据 -->
        <view class="py-8 center flex-col">
          <i class="i-mdi-history text-60px text-[#ddd] mb-2" />
          <text class="text-13px text-[#999]">
            暂无操作记录
          </text>
        </view>
      </view>

      <!-- 操作按钮区 -->
      <view class="mt-4 space-y-3">
        <!-- 停复机按钮 -->
        <view class="flex gap-3">
          <view
            v-if="realtimeStatus.status === 'active'"
            class="
              flex-1 py-3 rounded-12px center
              bg-[#ffebee]
              transition-all duration-200
              active:opacity-80
            "
            @click="handleStopAsset"
          >
            <i class="i-mdi-pause-circle text-18px text-[#c62828] mr-1" />
            <text class="text-15px font-600 text-[#c62828]">
              停机
            </text>
          </view>

          <view
            v-else
            class="
              flex-1 py-3 rounded-12px center
              bg-[#e8f5e9]
              transition-all duration-200
              active:opacity-80
            "
            @click="handleStartAsset"
          >
            <i class="i-mdi-play-circle text-18px text-[#2e7d32] mr-1" />
            <text class="text-15px font-600 text-[#2e7d32]">
              复机
            </text>
          </view>

          <view
            class="
              flex-1 py-3 rounded-12px center
              bg-[#212121]
              transition-all duration-200
              active:bg-[#000]
            "
            @click="viewWallet"
          >
            <i class="i-mdi-wallet text-18px text-white mr-1" />
            <text class="text-15px font-600 text-white">
              查看钱包
            </text>
          </view>
        </view>
      </view>

      <!-- 底部留白 -->
      <view class="h-8" />
    </view>
  </view>
</template>

<style scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-y-3 > view:not(:last-child) {
  margin-bottom: 12px;
}

.break-all {
  word-break: break-all;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}
</style>
