carrotskin/src/components/ErrorPage.tsx

'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { 
  HomeIcon, 
  ArrowLeftIcon, 
  ExclamationTriangleIcon,
  XCircleIcon,
  ClockIcon,
  ServerIcon,
  WifiIcon
} from '@heroicons/react/24/outline';

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;
}

const errorConfigs = {
  '404': {
    icon: <XCircleIcon className="w-16 h-16" />,
    title: '页面不见了',
    message: '抱歉，我们找不到您要访问的页面。',
    description: '它可能已被移动、删除，或者您输入的链接不正确。'
  },
  '500': {
    icon: <ServerIcon className="w-16 h-16" />,
    title: '服务器错误',
    message: '抱歉，服务器遇到了一些问题。',
    description: '我们的团队正在努力解决这个问题，请稍后再试。'
  },
  '403': {
    icon: <ExclamationTriangleIcon className="w-16 h-16" />,
    title: '访问被拒绝',
    message: '抱歉，您没有权限访问此页面。',
    description: '请检查您的账户权限或联系管理员。'
  },
  'network': {
    icon: <WifiIcon className="w-16 h-16" />,
    title: '网络连接错误',
    message: '无法连接到服务器。',
    description: '请检查您的网络连接，然后重试。'
  },
  'timeout': {
    icon: <ClockIcon className="w-16 h-16" />,
    title: '请求超时',
    message: '请求处理时间过长。',
    description: '请刷新页面或稍后再试。'
  },
  'maintenance': {
    icon: <ServerIcon className="w-16 h-16" />,
    title: '系统维护中',
    message: '我们正在进行系统维护。',
    description: '请稍后再试，我们会尽快恢复服务。'
  }
};

export function ErrorPage({ 
  code, 
  title, 
  message, 
  description, 
  type = 'custom',
  actions,
  showContact = true
}: ErrorPageProps) {
  const config = errorConfigs[type] || {};
  const displayTitle = title || config.title || '出错了';
  const displayMessage = message || config.message || '发生了一些错误';
  const displayDescription = description || config.description || '';

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

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

  const getIconColor = () => {
    switch (type) {
      case '404': return 'text-orange-500';
      case '500': return 'text-red-500';
      case '403': return 'text-yellow-500';
      case 'network': return 'text-blue-500';
      case 'timeout': return 'text-purple-500';
      case 'maintenance': return 'text-gray-500';
      default: return 'text-orange-500';
    }
  };

  const getCodeColor = () => {
    switch (type) {
      case '404': return 'from-orange-400 via-orange-500 to-amber-500';
      case '500': return 'from-red-400 via-red-500 to-pink-500';
      case '403': return 'from-yellow-400 via-yellow-500 to-orange-500';
      case 'network': return 'from-blue-400 via-blue-500 to-cyan-500';
      case 'timeout': return 'from-purple-400 via-purple-500 to-pink-500';
      case 'maintenance': return 'from-gray-400 via-gray-500 to-slate-500';
      default: return 'from-orange-400 via-orange-500 to-amber-500';
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-orange-50 via-white to-amber-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
      <motion.div 
        className="text-center px-4 max-w-2xl mx-auto"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, ease: 'easeOut' }}
      >
        {/* 错误代码 */}
        {code && (
          <motion.div 
            className="mb-8"
            initial={{ scale: 0.5, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ delay: 0.2, duration: 0.6, type: 'spring', stiffness: 200 }}
          >
            <h1 className={`text-9xl font-black bg-gradient-to-r ${getCodeColor()} bg-clip-text text-transparent mb-4`}>
              {code}
            </h1>
            <div className={`w-24 h-1 bg-gradient-to-r ${getCodeColor()} mx-auto rounded-full`} />
          </motion.div>
        )}

        {/* 图标 */}
        <motion.div 
          className="mb-8 flex justify-center"
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 0.4, duration: 0.6 }}
        >
          <div className={`${getIconColor()}`}>
            {config.icon || <ExclamationTriangleIcon className="w-16 h-16" />}
          </div>
        </motion.div>

        {/* 错误信息 */}
        <motion.div 
          className="mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6, duration: 0.6 }}
        >
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            {displayTitle}
          </h2>
          <p className="text-xl text-gray-700 dark:text-gray-300 mb-2">
            {displayMessage}
          </p>
          {displayDescription && (
            <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
              {displayDescription}
            </p>
          )}
        </motion.div>

        {/* 操作按钮 */}
        <motion.div 
          className="flex flex-col sm:flex-row gap-4 justify-center items-center"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.8, duration: 0.6 }}
        >
          {finalActions.primary && (
            finalActions.primary.href ? (
              <Link
                href={finalActions.primary.href}
                className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
              >
                <HomeIcon className="w-5 h-5 mr-2" />
                {finalActions.primary.label}
              </Link>
            ) : (
              <button
                onClick={finalActions.primary.onClick}
                className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
              >
                <HomeIcon className="w-5 h-5 mr-2" />
                {finalActions.primary.label}
              </button>
            )
          )}
          
          {finalActions.secondary && (
            finalActions.secondary.href ? (
              <Link
                href={finalActions.secondary.href}
                className="inline-flex items-center px-6 py-3 border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white font-semibold rounded-xl transition-all duration-200"
              >
                <ArrowLeftIcon className="w-5 h-5 mr-2" />
                {finalActions.secondary.label}
              </Link>
            ) : (
              <button
                onClick={finalActions.secondary.onClick}
                className="inline-flex items-center px-6 py-3 border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white font-semibold rounded-xl transition-all duration-200"
              >
                <ArrowLeftIcon className="w-5 h-5 mr-2" />
                {finalActions.secondary.label}
              </button>
            )
          )}
        </motion.div>

        {/* 联系信息 */}
        {showContact && (
          <motion.div 
            className="mt-8 text-sm text-gray-500 dark:text-gray-400"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 1, duration: 0.6 }}
          >
            <p>如果问题持续存在，请
              <Link href="/contact" className="text-orange-500 hover:text-orange-600 underline mx-1">
                联系我们
              </Link>
              的支持团队
            </p>
          </motion.div>
        )}
      </motion.div>

      {/* 背景装饰 */}
      <div className="fixed inset-0 -z-10 overflow-hidden">
        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-orange-200/20 dark:bg-orange-900/20 rounded-full blur-3xl" />
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-amber-200/20 dark:bg-amber-900/20 rounded-full blur-3xl" />
      </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" />;
}