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

import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { Clock, Server, ArrowRight } from 'lucide-react';
import { dashboardStatsApi, kubernetesApi } from '@/api';
import { StatStrip } from '@/components/ui/stat-strip';
import { CostOverviewCard, TopResourceUsageCard, ResourceUsageCard } from './DashboardCharts';
import {
  AlertMessagesCard,
  CertificateExpiryCard,
  ReleaseHistoryCard,
  OpsOverviewCard,
  KubernetesClusterCard,
} from './DashboardRecent';
import type {
  DashboardRelease,
  DashboardCluster,
  DashboardAutomationStats,
  DashboardOpsStats,
} from './DashboardRecent';
import { SkeletonDashboard } from '@/components/layout/SkeletonCard';
import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common';
import type { AlertEventRecord, CertExpiryRecord } from '@/types';

/**
 * Dashboard - 优化后的仪表盘页面
 * 
 * 优化点：
 * 1. 使用 SkeletonDashboard 骨架屏替代简单 spinner
 * 2. 页面结构使用 dg-page* 工具类
 * 3. 统计卡片添加 staggered fade-in 动画
 * 4. 操作按钮使用 dg-btn* 工具类
 * 5. 更好的空状态处理
 * 6. 添加页面标题区域的操作入口
 */
export function Dashboard() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [initialLoading, setInitialLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [stats, setStats] = useState<JsonData>(null);
  const [clusters, setClusters] = useState<DashboardCluster[]>([]);
  const [alerts, setAlerts] = useState<AlertEventRecord[]>([]);
  const [releases, setReleases] = useState<DashboardRelease[]>([]);
  const [expCerts, setExpCerts] = useState<CertExpiryRecord[]>([]);
  const [metrics, setMetrics] = useState<JsonData[]>([]);

  const refreshData = useCallback(async () => {
    setRefreshing(true);
    try {
      const [statsRes, clustersRes, alertsRes, releasesRes, metricsRes] = await Promise.all([
        dashboardStatsApi.getStats().catch((e) => {
          console.error('Failed to fetch dashboard stats:', e);
          return null;
        }),
        kubernetesApi.getClusters().catch((e) => {
          console.error('Failed to fetch k8s clusters:', e);
          return null;
        }),
        dashboardStatsApi.getAlerts(10).catch((e) => {
          console.error('Failed to fetch dashboard alerts:', e);
          return null;
        }),
        dashboardStatsApi.getReleases(5).catch((e) => {
          console.error('Failed to fetch dashboard releases:', e);
          return null;
        }),
        dashboardStatsApi.getMetrics(6).catch((e) => {
          console.error('Failed to fetch metrics:', e);
          return [];
        }),
      ]);

      setStats(statsRes);
      setClusters(clustersRes?.list ?? []);
      setAlerts(Array.isArray(alertsRes) ? alertsRes : []);
      setReleases(Array.isArray(releasesRes) ? releasesRes : []);
      setExpCerts(statsRes?.expiring_certs ?? []);
      setMetrics(Array.isArray(metricsRes) ? metricsRes : []);
    } catch (error) {
      console.error('Failed to load dashboard data:', error);
    } finally {
      setRefreshing(false);
      setInitialLoading(false);
    }
  }, []);

  useEffect(() => {
    refreshData();
    // 每 30 秒自动刷新（集群列表含实时统计，不宜过频）// Logan.Li
    const interval = setInterval(refreshData, 30_000);
    return () => clearInterval(interval);
  }, [refreshData]);

  if (initialLoading) {
    return <SkeletonDashboard />;
  }

  const serverStats = stats?.server_stats;
  const k8sStats = stats?.kubernetes_stats;
  const alertStats = stats?.alert_stats;
  const costStats = stats?.cost_stats;
  const automationStats = stats?.automation_stats as DashboardAutomationStats | undefined;
  const opsStats = stats?.ops_stats as DashboardOpsStats | undefined;


  return (
    <PageShell
      variant="workspace"
      title={t('dashboard.title')}
      subtitle={`${t('dashboard.subtitle')} · ${t('dashboard.lastUpdated')}: ${new Date().toLocaleTimeString()}`}
      actions={(
        <>
          <Button
            variant="outline"
            className="dg-btn-secondary"
            onClick={refreshData}
            disabled={refreshing}
          >
            <Clock className={cn('h-4 w-4', refreshing && 'animate-spin')} />
            {refreshing ? t('dashboard.refreshing') : t('dashboard.refresh')}
          </Button>
          <Button className="dg-btn-primary" onClick={() => navigate('/servers')}>
            <Server className="h-4 w-4" />
            {t('dashboard.servers')}
            <ArrowRight className="h-3.5 w-3.5" />
          </Button>
        </>
      )}
      metrics={(
        <StatStrip
          items={[
            { label: t('dashboard.stat.servers'), value: serverStats?.total ?? 0, color: 'blue' },
            { label: t('dashboard.stat.kubernetes'), value: k8sStats?.total ?? 0, color: 'purple' },
            { label: t('dashboard.stat.running'), value: serverStats?.running ?? 0, color: 'emerald' },
            { label: t('dashboard.stat.cronJobs'), value: automationStats?.cron_job_count ?? 0, color: 'cyan' },
            { label: t('dashboard.stat.siteProbes'), value: opsStats?.site_task_count ?? 0, color: 'green' },
            { label: t('dashboard.stat.alerts'), value: alertStats?.firing ?? 0, color: alertStats?.firing > 0 ? 'red' : 'muted' },
            { label: t('dashboard.stat.monthlyCost'), value: `¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`, color: 'amber' },
          ]}
        />
      )}
      contentClassName="space-y-6"
    >
      {/* 资源使用率趋势 — 第一行 */}
      <div className="animate-fade-in-delay-1">
        <ResourceUsageCard
          avgCpu={Number(serverStats?.avg_cpu ?? 0)}
          avgMemory={Number(serverStats?.avg_memory ?? 0)}
          avgDisk={Number(serverStats?.avg_disk ?? 0)}
          totalCpu={Number(serverStats?.total_cpu ?? 0)}
          totalMemory={Number(serverStats?.total_memory ?? 0)}
          usedMemory={Number(serverStats?.used_memory ?? 0)}
          totalDisk={Number(serverStats?.total_disk ?? 0)}
          usedDisk={Number(serverStats?.used_disk ?? 0)}
          metrics={metrics}
        />
      </div>

      {/* 运维概览 → K8s 集群 → Top5 资源使用 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in-delay-2">
        <OpsOverviewCard
          automation={automationStats}
          ops={opsStats}
          serverCount={serverStats?.total}
          hostMonitorCount={serverStats?.running}
          firingAlerts={alertStats?.firing}
        />
        <KubernetesClusterCard clusters={clusters} />
        <TopResourceUsageCard topUsage={stats?.top_resource_usage} />
      </div>

      {/* 费用概览 & 发布历史 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in-delay-3">
        <CostOverviewCard costStats={costStats} />
        <ReleaseHistoryCard releases={releases} />
      </div>

      {/* 告警消息 & 证书到期提醒 — 置底 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in-delay-4">
        <AlertMessagesCard alerts={alerts} />
        <CertificateExpiryCard expCerts={expCerts} />
      </div>
    </PageShell>
  );
}