import React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { WorkflowStatusDisplayProps } from "./dashboardChatAreaTypes";
import styles from './DashboardChatArea.module.css';

const WorkflowStatusDisplay: React.FC<WorkflowStatusDisplayProps> = ({
    currentWorkflowId,
    workflowStatus,
    workflowCompleted,
    onStartNewWorkflow,
    handleRetry,
    shouldShowRetryButton
}) => {
    return (
        <AnimatePresence>
            {currentWorkflowId && shouldShowRetryButton() && (
                <motion.div 
                    className={styles.workflow_status}
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.8 }}
                    transition={{ duration: 0.3, ease: "easeOut" }}
                >
                    <div className={styles.retry_container}>
                        <span className={styles.failed_message}>
                            Workflow failed. 
                        </span>
                        <button 
                            onClick={handleRetry}
                            className={styles.retry_button}
                        >
                            Nochmal versuchen
                        </button>
                    </div>
                </motion.div>
            )}
            {currentWorkflowId && !workflowCompleted && !shouldShowRetryButton() && (
                <motion.div 
                    className={styles.workflow_status}
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.8 }}
                    transition={{ duration: 0.3, ease: "easeOut" }}
                >
                    <div 
                        className={styles.dots_container}
                        style={{ display: 'flex', alignItems: 'center', gap: '4px', height: '20px' }}
                    >
                        <motion.span 
                            initial={{ opacity: 0, scale: 0 }}
                            animate={{ 
                                opacity: 1, 
                                scale: 1,
                                y: [0, -7, 0] 
                            }}
                            exit={{ opacity: 0, scale: 0 }}
                            transition={{
                                opacity: { duration: 0.4, ease: "easeOut" },
                                scale: { duration: 0.4, ease: "easeOut" },
                                y: {
                                    duration: 1.2,
                                    repeat: Infinity,
                                    ease: "easeInOut",
                                    times: [0, 0.5, 1],
                                    delay: 0.2
                                }
                            }}
                            style={{ fontSize: '20px', display: 'inline-block' }}
                        >
                            •
                        </motion.span>
                        <motion.span 
                            initial={{ opacity: 0, scale: 0 }}
                            animate={{ 
                                opacity: 1, 
                                scale: 1,
                                y: [0, -7, 0] 
                            }}
                            exit={{ opacity: 0, scale: 0 }}
                            transition={{
                                opacity: { duration: 0.4, ease: "easeOut", delay: 0.1 },
                                scale: { duration: 0.4, ease: "easeOut", delay: 0.1 },
                                y: {
                                    duration: 1.2,
                                    repeat: Infinity,
                                    ease: "easeInOut",
                                    times: [0, 0.5, 1],
                                    delay: 0.4
                                }
                            }}
                            style={{ fontSize: '20px', display: 'inline-block' }}
                        >
                            •
                        </motion.span>
                        <motion.span 
                            initial={{ opacity: 0, scale: 0 }}
                            animate={{ 
                                opacity: 1, 
                                scale: 1,
                                y: [0, -7, 0] 
                            }}
                            exit={{ opacity: 0, scale: 0 }}
                            transition={{
                                opacity: { duration: 0.4, ease: "easeOut", delay: 0.2 },
                                scale: { duration: 0.4, ease: "easeOut", delay: 0.2 },
                                y: {
                                    duration: 1.2,
                                    repeat: Infinity,
                                    ease: "easeInOut",
                                    times: [0, 0.5, 1],
                                    delay: 0.6
                                }
                            }}
                            style={{ fontSize: '20px', display: 'inline-block' }}
                        >
                            •
                        </motion.span>
                    </div>
                </motion.div>
            )}
        </AnimatePresence>
    );
};

export default WorkflowStatusDisplay;