<template>
  <div class="overview-tab">
    <a-row :gutter="16" class="stats-row">
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false" :loading="loading">
          <div class="stats-content">
            <div class="stats-icon stats-icon-primary">
              <icon-apps />
            </div>
            <div class="stats-info">
              <div class="stats-title">总IP数</div>
              <div class="stats-value">{{ formatNumber(overview?.total_ip || 0) }}</div>
              <div class="stats-desc">可分配地址</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false" :loading="loading">
          <div class="stats-content">
            <div class="stats-icon stats-icon-cyan">
              <icon-storage />
            </div>
            <div class="stats-info">
              <div class="stats-title">已分配</div>
              <div class="stats-value">{{ formatNumber(overview?.allocated || 0) }}</div>
              <div class="stats-desc">使用率 {{ getPercent(overview?.allocated, overview?.total_ip) }}%</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false" :loading="loading">
          <div class="stats-content">
            <div class="stats-icon stats-icon-blue">
              <icon-check-circle />
            </div>
            <div class="stats-info">
              <div class="stats-title">已使用</div>
              <div class="stats-value">{{ formatNumber(overview?.used || 0) }}</div>
              <div class="stats-desc">30天内使用 {{ overview?.used_within_30d || 0 }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false" :loading="loading">
          <div class="stats-content">
            <div class="stats-icon stats-icon-warning">
              <icon-exclamation-circle />
            </div>
            <div class="stats-info">
              <div class="stats-title">冲突告警</div>
              <div class="stats-value">{{ overview?.conflict_unresolved || 0 }}</div>
              <div class="stats-desc">未解决冲突</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" class="mt-6">
      <a-col :span="24">
        <a-card :bordered="false" :loading="loading">
          <template #title>
            <div class="card-title-row">
              <span class="card-title">子网使用率 TOP10</span>
            </div>
          </template>
          <div v-if="overview?.subnet_usage_top10?.length" class="chart-container">
            <div v-for="subnet in overview.subnet_usage_top10" :key="subnet.subnet_id" class="subnet-usage-item">
              <div class="subnet-info">
                <span class="subnet-name">{{ subnet.name }}</span>
                <span class="subnet-cidr">{{ subnet.cidr }}</span>
              </div>
              <div class="subnet-usage-bar">
                <a-progress :percent="subnet.usage_percent" :stroke-width="12" :color="getUsageColor(subnet.usage_percent)" />
              </div>
              <div class="subnet-usage-text">{{ subnet.used }} / {{ subnet.total }} ({{ subnet.usage_percent }}%)</div>
            </div>
          </div>
          <a-empty v-else description="暂无数据" />
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" class="mt-6">
      <a-col :xs="24" :lg="12">
        <a-card :bordered="false" :loading="loading">
          <template #title>
            <span class="card-title">分配状态统计</span>
          </template>
          <div class="stat-grid">
            <div class="stat-item">
              <span class="stat-label">已分配</span>
              <span class="stat-value">{{ formatNumber(overview?.allocated || 0) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">未分配</span>
              <span class="stat-value">{{ formatNumber(overview?.unallocated || 0) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">保留</span>
              <span class="stat-value">{{ formatNumber(overview?.reserved || 0) }}</span>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="12">
        <a-card :bordered="false" :loading="loading">
          <template #title>
            <span class="card-title">使用状态统计</span>
          </template>
          <div class="stat-grid">
            <div class="stat-item">
              <span class="stat-label">已使用</span>
              <span class="stat-value">{{ formatNumber(overview?.used || 0) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">未使用</span>
              <span class="stat-value">{{ formatNumber(overview?.unused || 0) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">30天内使用</span>
              <span class="stat-value">{{ formatNumber(overview?.used_within_30d || 0) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">30天前使用</span>
              <span class="stat-value">{{ formatNumber(overview?.used_before_30d || 0) }}</span>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { IconApps, IconStorage, IconCheckCircle, IconExclamationCircle } from '@arco-design/web-vue/es/icon'
import { fetchIPAMOverview, type IPAMOverview } from '@/api/ops/ipam'

const loading = ref(false)
const overview = ref<IPAMOverview | null>(null)

const loadData = async () => {
  loading.value = true
  try {
    const response = await fetchIPAMOverview()
    if (response && response.code === 0) {
      overview.value = response.details
    }
  } catch (error) {
    console.error('Failed to load overview:', error)
  } finally {
    loading.value = false
  }
}

const formatNumber = (num: number) => {
  return num.toLocaleString()
}

const getPercent = (used?: number, total?: number) => {
  if (!used || !total) return 0
  return Math.round((used / total) * 100)
}

const getUsageColor = (percent: number) => {
  if (percent >= 80) return '#F53F3F'
  if (percent >= 70) return '#FF7D00'
  return '#165DFF'
}

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

<style scoped lang="less">
.stats-row {
  margin-bottom: 0;
}

.stats-card {
  .stats-content {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .stats-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;

    &-primary {
      background: rgba(22, 93, 255, 0.1);
      color: #165dff;
    }

    &-cyan {
      background: rgba(20, 201, 201, 0.1);
      color: #14c9c9;
    }

    &-blue {
      background: rgba(22, 93, 255, 0.1);
      color: #165dff;
    }

    &-warning {
      background: rgba(255, 125, 0, 0.1);
      color: #ff7d00;
    }
  }

  .stats-info {
    flex: 1;
  }

  .stats-title {
    font-size: 14px;
    color: var(--color-text-3);
    margin-bottom: 4px;
  }

  .stats-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-1);
    line-height: 1.2;
  }

  .stats-desc {
    font-size: 12px;
    margin-top: 4px;
    color: var(--color-text-3);
  }
}

.mt-6 {
  margin-top: 24px;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.card-title {
  font-weight: 500;
  color: var(--color-text-1);
}

.chart-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.subnet-usage-item {
  display: grid;
  grid-template-columns: 200px 1fr 120px;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);

  &:last-child {
    border-bottom: none;
  }
}

.subnet-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.subnet-name {
  font-weight: 500;
  color: var(--color-text-1);
}

.subnet-cidr {
  font-size: 12px;
  color: var(--color-text-3);
}

.subnet-usage-bar {
  flex: 1;
}

.subnet-usage-text {
  text-align: right;
  font-size: 12px;
  color: var(--color-text-2);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--color-fill-1);
  border-radius: 8px;

  .stat-label {
    font-size: 14px;
    color: var(--color-text-3);
  }

  .stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-1);
  }
}
</style>
