import React from 'react';
import { motion } from 'framer-motion';
import { AlertTriangle, RefreshCw, Wifi, WifiOff, CheckCircle, XCircle } from 'lucide-react';

// 增强的加载状态组件
interface EnhancedLoadingProps {
  message?: string;
  size?: 'sm' | 'md' | 'lg';
  showProgress?: boolean;
  progress?: number;
}

export const EnhancedLoading: React.FC<EnhancedLoadingProps> = ({
  message = '加载中...',
  size = 'md',
  showProgress = false,
  progress = 0
}) => {
  const sizeClasses = {
    sm: 'w-6 h-6',
    md: 'w-8 h-8',
    lg: 'w-12 h-12'
  };

  return (
    <div className="flex flex-col items-center justify-center p-8">
      <motion.div
        animate={{ rotate: 360 }}
        transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
        className={`${sizeClasses[size]} text-blue-500 mb-4`}
      >
        <RefreshCw className="w-full h-full" />
      </motion.div>
      
      <p className="text-gray-600 text-center mb-4">{message}</p>
      
      {showProgress && (
        <div className="w-64 bg-gray-200 rounded-full h-2 mb-2">
          <motion.div
            className="bg-blue-500 h-2 rounded-full"
            initial={{ width: 0 }}
            animate={{ width: `${progress}%` }}
            transition={{ duration: 0.3 }}
          />
        </div>
      )}
    </div>
  );
};

// 增强的错误状态组件
interface EnhancedErrorProps {
  title?: string;
  message?: string;
  onRetry?: () => void;
  retryText?: string;
  showDetails?: boolean;
  details?: string;
}

export const EnhancedError: React.FC<EnhancedErrorProps> = ({
  title = '出现错误',
  message = '请稍后重试',
  onRetry,
  retryText = '重试',
  showDetails = false,
  details
}) => {
  return (
    <div className="flex flex-col items-center justify-center p-8 text-center">
      <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
        <XCircle className="w-8 h-8 text-red-500" />
      </div>
      
      <h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
      <p className="text-gray-600 mb-6 max-w-md">{message}</p>
      
      {onRetry && (
        <button
          onClick={onRetry}
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          <RefreshCw className="w-4 h-4" />
          {retryText}
        </button>
      )}
      
      {showDetails && details && (
        <details className="mt-4 text-left">
          <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700">
            查看详细信息
          </summary>
          <pre className="mt-2 p-3 bg-gray-100 rounded text-xs text-gray-700 overflow-auto max-w-md">
            {details}
          </pre>
        </details>
      )}
    </div>
  );
};

// 网络状态指示器
interface NetworkIndicatorProps {
  isOnline: boolean;
  className?: string;
}

export const NetworkIndicator: React.FC<NetworkIndicatorProps> = ({
  isOnline,
  className = ''
}) => {
  return (
    <motion.div
      initial={{ scale: 0 }}
      animate={{ scale: 1 }}
      className={`flex items-center gap-2 px-3 py-1 rounded-full text-sm font-medium ${
        isOnline 
          ? 'bg-green-100 text-green-800' 
          : 'bg-red-100 text-red-800'
      } ${className}`}
    >
      {isOnline ? (
        <Wifi className="w-4 h-4" />
      ) : (
        <WifiOff className="w-4 h-4" />
      )}
      {isOnline ? '在线' : '离线'}
    </motion.div>
  );
};

// 成功状态组件
interface SuccessStateProps {
  title?: string;
  message?: string;
  onContinue?: () => void;
  continueText?: string;
}

export const SuccessState: React.FC<SuccessStateProps> = ({
  title = '操作成功',
  message = '操作已完成',
  onContinue,
  continueText = '继续'
}) => {
  return (
    <motion.div
      initial={{ scale: 0, opacity: 0 }}
      animate={{ scale: 1, opacity: 1 }}
      className="flex flex-col items-center justify-center p-8 text-center"
    >
      <motion.div
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
        className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4"
      >
        <CheckCircle className="w-8 h-8 text-green-500" />
      </motion.div>
      
      <h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
      <p className="text-gray-600 mb-6 max-w-md">{message}</p>
      
      {onContinue && (
        <button
          onClick={onContinue}
          className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
        >
          {continueText}
        </button>
      )}
    </motion.div>
  );
};

// 警告状态组件
interface WarningStateProps {
  title?: string;
  message?: string;
  onConfirm?: () => void;
  onCancel?: () => void;
  confirmText?: string;
  cancelText?: string;
}

export const WarningState: React.FC<WarningStateProps> = ({
  title = '请确认',
  message = '此操作需要确认',
  onConfirm,
  onCancel,
  confirmText = '确认',
  cancelText = '取消'
}) => {
  return (
    <div className="flex flex-col items-center justify-center p-8 text-center">
      <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
        <AlertTriangle className="w-8 h-8 text-yellow-500" />
      </div>
      
      <h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
      <p className="text-gray-600 mb-6 max-w-md">{message}</p>
      
      <div className="flex gap-3">
        {onCancel && (
          <button
            onClick={onCancel}
            className="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors"
          >
            {cancelText}
          </button>
        )}
        {onConfirm && (
          <button
            onClick={onConfirm}
            className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors"
          >
            {confirmText}
          </button>
        )}
      </div>
    </div>
  );
};