import React from 'react';
import { motion } from 'framer-motion';
import {
  ArrowUp,
  ArrowDown,
  ArrowLeft,
  ArrowRight,
  Target,
  Eye,
  EyeOff,
  CheckCheck
} from 'lucide-react';
import { Button } from './ui/Button';
import { FaceRecognitionProps } from '../types';
import { useTranslation } from '../i18n/useTranslation';
import { getInstructionLang } from '../utils/getInstruction';

interface MovementInstructionProps extends FaceRecognitionProps {
  progress:number,
  onEnd:()=> void,
  movement:
    | "faceClose150"
    | "faceClose200"
    | "faceClose250"
    | "blinkLeft"
    | "blinkRight"
    | "center"
    | "left"
    | "right"
    | "up"
    | "down";
}

export const MovementInstruction: React.FC<MovementInstructionProps> = ({ movement, progress , onEnd, lang}) => {

  const describ = useTranslation(lang)


  const getIcon = () => {
    switch (movement) {
      case 'faceClose150':
      case 'faceClose200':
      case 'faceClose250':
      case 'center':
        return <Target className="w-6 h-6" />;
      case 'blinkLeft':
        return <Eye className="w-6 h-6" />;
      case 'blinkRight':
        return <EyeOff className="w-6 h-6" />;
      case 'left':
        return <ArrowRight className="w-6 h-6" />;
      case 'right':
        return <ArrowLeft className="w-6 h-6" />;
      case 'up':
        return <ArrowUp className="w-6 h-6" />;
      case 'down':
        return <ArrowDown className="w-6 h-6" />;
    }
  };

  const getInstruction = () => {
    switch (movement) {
      case 'faceClose150':
        return getInstructionLang('faceClose150', lang);
      case 'faceClose200':
        return getInstructionLang('faceClose200', lang);
      case 'faceClose250':
        return getInstructionLang('faceClose250', lang);
      case 'center':
        return getInstructionLang('center', lang);
      case 'left':
        return getInstructionLang('right', lang);
      case 'right':
        return getInstructionLang('left', lang);
      case 'up':
        return getInstructionLang('up', lang);
      case 'down':
        return getInstructionLang('down', lang);
      case 'blinkLeft':
        return getInstructionLang('blinkRight', lang);
      case 'blinkRight':
        return getInstructionLang('blinkLeft', lang);
    }
  };

  const getAnimation = () => {
    switch (movement) {
      case 'left':
        return { x: [-10, 0, -10], transition: { repeat: Infinity, duration: 2 } };
      case 'right':
        return { x: [10, 0, 10], transition: { repeat: Infinity, duration: 2 } };
      case 'up':
        return { y: [-10, 0, -10], transition: { repeat: Infinity, duration: 2 } };
      case 'down':
        return { y: [10, 0, 10], transition: { repeat: Infinity, duration: 2 } };
      case 'blinkLeft':
      case 'blinkRight':
        return {
          opacity: [1, 0.3, 1],
          transition: { repeat: Infinity, duration: 1.5 },
        };
      default:
        return {};
    }
  };

  return (
    <div className="flex flex-col items-center bg-indigo-50 rounded-lg p-4">
      {progress < 100 && <motion.div
        animate={getAnimation()}
        className="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mb-3"
      >
        <span className="text-indigo-600">{getIcon()}</span>
      </motion.div>}
      {progress >= 100 && <div className="w-16 h-16 rounded-full bg-green-400 flex items-center justify-center animate-pulse">
                <CheckCheck className="w-8 h-8 text-white" />
              </div>}
      {progress < 100 && <>
        <h3 className="font-medium text-gray-800 mb-1">{describ.currentMovement}</h3>
        <p className="text-indigo-700 font-semibold text-center">{getInstruction()}</p>
      </>}

      {progress >= 100 && <Button
                    className="mt-8" 
                    onClick={() => onEnd()}
                  >
                    {describ.endProcess}
                  </Button>}
    </div>
  );
};