<template>
  <div class="container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="page-title">
        <h2>流量分析管理</h2>
        <p class="page-subtitle">实时监控和分析网络流量，识别异常流量模式</p>
      </div>
      <div class="page-actions">
        <a-tag :color="trafficRuntimeStatus === 'running' ? 'green' : 'gray'" bordered style="margin-right: 12px">
          流量采集器：{{ trafficRuntimeStatus === 'running' ? '运行中' : '已停止' }}
        </a-tag>
        <a-button
          type="primary"
          size="small"
          :loading="runtimeActionLoading"
          :disabled="trafficRuntimeStatus === 'running'"
          style="margin-right: 8px"
          @click="handleStartRuntime"
        >
          启动采集
        </a-button>
        <a-button
          size="small"
          status="warning"
          :loading="runtimeActionLoading"
          :disabled="trafficRuntimeStatus !== 'running'"
          style="margin-right: 12px"
          @click="handleStopRuntime"
        >
          停止采集
        </a-button>
        <a-button size="small" style="margin-right: 12px" @click="loadRuntimeStatus">刷新状态</a-button>
        <a-select v-model="timeRange" style="width: 140px; margin-right: 12px">
          <a-option value="24h">最近24小时</a-option>
          <a-option value="7d">最近7天</a-option>
          <a-option value="30d">最近30天</a-option>
          <a-option value="custom">自定义</a-option>
        </a-select>
      </div>
    </div>

    <!-- 统计卡片 -->
    <a-row :gutter="16" class="stats-row">
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false">
          <div class="stats-content">
            <div class="stats-icon stats-icon-primary">
              <IconActivity />
            </div>
            <div class="stats-info">
              <div class="stats-title">当前带宽</div>
              <div class="stats-value">{{ currentBandwidth }}</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">
          <div class="stats-content">
            <div class="stats-icon stats-icon-cyan">
              <IconArrowDown />
            </div>
            <div class="stats-info">
              <div class="stats-title">入站流量</div>
              <div class="stats-value">{{ inboundTraffic }}</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">
          <div class="stats-content">
            <div class="stats-icon stats-icon-green">
              <IconArrowUp />
            </div>
            <div class="stats-info">
              <div class="stats-title">出站流量</div>
              <div class="stats-value">{{ outboundTraffic }}</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">
          <div class="stats-content">
            <div class="stats-icon stats-icon-purple">
              <IconWorld />
            </div>
            <div class="stats-info">
              <div class="stats-title">活跃会话</div>
              <div class="stats-value">{{ activeSessions }}</div>
              <div class="stats-desc">
                <span>当前实时连接数</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 流量趋势图表 -->
    <a-card class="chart-card" :bordered="false">
      <template #title>
        <div class="card-title">
          <span>流量趋势</span>
          <span class="card-subtitle">过去24小时网络流量 (Gbps)</span>
        </div>
      </template>
      <template #extra>
        <a-space>
          <span class="legend-item">
            <span class="legend-dot legend-dot-inbound"></span>
            <span>入站</span>
          </span>
          <span class="legend-item">
            <span class="legend-dot legend-dot-outbound"></span>
            <span>出站</span>
          </span>
        </a-space>
      </template>
      <div class="chart-container">
        <Chart :options="trafficChartOptions" height="250px" />
      </div>
    </a-card>

    <!-- 流量分布 -->
    <a-row :gutter="16" class="distribution-row">
      <a-col :xs="24" :lg="8">
        <a-card class="distribution-card" :bordered="false">
          <template #title>
            <div class="card-title">
              <span>协议分布</span>
              <span class="card-subtitle">按协议类型统计</span>
            </div>
          </template>
          <div class="protocol-list">
            <div v-for="item in protocolData" :key="item.name" class="protocol-item">
              <div class="protocol-header">
                <span class="protocol-name">{{ item.name }}</span>
                <span class="protocol-value">{{ item.percent }}%</span>
              </div>
              <a-progress :percent="item.percent" :stroke-width="8" :show-text="false" :color="item.color" />
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card class="distribution-card" :bordered="false">
          <template #title>
            <div class="card-title">
              <span>流量方向</span>
              <span class="card-subtitle">内外网流量占比</span>
            </div>
          </template>
          <div class="direction-list">
            <div class="direction-item">
              <div class="direction-icon direction-icon-external">
                <IconWorld />
              </div>
              <div class="direction-info">
                <div class="direction-header">
                  <span class="direction-name">外网流量</span>
                  <span class="direction-percent">{{ outboundPercent }}%</span>
                </div>
                <a-progress :percent="outboundPercent" :stroke-width="8" :show-text="false" color="#165DFF" />
              </div>
            </div>
            <div class="direction-item">
              <div class="direction-icon direction-icon-internal">
                <IconServer />
              </div>
              <div class="direction-info">
                <div class="direction-header">
                  <span class="direction-name">内网流量</span>
                  <span class="direction-percent">{{ inboundPercent }}%</span>
                </div>
                <a-progress :percent="inboundPercent" :stroke-width="8" :show-text="false" color="#14C9C9" />
              </div>
            </div>
          </div>
          <a-divider />
          <a-row :gutter="16" class="direction-stats">
            <a-col :span="12">
              <div class="direction-stat">
                <div class="stat-label">外网入站</div>
                <div class="stat-value">{{ inboundTraffic }}</div>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="direction-stat">
                <div class="stat-label">外网出站</div>
                <div class="stat-value">{{ outboundTraffic }}</div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card class="distribution-card" :bordered="false">
          <template #title>
            <div class="card-title">
              <span>带宽利用率</span>
              <span class="card-subtitle">各链路使用情况</span>
            </div>
          </template>
          <div class="bandwidth-list">
            <div v-for="item in bandwidthData" :key="item.name" class="bandwidth-item">
              <div class="bandwidth-header">
                <span class="bandwidth-name">{{ item.name }}</span>
                <span class="bandwidth-value">{{ item.percent }}%</span>
              </div>
              <a-progress :percent="item.percent" :stroke-width="8" :show-text="false" :color="getBandwidthColor(item.percent)" />
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 数据表格 -->
    <a-row :gutter="16" class="tables-row">
      <a-col :xs="24" :lg="12">
        <a-card class="table-card" :bordered="false">
          <template #title>
            <div class="table-header">
              <span>Top 应用流量</span>
              <a-link>查看全部</a-link>
            </div>
          </template>
          <a-table :data="topApplications" :columns="applicationColumns" :pagination="false" row-key="name">
            <template #share="{ record }">
              <a-progress :percent="record.shareValue" :stroke-width="8" :show-text="false" color="#165DFF" />
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="12">
        <a-card class="table-card" :bordered="false">
          <template #title>
            <div class="table-header">
              <span>Top 流量源</span>
              <a-link>查看全部</a-link>
            </div>
          </template>
          <a-table :data="topSources" :columns="sourceColumns" :pagination="false" row-key="ip">
            <template #status="{ record }">
              <a-tag :color="record.statusColor" bordered>{{ record.statusText }}</a-tag>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { IconActivity, IconArrowDown, IconArrowUp, IconWorld, IconServer } from '@tabler/icons-vue'
import Chart from '@/components/chart/index.vue'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
import { Message } from '@arco-design/web-vue'
import {
  fetchTrafficDashboard,
  fetchRealtimeTraffic,
  fetchTopTraffic,
  fetchTrafficList,
  fetchTrafficSummary,
  fetchTrafficTrend,
  type TrafficTrendPoint,
} from '@/api/ops/traffic'
import { fetchTrafficRuntimeStatus, startTrafficRuntime, stopTrafficRuntime } from '@/api/ops/traffic-runtime'

// 时间范围
const timeRange = ref('24h')

const currentBandwidth = ref('0 bps')
const inboundTraffic = ref('0 B')
const outboundTraffic = ref('0 B')
const activeSessions = ref('0')
const inboundPercent = ref(0)
const outboundPercent = ref(0)
const trafficTrendData = ref<TrafficTrendPoint[]>([])
const trafficRuntimeStatus = ref<'running' | 'stopped' | string>('stopped')
const runtimeActionLoading = ref(false)

// 流量趋势图表配置
const trafficChartOptions = ref({
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    type: 'value',
    name: 'Gbps',
  },
  series: [
    {
      name: '入站',
      type: 'line',
      smooth: true,
      data: [],
      areaStyle: {
        opacity: 0.1,
        color: '#165DFF',
      },
      lineStyle: {
        width: 2,
        color: '#165DFF',
      },
      itemStyle: {
        color: '#165DFF',
      },
    },
    {
      name: '出站',
      type: 'line',
      smooth: true,
      data: [],
      areaStyle: {
        opacity: 0.1,
        color: '#14C9C9',
      },
      lineStyle: {
        width: 2,
        color: '#14C9C9',
      },
      itemStyle: {
        color: '#14C9C9',
      },
    },
  ],
})

// 协议分布数据
const protocolData = ref<{ name: string; percent: number; color: string }[]>([])

// 带宽利用率数据
const bandwidthData = ref<{ name: string; percent: number }[]>([])

// 获取带宽颜色
const getBandwidthColor = (percent: number) => {
  if (percent >= 80) return '#F53F3F'
  if (percent >= 60) return '#FF7D00'
  return '#165DFF'
}

// Top 应用流量数据
const topApplications = ref<any[]>([])

// 应用流量表格列
const applicationColumns: TableColumnData[] = [
  { title: '应用', dataIndex: 'name', width: 80 },
  { title: '端口', dataIndex: 'port', width: 70, align: 'center' },
  { title: '入站流量', dataIndex: 'inbound', width: 100 },
  { title: '出站流量', dataIndex: 'outbound', width: 100 },
  { title: '会话数', dataIndex: 'sessions', width: 90 },
  { title: '占比', dataIndex: 'share', slotName: 'share', width: 100 },
]

// Top 流量源数据
const topSources = ref<any[]>([])

// 流量源表格列
const sourceColumns: TableColumnData[] = [
  { title: 'IP地址', dataIndex: 'ip', width: 120 },
  { title: '设备名称', dataIndex: 'name', width: 130 },
  { title: '流量', dataIndex: 'traffic', width: 90 },
  { title: '会话数', dataIndex: 'sessions', width: 90 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 80, align: 'center' },
]

const toDateTime = (date: Date) => {
  const pad = (v: number) => `${v}`.padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}

const getGranularity = () => {
  if (timeRange.value === '24h') return 'minute'
  if (timeRange.value === '7d') return 'hour'
  return 'day'
}

const getRangeParams = () => {
  const now = new Date()
  const start = new Date(now)
  if (timeRange.value === '7d') start.setDate(start.getDate() - 7)
  else if (timeRange.value === '30d') start.setDate(start.getDate() - 30)
  else start.setDate(start.getDate() - 1)
  return { start_time: toDateTime(start), end_time: toDateTime(now) }
}

const formatBytes = (bytes: number) => {
  if (!bytes) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let value = bytes
  let index = 0
  while (value >= 1024 && index < units.length - 1) {
    value /= 1024
    index += 1
  }
  return `${value.toFixed(value >= 100 ? 0 : value >= 10 ? 1 : 2)} ${units[index]}`
}

const formatBps = (bps: number) => {
  if (!bps) return '0 bps'
  const units = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps']
  let value = bps
  let index = 0
  while (value >= 1000 && index < units.length - 1) {
    value /= 1000
    index += 1
  }
  return `${value.toFixed(value >= 100 ? 0 : value >= 10 ? 1 : 2)} ${units[index]}`
}

const updateTrendChart = () => {
  const labels = trafficTrendData.value.map((item: any) => {
    const raw = item?.time || item?.time_point || ''
    if (!raw) return ''
    const normalized = String(raw).replace('T', ' ')
    if (timeRange.value === '24h') return normalized.slice(11, 16)
    return normalized.slice(5, 16)
  })
  const inbound = trafficTrendData.value.map((item) => Number(item.in_bytes || 0))
  const outbound = trafficTrendData.value.map((item) => Number(item.out_bytes || 0))
  trafficChartOptions.value = {
    ...trafficChartOptions.value,
    xAxis: { ...(trafficChartOptions.value as any).xAxis, data: labels },
    series: [
      { ...(trafficChartOptions.value as any).series[0], data: inbound },
      { ...(trafficChartOptions.value as any).series[1], data: outbound },
    ],
  }
}

const parseJsonObject = (raw?: string) => {
  if (!raw) return null
  try {
    return JSON.parse(raw)
  } catch {
    return null
  }
}

const loadTrafficData = async () => {
  const params = getRangeParams()
  const granularity = getGranularity()
  try {
    const [summaryRes, realtimeRes, trendRes, topRes, listRes, dashboardRes] = await Promise.all([
      fetchTrafficSummary(params),
      fetchRealtimeTraffic(params),
      fetchTrafficTrend({ ...params, granularity }),
      fetchTopTraffic({ ...params, granularity, order_by: 'total_bytes', limit: 5 }),
      fetchTrafficList({ ...params, page: 1, size: 1 }),
      fetchTrafficDashboard({ ...params, granularity, limit: 5 }),
    ])

    const summary = summaryRes?.details
    const realtime = realtimeRes?.details
    const trendList = trendRes?.details?.data || []
    const topList = topRes?.details?.data || []
    const latest = listRes?.details?.data?.[0]
    const dashboard = dashboardRes?.details

    currentBandwidth.value = formatBps(Number(realtime?.bandwidth || summary?.peak_bandwidth || 0))
    inboundTraffic.value = formatBytes(Number(summary?.total_in_bytes || 0))
    outboundTraffic.value = formatBytes(Number(summary?.total_out_bytes || 0))
    activeSessions.value = `${Number(realtime?.connections || summary?.total_connections || 0).toLocaleString()}`
    const inBytes = Number(summary?.total_in_bytes || 0)
    const outBytes = Number(summary?.total_out_bytes || 0)
    const allBytes = inBytes + outBytes
    const summaryInboundPercent = allBytes > 0 ? Math.round((inBytes / allBytes) * 100) : 0
    const summaryOutboundPercent = allBytes > 0 ? Math.round((outBytes / allBytes) * 100) : 0
    const dashboardInPercent = Number(dashboard?.direction?.inbound_percent || 0)
    const dashboardOutPercent = Number(dashboard?.direction?.outbound_percent || 0)
    if (dashboardInPercent + dashboardOutPercent > 0) {
      inboundPercent.value = dashboardInPercent
      outboundPercent.value = dashboardOutPercent
    } else {
      inboundPercent.value = summaryInboundPercent
      outboundPercent.value = summaryOutboundPercent
    }

    trafficTrendData.value = trendList
    updateTrendChart()

    if (dashboard?.top_sources?.length) {
      topSources.value = dashboard.top_sources.map((item) => ({
        ip: item.ip || '-',
        name: item.name || item.ip || '-',
        traffic: formatBytes(Number(item.total_bytes || 0)),
        sessions: Number(item.total_packets || 0).toLocaleString(),
        statusColor: Number(item.total_bytes || 0) > 0 ? 'green' : 'gray',
        statusText: Number(item.total_bytes || 0) > 0 ? '活跃' : '空闲',
      }))
    } else {
      topSources.value = topList.map((item: any) => ({
        ip: item.node_id || '-',
        name: item.node_id || '-',
        traffic: formatBytes(Number(item.total_bytes || 0)),
        sessions: Number(item.total_packets || 0).toLocaleString(),
        statusColor: Number(item.total_bytes || 0) > 0 ? 'green' : 'gray',
        statusText: Number(item.total_bytes || 0) > 0 ? '活跃' : '空闲',
      }))
    }

    if (dashboard?.bandwidth?.length) {
      bandwidthData.value = dashboard.bandwidth.map((item) => ({
        name: item.name || '-',
        percent: Number(item.percent || 0),
      }))
    } else {
      const maxTraffic = Math.max(...topList.map((item: any) => Number(item.total_bytes || 0)), 0)
      bandwidthData.value = topList.map((item: any) => {
        const bytes = Number(item.total_bytes || 0)
        return {
          name: item.node_id || '-',
          percent: maxTraffic > 0 ? Math.round((bytes / maxTraffic) * 100) : 0,
        }
      })
    }

    if (dashboard?.protocols?.length) {
      protocolData.value = dashboard.protocols.map((item, index) => ({
        name: item.name,
        percent: Number(item.percent || 0),
        color: ['#165DFF', '#14C9C9', '#F7BA1E', '#86909C'][index % 4],
      }))
    }

    if (dashboard?.top_applications?.length) {
      topApplications.value = dashboard.top_applications.map((item) => ({
        name: item.name,
        port: item.port || '-',
        inbound: formatBytes(Number(item.in_bytes || 0)),
        outbound: formatBytes(Number(item.out_bytes || 0)),
        sessions: Number(item.sessions || 0).toLocaleString(),
        shareValue: Number(item.share_percent || 0),
      }))
    }

    if (!dashboard?.protocols?.length && latest?.protocol_stats) {
      const protocol = parseJsonObject(latest.protocol_stats)
      if (protocol && typeof protocol === 'object') {
        const total = Object.values(protocol).reduce<number>((sum, v) => sum + Number(v || 0), 0)
        if (total > 0) {
          protocolData.value = Object.entries(protocol).map(([name, value], index) => ({
            name,
            percent: Math.round((Number(value) / total) * 100),
            color: ['#165DFF', '#14C9C9', '#F7BA1E', '#86909C'][index % 4],
          }))
          topApplications.value = protocolData.value.map((item) => {
            const bytes = Math.round((allBytes * item.percent) / 100)
            return {
              name: item.name,
              port: '-',
              inbound: formatBytes(Math.round((bytes * inboundPercent.value) / 100)),
              outbound: formatBytes(Math.round((bytes * outboundPercent.value) / 100)),
              sessions: activeSessions.value,
              shareValue: item.percent,
            }
          })
        }
      }
    }
  } catch (error) {
    console.error(error)
    Message.error('流量数据加载失败')
  }
}

const loadRuntimeStatus = async () => {
  try {
    const res = await fetchTrafficRuntimeStatus()
    const status = String(res?.details?.status || 'stopped')
    trafficRuntimeStatus.value = status === 'running' ? 'running' : 'stopped'
  } catch (error) {
    console.error(error)
    trafficRuntimeStatus.value = 'stopped'
  }
}

const handleStartRuntime = async () => {
  runtimeActionLoading.value = true
  try {
    const res = await startTrafficRuntime()
    if (res?.code === 0 || res?.code === 200) {
      Message.success(res?.details?.message || '流量采集器已启动')
    } else {
      Message.error(res?.message || '启动失败')
    }
  } catch (error) {
    console.error(error)
    Message.error('启动失败')
  } finally {
    runtimeActionLoading.value = false
    await loadRuntimeStatus()
  }
}

const handleStopRuntime = async () => {
  runtimeActionLoading.value = true
  try {
    const res = await stopTrafficRuntime()
    if (res?.code === 0 || res?.code === 200) {
      Message.success(res?.details?.message || '流量采集器已停止')
    } else {
      Message.error(res?.message || '停止失败')
    }
  } catch (error) {
    console.error(error)
    Message.error('停止失败')
  } finally {
    runtimeActionLoading.value = false
    await loadRuntimeStatus()
  }
}

onMounted(() => {
  loadRuntimeStatus()
  loadTrafficData()
})

watch(timeRange, () => {
  loadTrafficData()
})
</script>

<script lang="ts">
export default {
  name: 'TrafficAnalysis',
}
</script>

<style scoped lang="less">
.container {
  padding: 16px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;

  .page-title {
    h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--color-text-1);
    }

    .page-subtitle {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--color-text-3);
    }
  }

  .page-actions {
    display: flex;
    align-items: center;
  }
}

.stats-row {
  margin-bottom: 16px;
}

.stats-card {
  height: 100px;

  :deep(.arco-card-body) {
    padding: 16px;
  }

  .stats-content {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
  }

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

    &-primary {
      background-color: rgba(22, 93, 255, 0.1);
      color: rgb(var(--primary-6));
    }

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

    &-green {
      background-color: rgba(0, 180, 42, 0.1);
      color: rgb(var(--success-6));
    }

    &-purple {
      background-color: rgba(114, 46, 209, 0.1);
      color: #722ed1;
    }
  }

  .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;
    margin-bottom: 4px;
  }

  .stats-desc {
    font-size: 12px;
    color: var(--color-text-3);
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.chart-card {
  margin-bottom: 16px;

  :deep(.arco-card-body) {
    padding: 16px;
  }

  .card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;

    span:first-child {
      font-size: 16px;
      font-weight: 500;
      color: var(--color-text-1);
    }

    .card-subtitle {
      font-size: 12px;
      color: var(--color-text-3);
      font-weight: normal;
    }
  }

  .chart-container {
    height: 250px;
  }

  .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-3);
  }

  .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;

    &-inbound {
      background-color: #165dff;
    }

    &-outbound {
      background-color: #14c9c9;
    }
  }
}

.distribution-row {
  margin-bottom: 16px;

  > .arco-col {
    margin-bottom: 16px;

    @media (min-width: 992px) {
      margin-bottom: 0;
    }
  }
}

.distribution-card {
  height: 320px;

  :deep(.arco-card-body) {
    padding: 16px;
    height: calc(320px - 60px);
    overflow: auto;
  }

  :deep(.arco-card-header) {
    height: 60px;
    border-bottom: none;
  }

  .card-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    span:first-child {
      font-size: 16px;
      font-weight: 500;
      color: var(--color-text-1);
    }

    .card-subtitle {
      font-size: 12px;
      color: var(--color-text-3);
      font-weight: normal;
    }
  }
}

.protocol-list {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  min-height: 100%;
}

.protocol-item {
  margin-bottom: 0;
}

.protocol-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.protocol-name {
  font-size: 14px;
  color: var(--color-text-2);
}

.protocol-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-1);
}

.direction-list {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 16px;
  justify-content: flex-start;
}

.direction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

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

  &-external {
    background-color: rgba(22, 93, 255, 0.1);
    color: rgb(var(--primary-6));
  }

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

.direction-info {
  flex: 1;
}

.direction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.direction-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-1);
}

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

.direction-stats {
  padding-top: 8px;
}

.direction-stat {
  .stat-label {
    font-size: 12px;
    color: var(--color-text-3);
    margin-bottom: 4px;
  }

  .stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 4px;
  }

  .stat-change {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.bandwidth-list {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  min-height: 100%;
}

.bandwidth-item {
  margin-bottom: 0;
}

.bandwidth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.bandwidth-name {
  font-size: 14px;
  color: var(--color-text-2);
}

.bandwidth-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-1);
}

.tables-row {
  margin-bottom: 16px;
}

.table-card {
  height: 100%;

  :deep(.arco-card-body) {
    padding: 16px;
  }

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-1);
  }
}

.text-success {
  display: flex;
  align-items: center;
  color: rgb(var(--success-6));
}
</style>
