// 
// components/ChatbotModal.tsx
import React, { useState, useEffect, useRef } from "react";
import { Send, Paperclip, X } from "lucide-react";
import { Modal } from "@/components/ui/modal";
import { Input } from "@/components/ui/input";
import apis from "@/utils/apis";
import ReactMarkdown from "react-markdown";

interface ChatbotModalProps {
    isOpen: boolean;
    onClose: () => void;
}

interface Message {
    sender: "user" | "bot";
    message: string;
    imageUrl?: string;
}

const ChatbotModal: React.FC<ChatbotModalProps> = ({ isOpen, onClose }) => {
    const [userMessage, setUserMessage] = useState<string>("");
    const [chatMessages, setChatMessages] = useState<Message[]>([]);
    const [chatId, setChatId] = useState<string | null>(null);
    const [botTyping, setBotTyping] = useState<boolean>(false);
    const [isFirstMessage, setIsFirstMessage] = useState<boolean>(true);
    const [orderId, setOrderId] = useState<string>("");
    const [selectedImage, setSelectedImage] = useState<File | null>(null);
    const [imagePreview, setImagePreview] = useState<string | null>(null);
    const [isResolved, setIsResolved] = useState<boolean>(false);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const chatEndRef = useRef<HTMLDivElement>(null);

    // Auto scroll to bottom
    useEffect(() => {
        chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
    }, [chatMessages, botTyping]);

    // Handle image selection
    const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) {
            setSelectedImage(file);
            const reader = new FileReader();
            reader.onloadend = () => {
                setImagePreview(reader.result as string);
            };
            reader.readAsDataURL(file);
        }
    };

    // Remove selected image
    const removeImage = () => {
        setSelectedImage(null);
        setImagePreview(null);
        if (fileInputRef.current) {
            fileInputRef.current.value = "";
        }
    };

    // Send message to backend locally
    // const handleSendMessage = async () => {
    //     if (!userMessage.trim() && !selectedImage) return;

    //     const newMessage: Message = {
    //         sender: "user",
    //         message: userMessage,
    //         imageUrl: imagePreview || undefined,
    //     };
    //     setChatMessages((prev) => [...prev, newMessage]);

    //     const currentMessage = userMessage;
    //     const currentImage = selectedImage;

    //     setUserMessage("");
    //     removeImage();

    //     try {
    //         setBotTyping(true);

    //         let imageKey = null;

    //         // ✅ Upload image first
    //         if (currentImage) {
    //             const uploadRes = await apis.Common.uploadFile("file", currentImage);
    //             console.log(uploadRes);

    //             imageKey = uploadRes.key; // OR uploadRes.image_url
    //         }

    //         // ✅ Send JSON (NOT FormData)
    //         const response = await fetch("https://readygo.api.clonifynow.com/chatbot/message", {
    //             method: "POST",
    //             headers: {
    //                 "Content-Type": "application/json",
    //                 Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiNjlkNWViYzM1NzA1MjlkNGI5OGIxOTAzIiwiY291bnRyeV9jb2RlIjoiKzkxIiwicGhvbmUiOiI4ODg4ODg4ODg4Iiwic2NvcGUiOiJjdXN0b21lciIsImlhdCI6MTc3NjkxODYxMH0.Z4EO6KDVX8IV8XE7knta2njcvUtx-as39kzGqktzImk`,
    //             },
    //             body: JSON.stringify({
    //                 query: currentMessage,
    //                 chatId,
    //                 imageUrl: imageKey, // 👈 IMPORTANT
    //             }),
    //         });

    //         if (!response.ok) {

    //             throw new Error(`HTTP error! status: ${response.status}`);
    //         }

    //         const data = await response.json();

    //         if (data.success) {
    //             if (data.chatSessionId && !chatId) {
    //                 setChatId(data.chatSessionId);
    //             }

    //             setTimeout(() => {
    //                 setChatMessages((prev) => [
    //                     ...prev,
    //                     {
    //                         sender: "bot",
    //                         message: data.reply || "I'm here to help.",
    //                     },
    //                 ]);
    //                 setBotTyping(false);
    //                 if (data.isResolved) {
    //                     setIsResolved(true);
    //                 }

    //             }, 2000);
    //         }


    //     } catch (error) {
    //         console.error(error);
    //         setBotTyping(false);
    //     }
    // };


    // send message dev
    const handleSendMessage = async () => {
        if (!userMessage.trim() && !selectedImage) return;

        const newMessage: Message = {
            sender: "user",
            message: userMessage,
            imageUrl: imagePreview || undefined,
        };

        setChatMessages((prev) => [...prev, newMessage]);

        const currentMessage = userMessage;
        const currentImage = selectedImage;

        setUserMessage("");
        removeImage();

        try {
            setBotTyping(true);

            let imageKey: string | null = null;

            //  Upload first
            if (currentImage) {
                const uploadRes = await apis.Common.uploadFile("file", currentImage);
                imageKey = uploadRes?.key;
            }

            //  Send JSON via API layer
            const res = await apis.complaintChatBot.sendMessage({
                query: currentMessage,
                chatId,
                imageUrl: imageKey,
            });

            if (res?.success) {
                if (!chatId && res?.chatSessionId) {
                    setChatId(res.chatSessionId);
                }

                setTimeout(() => {
                    setChatMessages((prev) => [
                        ...prev,
                        {
                            sender: "bot",
                            message: res.reply || "I'm here to help.",
                        },
                    ]);
                    setBotTyping(false);
                    if (res.isResolved) {
                        setIsResolved(true);
                    }

                }, 2000);
            }
        } catch (error) {
            console.error(error);
        }
    };

    // Send initial greeting when modal opens

    //locally...
    // useEffect(() => {
    //     const startChat = async () => {
    //         try {
    //             setBotTyping(true);
    //             const response = await fetch("https://readygo.api.clonifynow.com/chatbot/chat-start", {
    //                 method: "GET",
    //                 headers: {
    //                     Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiNjlkNWViYzM1NzA1MjlkNGI5OGIxOTAzIiwiY291bnRyeV9jb2RlIjoiKzkxIiwicGhvbmUiOiI4ODg4ODg4ODg4Iiwic2NvcGUiOiJjdXN0b21lciIsImlhdCI6MTc3NjkxODYxMH0.Z4EO6KDVX8IV8XE7knta2njcvUtx-as39kzGqktzImk`,
    //                 },
    //             });
    //             if (!response.ok) {
    //                 throw new Error("Failed to start chat");
    //             }
    //             const data = await response.json();
    //             if (data.success) {
    //                 setChatId(data.chatSessionId);
    //                 const botMessage: Message = {
    //                     sender: "bot",
    //                     message: data.message || "Hi! How can I help you?",
    //                 };
    //                 if (data.isResolved) {
    //                     setIsResolved(true); // 👈 lock chat
    //                 }

    //                 setTimeout(() => {
    //                     setBotTyping(false);
    //                     setChatMessages([botMessage]);
    //                     setIsFirstMessage(false);
    //                 }, 2000);
    //             }
    //         } catch (error) {
    //             console.error("Chat start error:", error);
    //             setBotTyping(false);

    //             setChatMessages([{
    //                 sender: "bot",
    //                 message: "Sorry, something went wrong while starting chat.",
    //             }]);
    //         }
    //     };

    //     if (isOpen && isFirstMessage) {
    //         startChat();
    //     }
    // }, [isOpen, isFirstMessage]);

    //dev
    useEffect(() => {
        const startChat = async () => {
            try {
                setBotTyping(true);

                const data = await apis.complaintChatBot.startChat();

                if (data?.success) {
                    setChatId(data.chatSessionId);

                    const botMessage: Message = {
                        sender: "bot",
                        message: data.message || "Hi! How can I help you?",
                    };

                    if (data.isResolved) {
                        setIsResolved(true);
                    }

                    setTimeout(() => {
                        setChatMessages([botMessage]);
                        setIsFirstMessage(false);
                        setBotTyping(false);
                    }, 2000);
                }
            } catch (err) {
                console.error(err);
                setBotTyping(false);

                setChatMessages([
                    {
                        sender: "bot",
                        message: "Failed to start chat.",
                    },
                ]);
            }
        };

        if (isOpen && isFirstMessage) {
            startChat();
        }
    }, [isOpen, isFirstMessage]);

    // Reset chat when modal closes
    const handleClose = () => {
        setChatMessages([]);
        setChatId(null);
        setIsFirstMessage(true);
        setOrderId("");
        setIsResolved(false);
        removeImage();
        onClose();
    };

    return (
        <Modal
            isOpen={isOpen}
            onClose={handleClose}
            title="Customer Support"
            description="We're here to help with your complaints"
            disableOverflow={true}
        >
            <div className="flex flex-col h-[500px] sm:w-full md:w-[400px] lg:w-[350px] xl:w-[400px] bg-white shadow-lg rounded-lg">
                {/* Chat Messages */}
                <div className="flex-1 overflow-y-auto space-y-4 p-4 bg-gray-50">
                    {chatMessages.map((msg, idx) => (
                        <div
                            key={idx}
                            className={`flex flex-col ${msg.sender === "user" ? "items-end" : "items-start"}`}
                        >
                            <div
                                className={`relative max-w-[80%] rounded-2xl px-4 py-2 ${msg.sender === "user"
                                    ? "bg-primary text-white"
                                    : "bg-white text-gray-800 border border-gray-200"
                                    }`}
                            >
                                <div>
                                    <ReactMarkdown>{msg.message}</ReactMarkdown>
                                </div>
                                {msg.imageUrl && (
                                    <div className="mt-2">
                                        <img
                                            src={msg.imageUrl}
                                            alt="Uploaded proof"
                                            className="max-w-full h-auto rounded-lg"
                                        />
                                    </div>
                                )}
                            </div>
                        </div>
                    ))}

                    {botTyping && (
                        <div className="flex justify-start">
                            <div className="bg-white border border-gray-200 px-4 py-3 rounded-2xl">
                                <style>{`
        @keyframes wave {
          0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
          50% { transform: scaleY(1.3); opacity: 1; }
        }
        .wave-bar {
          width: 3px;
          height: 12px;
          background-color: hsl(var(--primary));
          border-radius: 999px;
          animation: wave 1.6s infinite ease-in-out;
          transform-origin: center;
        }
        .wave-bar:nth-child(1) { animation-delay: 0s; }
        .wave-bar:nth-child(2) { animation-delay: 0.25s; }
        .wave-bar:nth-child(3) { animation-delay: 0.5s; }
      `}</style>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', height: '40px' }}>
                                    <div className="wave-bar" />
                                    <div className="wave-bar" />
                                    <div className="wave-bar" />
                                </div>
                            </div>
                        </div>
                    )}
                    <div ref={chatEndRef} />
                </div>

                {/* Image Preview */}
                {imagePreview && (
                    <div className="px-4 py-2 border-t bg-gray-50">
                        <div className="relative inline-block">
                            <img
                                src={imagePreview}
                                alt="Preview"
                                className="h-20 w-20 object-cover rounded-lg"
                            />
                            <button
                                onClick={removeImage}
                                className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600"
                            >
                                <X size={14} />
                            </button>
                        </div>
                    </div>
                )}

                {/* Input Area */}
                {isResolved ? (
                    <div className="flex items-center gap-2 p-4 bg-white border-t">
                        <p className="text-gray-500">✅ Complaint submitted.</p>
                    </div>
                ) : (
                    <div className="flex items-center gap-2 p-4 bg-white border-t">
                        <input
                            type="file"
                            ref={fileInputRef}
                            onChange={handleImageSelect}
                            accept="image/*"
                            className="hidden"
                        />

                        <button
                            onClick={() => !isResolved && fileInputRef.current?.click()}
                            disabled={isResolved}
                            className="p-2 text-gray-500 hover:text-primary transition duration-200 flex-shrink-0"
                            title="Attach image"
                        >
                            <Paperclip size={20} />
                        </button>

                        <Input
                            type="text"
                            placeholder="Describe your issue..."
                            className="flex-1 p-3 border border-gray-300 rounded-full shadow-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                            value={userMessage}
                            onChange={(e) => setUserMessage(e.target.value)}
                            onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
                        />

                        <button
                            className="p-2 bg-primary text-white rounded-full hover:bg-brand-400 transition duration-200 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
                            onClick={handleSendMessage}
                            disabled={isResolved || (!userMessage.trim() && !selectedImage) || botTyping}
                        >
                            <Send size={20} />
                        </button>
                    </div>
                )}
            </div>
        </Modal>
    );
};

export default ChatbotModal;