import { Progress, Flex, Typography } from 'antd';
import type { SystemInfo } from '@/types/api';

const { Text } = Typography;

function gaugeColor(percent: number): string {
  if (percent > 90) return '#ff4d4f';
  if (percent > 70) return '#faad14';
  return '#52c41a';
}

interface SystemGaugesProps {
  systemInfo: SystemInfo;
}

export default function SystemGauges({ systemInfo }: SystemGaugesProps) {
  const cpuPercent = Math.min(
    Math.round(((systemInfo.cpu.loadAvg[0] ?? 0) / systemInfo.cpu.cores) * 100),
    100,
  );

  return (
    <Flex justify="space-around" align="center" wrap="wrap" gap={8}>
      <div style={{ textAlign: 'center' }}>
        <Progress
          type="circle"
          percent={cpuPercent}
          size={72}
          strokeColor={gaugeColor(cpuPercent)}
          format={(p) => <span style={{ fontSize: 14 }}>{p}%</span>}
        />
        <div><Text type="secondary" style={{ fontSize: 11 }}>CPU</Text></div>
      </div>
      <div style={{ textAlign: 'center' }}>
        <Progress
          type="circle"
          percent={systemInfo.memory.usagePercent}
          size={72}
          strokeColor={gaugeColor(systemInfo.memory.usagePercent)}
          format={(p) => <span style={{ fontSize: 14 }}>{p}%</span>}
        />
        <div><Text type="secondary" style={{ fontSize: 11 }}>Memory</Text></div>
      </div>
      {systemInfo.disk && (
        <div style={{ textAlign: 'center' }}>
          <Progress
            type="circle"
            percent={systemInfo.disk.usagePercent}
            size={72}
            strokeColor={gaugeColor(systemInfo.disk.usagePercent)}
            format={(p) => <span style={{ fontSize: 14 }}>{p}%</span>}
          />
          <div><Text type="secondary" style={{ fontSize: 11 }}>Disk</Text></div>
        </div>
      )}
    </Flex>
  );
}
