'use client';

import type { ReactNode } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import dynamic from 'next/dynamic';
import {
  AlertTriangle,
  BarChart3,
  Bell,
  CheckCircle2,
  Coins,
  CreditCard,
  Database,
  Eye,
  Home,
  Key,
  LayoutDashboard,
  ListChecks,
  Logs,
  Loader2,
  Menu,
  Package,
  PlugZap,
  Receipt,
  RefreshCw,
  Settings,
  Shield,
  Sparkles,
  Users,
  X,
  type LucideIcon,
} from 'lucide-react';
import { toast } from 'sonner';
import { useAuth } from '@/lib/auth-store';
import { useSiteConfig } from '@/lib/site-config';
import { cn } from '@/lib/utils';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

const ApiManagementTab = dynamic(() => import('@/components/admin/api-management-tab'), { ssr: false });
const UserManagementTab = dynamic(() => import('@/components/admin/user-management-tab'), { ssr: false });
const PricingTab = dynamic(() => import('@/components/admin/pricing-tab'), { ssr: false });
const OrderManagementTab = dynamic(() => import('@/components/admin/order-management-tab'), { ssr: false });
const PaymentTab = dynamic(() => import('@/components/admin/payment-tab'), { ssr: false });
const AnnouncementTab = dynamic(() => import('@/components/admin/announcement-tab'), { ssr: false });
const DataManagementTab = dynamic(() => import('@/components/admin/data-management-tab'), { ssr: false });
const SystemUpgradeTab = dynamic(() => import('@/components/admin/system-upgrade-tab'), { ssr: false });
const TaskManagementTab = dynamic(() => import('@/components/admin/task-management-tab'), { ssr: false });
const LogManagementTab = dynamic(() => import('@/components/admin/log-management-tab'), { ssr: false });
const SettingsTab = dynamic(() => import('@/components/admin/settings-tab'), { ssr: false });

type ConsoleView =
  | 'dashboard'
  | 'api'
  | 'users'
  | 'pricing'
  | 'orders'
  | 'payment'
  | 'announcements'
  | 'data'
  | 'upgrade'
  | 'tasks'
  | 'logs'
  | 'settings';

type NavItem = {
  value: ConsoleView;
  label: string;
  icon: LucideIcon;
  hidden?: boolean;
};

type NavGroup = {
  label: string;
  items: NavItem[];
};

type DashboardSummary = {
  generatedAt: string | null;
  platform: {
    totalVisits: number;
    databaseTime: string | null;
  };
  users: {
    total: number;
    active: number;
    disabled: number;
    admins: number;
    members: number;
    created7d: number;
  };
  works: {
    total: number;
    public: number;
    private: number;
    completed: number;
    failed: number;
    withResultUrl: number;
    created7d: number;
    resultUrlCoverage: number;
    byType: {
      text2img: number;
      img2img: number;
      text2video: number;
      img2video: number;
    };
  };
  tasks: {
    total: number;
    queued: number;
    running: number;
    succeeded: number;
    failed: number;
    latest: Array<{
      id: string;
      type: string;
      status: string;
      error: string | null;
      createdAt: string | null;
      updatedAt: string | null;
    }>;
  };
  orders: {
    total: number;
    pending: number;
    paid: number;
    cancelled: number;
    refunded: number;
    paidRevenue: number;
    paidRevenue7d: number;
    latest: Array<{
      id: string;
      orderNo: string;
      productName: string;
      amount: number;
      status: string;
      createdAt: string | null;
    }>;
  };
  providers: {
    total: number;
    active: number;
    inactive: number;
    image: number;
    video: number;
    text: number;
    incomplete: number;
    recommendationsTotal: number;
    recommendationsActive: number;
    userApiKeysTotal: number;
    userApiKeysActive: number;
  };
  announcements: {
    total: number;
    active: number;
    scheduled: number;
    expired: number;
  };
  system: {
    apiHealth: boolean;
    databaseHealth: boolean;
    storageHealth?: boolean;
    storageDirConfigured?: boolean;
    worksPersisted?: number;
    worksTotal?: number;
    logsTotal?: number;
    logsErrors?: number;
    logsCreated24h?: number;
  };
};

const EMPTY_DASHBOARD_SUMMARY: DashboardSummary = {
  generatedAt: null,
  platform: { totalVisits: 0, databaseTime: null },
  users: { total: 0, active: 0, disabled: 0, admins: 0, members: 0, created7d: 0 },
  works: {
    total: 0,
    public: 0,
    private: 0,
    completed: 0,
    failed: 0,
    withResultUrl: 0,
    created7d: 0,
    resultUrlCoverage: 1,
    byType: { text2img: 0, img2img: 0, text2video: 0, img2video: 0 },
  },
  tasks: { total: 0, queued: 0, running: 0, succeeded: 0, failed: 0, latest: [] },
  orders: { total: 0, pending: 0, paid: 0, cancelled: 0, refunded: 0, paidRevenue: 0, paidRevenue7d: 0, latest: [] },
  providers: {
    total: 0,
    active: 0,
    inactive: 0,
    image: 0,
    video: 0,
    text: 0,
    incomplete: 0,
    recommendationsTotal: 0,
    recommendationsActive: 0,
    userApiKeysTotal: 0,
    userApiKeysActive: 0,
  },
  announcements: { total: 0, active: 0, scheduled: 0, expired: 0 },
  system: {
    apiHealth: false,
    databaseHealth: false,
    storageHealth: false,
    storageDirConfigured: false,
    worksPersisted: 0,
    worksTotal: 0,
    logsTotal: 0,
    logsErrors: 0,
    logsCreated24h: 0,
  },
};

const VIEW_TITLES: Record<ConsoleView, { title: string; description: string }> = {
  dashboard: { title: '仪表盘', description: '查看运营、任务、支付、模型和系统健康概览' },
  api: { title: 'API 管理', description: '配置供应商、模型推荐与系统 API' },
  users: { title: '用户管理', description: '管理用户、额度、会员与账号状态' },
  pricing: { title: '价格设置', description: '维护套餐价格与积分规则' },
  orders: { title: '订单管理', description: '查看订单并处理支付状态' },
  payment: { title: '支付配置', description: '配置可用支付方式' },
  announcements: { title: '公告管理', description: '创建和维护站点弹窗公告' },
  data: { title: '数据管理', description: '导出、导入与恢复业务数据' },
  upgrade: { title: '系统升级', description: '上传升级包，执行热更新、冷更新与失败自动回滚' },
  tasks: { title: '任务管理', description: '查看生成任务状态并清理任务' },
  logs: { title: '系统日志', description: '查看平台运行、登录、安全和管理操作日志' },
  settings: { title: '系统设置', description: '维护站点信息、邮箱与通知设置' },
};

function useAdminDashboard(accessToken: string | null) {
  const [summary, setSummary] = useState<DashboardSummary>(EMPTY_DASHBOARD_SUMMARY);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async ({ silent = false, showSuccess = false }: { silent?: boolean; showSuccess?: boolean } = {}) => {
    if (!accessToken) {
      setLoading(false);
      return;
    }

    if (silent) {
      setRefreshing(true);
    } else {
      setLoading(true);
    }
    setError(null);

    try {
      const res = await fetch('/api/admin/dashboard', {
        headers: { Authorization: `Bearer ${accessToken}` },
        cache: 'no-store',
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.error || '仪表盘数据加载失败');
      setSummary({ ...EMPTY_DASHBOARD_SUMMARY, ...data });
      if (showSuccess) toast.success('仪表盘已刷新');
    } catch (err) {
      const message = err instanceof Error ? err.message : '仪表盘数据加载失败';
      setError(message);
      if (!silent || showSuccess) toast.error(message);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, [accessToken]);

  useEffect(() => {
    let cancelled = false;

    async function initialLoad() {
      if (!accessToken) {
        setLoading(false);
        return;
      }

      setLoading(true);
      setError(null);
      try {
        const res = await fetch('/api/admin/dashboard', {
          headers: { Authorization: `Bearer ${accessToken}` },
          cache: 'no-store',
        });
        const data = await res.json().catch(() => ({}));
        if (!res.ok) throw new Error(data.error || '仪表盘数据加载失败');
        if (!cancelled) setSummary({ ...EMPTY_DASHBOARD_SUMMARY, ...data });
      } catch (err) {
        const message = err instanceof Error ? err.message : '仪表盘数据加载失败';
        if (!cancelled) {
          setError(message);
          toast.error(message);
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    initialLoad();
    const timer = window.setInterval(() => {
      if (!cancelled) load({ silent: true });
    }, 30000);

    return () => {
      cancelled = true;
      window.clearInterval(timer);
    };
  }, [accessToken, load]);

  return { summary, loading, refreshing, error, refresh: () => load({ silent: true, showSuccess: true }) };
}

export default function ConsoleDashboardPage() {
  const { isLoggedIn, isAdmin, user, accessToken, logout } = useAuth();
  const { config: siteConfig } = useSiteConfig();
  const router = useRouter();
  const [mounted, setMounted] = useState(false);
  const [activeView, setActiveView] = useState<ConsoleView>('dashboard');
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const membershipEnabled = siteConfig.membershipEnabled !== false;

  const navGroups = useMemo<NavGroup[]>(() => {
    const groups: NavGroup[] = [
      {
        label: '总览',
        items: [{ value: 'dashboard', label: '仪表盘', icon: LayoutDashboard }],
      },
      {
        label: '运营',
        items: [
          { value: 'users', label: '用户管理', icon: Users },
          { value: 'pricing', label: '价格设置', icon: Coins, hidden: !membershipEnabled },
          { value: 'orders', label: '订单管理', icon: Receipt, hidden: !membershipEnabled },
          { value: 'payment', label: '支付配置', icon: CreditCard, hidden: !membershipEnabled },
        ],
      },
      {
        label: '创作',
        items: [
          { value: 'api', label: 'API 管理', icon: Key },
          { value: 'tasks', label: '任务管理', icon: ListChecks },
          { value: 'announcements', label: '公告管理', icon: Bell },
        ],
      },
      {
        label: '系统',
        items: [
          { value: 'data', label: '数据管理', icon: Database },
          { value: 'upgrade', label: '系统升级', icon: Package },
          { value: 'logs', label: '系统日志', icon: Logs },
          { value: 'settings', label: '系统设置', icon: Settings },
        ],
      },
    ];

    return groups
      .map(group => ({ ...group, items: group.items.filter(item => !item.hidden) }))
      .filter(group => group.items.length > 0);
  }, [membershipEnabled]);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!membershipEnabled && ['pricing', 'orders', 'payment'].includes(activeView)) {
      setActiveView('dashboard');
    }
  }, [membershipEnabled, activeView]);

  useEffect(() => {
    if (!mounted) return;
    if (!isLoggedIn || !isAdmin || !accessToken) {
      router.replace('/console');
    }
  }, [mounted, isLoggedIn, isAdmin, accessToken, router]);

  if (!mounted) {
    return <div className="min-h-screen bg-background" />;
  }

  if (!isLoggedIn || !isAdmin || !accessToken) {
    return <div className="min-h-screen bg-background" />;
  }

  const title = VIEW_TITLES[activeView];

  const handleLogout = () => {
    logout();
    router.replace('/console');
  };

  const navigateToView = (view: ConsoleView) => {
    setActiveView(view);
    setMobileNavOpen(false);
  };

  return (
    <div className="fixed inset-0 flex overflow-hidden bg-background text-foreground">
      <aside className="hidden w-[17rem] shrink-0 border-r border-border/70 bg-sidebar/95 lg:flex lg:flex-col">
        <ConsoleSidebar
          activeView={activeView}
          navGroups={navGroups}
          onNavigate={navigateToView}
          onBackHome={() => router.push('/')}
          onLogout={handleLogout}
          userName={user?.nickname || '管理员'}
          userEmail={user?.email || ''}
        />
      </aside>

      {mobileNavOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <button
            type="button"
            aria-label="关闭导航"
            className="absolute inset-0 bg-black/55"
            onClick={() => setMobileNavOpen(false)}
          />
          <aside className="absolute inset-y-0 left-0 flex w-[min(86vw,21rem)] flex-col border-r border-border bg-sidebar shadow-2xl">
            <ConsoleSidebar
              activeView={activeView}
              navGroups={navGroups}
              onNavigate={navigateToView}
              onBackHome={() => router.push('/')}
              onLogout={handleLogout}
              userName={user?.nickname || '管理员'}
              userEmail={user?.email || ''}
              closeButton={
                <Button variant="ghost" size="sm" className="h-9 w-9 p-0" onClick={() => setMobileNavOpen(false)}>
                  <X className="h-4 w-4" />
                </Button>
              }
            />
          </aside>
        </div>
      )}

      <div className="flex min-w-0 flex-1 flex-col">
        <header className="flex h-16 shrink-0 items-center justify-between border-b border-border/70 bg-background/95 px-4 backdrop-blur lg:px-6">
          <div className="flex min-w-0 items-center gap-3">
            <Button variant="ghost" size="sm" className="h-9 w-9 p-0 lg:hidden" onClick={() => setMobileNavOpen(true)}>
              <Menu className="h-5 w-5" />
            </Button>
            <div className="min-w-0">
              <h1 className="truncate text-lg font-semibold sm:text-xl">{title.title}</h1>
              <p className="hidden truncate text-xs text-muted-foreground sm:block">{title.description}</p>
            </div>
          </div>
          <div className="flex shrink-0 items-center gap-2">
            <Badge variant="secondary" className="hidden sm:inline-flex">
              管理员
            </Badge>
          </div>
        </header>

        <main className="min-h-0 flex-1 overflow-y-auto">
          <div className="min-h-full w-full px-4 py-5 sm:px-6 lg:px-8">
            <ConsoleContent activeView={activeView} setActiveView={setActiveView} />
          </div>
        </main>
      </div>
    </div>
  );
}

function ConsoleSidebar({
  activeView,
  navGroups,
  onNavigate,
  onBackHome,
  onLogout,
  userName,
  userEmail,
  closeButton,
}: {
  activeView: ConsoleView;
  navGroups: NavGroup[];
  onNavigate: (view: ConsoleView) => void;
  onBackHome: () => void;
  onLogout: () => void;
  userName: string;
  userEmail: string;
  closeButton?: ReactNode;
}) {
  return (
    <>
      <div className="flex h-16 shrink-0 items-center justify-between border-b border-border/70 px-4">
        <div className="flex min-w-0 items-center gap-3">
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
            <Shield className="h-5 w-5" />
          </div>
          <div className="min-w-0">
            <div className="truncate font-semibold">妙境 Console</div>
            <div className="truncate text-xs text-muted-foreground">{userEmail || userName}</div>
          </div>
        </div>
        {closeButton}
      </div>

      <nav className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
        <div className="space-y-5">
          {navGroups.map(group => (
            <div key={group.label}>
              <div className="mb-2 px-3 text-[11px] font-semibold uppercase tracking-normal text-muted-foreground">
                {group.label}
              </div>
              <div className="space-y-1">
                {group.items.map(item => {
                  const Icon = item.icon;
                  const active = activeView === item.value;
                  return (
                    <button
                      key={item.value}
                      type="button"
                      onClick={() => onNavigate(item.value)}
                      className={cn(
                        'flex h-10 w-full items-center gap-3 rounded-md px-3 text-left text-sm font-medium transition-colors',
                        active
                          ? 'bg-primary/10 text-primary'
                          : 'text-muted-foreground hover:bg-muted/70 hover:text-foreground',
                      )}
                    >
                      <Icon className="h-4 w-4 shrink-0" />
                      <span className="truncate">{item.label}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </nav>

      <div className="shrink-0 border-t border-border/70 p-3">
        <div className="mb-3 rounded-md border border-border/70 bg-background/45 px-3 py-2">
          <div className="truncate text-sm font-medium">{userName}</div>
          <div className="text-xs text-muted-foreground">后台管理权限</div>
        </div>
        <div className="grid grid-cols-2 gap-2">
          <Button variant="outline" size="sm" className="gap-1.5" onClick={onBackHome}>
            <Home className="h-4 w-4" />
            站点
          </Button>
          <Button variant="outline" size="sm" onClick={onLogout}>
            退出
          </Button>
        </div>
      </div>
    </>
  );
}

function ConsoleContent({
  activeView,
  setActiveView,
}: {
  activeView: ConsoleView;
  setActiveView: (view: ConsoleView) => void;
}) {
  switch (activeView) {
    case 'dashboard':
      return <DashboardView setActiveView={setActiveView} />;
    case 'api':
      return <ApiManagementTab />;
    case 'users':
      return <UserManagementTab />;
    case 'pricing':
      return <PricingTab />;
    case 'orders':
      return <OrderManagementTab />;
    case 'payment':
      return <PaymentTab />;
    case 'announcements':
      return <AnnouncementTab />;
    case 'data':
      return <DataManagementTab />;
    case 'upgrade':
      return <SystemUpgradeTab />;
    case 'tasks':
      return <TaskManagementTab />;
    case 'logs':
      return <LogManagementTab />;
    case 'settings':
      return <SettingsTab />;
    default:
      return <DashboardView setActiveView={setActiveView} />;
  }
}

function DashboardView({ setActiveView }: { setActiveView: (view: ConsoleView) => void }) {
  const { accessToken } = useAuth();
  const { summary, loading, refreshing, error, refresh } = useAdminDashboard(accessToken);
  const persistedWorks = summary.system.worksPersisted ?? summary.works.withResultUrl;
  const totalWorksForCoverage = summary.system.worksTotal ?? summary.works.total;
  const resultUrlCoverage = totalWorksForCoverage > 0 ? persistedWorks / totalWorksForCoverage : 1;

  const riskItems = [
    {
      label: '失败任务',
      value: summary.tasks.failed,
      detail: summary.tasks.failed > 0 ? '需要检查任务错误并清理' : '任务队列无失败积压',
      view: 'tasks' as ConsoleView,
      severity: summary.tasks.failed > 0 ? 'warning' : 'ok',
    },
    {
      label: '待处理订单',
      value: summary.orders.pending,
      detail: summary.orders.pending > 0 ? '存在待处理支付订单' : '订单状态正常',
      view: 'orders' as ConsoleView,
      severity: summary.orders.pending > 0 ? 'warning' : 'ok',
    },
    {
      label: '未完整供应商',
      value: summary.providers.incomplete,
      detail: summary.providers.incomplete > 0 ? '供应商缺少地址或默认模型' : '供应商配置完整',
      view: 'api' as ConsoleView,
      severity: summary.providers.incomplete > 0 ? 'warning' : 'ok',
    },
    {
      label: '作品结果覆盖',
      value: `${Math.round(resultUrlCoverage * 100)}%`,
      detail: resultUrlCoverage < 1 ? '存在缺少结果链接的作品' : '持久化结果链接完整',
      view: 'data' as ConsoleView,
      severity: resultUrlCoverage < 1 ? 'warning' : 'ok',
    },
  ];

  const statCards = [
    { label: '总访问量', value: summary.platform.totalVisits, sub: '站点累计访问', icon: Eye, tone: 'text-sky-500' },
    { label: '注册用户', value: summary.users.total, sub: `7日新增 ${formatNumber(summary.users.created7d)}`, icon: Users, tone: 'text-emerald-500' },
    { label: '公开作品', value: summary.works.public, sub: `总作品 ${formatNumber(summary.works.total)}`, icon: BarChart3, tone: 'text-amber-500' },
    { label: '任务总数', value: summary.tasks.total, sub: `运行 ${formatNumber(summary.tasks.running)} / 排队 ${formatNumber(summary.tasks.queued)}`, icon: ListChecks, tone: 'text-violet-500' },
    { label: '支付收入', value: formatCurrency(summary.orders.paidRevenue), sub: `7日 ${formatCurrency(summary.orders.paidRevenue7d)}`, icon: Receipt, tone: 'text-rose-500' },
    { label: '启用模型源', value: `${formatNumber(summary.providers.active)}/${formatNumber(summary.providers.total)}`, sub: `推荐模型 ${formatNumber(summary.providers.recommendationsActive)}`, icon: PlugZap, tone: 'text-cyan-500' },
  ];

  const quickActions: Array<{ label: string; description: string; view: ConsoleView; icon: LucideIcon }> = [
    { label: '配置模型 API', description: '维护供应商、推荐模型和默认能力', view: 'api', icon: Key },
    { label: '查看任务队列', description: '排查失败、排队和运行中的生成任务', view: 'tasks', icon: ListChecks },
    { label: '查看系统日志', description: '筛选登录、安全、生成和管理操作日志', view: 'logs', icon: Logs },
    { label: '管理用户额度', description: '调整会员、积分和账号状态', view: 'users', icon: Users },
    { label: '导出数据备份', description: '下载当前业务数据并确认恢复入口', view: 'data', icon: Database },
  ];

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
          <h2 className="text-2xl font-semibold tracking-normal">仪表盘</h2>
          <p className="text-sm text-muted-foreground">
            {summary.generatedAt ? `最后更新 ${formatDateTime(summary.generatedAt)}` : '正在读取系统概览'}
          </p>
        </div>
        <Button
          variant="outline"
          className="w-full gap-2 md:w-auto"
          onClick={refresh}
          disabled={refreshing || loading}
          aria-busy={refreshing}
        >
          <RefreshCw className={cn('h-4 w-4', refreshing && 'animate-spin')} />
          {refreshing ? '刷新中...' : '刷新'}
        </Button>
      </div>

      {error && (
        <div className="flex items-center gap-2 rounded-md border border-destructive/35 bg-destructive/10 px-4 py-3 text-sm text-destructive">
          <AlertTriangle className="h-4 w-4 shrink-0" />
          <span>{error}</span>
        </div>
      )}

      <div className="grid gap-4 sm:grid-cols-2 2xl:grid-cols-6">
        {statCards.map(item => {
          const Icon = item.icon;
          return (
            <Card key={item.label} className="overflow-hidden">
              <CardContent className="flex min-h-[7.5rem] items-center gap-4 p-5">
                <div className={cn('flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-muted', item.tone)}>
                  <Icon className="h-5 w-5" />
                </div>
                <div className="min-w-0">
                  <p className="text-sm text-muted-foreground">{item.label}</p>
                  <p className="mt-1 truncate text-2xl font-bold">
                    {loading ? <Loader2 className="h-6 w-6 animate-spin" /> : item.value}
                  </p>
                  <p className="mt-1 truncate text-xs text-muted-foreground">{item.sub}</p>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      <div className="grid gap-4 xl:grid-cols-[1.35fr_0.65fr]">
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">待处理事项</CardTitle>
            <CardDescription>按上线运营风险优先展示需要管理员处理的项目</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
            {riskItems.map(item => (
              <button
                key={item.label}
                type="button"
                onClick={() => setActiveView(item.view)}
                className="rounded-lg border border-border/70 p-4 text-left transition-colors hover:bg-muted/60"
              >
                <div className="flex items-center justify-between gap-2">
                  <span className="text-sm text-muted-foreground">{item.label}</span>
                  {item.severity === 'warning' ? (
                    <AlertTriangle className="h-4 w-4 text-amber-500" />
                  ) : (
                    <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                  )}
                </div>
                <div className="mt-2 text-2xl font-bold">{typeof item.value === 'number' ? formatNumber(item.value) : item.value}</div>
                <div className="mt-1 text-xs text-muted-foreground">{item.detail}</div>
              </button>
            ))}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-lg">系统健康</CardTitle>
            <CardDescription>服务、数据库和持久化状态</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <HealthLine label="管理 API" ok={summary.system.apiHealth} />
            <HealthLine label="数据库连接" ok={summary.system.databaseHealth} />
            <HealthLine label="持久化存储" ok={Boolean(summary.system.storageHealth)} />
            <SummaryLine label="作品结果链接" value={`${formatNumber(summary.system.worksPersisted ?? summary.works.withResultUrl)}/${formatNumber(summary.system.worksTotal ?? summary.works.total)}`} />
            <SummaryLine label="系统日志" value={`${formatNumber(summary.system.logsCreated24h || 0)} 条/24小时`} />
            <SummaryLine label="错误日志" value={formatNumber(summary.system.logsErrors || 0)} />
            <SummaryLine label="用户 API Key" value={`${formatNumber(summary.providers.userApiKeysActive)}/${formatNumber(summary.providers.userApiKeysTotal)}`} />
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-4 xl:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">任务队列</CardTitle>
            <CardDescription>生成任务的实时状态分布</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-3">
              <SummaryBlock label="排队" value={summary.tasks.queued} />
              <SummaryBlock label="运行中" value={summary.tasks.running} />
              <SummaryBlock label="已完成" value={summary.tasks.succeeded} />
              <SummaryBlock label="失败" value={summary.tasks.failed} />
            </div>
            <RecentList
              emptyText="暂无生成任务"
              items={summary.tasks.latest.map(task => ({
                key: task.id,
                title: `${task.type || 'generation'} · ${statusText(task.status)}`,
                meta: task.error || formatDateTime(task.createdAt),
                tone: task.status === 'failed' ? 'warning' : undefined,
              }))}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-lg">支付与订单</CardTitle>
            <CardDescription>订单处理和营收概览</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-3">
              <SummaryBlock label="待支付" value={summary.orders.pending} />
              <SummaryBlock label="已支付" value={summary.orders.paid} />
              <SummaryBlock label="已取消" value={summary.orders.cancelled} />
              <SummaryBlock label="已退款" value={summary.orders.refunded} />
            </div>
            <RecentList
              emptyText="暂无订单"
              items={summary.orders.latest.map(order => ({
                key: order.id,
                title: order.productName || order.orderNo || order.id.slice(0, 8),
                meta: `${formatCurrency(order.amount)} · ${statusText(order.status)}`,
                tone: order.status === 'pending' ? 'warning' : undefined,
              }))}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-lg">模型与内容</CardTitle>
            <CardDescription>创作能力、公告和作品结构</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <SummaryLine label="图像供应商" value={summary.providers.image} />
            <SummaryLine label="视频供应商" value={summary.providers.video} />
            <SummaryLine label="文本供应商" value={summary.providers.text} />
            <SummaryLine label="生图作品" value={summary.works.byType.text2img + summary.works.byType.img2img} />
            <SummaryLine label="视频作品" value={summary.works.byType.text2video + summary.works.byType.img2video} />
            <SummaryLine label="生效公告" value={`${formatNumber(summary.announcements.active)}/${formatNumber(summary.announcements.total)}`} />
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">快捷操作</CardTitle>
          <CardDescription>进入常用管理功能</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
          {quickActions.map(action => {
            const Icon = action.icon;
            return (
              <button
                key={action.view}
                type="button"
                onClick={() => setActiveView(action.view)}
                className="rounded-lg border border-border/70 p-4 text-left transition-colors hover:bg-muted/60"
              >
                <Icon className="mb-3 h-5 w-5 text-primary" />
                <div className="font-medium">{action.label}</div>
                <div className="mt-1 text-xs text-muted-foreground">{action.description}</div>
              </button>
            );
          })}
        </CardContent>
      </Card>

      <div className="grid gap-4 lg:grid-cols-3">
        <InsightCard
          icon={<Sparkles className="h-4 w-4" />}
          title="AI 平台后台"
          description="仪表盘聚焦模型源、用量、任务状态和失败项，便于第一时间定位生成链路问题。"
        />
        <InsightCard
          icon={<Receipt className="h-4 w-4" />}
          title="交易后台"
          description="订单状态、待处理支付和营收数据前置，保持支付和会员运营可追踪。"
        />
        <InsightCard
          icon={<Database className="h-4 w-4" />}
          title="云控制台"
          description="数据库健康、持久化链接和备份入口放在首屏，支撑上线后的运维检查。"
        />
      </div>
    </div>
  );
}

function SummaryBlock({ label, value }: { label: string; value: number }) {
  return (
    <div className="rounded-lg border border-border/70 p-3">
      <p className="text-xs text-muted-foreground">{label}</p>
      <p className="mt-1 text-xl font-bold">{formatNumber(value)}</p>
    </div>
  );
}

function SummaryLine({ label, value }: { label: string; value: number | string }) {
  return (
    <div className="flex items-center justify-between rounded-md bg-muted/45 px-3 py-2 text-sm">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-semibold">{typeof value === 'number' ? formatNumber(value) : value}</span>
    </div>
  );
}

function HealthLine({ label, ok }: { label: string; ok: boolean }) {
  return (
    <div className="flex items-center justify-between rounded-md bg-muted/45 px-3 py-2 text-sm">
      <span className="text-muted-foreground">{label}</span>
      <Badge variant={ok ? 'secondary' : 'destructive'} className="gap-1">
        {ok ? <CheckCircle2 className="h-3.5 w-3.5" /> : <AlertTriangle className="h-3.5 w-3.5" />}
        {ok ? '正常' : '异常'}
      </Badge>
    </div>
  );
}

function RecentList({
  items,
  emptyText,
}: {
  items: Array<{ key: string; title: string; meta: string; tone?: 'warning' }>;
  emptyText: string;
}) {
  if (items.length === 0) {
    return <div className="rounded-lg border border-dashed border-border/80 px-3 py-5 text-center text-sm text-muted-foreground">{emptyText}</div>;
  }

  return (
    <div className="space-y-2">
      {items.slice(0, 4).map(item => (
        <div key={item.key} className="flex min-w-0 items-center gap-3 rounded-md border border-border/70 px-3 py-2">
          <div className={cn('h-2 w-2 shrink-0 rounded-full bg-emerald-500', item.tone === 'warning' && 'bg-amber-500')} />
          <div className="min-w-0">
            <div className="truncate text-sm font-medium">{item.title}</div>
            <div className="truncate text-xs text-muted-foreground">{item.meta}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function InsightCard({ icon, title, description }: { icon: ReactNode; title: string; description: string }) {
  return (
    <div className="rounded-lg border border-border/70 bg-card p-4">
      <div className="mb-3 flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">{icon}</div>
      <div className="font-medium">{title}</div>
      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
    </div>
  );
}

function formatNumber(value: number): string {
  return Number(value || 0).toLocaleString('zh-CN');
}

function formatCurrency(value: number): string {
  return `¥${Number(value || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function formatDateTime(value: string | null): string {
  if (!value) return '暂无时间';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '暂无时间';
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function statusText(status: string): string {
  const map: Record<string, string> = {
    queued: '排队',
    running: '运行中',
    succeeded: '已完成',
    failed: '失败',
    pending: '待支付',
    paid: '已支付',
    cancelled: '已取消',
    refunded: '已退款',
    completed: '已完成',
  };
  return map[status] || status || '未知';
}