<template>
  <div class="container">
    <!-- 统计卡片 -->
    <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">
              <icon-file />
            </div>
            <div class="stats-info">
              <div class="stats-title">今日日志</div>
              <div class="stats-value">{{ stats.total }}</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-danger">
              <icon-close-circle-fill />
            </div>
            <div class="stats-info">
              <div class="stats-title">错误日志</div>
              <div class="stats-value">{{ stats.error }}</div>
              <div class="stats-desc text-danger">较昨日 +12%</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-warning">
              <icon-exclamation-circle-fill />
            </div>
            <div class="stats-info">
              <div class="stats-title">警告日志</div>
              <div class="stats-value">{{ stats.warning }}</div>
              <div class="stats-desc text-success">较昨日 -5%</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-primary">
              <icon-info-circle-fill />
            </div>
            <div class="stats-info">
              <div class="stats-title">信息日志</div>
              <div class="stats-value">{{ stats.info }}</div>
              <div class="stats-desc">正常范围</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 图表区域 -->
    <a-row :gutter="16" class="chart-row">
      <a-col :xs="24" :lg="12">
        <a-card title="日志采集趋势" :bordered="false">
          <template #extra>
            <a-space>
              <span class="legend-item">
                <span class="legend-dot legend-dot-1"></span>
                <span>总量</span>
              </span>
              <span class="legend-item">
                <span class="legend-dot legend-dot-2"></span>
                <span>异常</span>
              </span>
            </a-space>
          </template>
          <div class="chart-container">
            <Chart :options="logTrendChartOptions" height="280px" />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="12">
        <a-card title="日志来源分布" :bordered="false">
          <template #extra>
            <span class="text-muted">按系统统计</span>
          </template>
          <div class="source-list">
            <div v-for="item in logSources" :key="item.name" class="source-item">
              <div class="source-header">
                <span class="source-name">{{ item.name }}</span>
                <span class="source-value">{{ item.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-row>

    <!-- 日志列表 -->
    <a-card title="实时日志" :bordered="false">
      <template #extra>
        <a-space>
          <a-input-search v-model="searchQuery" placeholder="搜索日志..." style="width: 250px" allow-clear />
          <a-select v-model="selectedLevel" placeholder="全部级别" style="width: 120px">
            <a-option value="">全部级别</a-option>
            <a-option value="error">ERROR</a-option>
            <a-option value="warn">WARN</a-option>
            <a-option value="info">INFO</a-option>
            <a-option value="debug">DEBUG</a-option>
          </a-select>
        </a-space>
      </template>
      <a-table :data="filteredLogs" :columns="columns" :loading="loading" :pagination="false" row-key="timestamp">
        <!-- 级别列 -->
        <template #level="{ record }">
          <a-tag :color="getLevelColor(record.levelValue)" bordered>
            {{ record.levelText }}
          </a-tag>
        </template>

        <!-- 消息列 -->
        <template #message="{ record }">
          <span class="log-message">{{ record.message }}</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { IconFile, IconCloseCircleFill, IconExclamationCircleFill, IconInfoCircleFill } from '@arco-design/web-vue/es/icon'
import Breadcrumb from '@/components/breadcrumb/index.vue'
import Chart from '@/components/chart/index.vue'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'

// 统计数据
const stats = ref({
  total: '2.4M',
  error: '1,234',
  warning: '3,567',
  info: '2.39M',
})

const loading = ref(false)
const searchQuery = ref('')
const selectedLevel = ref('')

// 表格列配置
const columns: TableColumnData[] = [
  {
    title: '时间',
    dataIndex: 'timestamp',
    width: 180,
  },
  {
    title: '级别',
    dataIndex: 'level',
    slotName: 'level',
    width: 100,
    align: 'center',
  },
  {
    title: '来源',
    dataIndex: 'source',
    width: 150,
  },
  {
    title: '消息内容',
    dataIndex: 'message',
    slotName: 'message',
  },
  {
    title: '次数',
    dataIndex: 'count',
    width: 80,
    align: 'center',
  },
]

// 日志数据
const logData = ref([
  {
    timestamp: '2024-01-15 14:32:45',
    levelValue: 'error',
    levelText: 'ERROR',
    source: 'Web-Server-01',
    message: 'Connection refused: Unable to connect to database server',
    count: '156',
  },
  {
    timestamp: '2024-01-15 14:32:12',
    levelValue: 'warn',
    levelText: 'WARN',
    source: 'API-Gateway',
    message: 'Rate limit exceeded for IP 192.168.1.100',
    count: '89',
  },
  {
    timestamp: '2024-01-15 14:31:58',
    levelValue: 'info',
    levelText: 'INFO',
    source: 'Auth-Service',
    message: 'User login successful: admin@example.com',
    count: '1',
  },
  {
    timestamp: '2024-01-15 14:31:45',
    levelValue: 'error',
    levelText: 'ERROR',
    source: 'Payment-Service',
    message: 'Transaction failed: Insufficient funds',
    count: '23',
  },
  {
    timestamp: '2024-01-15 14:31:30',
    levelValue: 'warn',
    levelText: 'WARN',
    source: 'Storage-Server',
    message: 'Disk usage exceeded 85% threshold',
    count: '5',
  },
  {
    timestamp: '2024-01-15 14:31:15',
    levelValue: 'info',
    levelText: 'INFO',
    source: 'Scheduler',
    message: 'Backup job completed successfully',
    count: '1',
  },
  {
    timestamp: '2024-01-15 14:31:00',
    levelValue: 'critical',
    levelText: 'CRITICAL',
    source: 'Core-Router',
    message: 'Interface GigabitEthernet0/1 down',
    count: '1',
  },
  {
    timestamp: '2024-01-15 14:30:45',
    levelValue: 'debug',
    levelText: 'DEBUG',
    source: 'Cache-Server',
    message: 'Cache hit ratio: 94.5%',
    count: '1',
  },
])

// 过滤后的日志列表
const filteredLogs = computed(() => {
  let result = logData.value

  if (selectedLevel.value) {
    result = result.filter((log) => log.levelValue === selectedLevel.value)
  }

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter((log) => log.message.toLowerCase().includes(query) || log.source.toLowerCase().includes(query))
  }

  return result
})

// 日志来源分布数据
const logSources = ref([
  { name: 'Web服务器', value: '856K', percent: 35, color: '#165DFF' },
  { name: '数据库', value: '624K', percent: 26, color: '#14C9C9' },
  { name: '应用服务', value: '480K', percent: 20, color: '#F7BA1E' },
  { name: '网络设备', value: '288K', percent: 12, color: '#722ED1' },
  { name: '安全设备', value: '168K', percent: 7, color: '#F53F3F' },
])

// 日志趋势图表配置
const logTrendChartOptions = ref({
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
  },
  yAxis: {
    type: 'value',
    name: '数量',
  },
  series: [
    {
      name: '总量',
      type: 'line',
      smooth: true,
      data: [1200, 800, 2800, 4500, 3800, 2200, 1500],
      areaStyle: {
        opacity: 0.1,
      },
      lineStyle: {
        width: 2,
        color: '#165DFF',
      },
      itemStyle: {
        color: '#165DFF',
      },
    },
    {
      name: '异常',
      type: 'line',
      smooth: true,
      data: [89, 45, 156, 234, 189, 112, 78],
      areaStyle: {
        opacity: 0.1,
      },
      lineStyle: {
        width: 2,
        color: '#F53F3F',
      },
      itemStyle: {
        color: '#F53F3F',
      },
    },
  ],
})

// 获取级别颜色
const getLevelColor = (level: string) => {
  const colorMap: Record<string, string> = {
    error: 'red',
    critical: 'red',
    warn: 'orange',
    info: 'green',
    debug: 'gray',
  }
  return colorMap[level] || 'gray'
}

// 获取数据
const fetchData = async () => {
  // TODO: 从API获取数据
  loading.value = false
}

// 初始化
onMounted(() => {
  fetchData()
})
</script>

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

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

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

.stats-card {
  height: 100%;

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

  .stats-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .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));
    }

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

    &-danger {
      background-color: rgba(245, 63, 63, 0.1);
      color: rgb(var(--danger-6));
    }

    &-warning {
      background-color: rgba(255, 125, 0, 0.1);
      color: rgb(var(--warning-6));
    }

    &-muted {
      background-color: rgba(134, 144, 156, 0.1);
      color: rgb(var(--gray-6));
    }
  }

  .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);
  }
}

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

.chart-container {
  height: 280px;
}

.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%;

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

  &-2 {
    background-color: #f53f3f;
  }
}

.text-muted {
  color: var(--color-text-3);
}

.text-danger {
  color: rgb(var(--danger-6));
}

.text-success {
  color: rgb(var(--success-6));
}

.source-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 280px;
}

.source-item {
  .source-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }

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

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

.log-message {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}
</style>
