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';

// 云平台颜色映射
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'];

// 计算月度环比变化（基于 month_trend 最后两个月）
export function computeMonthChange(monthTrend: any[]): {
  pct: number;
  label: string;
  direction: 'up' | 'down' | 'neutral';
} {
  if (!monthTrend || monthTrend.length < 2) {
    return { pct: 0, label: '暂无数据', 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 ? '新增费用' : '持平', 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)}% 较上月`;
  return { pct, label, direction };
}

// 根据平均值生成24小时趋势数据（无实时指标时使用）
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, avgCpu + (Math.random() - 0.5) * 15).toFixed(1)),
      memory: Number(Math.max(0, avgMemory + (Math.random() - 0.5) * 10).toFixed(1)),
      disk: Number(Math.max(0, avgDisk + (Math.random() - 0.5) * 5).toFixed(1)),
    });
  }
  return data;
}

// 成本费用卡片
export function CostOverviewCard({ costStats }: { costStats: any }) {
  const cloudCosts: any[] = costStats?.cloud_costs ?? [];
  const monthTrend: any[] = 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="bg-slate-900 border-slate-800">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-slate-100">云成本概览</CardTitle>
            <CardDescription className="text-slate-500">本月各云平台费用支出</CardDescription>
          </div>
          <div className="text-right">
            <p className="text-2xl font-bold text-slate-100">¥{Number(totalCost).toLocaleString()}</p>
            <p className={`text-xs ${
              costChange.direction === 'up'
                ? 'text-emerald-400'
                : costChange.direction === 'down'
                ? 'text-red-400'
                : 'text-slate-500'
            }`}>
              {costChange.label}
            </p>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <p className="text-sm text-slate-400 mb-2">费用分布</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"
                  >
                    {costData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip
                    contentStyle={{
                      backgroundColor: '#0f172a',
                      border: '1px solid #1e293b',
                      borderRadius: '6px',
                      color: '#f8fafc',
                    }}
                    formatter={(value: number) => `¥${value.toLocaleString()}`}
                  />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </div>
          <div>
            <p className="text-sm text-slate-400 mb-2">月度趋势</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" stroke="#1e293b" />
                  <XAxis dataKey="month" stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
                  <YAxis stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
                  <Tooltip
                    contentStyle={{
                      backgroundColor: '#0f172a',
                      border: '1px solid #1e293b',
                      borderRadius: '6px',
                      color: '#f8fafc',
                    }}
                    formatter={(value: number) => `¥${value.toLocaleString()}`}
                  />
                  <Bar dataKey="cost" fill="#3b82f6" 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-slate-300">{item.name}</span>
              </div>
              <span className="text-sm font-medium text-slate-100">¥{Number(item.value).toLocaleString()}</span>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// Top5 资源使用卡片
export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
  const topCpuServers = (topUsage?.cpu ?? []).slice(0, 5);
  const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
  const topDiskServers = (topUsage?.disk ?? []).slice(0, 5);

  const renderList = (
    items: any[],
    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-medium text-slate-300">{label}</span>
      </div>
      <div className="space-y-2">
        {items.map((item, index) => {
          const usage = Number(item.usage ?? 0);
          return (
            <div key={item.id ?? index} className="flex items-center gap-2">
              <span className="text-xs text-slate-500 w-4">{index + 1}</span>
              <div className="flex-1 min-w-0">
                <p className="text-xs text-slate-300 truncate">{item.hostname}</p>
                <div className="flex items-center gap-2">
                  <div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
                    <div
                      className={`h-full rounded-full ${
                        usage > 80 ? 'bg-red-400' : usage > 60 ? 'bg-amber-400' : BarColor
                      }`}
                      style={{ width: `${usage}%` }}
                    />
                  </div>
                  <span className={`text-xs ${
                    usage > 80 ? 'text-red-400' : usage > 60 ? 'text-amber-400' : 'text-slate-400'
                  }`}>
                    {usage.toFixed(1)}%
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );

  return (
    <Card className="bg-slate-900 border-slate-800">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-slate-100">Top5 资源使用</CardTitle>
            <CardDescription className="text-slate-500">CPU、内存、磁盘使用率最高</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-3 gap-4">
          {/* CPU Top5 */}
          {renderList(topCpuServers, 'blue', 'bg-blue-400', <Cpu className="h-4 w-4 text-blue-400" />, 'CPU')}
          {/* Memory Top5 */}
          {renderList(topMemoryServers, 'emerald', 'bg-emerald-400', <MemoryStick className="h-4 w-4 text-emerald-400" />, '内存')}
          {/* Disk Top5 */}
          {renderList(topDiskServers, 'purple', 'bg-purple-400', <Database className="h-4 w-4 text-purple-400" />, '磁盘')}
        </div>
      </CardContent>
    </Card>
  );
}

// 将后端 MetricData[] 时间序列转换为图表所需格式 { time, cpu, memory } // Logan.Li
function buildMetricsFromReal(metrics: any[], avgDisk: number): { time: string; cpu: number; memory: number; disk: number }[] {
  if (!metrics || metrics.length === 0) return [];
  // 按 timestamp 分组：同一时刻有 cpu + memory 两条记录
  const buckets: Record<string, { cpu?: number; memory?: number }> = {};
  for (const m of metrics) {
    const ts = m.timestamp;
    if (!ts) continue;
    // 提取 HH:MM 格式作为 X 轴标签
    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)), // 磁盘无历史序列，用平均值
    }));
}

// 资源使用率趋势卡片
export function ResourceUsageCard({
  avgCpu,
  avgMemory,
  avgDisk,
  metrics,
}: {
  avgCpu: number;
  avgMemory: number;
  avgDisk: number;
  metrics?: any[];
}) {
  // 优先使用真实 Agent 指标时间序列；无数据时回退到平均值生成（带随机波动） // Logan.Li
  const realData = buildMetricsFromReal(metrics ?? [], avgDisk);
  const data = realData.length > 0 ? realData : generateMetricsData(avgCpu, avgMemory, avgDisk, 24);

  return (
    <Card className="bg-slate-900 border-slate-800">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-slate-100">资源使用率趋势</CardTitle>
            <CardDescription className="text-slate-500">过去24小时系统资源使用情况</CardDescription>
          </div>
          <div className="flex items-center gap-2">
            <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
              <Cpu className="h-3 w-3 mr-1" />
              CPU
            </Badge>
            <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
              <Activity className="h-3 w-3 mr-1" />
              内存
            </Badge>
            <Badge variant="outline" className="border-purple-500/30 text-purple-400 bg-purple-500/10">
              <HardDrive className="h-3 w-3 mr-1" />
              磁盘
            </Badge>
          </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="#3b82f6" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
                </linearGradient>
                <linearGradient id="colorMemory" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
                </linearGradient>
                <linearGradient id="colorDisk" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="#a855f7" stopOpacity={0.3} />
                  <stop offset="95%" stopColor="#a855f7" stopOpacity={0} />
                </linearGradient>
              </defs>
              <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
              <XAxis dataKey="time" stroke="#475569" fontSize={12} tickLine={false} axisLine={false} />
              <YAxis stroke="#475569" fontSize={12} tickLine={false} axisLine={false} unit="%" />
              <Tooltip
                contentStyle={{
                  backgroundColor: '#0f172a',
                  border: '1px solid #1e293b',
                  borderRadius: '6px',
                  color: '#f8fafc',
                }}
              />
              <Area
                type="monotone"
                dataKey="cpu"
                stroke="#3b82f6"
                fillOpacity={1}
                fill="url(#colorCpu)"
                strokeWidth={2}
                name="CPU"
              />
              <Area
                type="monotone"
                dataKey="memory"
                stroke="#10b981"
                fillOpacity={1}
                fill="url(#colorMemory)"
                strokeWidth={2}
                name="内存"
              />
              <Area
                type="monotone"
                dataKey="disk"
                stroke="#a855f7"
                fillOpacity={1}
                fill="url(#colorDisk)"
                strokeWidth={2}
                name="磁盘"
              />
            </AreaChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}