<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getUserInfo } from '@/api/auth'
import { getEnterpriseCards } from '@/api/enterprise'
import type { CardInfo } from '@/api/enterprise'
import { getCarriers } from '@/api/carrier'
import type { CarrierInfo } from '@/api/carrier'
import SimplePicker from '@/components/SimplePicker.vue'

const enterpriseId = ref<number>(0)
const cardList = ref<CardInfo[]>([])
const loading = ref(false)
const searchKeyword = ref('')
const statusFilter = ref<number | undefined>(undefined)
const carrierFilter = ref<number | undefined>(undefined)
const showCarrierPicker = ref(false)
const showSearchTypePicker = ref(false)
const carrierList = ref<CarrierInfo[]>([])
const page = ref(1)
const pageSize = 20
const hasMore = ref(true)

const searchType = ref<'iccid' | 'virtual'>('iccid')

const statusOptions = [
  { label: '全部', value: undefined },
  { label: '正常', value: 1 },
  { label: '停机', value: 0 },
]

const searchTypeOptions = [
  { label: 'ICCID', value: 'iccid' },
  { label: '虚拟号', value: 'virtual' }
]

const carrierOptions = computed(() => [
  { label: '全部运营商', value: undefined },
  ...carrierList.value.map(c => ({ label: c.carrier_name, value: c.id }))
])

const selectedCarrierName = computed(() => {
  if (carrierFilter.value === undefined) return '运营商'
  const option = carrierOptions.value.find(o => o.value === carrierFilter.value)
  return option?.label || '运营商'
})

const stats = computed(() => {
  const total = cardList.value.length
  const active = cardList.value.filter(c => c.network_status === 1).length
  const inactive = cardList.value.filter(c => c.network_status === 0).length
  const distributed = cardList.value.filter(c => c.status === 2).length
  return { total, active, inactive, distributed }
})

async function loadCarriers() {
  try {
    const response = await getCarriers({ page: 1, size: 100 })
    carrierList.value = response?.items || []
  } catch (error) {
    console.error('加载运营商列表失败:', error)
  }
}

async function loadEnterpriseCards(isRefresh = false) {
  if (loading.value) return

  if (isRefresh) {
    page.value = 1
    hasMore.value = true
    cardList.value = []
  }

  loading.value = true

  try {
    if (!enterpriseId.value) {
      const userInfo = uni.getStorageSync('user_info')
      if (userInfo?.enterprise_id) {
        enterpriseId.value = userInfo.enterprise_id
      } else {
        const apiUserInfo = await getUserInfo()
        if (!apiUserInfo.enterprise_id) {
          throw new Error('未找到企业ID')
        }
        enterpriseId.value = apiUserInfo.enterprise_id
      }
    }

    const params: any = {
      page: page.value,
      page_size: pageSize,
    }

    if (statusFilter.value !== undefined) {
      params.status = statusFilter.value
    }
    if (carrierFilter.value !== undefined) {
      params.carrier_id = carrierFilter.value
    }
    if (searchKeyword.value) {
      if (searchType.value === 'iccid') {
        params.iccid = searchKeyword.value
      } else {
        params.virtual_no = searchKeyword.value
      }
    }

    const cardsData = await getEnterpriseCards(enterpriseId.value, params)
    const items = cardsData?.items || []

    if (page.value === 1) {
      cardList.value = items
    } else {
      cardList.value.push(...items)
    }

    hasMore.value = items.length >= pageSize
    page.value++
  } catch (error: any) {
    console.error('加载企业卡列表失败:', error)
    if (error instanceof Error && error.message && !error.statusCode) {
      uni.$u.toast(error.message)
    }
  } finally {
    loading.value = false
  }
}

function viewCardDetail(card: any) {
  uni.navigateTo({
    url: `/pages/agent-system/asset-detail/index?iccid=${card.iccid}`,
  })
}

function getNetworkStatusText(networkStatus: number, networkStatusName?: string) {
  if (networkStatusName) return networkStatusName
  return networkStatus === 1 ? '正常' : networkStatus === 0 ? '停机' : '未知'
}

function getNetworkStatusColor(networkStatus: number) {
  return networkStatus === 1
    ? { bg: '#e8f5e9', text: '#2e7d32' }
    : networkStatus === 0
    ? { bg: '#ffebee', text: '#c62828' }
    : { bg: '#f5f5f5', text: '#999' }
}

function getCardStatusText(status: number, statusName?: string) {
  if (statusName) return statusName
  const map: Record<number, string> = { 1: '可用', 2: '已分销', 3: '已停用' }
  return map[status] ?? '未知'
}

function handleSearch() {
  loadEnterpriseCards(true)
}

function onCarrierConfirm(option: { label: string, value: any }) {
  carrierFilter.value = option.value
  loadEnterpriseCards(true)
}

function onSearchTypeConfirm(option: { label: string, value: any }) {
  searchType.value = option.value
}

function handleStatusChange(status: number | undefined) {
  statusFilter.value = status
  loadEnterpriseCards(true)
}

function loadMore() {
  if (hasMore.value && !loading.value) {
    loadEnterpriseCards()
  }
}

function onScroll(e: any) {
  const { scrollTop, scrollHeight, clientHeight } = e.target
  if (scrollHeight - scrollTop - clientHeight < 100) {
    loadMore()
  }
}

onMounted(async () => {
  loadCarriers()
  loadEnterpriseCards()
})
</script>

<template>
  <view class="bg-page min-h-screen flex flex-col">
    <!-- 搜索区域 -->
    <view class="bg-white px-4 pt-4 pb-3">
      <!-- 搜索框 -->
      <view class="relative flex items-center">
        <input
          v-model="searchKeyword"
          class="flex-1 h-10 bg-[#f1f5f9] rounded-full pl-4 pr-12 text-sm text-[#1e293b] placeholder-[#94a3b8]"
          :placeholder="searchType === 'iccid' ? '搜索ICCID' : '搜索虚拟号'"
          @confirm="handleSearch"
        />
        <view class="absolute right-1 flex items-center">
          <view v-if="searchKeyword" class="w-8 h-8 flex items-center justify-center text-[#94a3b8]"
            @click="searchKeyword = ''">
            <i class="i-mdi-close-circle text-lg" />
          </view>
          <view class="w-8 h-8 flex items-center justify-center text-brand" @click="handleSearch">
            <i class="i-mdi-magnify text-xl" />
          </view>
        </view>
      </view>

      <!-- 统计信息 -->
      <view class="flex items-center justify-around gap-3 mt-3">
        <view class="flex items-center gap-1">
          <text class="text-12px text-[#999]">卡总数</text>
          <text class="text-14px font-700 text-brand">{{ stats.total }}</text>
        </view>
        <view class="flex items-center gap-1">
          <view class="w-2 h-2 rounded-full bg-[#52c41a]" />
          <text class="text-12px text-[#666]">正常</text>
          <text class="text-12px font-600 text-[#212121]">{{ stats.active }}</text>
        </view>
        <view class="flex items-center gap-1">
          <view class="w-2 h-2 rounded-full bg-[#ff4d4f]" />
          <text class="text-12px text-[#666]">停机</text>
          <text class="text-12px font-600 text-[#212121]">{{ stats.inactive }}</text>
        </view>
        <view class="flex items-center gap-1">
          <view class="w-2 h-2 rounded-full bg-brand" />
          <text class="text-12px text-[#666]">已分销</text>
          <text class="text-12px font-600 text-[#212121]">{{ stats.distributed }}</text>
        </view>
      </view>

      <!-- 筛选器 -->
      <view class="flex items-center gap-2 mt-3 flex-wrap">
        <view class="flex bg-[#f1f5f9] rounded-full flex-shrink-0">
          <view
            v-for="option in statusOptions"
            :key="option.value"
            class="px-3 py-1.5 text-12px font-medium transition-all rounded-full"
            :class="statusFilter === option.value ? 'bg-brand text-white' : 'text-[#64748b]'"
            @click="handleStatusChange(option.value)"
          >
            {{ option.label }}
          </view>
        </view>

        <view class="flex items-center gap-1 px-3 py-1.5 bg-[#f8fafc] rounded-full flex-shrink-0"
          @click="showSearchTypePicker = true">
          <text class="text-12px" :class="searchType !== 'iccid' ? 'text-brand font-medium' : 'text-[#64748b]'">
            {{ searchType === 'iccid' ? 'ICCID' : '虚拟号' }}
          </text>
          <i class="i-mdi-chevron-down text-12px text-[#94a3b8]" />
        </view>

        <view class="flex items-center gap-1.5 px-3 py-1.5 bg-[#f8fafc] rounded-full flex-shrink-0 max-w-36"
          @click="showCarrierPicker = true">
          <text class="text-12px truncate" :class="carrierFilter !== undefined ? 'text-brand font-medium' : 'text-[#64748b]'">
            {{ selectedCarrierName }}
          </text>
          <i class="i-mdi-chevron-down text-12px text-[#94a3b8] flex-shrink-0" />
        </view>

        <view
          v-if="carrierFilter !== undefined || statusFilter !== undefined"
          class="flex items-center gap-1 px-2 py-1.5 rounded-full bg-[#ff4d4f]/10 text-[#ff4d4f] flex-shrink-0"
          @click="carrierFilter = undefined; statusFilter = undefined; loadEnterpriseCards(true)"
        >
          <i class="i-mdi-close text-12px" />
          <text class="text-12px font-medium">清除</text>
        </view>
      </view>
    </view>

    <!-- 列表内容 -->
    <view class="flex-1 overflow-y-auto min-h-0" @scroll="onScroll">
      <!-- 卡片列表 -->
      <view v-if="loading && cardList.length === 0" class="pt-20 flex justify-center">
        <text class="text-14px text-[#64748b]">加载中...</text>
      </view>

      <view v-else-if="cardList.length > 0" class="px-4 pb-4">
        <view
          v-for="card in cardList"
          :key="card.id"
          class="bg-white rounded-12px p-4 mt-3"
          @click="viewCardDetail(card)"
        >
          <view class="flex items-center justify-between mb-2">
            <view class="flex items-center gap-2">
              <text class="text-15px font-600 text-[#212121]">{{ card.carrier_name || '-' }}</text>
              <text class="text-12px text-[#999]">{{ getCardStatusText(card.status, card.status_name) }}</text>
            </view>
            <view
              :style="{
                backgroundColor: getNetworkStatusColor(card.network_status).bg,
                color: getNetworkStatusColor(card.network_status).text,
              }"
              class="px-3 py-1 rounded-full text-12px font-600"
            >
              {{ getNetworkStatusText(card.network_status, card.network_status_name) }}
            </view>
          </view>

          <view class="text-13px text-[#666] mb-2">
            {{ card.package_name || '暂无套餐' }}
          </view>

          <view class="flex items-center justify-between text-12px text-[#999]">
            <text class="truncate flex-1">{{ card.iccid || '-' }}</text>
            <text class="ml-2">{{ card.msisdn || '-' }}</text>
          </view>

          <view v-if="card.virtual_no" class="text-12px text-[#999] mt-1">
            虚拟号: {{ card.virtual_no }}
          </view>

          <view v-if="card.data_total && parseFloat(card.data_total) > 0" class="mt-3 bg-[#f5f5f5] rounded-8px p-3">
            <view class="flex items-center justify-between mb-2">
              <text class="text-12px text-[#666]">流量</text>
              <text class="text-12px font-600 text-[#212121]">
                {{ card.data_usage || '0' }} / {{ card.data_total || '0' }}
              </text>
            </view>
            <view class="h-2 bg-[#e0e0e0] rounded-full overflow-hidden">
              <view
                :style="{ width: `${Math.min(100, (parseFloat(card.data_usage || '0') / parseFloat(card.data_total || '1')) * 100)}%` }"
                :class="[
                  'h-full rounded-full transition-all',
                  (parseFloat(card.data_usage || '0') / parseFloat(card.data_total || '1')) > 0.9 ? 'bg-[#ff4d4f]' : 'bg-[#52c41a]',
                ]"
              />
            </view>
          </view>

          <view class="mt-2 flex items-center justify-between text-11px text-[#999]">
            <text>激活: {{ card.activate_time || '-' }}</text>
            <text>到期: {{ card.expire_date || '-' }}</text>
          </view>
        </view>

        <view v-if="loading" class="py-4 text-center">
          <text class="text-sm text-[#64748b]">加载中...</text>
        </view>
        <view v-else-if="!hasMore" class="py-4 text-center">
          <text class="text-sm text-[#94a3b8]">没有更多了</text>
        </view>
      </view>

      <view v-else class="pt-16 flex flex-col items-center">
        <i class="i-mdi-package-variant-closed text-6xl text-[#cbd5e1] mb-3" />
        <text class="text-base text-[#64748b] mb-1">暂无数据</text>
        <text class="text-sm text-[#94a3b8]">{{ searchKeyword ? '未找到相关结果' : '暂无卡数据' }}</text>
      </view>
    </view>

    <SimplePicker
      v-model:show="showCarrierPicker"
      :options="carrierOptions"
      title="选择运营商"
      @confirm="onCarrierConfirm"
    />

    <SimplePicker
      v-model:show="showSearchTypePicker"
      :options="searchTypeOptions"
      title="选择搜索类型"
      @confirm="onSearchTypeConfirm"
    />
  </view>
</template>

<style scoped>
</style>
