import React, { useState } from "react";
import { BsArrowsAngleExpand, BsArrowsAngleContract } from "react-icons/bs";
import { motion, AnimatePresence } from "framer-motion";
import { Prompt } from "../../../hooks/usePrompts";

import DashboardChatArea from './DashboardChatArea/DashboardChatArea';
import DashboardChatHistory from './DashboardChatHistory/DashboardChatHistory';

import styles from './DashboardChat.module.css';

interface DashboardChatProps {
    isExpanded: boolean;
    onToggleExpand: () => void;
    selectedPrompt?: Prompt | null;
    onPromptUsed?: () => void;
    onWorkflowIdChange?: (workflowId: string | null) => void;
    onWorkflowResume?: (workflowId: string) => void;
}

const DashboardChat: React.FC<DashboardChatProps> = ({ 
    isExpanded, 
    onToggleExpand, 
    selectedPrompt, 
    onPromptUsed,
    onWorkflowIdChange,
    onWorkflowResume
}) => {
    const [activeTab, setActiveTab] = useState("Chat Area");
    const [resumeWorkflowId, setResumeWorkflowId] = useState<string | null>(null);

    const handleWorkflowResume = (workflowId: string) => {
        // Switch to Chat Area tab first
        setActiveTab("Chat Area");
        // Set the workflow ID to resume
        setResumeWorkflowId(workflowId);
        // Then call the parent's resume handler
        if (onWorkflowResume) {
            onWorkflowResume(workflowId);
        }
        // Clear the resume ID after a short delay to allow processing
        setTimeout(() => {
            setResumeWorkflowId(null);
        }, 100);
    };

    return (
        <motion.div 
            className={`${styles.dashboard_chat} ${isExpanded ? styles.expanded : ''}`}
            layout
            transition={{ duration: 0.4, ease: "easeOut" }}
        >
            <motion.div 
                className={styles.chat_header}
                layout
                transition={{ duration: 0.3, ease: "easeOut" }}
            >
                <div className={styles.chat_button_div}>
                    {["Chat Area", "Workflow History"].map((tab) => (
                        <div key={tab} className={styles.buttonWrapper}>
                            <motion.button 
                                key={tab} 
                                className={`${styles.chat_button} ${
                                    activeTab === tab ? styles.chat_button_active : styles.chat_button_inactive
                                }`} 
                                onClick={() => setActiveTab(tab)}
                                whileHover={{ scale: 1.05 }}
                                whileTap={{ scale: 0.98 }}
                            >
                                {tab}
                            </motion.button>
                            <AnimatePresence>
                                {activeTab === tab && (
                                    <motion.div 
                                        className={styles.horizontalLine}
                                        initial={{ opacity: 0, width: "0%" }}
                                        animate={{ opacity: 1, width: "100%" }}
                                        exit={{ opacity: 0, width: "0%" }}
                                        transition={{ duration: 0.3, ease: "easeOut" }}
                                    ></motion.div>
                                )}
                            </AnimatePresence>
                        </div>
                    ))}
                </div>
                <div className={styles.iconContainer}>
                    <motion.div 
                        className={styles.expandIcon} 
                        onClick={onToggleExpand}
                        whileTap={{ scale: 0.9 }}
                        whileHover={{ scale: 1.15 }}
                        animate={{ rotate: isExpanded ? 180 : 0 }}
                        transition={{ duration: 0.3, ease: "easeOut" }}
                    >
                        {isExpanded ? <BsArrowsAngleContract size={20} /> : <BsArrowsAngleExpand size={20} />}
                    </motion.div>
                </div>
            </motion.div>
            <motion.div 
                className={styles.horizontalLineLight}
                initial={{ opacity: 0, scaleX: 0 }}
                animate={{ opacity: 1, scaleX: 1 }}
                transition={{ duration: 0.3, ease: "easeOut" }}
                style={{ transformOrigin: "left" }}
            ></motion.div>
            <motion.div
                className={styles.chat_content}
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: "auto", opacity: 1 }}
                transition={{ 
                    duration: 0.4, 
                    ease: [0.4, 0.0, 0.2, 1],
                    height: { duration: 0.4 },
                    opacity: { duration: 0.3 }
                }}
                style={{ overflow: "hidden" }}
            >
                {activeTab === "Chat Area" ? (
                    <DashboardChatArea 
                        selectedPrompt={selectedPrompt}
                        onPromptUsed={onPromptUsed}
                        onWorkflowIdChange={onWorkflowIdChange}
                        resumeWorkflowId={resumeWorkflowId}
                    />
                ) : (
                    <DashboardChatHistory 
                        onWorkflowResume={handleWorkflowResume}
                    />
                )}
            </motion.div>
        </motion.div>
    );
};

export default DashboardChat;