import { motion } from 'framer-motion';
import { useGeneration } from '@/context/GenerationContext';
import { XIcon, RefreshIcon, ArrowLeftIcon } from './Icons';

export const ErrorDisplay: React.FC = () => {
  const { state, reset, setStep } = useGeneration();
  const { error } = state;

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className="min-h-[60vh] flex flex-col items-center justify-center p-8"
    >
      <div className="max-w-lg w-full text-center">
        {/* Error Icon */}
        <motion.div
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ type: 'spring', duration: 0.5 }}
          className="w-20 h-20 mx-auto rounded-full bg-red-500/20 flex items-center justify-center mb-6"
        >
          <XIcon size={40} className="text-red-400" />
        </motion.div>

        {/* Error Message */}
        <h1 className="text-3xl font-display font-bold text-void-100 mb-4">
          Generation Failed
        </h1>
        
        <div className="card bg-red-500/10 border-red-500/30 mb-8">
          <p className="text-red-300 text-sm">
            {error || 'An unexpected error occurred during video generation.'}
          </p>
        </div>

        {/* Actions */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
          <button
            onClick={() => setStep('configuring')}
            className="btn-primary flex items-center gap-2"
          >
            <RefreshIcon size={20} />
            Try Again
          </button>
          
          <button
            onClick={reset}
            className="btn-secondary flex items-center gap-2"
          >
            <ArrowLeftIcon size={20} />
            Start Over
          </button>
        </div>

        {/* Help Text */}
        <div className="mt-8 p-4 bg-void-900/50 rounded-xl border border-void-700">
          <h3 className="text-sm font-semibold text-void-300 mb-2">Troubleshooting Tips</h3>
          <ul className="text-xs text-void-400 space-y-1 text-left">
            <li>• Check that your API keys are properly configured</li>
            <li>• Ensure your image is under 10MB and in JPG/PNG format</li>
            <li>• Try a shorter script if timeouts occur</li>
            <li>• Check the backend server logs for more details</li>
          </ul>
        </div>
      </div>
    </motion.div>
  );
};