<script lang="ts">
const parsePercentMetric = (raw?: string) => {
  const trimmed = raw?.trim();

  if (!!trimmed) {
    const value = Number(trimmed);
    if (Number.isFinite(value)) {
      return value;
    }
  }

  return undefined;
};
</script>

<script setup lang="ts">
import { ClockCheckIcon, CpuIcon, HardDriveIcon, MemoryStickIcon } from 'lucide-vue-next';
import { NCard, NFlex, NIcon, NProgress, type ProgressStatus } from 'naive-ui';
import { computed, toRefs } from 'vue';

const props = defineProps<{
  cpuUsage?: string;
  memUsage?: string;
  diskUsage?: string;
  runningTime?: string;
  cpuUsageLabel?: string;
  memUsageLabel?: string;
  diskUsageLabel?: string;
  runningTimeLabel?: string;
}>();

const { cpuUsage, memUsage, diskUsage, runningTime, cpuUsageLabel, memUsageLabel, diskUsageLabel, runningTimeLabel } = toRefs(props);

const showCard = computed(() => {
  return Object.values({ cpuUsage, memUsage, diskUsage, runningTime }).some((refValue) => !!refValue.value);
});

const cpuPercent = computed(() => {
  return parsePercentMetric(cpuUsage.value);
});

const memPercent = computed(() => {
  return parsePercentMetric(memUsage.value);
});

const diskPercent = computed(() => {
  return parsePercentMetric(diskUsage.value);
});

const formattedRunningTime = computed(() => {
  return (runningTime?.value ?? '-').replace('days', '天');
});

const getProgressPercentage = (percent: number) => {
  if (percent < 0) return 0;
  if (percent > 100) return 100;
  return percent;
};

const getProgressStatus = (percent: number): ProgressStatus => {
  if (percent >= 90) return 'error';
  if (percent >= 70) return 'warning';
  return 'success';
};
</script>

<template>
  <NCard v-if="showCard" hoverable size="small">
    <template #header>
      <span>硬件占用率</span>
    </template>
    <template #default>
      <NFlex vertical>
        <NFlex v-if="cpuPercent" style="width: 100%" align="center" :wrap="false">
          <NIcon :component="CpuIcon" />
          <span style="word-break: keep-all">{{ cpuUsageLabel || 'CPU' }}</span>
          <NProgress :percentage="getProgressPercentage(cpuPercent)" :status="getProgressStatus(cpuPercent)">{{ cpuPercent }}%</NProgress>
        </NFlex>
        <NFlex v-if="memPercent" style="width: 100%" align="center" :wrap="false">
          <NIcon :component="MemoryStickIcon" />
          <span style="word-break: keep-all">{{ memUsageLabel || '内存' }}</span>
          <NProgress :percentage="getProgressPercentage(memPercent)" :status="getProgressStatus(memPercent)">{{ memPercent }}%</NProgress>
        </NFlex>
        <NFlex v-if="diskPercent" style="width: 100%" align="center" :wrap="false">
          <NIcon :component="HardDriveIcon" />
          <span style="word-break: keep-all">{{ diskUsageLabel || '磁盘' }}</span>
          <NProgress :percentage="getProgressPercentage(diskPercent)" :status="getProgressStatus(diskPercent)">{{ diskPercent }}%</NProgress>
        </NFlex>
        <NFlex v-if="runningTime" style="width: 100%" align="center" :wrap="false">
          <NIcon :component="ClockCheckIcon" />
          <span>{{ runningTimeLabel || '运行时间' }}</span>
          <span>{{ formattedRunningTime }}</span>
        </NFlex>
      </NFlex>
    </template>
  </NCard>
</template>

<style scoped lang="scss"></style>
