carrotskin/src/components/ErrorPage.tsx

'use client';

import Link from 'next/link';
import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';
import { useState, useCallback, useEffect } from 'react';
import { 
  HomeIcon, 
  ArrowLeftIcon, 
  ExclamationTriangleIcon,
  XCircleIcon,
  ClockIcon,
  ServerIcon,
  WifiIcon,
  ClipboardDocumentIcon,
  ArrowPathIcon,
  CubeIcon,
  QuestionMarkCircleIcon,
  SparklesIcon,
  RocketLaunchIcon
} from '@heroicons/react/24/outline';
import { messageManager } from './MessageNotification';

export interface ErrorPageProps {
  code?: number;
  title?: string;
  message?: string;
  description?: string;
  type?: '404' | '500' | '403' | 'network' | 'timeout' | 'maintenance' | 'custom';
  actions?: {
    primary?: {
      label: string;
      href?: string;
      onClick?: () => void;
    };
    secondary?: {
      label: string;
      href?: string;
      onClick?: () => void;
    };
  };
  showContact?: boolean;
  showRetry?: boolean;
  onRetry?: () => void;
  showCopyError?: boolean;
  errorDetails?: string;
  className?: string;
}

const errorConfigs = {
  '404': {
    icon: <CubeIcon className="w-20 h-20" />,
    title: '页面未找到',
    message: '这个页面似乎不存在于我们的世界中',
    description: '页面可能已被移除、重命名，或者您输入的地址不正确。',
    suggestions: [
      '检查网址拼写是否正确',
      '返回主页重新探索',
      '使用搜索功能寻找内容'
    ]
  },
  '500': {
    icon: <ServerIcon className="w-20 h-20" />,
    title: '服务器错误',
    message: '我们的服务器遇到了一些技术问题',
    description: '工程师们正在紧急修复中，请稍后再试。',
    suggestions: [
      '稍后刷新页面重试',
      '清除浏览器缓存',
      '检查网络连接'
    ]
  },
  '403': {
    icon: <ExclamationTriangleIcon className="w-20 h-20" />,
    title: '访问被拒绝',
    message: '您没有权限进入这个区域',
    description: '请检查您的权限等级或联系管理员获取访问权限。',
    suggestions: [
      '确认您是否已登录',
      '检查账户权限等级',
      '联系管理员申请权限'
    ]
  },
  network: {
    icon: <WifiIcon className="w-20 h-20" />,
    title: '网络连接问题',
    message: '与我们的连接出现了问题',
    description: '请检查您的网络连接，然后重新尝试。',
    suggestions: [
      '检查网络连接状态',
      '尝试重新连接',
      '检查防火墙设置'
    ]
  },
  timeout: {
    icon: <ClockIcon className="w-20 h-20" />,
    title: '连接超时',
    message: '服务器响应时间过长',
    description: '服务器响应缓慢，请稍后再试。',
    suggestions: [
      '检查网络连接状态',
      '稍后重新尝试连接',
      '联系技术支持团队'
    ]
  },
  maintenance: {
    icon: <ServerIcon className="w-20 h-20" />,
    title: '系统维护中',
    message: '我们正在对系统进行升级改造',
    description: '为了提供更好的体验，系统暂时关闭维护。',
    suggestions: [
      '关注官方公告获取开放时间',
      '加入官方群组了解进度',
      '稍后再试'
    ]
  },
  custom: {
    icon: <QuestionMarkCircleIcon className="w-20 h-20" />,
    title: '未知错误',
    message: '发生了一些奇怪的事情',
    description: '请稍后再试或联系我们的支持团队。',
    suggestions: []
  }
};

// Action Button Component
function ActionButton({ action, colorClass, primary = false }: { 
  action: { label: string; href?: string; onClick?: () => void }; 
  colorClass?: string; 
  primary?: boolean; 
}) {
  const buttonContent = (
    <>
      {primary ? <HomeIcon className="w-5 h-5 mr-2" /> : <ArrowLeftIcon className="w-5 h-5 mr-2" />}
      {action.label}
    </>
  );

  const buttonClass = primary
    ? `inline-flex items-center justify-center px-6 py-4 bg-gradient-to-r ${colorClass} text-white font-semibold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105`
    : 'inline-flex items-center justify-center px-6 py-4 border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white font-semibold rounded-xl transition-all duration-200';

  if ('href' in action && action.href) {
    return (
      <Link href={action.href} className={buttonClass}>
        {buttonContent}
      </Link>
    );
  } else if ('onClick' in action && action.onClick) {
    return (
      <button onClick={action.onClick} className={buttonClass}>
        {buttonContent}
      </button>
    );
  }
  return null;
}

export function ErrorPage({ 
  code, 
  title, 
  message, 
  description, 
  type = 'custom',
  actions,
  showContact = true,
  showRetry = true,
  onRetry,
  showCopyError = true,
  errorDetails,
  className = ''
}: ErrorPageProps) {
  const [isRetrying, setIsRetrying] = useState(false);
  const [showDetails, setShowDetails] = useState(false);
  const [copySuccess, setCopySuccess] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const { scrollYProgress } = useScroll();
  const opacity = useTransform(scrollYProgress, [0, 0.3], [1, 0.8]);

  const config = errorConfigs[type] || {};
  const displayTitle = title || config.title || '出错了';
  const displayMessage = message || config.message || '发生了一些错误';
  const displayDescription = description || config.description || '';

  // 生成详细的错误信息
  const generateErrorDetails = useCallback(() => {
    const details = {
      timestamp: new Date().toISOString(),
      errorType: type,
      errorCode: code,
      userAgent: typeof window !== 'undefined' ? window.navigator.userAgent : 'Unknown',
      url: typeof window !== 'undefined' ? window.location.href : 'Unknown',
      customDetails: errorDetails
    };
    return JSON.stringify(details, null, 2);
  }, [type, code, errorDetails]);

  const defaultActions = {
    primary: {
      label: '返回主城',
      href: '/'
    },
    secondary: {
      label: '返回上页',
      onClick: () => {
        if (typeof window !== 'undefined') {
          window.history.back();
        }
      }
    }
  };

  const finalActions = { ...defaultActions, ...actions };

  const getThemeStyles = () => {
    return {
      bg: 'bg-gradient-to-br from-slate-50 via-orange-50 to-amber-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900',
      card: 'bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg',
      text: 'text-gray-900 dark:text-white',
      subtext: 'text-gray-600 dark:text-gray-300',
      accent: 'text-orange-500 dark:text-orange-400'
    };
  };

  const getIconColor = () => {
    const colors = {
      '404': 'text-orange-500',
      '500': 'text-red-500',
      '403': 'text-yellow-500',
      'network': 'text-blue-500',
      'timeout': 'text-purple-500',
      'maintenance': 'text-gray-500',
      'custom': 'text-gray-500'
    };
    return colors[type] || 'text-gray-500';
  };

  const getCodeColor = () => {
    const colors = {
      '404': 'from-orange-400 via-orange-500 to-amber-500',
      '500': 'from-red-400 via-red-500 to-pink-500',
      '403': 'from-yellow-400 via-yellow-500 to-orange-500',
      'network': 'from-blue-400 via-blue-500 to-cyan-500',
      'timeout': 'from-purple-400 via-purple-500 to-pink-500',
      'maintenance': 'from-gray-400 via-gray-500 to-slate-500',
      'custom': 'from-gray-400 via-gray-500 to-slate-500'
    };
    return colors[type] || 'from-gray-400 via-gray-500 to-slate-500';
  };

  const getButtonColor = () => {
    return 'from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600';
  };

  const handleRetry = async () => {
    if (onRetry) {
      setIsRetrying(true);
      try {
        await onRetry();
        messageManager.success('重试成功！', { duration: 3000 });
      } catch (error) {
        messageManager.error('重试失败，请稍后重试', { duration: 5000 });
      } finally {
        setIsRetrying(false);
      }
    } else {
      // 默认重试逻辑：刷新页面
      if (typeof window !== 'undefined') {
        window.location.reload();
      }
    }
  };

  const handleCopyError = async () => {
    try {
      const details = generateErrorDetails();
      if (typeof navigator !== 'undefined' && navigator.clipboard) {
        await navigator.clipboard.writeText(details);
        setCopySuccess(true);
        messageManager.success('错误信息已复制到剪贴板', { duration: 2000 });
        setTimeout(() => setCopySuccess(false), 2000);
      } else {
        // 降级方案
        const textArea = document.createElement('textarea');
        textArea.value = details;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        setCopySuccess(true);
        messageManager.success('错误信息已复制到剪贴板', { duration: 2000 });
        setTimeout(() => setCopySuccess(false), 2000);
      }
    } catch (error) {
      messageManager.error('复制失败，请手动复制', { duration: 3000 });
    }
  };

  const handleReportError = () => {
    messageManager.info('感谢您的反馈，我们会尽快处理', { duration: 3000 });
    // 这里可以添加实际的错误报告逻辑
  };

  // 键盘快捷键支持
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'r' && (event.ctrlKey || event.metaKey)) {
        event.preventDefault();
        handleRetry();
      }
    };

    if (typeof window !== 'undefined') {
      window.addEventListener('keydown', handleKeyDown);
      return () => window.removeEventListener('keydown', handleKeyDown);
    }
  }, [handleRetry]);

  const themeStyles = getThemeStyles();

  return (
    <div className={`min-h-screen bg-gradient-to-br from-slate-50 via-orange-50 to-amber-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 ${className}`}>
      {/* Animated Background - 简化背景动画 */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <motion.div 
          className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-br from-orange-400/10 to-amber-400/10 rounded-full blur-3xl"
          animate={{ 
            scale: [1, 1.2, 1],
            opacity: [0.3, 0.5, 0.3]
          }}
          transition={{ duration: 4, repeat: Infinity }}
        />
        <motion.div 
          className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-gradient-to-tr from-pink-400/10 to-orange-400/10 rounded-full blur-3xl"
          animate={{ 
            scale: [1.2, 1, 1.2],
            opacity: [0.5, 0.3, 0.5]
          }}
          transition={{ duration: 5, repeat: Infinity }}
        />
      </div>

      {/* Main Content - 考虑navbar高度的居中布局 */}
      <motion.div 
        className="relative z-10 min-h-[calc(100vh-var(--navbar-height,4rem))] flex items-center justify-center px-4 sm:px-6 lg:px-8"
        style={{ paddingTop: 'calc(var(--navbar-height, 4rem) + 2rem)' }}
      >
        <div className="max-w-4xl mx-auto w-full text-center">
          
          {/* Error Code - 更突出的错误代码 */}
          {code && (
            <motion.div
              initial={{ scale: 0.5, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ duration: 0.8, type: 'spring', stiffness: 100 }}
              className="mb-12"
            >
              <h1 className={`text-9xl md:text-[12rem] font-black bg-gradient-to-r ${getCodeColor()} bg-clip-text text-transparent mb-2`}>
                {code}
              </h1>
              <motion.div 
                className={`w-24 h-1 bg-gradient-to-r ${getCodeColor()} mx-auto rounded-full`}
                initial={{ width: 0 }}
                animate={{ width: 96 }}
                transition={{ delay: 0.5, duration: 0.8 }}
              />
            </motion.div>
          )}

          {/* Main Error Message - 简洁有力的错误信息 */}
          <motion.div 
            className="mb-16 space-y-6"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3, duration: 0.8 }}
          >
            <div className="space-y-4">
              <h2 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white leading-tight">
                {displayTitle}
              </h2>
              <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto">
                {displayMessage}
              </p>
              {displayDescription && (
                <p className="text-lg text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl mx-auto">
                  {displayDescription}
                </p>
              )}
            </div>

            {/* Icon - 更简洁的图标展示 */}
            <motion.div 
              className="flex justify-center"
              initial={{ opacity: 0, scale: 0.5 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.6, duration: 0.6 }}
            >
              <div className={`${getIconColor()} opacity-80`}>
                {config.icon || <QuestionMarkCircleIcon className="w-24 h-24" />}
              </div>
            </motion.div>
          </motion.div>

          {/* Action Buttons - 更简洁的按钮布局 */}
          <motion.div 
            className="mb-12"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.8, duration: 0.6 }}
          >
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-6">
              {finalActions.primary && (
                <ActionButton action={finalActions.primary} colorClass={getButtonColor()} primary />
              )}
              
              {finalActions.secondary && (
                <ActionButton action={finalActions.secondary} />
              )}
            </div>

            {showRetry && (
              <motion.button
                onClick={handleRetry}
                disabled={isRetrying}
                className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-orange-500 to-amber-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-2xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
                whileHover={{ scale: isRetrying ? 1 : 1.05 }}
                whileTap={{ scale: isRetrying ? 1 : 0.95 }}
              >
                <ArrowPathIcon className={`w-5 h-5 mr-2 ${isRetrying ? 'animate-spin' : ''}`} />
                {isRetrying ? '重试中...' : '重新加载'}
              </motion.button>
            )}
          </motion.div>

          {/* Suggestions - 更简洁的建议展示 */}
          {config.suggestions && config.suggestions.length > 0 && (
            <motion.div 
              className="mb-12"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 1, duration: 0.6 }}
            >
              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">
                您可以尝试：
              </h3>
              <div className="flex flex-wrap justify-center gap-3">
                {config.suggestions.map((suggestion, index) => (
                  <motion.div 
                    key={index}
                    className="flex items-center px-4 py-2 bg-white/50 dark:bg-gray-800/50 rounded-full text-sm text-gray-600 dark:text-gray-400 border border-gray-200 dark:border-gray-700"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 1.2 + index * 0.1, duration: 0.4 }}
                  >
                    <div className={`w-1.5 h-1.5 rounded-full ${getIconColor()} mr-2`} />
                    {suggestion}
                  </motion.div>
                ))}
              </div>
            </motion.div>
          )}

          {/* Error Details - 更简洁的错误详情 */}
          {showCopyError && (
            <motion.div 
              className="mb-12"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 1.4, duration: 0.6 }}
            >
              <div className="flex justify-center gap-3 mb-4">
                <button
                  onClick={handleCopyError}
                  className="inline-flex items-center px-4 py-2 bg-white/50 dark:bg-gray-800/50 hover:bg-white/70 dark:hover:bg-gray-800/70 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-full transition-all duration-200 border border-gray-200 dark:border-gray-700"
                >
                  <ClipboardDocumentIcon className="w-4 h-4 mr-2" />
                  {copySuccess ? '已复制！' : '复制错误信息'}
                </button>
                
                <button
                  onClick={() => setShowDetails(!showDetails)}
                  className="inline-flex items-center px-4 py-2 bg-white/50 dark:bg-gray-800/50 hover:bg-white/70 dark:hover:bg-gray-800/70 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-full transition-all duration-200 border border-gray-200 dark:border-gray-700"
                >
                  {showDetails ? '隐藏详情' : '显示详情'}
                </button>
              </div>
              
              <AnimatePresence>
                {showDetails && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: 'auto' }}
                    exit={{ opacity: 0, height: 0 }}
                    transition={{ duration: 0.3 }}
                    className="max-w-2xl mx-auto p-4 bg-white/30 dark:bg-gray-800/30 rounded-2xl text-left border border-white/50 dark:border-gray-700/50 backdrop-blur-sm"
                  >
                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2 text-sm">错误详情：</h4>
                    <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-auto max-h-24">
                      {generateErrorDetails()}
                    </pre>
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>
          )}

          {/* Contact Info - 更简洁的联系信息 */}
          {showContact && (
            <motion.div 
              className="text-center pb-8"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 1.6, duration: 0.6 }}
            >
              <p className="text-sm text-gray-500 dark:text-gray-400">
                问题仍未解决？
                <Link 
                  href="/contact" 
                  className="text-orange-500 hover:text-orange-600 underline mx-1 font-medium"
                  onClick={(e) => {
                    e.preventDefault();
                    messageManager.info('联系我们页面正在开发中', { duration: 3000 });
                  }}
                >
                  联系我们
                </Link>
              </p>
            </motion.div>
          )}
        </div>
      </motion.div>
    </div>
  );
}

// 预设的错误页面组件
export function NotFoundPage() {
  return <ErrorPage type="404" code={404} />;
}

export function ServerErrorPage() {
  return <ErrorPage type="500" code={500} />;
}

export function ForbiddenPage() {
  return <ErrorPage type="403" code={403} />;
}

export function NetworkErrorPage() {
  return <ErrorPage type="network" />;
}

export function TimeoutErrorPage() {
  return <ErrorPage type="timeout" />;
}

export function MaintenancePage() {
  return <ErrorPage type="maintenance" />;
}

// 现代化的错误页面
export function ModernNotFoundPage() {
  return <ErrorPage type="404" code={404} />;
}

export function ModernServerErrorPage() {
  return <ErrorPage type="500" code={500} />;
}

// 使用示例和最佳实践
/*

增强后的ErrorPage组件提供了以下改进：

1. **统一的消息提示系统**
   - 使用MessageNotification组件替代alert
   - 支持成功、错误、警告、信息、加载等多种消息类型
   - 更好的用户体验和视觉效果

2. **多种主题风格**
   - Minecraft风格：适合游戏相关网站
   - Modern风格：现代化简洁设计
   - Minimal风格：极简主义设计

3. **增强的功能**
   - 重试功能，支持自定义重试逻辑
   - 错误信息复制功能
   - 错误详情显示/隐藏
   - 键盘快捷键支持 (Ctrl+R/⌘+R 重试)
   - 进度条显示（可选）
   - 自定义操作按钮

4. **改进的用户体验**
   - 针对每种错误类型提供具体建议
   - 动态颜色主题匹配错误类型
   - 平滑的动画过渡效果
   - 响应式设计，适配移动端
   - Minecraft风格的游戏化提示

5. **更好的错误处理**
   - 详细的错误信息生成
   - 错误报告功能
   - 降级处理（如复制功能）
   - 支持自定义错误详情

使用示例：

```tsx
// 基础使用 - Minecraft风格404页面
<ErrorPage type="404" />

// 现代风格500错误
<ErrorPage type="500" code={500} theme="modern" />

// 自定义错误信息
<ErrorPage 
  type="500" 
  code={500}
  title="数据库连接失败"
  message="无法连接到数据库服务器"
  description="请检查数据库配置或联系系统管理员"
  theme="modern"
/>

// 自定义操作按钮
<ErrorPage
  type="network"
  actions={{
    primary: {
      label: '重新连接',
      onClick: () => reconnect()
    },
    secondary: {
      label: '离线模式',
      href: '/offline'
    }
  }}
/>

// 启用重试功能
<ErrorPage
  type="timeout"
  showRetry={true}
  onRetry={async () => {
    // 自定义重试逻辑
    await fetchData();
  }}
/>

// 显示错误详情
<ErrorPage
  type="500"
  showCopyError={true}
  errorDetails={JSON.stringify(errorDetails)}
  theme="minimal"
/>

```

预设组件使用：

```tsx
// 在页面中使用预设的错误组件
import { NotFoundPage, ServerErrorPage, ModernNotFoundPage } from '@/components/ErrorPage';

// Minecraft风格404页面
export default function Custom404() {
  return <NotFoundPage />;
}

// 现代化404页面
export default function Modern404() {
  return <ModernNotFoundPage />;
}

// 500页面  
export default function Custom500() {
  return <ServerErrorPage />;
}
```

*/