<template>
  <div class="storage-monitor">
    <!-- <a-row :gutter="16" class="stats-row">
      <a-col :span="6">
        <a-card class="stats-card" :loading="loading">
          <div class="stats-content">
            <div class="stats-icon">
              <IconStorage />
            </div>
            <div class="stats-info">
              <div class="stats-title">存储设备</div>
              <div class="stats-value">{{ statsData.total }}</div>
              <div class="stats-desc">在线 {{ statsData.online }} / 离线 {{ statsData.offline }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stats-card" :loading="loading">
          <div class="stats-content">
            <div class="stats-icon icon-blue">
              <IconDriveFile />
            </div>
            <div class="stats-info">
              <div class="stats-title">总容量</div>
              <div class="stats-value">-</div>
              <div class="stats-desc">-</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stats-card" :loading="loading">
          <div class="stats-content">
            <div class="stats-icon icon-green">
              <IconFile />
            </div>
            <div class="stats-info">
              <div class="stats-title">使用率</div>
              <div class="stats-value">-</div>
              <div class="stats-desc">-</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stats-card" :loading="loading">
          <div class="stats-content">
            <div class="stats-icon icon-orange">
              <IconExclamationCircle />
            </div>
            <div class="stats-info">
              <div class="stats-title">告警设备</div>
              <div class="stats-value">{{ statsData.warning }}</div>
              <div class="stats-desc">{{ statsData.warning > 0 ? '需要关注' : '运行正常' }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 图表区域 -->
    <!-- <a-row :gutter="16" class="chart-row">
      <a-col :span="12">
        <a-card class="chart-card">
          <template #title>
            <div class="card-header">
              <div class="card-title">I/O 吞吐量趋势</div>
              <div class="card-subtitle">过去24小时 (IOPS)</div>
            </div>
          </template>
          <template #extra>
            <div class="chart-legend">
              <div class="legend-item">
                <span class="legend-dot dot-blue"></span>
                <span>读取</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot dot-green"></span>
                <span>写入</span>
              </div>
            </div>
          </template>
          <div class="chart-container">
            <Chart :options="ioChartOptions" height="280px" />
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card class="chart-card">
          <template #title>
            <div class="card-header">
              <div class="card-title">存储池状态</div>
              <div class="card-subtitle">各存储池容量使用情况</div>
            </div>
          </template>
          <div class="storage-pool-list">
            <div class="pool-item">
              <div class="pool-header">
                <span class="pool-name">生产数据池</span>
                <span class="pool-value">420 TB / 600 TB</span>
              </div>
              <a-progress :percent="0.7" :stroke-width="8" :show-text="false" />
            </div>
            <div class="pool-item">
              <div class="pool-header">
                <span class="pool-name">开发测试池</span>
                <span class="pool-value">85 TB / 200 TB</span>
              </div>
              <a-progress :percent="0.425" :stroke-width="8" :show-text="false" />
            </div>
            <div class="pool-item">
              <div class="pool-header">
                <span class="pool-name">备份归档池</span>
                <span class="pool-value">180 TB / 400 TB</span>
              </div>
              <a-progress :percent="0.45" :stroke-width="8" :show-text="false" />
            </div>
            <div class="pool-item">
              <div class="pool-header">
                <span class="pool-name">对象存储池</span>
                <span class="pool-value pool-warning">475 TB / 500 TB</span>
              </div>
              <a-progress :percent="0.95" :stroke-width="8" :show-text="false" status="warning" />
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 卷列表 -->
    <!-- <a-row :gutter="16" class="info-row">
      <a-col :span="8">
        <a-card class="info-card">
          <div class="info-header">
            <span class="info-title">LUN使用情况</span>
            <IconArrowRise class="info-icon success" />
          </div>
          <div class="info-list">
            <div class="info-item">
              <span class="info-label">总LUN数</span>
              <span class="info-value">128</span>
            </div>
            <div class="info-item">
              <span class="info-label">已分配</span>
              <span class="info-value">98</span>
            </div>
            <div class="info-item">
              <span class="info-label">可用</span>
              <span class="info-value success">30</span>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card class="info-card">
          <div class="info-header">
            <span class="info-title">磁盘组状态</span>
            <a-tag color="green">健康</a-tag>
          </div>
          <div class="info-list">
            <div class="info-item">
              <span class="info-label">RAID组</span>
              <span class="info-value">12</span>
            </div>
            <div class="info-item">
              <span class="info-label">热备盘</span>
              <span class="info-value">8</span>
            </div>
            <div class="info-item">
              <span class="info-label">故障磁盘</span>
              <span class="info-value success">0</span>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card class="info-card">
          <div class="info-header">
            <span class="info-title">复制任务</span>
            <a-tag color="blue">同步中</a-tag>
          </div>
          <div class="info-list">
            <div class="info-item">
              <span class="info-label">本地快照</span>
              <span class="info-value">256</span>
            </div>
            <div class="info-item">
              <span class="info-label">远程复制</span>
              <span class="info-value">12 任务</span>
            </div>
            <div class="info-item">
              <span class="info-label">RPO达成</span>
              <span class="info-value success">100%</span>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <a-card class="table-card">
      <template #title>
        <div class="table-header">
          <span class="table-title">存储设备列表</span>
          <a-select v-model="filterType" style="width: 120px" placeholder="全部类型" allow-clear>
            <a-option value="">全部类型</a-option>
            <a-option value="SAN">SAN存储</a-option>
            <a-option value="NAS">NAS存储</a-option>
            <a-option value="backup">备份存储</a-option>
            <a-option value="object">对象存储</a-option>
          </a-select>
        </div>
      </template>
      <a-table :columns="columns" :data="filteredDevices" :loading="loading" :pagination="false">
        <template #status="{ record }">
          <a-tag v-if="record.status === 'online'" color="green">在线</a-tag>
          <a-tag v-else-if="record.status === 'error'" color="orange">异常</a-tag>
          <a-tag v-else-if="record.status === 'offline'" color="red">离线</a-tag>
          <a-tag v-else color="gray">未知</a-tag>
        </template>
        <template #used="{ record }">
          <a-progress v-if="record.usedPercent > 0" :percent="record.usedPercent / 100" :stroke-width="6" :show-text="false" />
          <span v-else>-</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { IconStorage, IconDriveFile, IconFile, IconExclamationCircle, IconArrowRise } from '@arco-design/web-vue/es/icon'
import Chart from '@/components/chart/index.vue'
import { fetchStorageList, type StorageItem } from '@/api/ops/storage'

/** 表格数据项 */
interface TableDevice {
  id: number
  name: string
  type: string
  model: string
  status: string
  capacity: string
  usedPercent: number
  iops: string
  latency: string
}

const loading = ref(false)
const filterType = ref('')
const storageList = ref<StorageItem[]>([])

const loadStorageList = async () => {
  loading.value = true
  try {
    const res = await fetchStorageList({ size: 100 })
    if (res && res.code === 0 && res.details) {
      storageList.value = res.details.data || []
    }
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadStorageList()
})

const storageDevices = computed<TableDevice[]>(() => {
  return storageList.value.map((item) => ({
    id: item.id,
    name: item.name,
    type: item.type,
    model: item.description || '-',
    status: item.status,
    capacity: '-',
    usedPercent: 0,
    iops: '-',
    latency: item.response_time ? `${item.response_time.toFixed(1)}ms` : '-',
  }))
})

const statsData = computed(() => {
  const total = storageList.value.length
  const online = storageList.value.filter((s) => s.status === 'online').length
  const offline = total - online
  const warning = storageList.value.filter((s) => s.status === 'error').length
  return { total, online, offline, warning }
})

const filteredDevices = computed(() => {
  if (!filterType.value) return storageDevices.value
  return storageDevices.value.filter((d) => d.type === filterType.value)
})

const columns = [
  { title: '存储名称', dataIndex: 'name', width: 140 },
  { title: '类型', dataIndex: 'type', width: 100 },
  { title: '型号', dataIndex: 'model', width: 160 },
  { title: '状态', slotName: 'status', width: 100 },
  { title: '总容量', dataIndex: 'capacity', width: 100 },
  { title: '使用率', slotName: 'used', width: 160 },
  { title: 'IOPS', dataIndex: 'iops', width: 100 },
  { title: '延迟', dataIndex: 'latency', width: 100 },
]

// I/O 吞吐量图表配置
const ioChartOptions = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
  },
  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: 'IOPS',
  },
  series: [
    {
      name: '读取',
      type: 'line',
      smooth: true,
      areaStyle: {
        opacity: 0.3,
      },
      lineStyle: {
        width: 2,
      },
      itemStyle: {
        color: '#3b82f6',
      },
      data: [25000, 15000, 52000, 68000, 58000, 35000, 22000],
    },
    {
      name: '写入',
      type: 'line',
      smooth: true,
      areaStyle: {
        opacity: 0.3,
      },
      lineStyle: {
        width: 2,
      },
      itemStyle: {
        color: '#22c55e',
      },
      data: [18000, 12000, 38000, 45000, 42000, 28000, 16000],
    },
  ],
}
</script>

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

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

.stats-card {
  height: 100%;
}

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

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

  &.icon-blue {
    background: #e8fffb;
    color: #14c9c9;
  }

  &.icon-green {
    background: #e8ffea;
    color: #00b42a;
  }

  &.icon-orange {
    background: #fff7e8;
    color: #ff7d00;
  }
}

.stats-info {
  flex: 1;
}

.stats-title {
  font-size: 14px;
  color: #86909c;
}

.stats-value {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin: 4px 0;
}

.stats-desc {
  font-size: 12px;
  color: #86909c;

  &.stats-warning {
    color: #ff7d00;
  }
}

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

.chart-card {
  height: 100%;
}

.card-header {
  .card-title {
    font-size: 14px;
    font-weight: 500;
    color: #1d2129;
  }

  .card-subtitle {
    font-size: 12px;
    color: #86909c;
    margin-top: 2px;
  }
}

.chart-legend {
  display: flex;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #86909c;
}

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

  &.dot-blue {
    background: #3b82f6;
  }

  &.dot-green {
    background: #22c55e;
  }
}

.chart-container {
  height: 280px;
}

.storage-pool-list {
  padding: 8px 0;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pool-item {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.pool-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pool-name {
  font-size: 14px;
  color: #4e5969;
}

.pool-value {
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;

  &.pool-warning {
    color: #ff7d00;
  }
}

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

.info-card {
  height: 100%;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  height: 24px;
}

.info-title {
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;
}

.info-icon {
  font-size: 16px;

  &.success {
    color: #00b42a;
  }
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
}

.info-label {
  font-size: 14px;
  color: #86909c;
}

.info-value {
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;

  &.success {
    color: #00b42a;
  }
}

.table-card {
  margin-top: 16px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.table-title {
  font-size: 16px;
  font-weight: 500;
}
</style>
