frontend/src/components/console/StatePanel.tsx

import React from 'react';
import { cn } from '@/lib/utils';
import { Loader2, AlertCircle, CheckCircle2, XCircle, Inbox } from 'lucide-react';

/**
 * 控制台状态面板组件
 * 统一展示 loading/empty/error/success/disabled 状态
 */

type PanelState = 'loading' | 'empty' | 'error' | 'success' | 'disabled';

interface StatePanelProps {
  /** 面板状态 */
  state: PanelState;
  /** 标题 */
  title?: string;
  /** 描述信息 */
  description?: string;
  /** 错误时的错误信息 */
  error?: string;
  /** 自定义图标 */
  icon?: React.ReactNode;
  /** 操作按钮 */
  action?: React.ReactNode;
  /** 额外的 className */
  className?: string;
}

// 状态图标映射
const stateIcons: Record<PanelState, React.ReactNode> = {
  loading: <Loader2 className="w-5 h-5 text-console-text-muted animate-spin" />,
  empty: <Inbox className="w-5 h-5 text-console-text-muted" />,
  error: <XCircle className="w-5 h-5 text-console-status-error" />,
  success: <CheckCircle2 className="w-5 h-5 text-console-status-enabled" />,
  disabled: <AlertCircle className="w-5 h-5 text-console-text-muted" />,
};

// 状态默认文案
const stateTexts: Record<PanelState, { title: string; description: string }> = {
  loading: { title: '加载中', description: '正在获取数据...' },
  empty: { title: '暂无数据', description: '当前没有可显示的内容' },
  error: { title: '加载失败', description: '数据获取出错，请稍后重试' },
  success: { title: '操作成功', description: '已完成' },
  disabled: { title: '已禁用', description: '此功能当前不可用' },
};

/**
 * 状态面板组件
 * 用于控制台中统一展示各种状态场景
 */
export function StatePanel({
  state,
  title,
  description,
  error,
  icon,
  action,
  className,
}: StatePanelProps) {
  const defaults = stateTexts[state];
  const displayTitle = title || defaults.title;
  const displayDescription = error || description || defaults.description;

  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center py-8 px-4 text-center',
        className
      )}
      role="status"
      aria-live="polite"
    >
      {/* 图标 */}
      <div className="mb-3">
        {icon || stateIcons[state]}
      </div>

      {/* 标题 */}
      <h3 className="text-sm font-medium text-console-text-primary mb-1">
        {displayTitle}
      </h3>

      {/* 描述 */}
      <p className="text-xs text-console-text-secondary max-w-[280px]">
        {displayDescription}
      </p>

      {/* 操作按钮 */}
      {action && (
        <div className="mt-4">
          {action}
        </div>
      )}
    </div>
  );
}