// 主机监控 — 基础监控 Tab (CPU/IO等待/内存/可用内存/Swap/负载)
import { Cpu, Clock, Server, HardDrive, Activity } from 'lucide-react';
import type { AggType, BucketPoint, HostRecord, RefLine } from '../types';
import { MetricChartCard } from '../MetricChartCard';
import i18n from '@/i18n';

export interface BasicTabProps {
  metrics: {
    cpu: BucketPoint[]; iowait: BucketPoint[]; mem: BucketPoint[];
    memAvail: BucketPoint[]; swap: BucketPoint[]; load1: BucketPoint[];
  };
  latest: HostRecord;
  currentVal: (key: string, fallback?: string) => string;
  aggType: AggType;
  pctRefLines: RefLine[];
}

export function BasicTab({ metrics, latest, currentVal, aggType, pctRefLines }: BasicTabProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
      <MetricChartCard title={i18n.t('CPU 使用率(%)')} value={currentVal('cpu')} icon={<Cpu />} iconTone="blue"
        data={metrics.cpu} color="#3b82f6" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
      <MetricChartCard title={i18n.t('CPU IO等待(%)')} value={latest?.cpu_iowait != null ? `${(latest.cpu_iowait as number).toFixed(1)}%` : '--'} icon={<Clock />} iconTone="orange"
        data={metrics.iowait} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
      <MetricChartCard title={i18n.t('内存使用率(%)')} value={currentVal('mem')} icon={<Server />} iconTone="green"
        data={metrics.mem} color="#10b981" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
      <MetricChartCard title={i18n.t('可用内存(GB)')} value={latest?.mem_available != null ? `${(latest.mem_available as number).toFixed(1)}GB` : '--'} icon={<Server />} iconTone="green"
        data={metrics.memAvail} color="#34d399" unit="GB" domain={[0, 'auto']} aggType={aggType} />
      <MetricChartCard title={i18n.t('Swap 使用率(%)')} value={currentVal('swap')} icon={<HardDrive />} iconTone="red"
        data={metrics.swap} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} />
      <MetricChartCard title={i18n.t('系统负载(1m)')} value={currentVal('load1')} icon={<Activity />} iconTone="purple"
        data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']} aggType={aggType} />
    </div>
  );
}