import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { Clock, Server, Cloud, Bell, DollarSign, TrendingUp, TrendingDown, ArrowRight } from 'lucide-react';
import { dashboardStatsApi, serverApi, kubernetesApi } from '@/services/api';
import { StatCard } from './DashboardStats';
import { CostOverviewCard, TopResourceUsageCard, ResourceUsageCard, computeMonthChange } from './DashboardCharts';
import {
  AlertMessagesCard,
  CertificateExpiryCard,
  ReleaseHistoryCard,
  ServerStatusCard,
  KubernetesClusterCard,
} from './DashboardRecent';
import { SkeletonDashboard } from '@/components/layout/SkeletonCard';

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

  const refreshData = useCallback(async () => {
    setRefreshing(true);
    try {
      const [statsRes, serversRes, clustersRes, alertsRes, releasesRes, metricsRes] = await Promise.all([
        dashboardStatsApi.getStats().catch((e) => {
          console.error('Failed to fetch dashboard stats:', e);
          return null;
        }),
        serverApi.getServers({ page: 1, page_size: 100 }).catch((e) => {
          console.error('Failed to fetch servers:', 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);
      setServers(serversRes?.list ?? []);
      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();
    // 每 5 分钟自动刷新
    const interval = setInterval(refreshData, 5 * 60 * 1000);
    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 costChange = computeMonthChange(costStats?.month_trend);

  return (
    <div className="dg-page">
      {/* Page Header */}
      <div className="dg-page-header">
        <div>
          <h1 className="dg-page-title">仪表盘</h1>
          <p className="dg-page-subtitle">实时监控和运维概览 · 最后更新: {new Date().toLocaleTimeString('zh-CN')}</p>
        </div>
        <div className="dg-page-actions">
          <Button
            variant="outline"
            className="dg-btn-secondary"
            onClick={refreshData}
            disabled={refreshing}
          >
            <Clock className={cn('h-4 w-4', refreshing && 'animate-spin')} />
            {refreshing ? '刷新中' : '刷新'}
          </Button>
          <Button
            className="dg-btn-primary"
            onClick={() => navigate('/servers')}
          >
            <Server className="h-4 w-4" />
            服务器
            <ArrowRight className="h-3.5 w-3.5" />
          </Button>
        </div>
      </div>

      {/* Stats Grid with staggered animation */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="animate-fade-in-delay-1">
          <StatCard
            title="服务器总数"
            value={serverStats?.total ?? 0}
            description={`${serverStats?.running ?? 0} 台运行中`}
            icon={Server}
            trend={Number(serverStats?.error ?? 0) > 0 ? 'down' : 'neutral'}
            trendValue={Number(serverStats?.error ?? 0) > 0 ? `${serverStats?.error} 台异常` : '运行正常'}
            color="blue"
            onClick={() => navigate('/servers')}
          />
        </div>
        <div className="animate-fade-in-delay-2">
          <StatCard
            title="K8s集群"
            value={k8sStats?.total ?? 0}
            description={`${k8sStats?.healthy ?? 0} 个健康`}
            icon={Cloud}
            trend="neutral"
            trendValue="稳定"
            color="purple"
            onClick={() => navigate('/kubernetes')}
          />
        </div>
        <div className="animate-fade-in-delay-3">
          <StatCard
            title="待处理告警"
            value={alertStats?.firing ?? 0}
            description={`${alertStats?.critical ?? 0} 个严重`}
            icon={Bell}
            trend={Number(alertStats?.today_count ?? 0) > 0 ? 'up' : 'down'}
            trendValue={`本周 ${alertStats?.week_count ?? 0} 条`}
            color="rose"
            onClick={() => navigate('/alert-center')}
          />
        </div>
        <div className="animate-fade-in-delay-4">
          <StatCard
            title="本月云成本"
            value={`¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`}
            description={costChange.label}
            icon={DollarSign}
            trend={costChange.direction}
            trendValue={`${costChange.pct > 0 ? '+' : ''}${costChange.pct.toFixed(1)}%`}
            color="orange"
            onClick={() => navigate('/cloud-billing')}
          />
        </div>
      </div>

      {/* Resource Usage Chart */}
      <div className="animate-fade-in-delay-2">
        <ResourceUsageCard
          avgCpu={Number(serverStats?.avg_cpu ?? 0)}
          avgMemory={Number(serverStats?.avg_memory ?? 0)}
          avgDisk={Number(serverStats?.avg_disk ?? 0)}
          metrics={metrics}
        />
      </div>

      {/* Cost & Top Resource Usage */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in-delay-3">
        <CostOverviewCard costStats={costStats} />
        <TopResourceUsageCard topUsage={stats?.top_resource_usage} />
      </div>

      {/* Alert Messages & Certificate Expiry */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in-delay-3">
        <AlertMessagesCard alerts={alerts} />
        <CertificateExpiryCard expCerts={expCerts} />
      </div>

      {/* Bottom Row */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in-delay-4">
        <ReleaseHistoryCard releases={releases} />
        <ServerStatusCard servers={servers} />
        <KubernetesClusterCard clusters={clusters} />
      </div>
    </div>
  );
}