aiops/frontend/src/components/dashboard/DashboardCharts.tsx

import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  BarChart,
  Bar,
} from 'recharts';
import { Cpu, HardDrive, Activity, MemoryStick, Database } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { JsonData } from '@/types/common';

// Cloud platform color mapping (theme-aware)
const CLOUD_COLORS: Record<string, string> = {
  '阿里云': '#ff6a00',
  aliyun: '#ff6a00',
  AWS: '#ff9900',
  aws: '#ff9900',
  '腾讯云': '#006eff',
  tencent: '#006eff',
  '华为云': '#ff0000',
  huawei: '#ff0000',
  Azure: '#0078d4',
  azure: '#0078d4',
};
const FALLBACK_CLOUD_COLORS = ['#ff6a00', '#ff9900', '#006eff', '#ff0000', '#0078d4', '#10b981', '#a855f7', '#ec4899'];

export function computeMonthChange( monthTrend: JsonData[]): {
  pct: number;
  label: string;
  direction: 'up' | 'down' | 'neutral';
} {
  if (!monthTrend || monthTrend.length < 2) {
    return { pct: 0, label: i18n.t('dashboard.cost.noData'), direction: 'neutral' };
  }
  const cur = Number(monthTrend[monthTrend.length - 1].cost ?? 0);
  const prev = Number(monthTrend[monthTrend.length - 2].cost ?? 0);
  if (prev === 0) {
    return { pct: 0, label: cur > 0 ? i18n.t('dashboard.cost.newCost') : i18n.t('dashboard.cost.flat'), direction: 'neutral' };
  }
  const pct = ((cur - prev) / prev) * 100;
  const direction = pct > 0.05 ? 'up' : pct < -0.05 ? 'down' : 'neutral';
  const label = `${pct > 0 ? '+' : ''}${pct.toFixed(1)}% ${i18n.t('dashboard.cost.vsLastMonth')}`;
  return { pct, label, direction };
}

function generateMetricsData(avgCpu: number, avgMemory: number, avgDisk: number, points = 24) {
  const data = [];
  for (let i = points - 1; i >= 0; i--) {
    const d = new Date(Date.now() - i * 60 * 60 * 1000);
    data.push({
      time: `${d.getHours().toString().padStart(2, '0')}:00`,
      cpu: Number(Math.max(0, Math.min(100, avgCpu + (Math.random() - 0.5) * 15)).toFixed(1)),
      memory: Number(Math.max(0, Math.min(100, avgMemory + (Math.random() - 0.5) * 10)).toFixed(1)),
      disk: Number(Math.max(0, Math.min(100, avgDisk + (Math.random() - 0.5) * 5)).toFixed(1)),
    });
  }
  return data;
}

function buildMetricsFromReal( metrics: JsonData[], avgDisk: number) {
  if (!metrics || metrics.length === 0) return [];
  const buckets: Record<string, { cpu?: number; memory?: number }> = {};
  for (const m of metrics) {
    const ts = m.timestamp;
    if (!ts) continue;
    const d = new Date(ts);
    const label = `${d.getHours().toString().padStart(2, '0')}:00`;
    if (!buckets[label]) buckets[label] = {};
    if (m.name === 'cpu') buckets[label].cpu = Number(m.value) || 0;
    if (m.name === 'memory') buckets[label].memory = Number(m.value) || 0;
  }
  return Object.entries(buckets)
    .sort((a, b) => a[0].localeCompare(b[0]))
    .map(([time, v]) => ({
      time,
      cpu: Number((v.cpu ?? 0).toFixed(1)),
      memory: Number((v.memory ?? 0).toFixed(1)),
      disk: Number(avgDisk.toFixed(1)),
    }));
}

// Custom tooltip for charts (theme-aware)
function CustomTooltip({ active, payload, label }: JsonData) {
  if (!active || !payload) return null;
  return (
    <div className="chart-tooltip px-3 py-2">
      <p className="text-xs font-medium mb-1.5" style={{ color: 'var(--dg-text-secondary)' }}>{label}</p>
      {payload.map((entry: JsonData, index: number) => (
        <div key={index} className="flex items-center gap-2 text-xs">
          <span className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
          <span style={{ color: 'var(--dg-text-muted)' }}>{entry.name}:</span>
          <span className="font-medium" style={{ color: 'var(--dg-text-primary)' }}>
            {typeof entry.value === 'number' ? `${entry.value}%` : entry.value}
          </span>
        </div>
      ))}
    </div>
  );
}

export function CostOverviewCard({ costStats }: { costStats: JsonData }) {
  const { t } = useTranslation();
  const cloudCosts: JsonData[] = costStats?.cloud_costs ?? [];
  const monthTrend: JsonData[] = costStats?.month_trend ?? [];

  const costData = cloudCosts.map((c, i) => ({
    name: c.cloud,
    value: c.cost,
    color: CLOUD_COLORS[c.cloud] || FALLBACK_CLOUD_COLORS[i % FALLBACK_CLOUD_COLORS.length],
  }));
  const monthlyData = monthTrend.map((m) => ({ month: m.month, cost: m.cost }));
  const totalCost = costStats?.total_cost ?? costData.reduce((sum, item) => sum + item.value, 0);
  const costChange = computeMonthChange(monthTrend);

  return (
    <Card className="dg-card dg-card-hover">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.cost.title')}</CardTitle>
            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.cost.description')}</CardDescription>
          </div>
          <div className="text-right">
            <p className="text-2xl font-bold text-[var(--dg-text-primary)] tracking-tight">
              ¥{Number(totalCost).toLocaleString()}
            </p>
            <p className={cn(
              'text-xs font-medium mt-0.5',
              costChange.direction === 'up' ? 'text-[var(--dg-green)]' :
              costChange.direction === 'down' ? 'text-[var(--dg-red)]' :
              'text-[var(--dg-text-muted)]'
            )}>
              {costChange.label}
            </p>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-sm text-[var(--dg-text-secondary)] mb-2">{t('dashboard.cost.distribution')}</p>
            <div className="h-[180px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={costData}
                    cx="50%"
                    cy="50%"
                    innerRadius={40}
                    outerRadius={70}
                    paddingAngle={2}
                    dataKey="value"
                    stroke="none"
                  >
                    {costData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip content={<CustomTooltip />} />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </div>
          <div>
            <p className="text-sm text-[var(--dg-text-secondary)] mb-2">{t('dashboard.cost.monthlyTrend')}</p>
            <div className="h-[180px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={monthlyData} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" className="chart-grid-stroke" stroke="var(--chart-grid)" />
                  <XAxis dataKey="month" stroke="var(--chart-axis)" fontSize={10} tickLine={false} axisLine={false} />
                  <YAxis stroke="var(--chart-axis)" fontSize={10} tickLine={false} axisLine={false} />
                  <Tooltip content={<CustomTooltip />} />
                  <Bar dataKey="cost" fill="var(--dg-blue)" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>
        <div className="mt-4 space-y-2">
          {costData.map((item) => (
            <div key={item.name} className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
                <span className="text-sm text-[var(--dg-text-secondary)]">{item.name}</span>
              </div>
              <span className="text-sm font-semibold text-[var(--dg-text-primary)]">
                ¥{Number(item.value).toLocaleString()}
              </span>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

export function TopResourceUsageCard({ topUsage }: { topUsage: JsonData}) {
  const { t } = useTranslation();
  const topCpuServers = (topUsage?.cpu ?? []).slice(0, 5);
  const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
  const topDiskServers = (topUsage?.disk ?? []).slice(0, 5);

  const renderList = ( items: JsonData[],
    color: string,
    BarColor: string,
    icon: React.ReactNode,
    label: string
  ) => (
    <div>
      <div className="flex items-center gap-2 mb-3">
        {icon}
        <span className="text-sm font-semibold text-[var(--dg-text-secondary)]">{label}</span>
      </div>
      <div className="space-y-2.5">
        {items.map((item, index) => {
          const usage = Number(item.usage ?? 0);
          return (
            <div key={item.id ?? index} className="flex items-center gap-2.5">
              <span className="text-xs font-mono text-[var(--dg-text-muted)] w-5 text-center">
                {index + 1}
              </span>
              <div className="flex-1 min-w-0">
                <p className="text-xs text-[var(--dg-text-secondary)] truncate font-medium">{item.hostname}</p>
                <div className="flex items-center gap-2 mt-1">
                  <div className="flex-1 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
                    <div
                      className={cn(
                        'h-full rounded-full transition-all duration-500',
                        usage > 80 ? 'bg-[var(--dg-red)]' : usage > 60 ? 'bg-[var(--dg-yellow)]' : BarColor
                      )}
                      style={{ width: `${Math.min(usage, 100)}%` }}
                    />
                  </div>
                  <span className={cn(
                    'text-xs font-mono font-medium w-12 text-right',
                    usage > 80 ? 'text-[var(--dg-red)]' : usage > 60 ? 'text-[var(--dg-yellow)]' : 'text-[var(--dg-text-muted)]'
                  )}>
                    {usage.toFixed(1)}%
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );

  return (
    <Card className="dg-card dg-card-hover">
      <CardHeader className="pb-2">
        <div>
          <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.topUsage.title')}</CardTitle>
          <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.topUsage.description')}</CardDescription>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-3 gap-4">
          {renderList(topCpuServers, 'blue', 'bg-[var(--dg-blue)]', <Cpu className="h-4 w-4 text-[var(--dg-blue)]" />, t('dashboard.topUsage.cpu'))}
          {renderList(topMemoryServers, 'emerald', 'bg-[var(--dg-green)]', <MemoryStick className="h-4 w-4 text-[var(--dg-green)]" />, t('dashboard.topUsage.memory'))}
          {renderList(topDiskServers, 'purple', 'bg-[var(--dg-purple)]', <Database className="h-4 w-4 text-[var(--dg-purple)]" />, t('dashboard.topUsage.disk'))}
        </div>
      </CardContent>
    </Card>
  );
}

export function ResourceUsageCard({
  avgCpu,
  avgMemory,
  avgDisk,
  totalCpu,
  totalMemory,
  usedMemory,
  totalDisk,
  usedDisk,
  metrics,
}: {
  avgCpu: number;
  avgMemory: number;
  avgDisk: number;
  totalCpu: number;
  totalMemory: number;
  usedMemory: number;
  totalDisk: number;
  usedDisk: number;
  metrics?: JsonData[];
}) {
  const realData = buildMetricsFromReal(metrics ?? [], avgDisk);
  const data = realData.length > 0 ? realData : generateMetricsData(avgCpu, avgMemory, avgDisk, 24);
  const { t } = useTranslation();

  return (
    <Card className="dg-card">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between flex-wrap gap-3">
          <div>
            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.resourceUsage.title')}</CardTitle>
            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.resourceUsage.description')}</CardDescription>
          </div>
          <div className="flex items-center gap-2">
            <Badge variant="outline" className="dg-badge-blue border">
              <Cpu className="h-3 w-3 mr-1" />
              {t('dashboard.resourceUsage.cpu')}
            </Badge>
            <Badge variant="outline" className="dg-badge-green border">
              <Activity className="h-3 w-3 mr-1" />
              {t('dashboard.resourceUsage.memory')}
            </Badge>
            <Badge variant="outline" className="dg-badge-purple border">
              <HardDrive className="h-3 w-3 mr-1" />
              {t('dashboard.resourceUsage.disk')}
            </Badge>
          </div>
        </div>
        {/* 总资源概览：在百分比趋势旁补充具体容量，避免“只看到百分比” // Logan.Li */}
        <div className="mt-3 flex flex-wrap items-center gap-3 text-xs">
          <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
            <Cpu className="h-3.5 w-3.5 text-[var(--dg-blue)]" />
            <span className="text-[var(--dg-text-secondary)]">CPU</span>
            <span className="font-medium text-[var(--dg-text-primary)]">{totalCpu} 核</span>
          </div>
          <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
            <MemoryStick className="h-3.5 w-3.5 text-[var(--dg-green)]" />
            <span className="text-[var(--dg-text-secondary)]">内存</span>
            <span className="font-medium text-[var(--dg-text-primary)]">{usedMemory} / {totalMemory} GB</span>
          </div>
          <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
            <HardDrive className="h-3.5 w-3.5 text-[var(--dg-purple)]" />
            <span className="text-[var(--dg-text-secondary)]">磁盘</span>
            <span className="font-medium text-[var(--dg-text-primary)]">{usedDisk} / {totalDisk} GB</span>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="h-[280px]">
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
              <defs>
                <linearGradient id="colorCpu" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="var(--dg-blue)" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="var(--dg-blue)" stopOpacity={0} />
                </linearGradient>
                <linearGradient id="colorMemory" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="var(--dg-green)" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="var(--dg-green)" stopOpacity={0} />
                </linearGradient>
                <linearGradient id="colorDisk" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="var(--dg-purple)" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="var(--dg-purple)" stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
              <XAxis dataKey="time" stroke="var(--chart-axis)" fontSize={12} tickLine={false} axisLine={false} />
              <YAxis stroke="var(--chart-axis)" fontSize={12} tickLine={false} axisLine={false} unit="%" />
              <Tooltip content={<CustomTooltip />} />
              <Area type="monotone" dataKey="cpu" stroke="var(--dg-blue)" fillOpacity={1} fill="url(#colorCpu)" strokeWidth={2} name={t('dashboard.resourceUsage.cpu')} />
              <Area type="monotone" dataKey="memory" stroke="var(--dg-green)" fillOpacity={1} fill="url(#colorMemory)" strokeWidth={2} name={t('dashboard.resourceUsage.memory')} />
              <Area type="monotone" dataKey="disk" stroke="var(--dg-purple)" fillOpacity={1} fill="url(#colorDisk)" strokeWidth={2} name={t('dashboard.resourceUsage.disk')} />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}