viewer/src/components/ChatWindow.tsx

import React, { useState, useRef, useEffect } from "react";
import { contentItems } from "../../public/data/content";
import { Send } from "lucide-react";
import { useNavigate } from "react-router-dom";
// Commenting out the backend API integration for now
// import { useChatApi, ChatMessage } from "../hooks/useChatApi";

// Define the ChatMessage interface locally since we're not importing it
interface ChatMessage {
  sender: string;
  text: string;
  imageUrl?: string;
  robotId?: string; // Add robotId to track which robot this message refers to
}

// Mock data for quadruped robots
const quadrupedRobots = [
  {
    name: "Go2",
    description:
      "Go1 is a lightweight, agile quadruped companion robot. It can follow you around, carry small items, and navigate complex indoor and outdoor environments. Perfect for research, education, or as a high-tech assistant in various settings.",
    imageUrl:
      "https://mizajlqhooderueazvnp.supabase.co/storage/v1/object/public/robotpicturesbucket/go2_description.png",
    id: "0f041a8f-88cf-4b9c-93ef-a30e8fe2fdb1",
  },
  {
    name: "ANYmal",
    description:
      "ANYmal is a rugged quadrupedal robot designed for autonomous operation in challenging environments. With its sophisticated perception systems, it excels at inspection and monitoring tasks in industrial settings, even in hazardous areas unsafe for humans.",
    imageUrl:
      "https://mizajlqhooderueazvnp.supabase.co/storage/v1/object/public/robotpicturesbucket/anymal_b_description.png",
    id: "68e827db-4035-4ae0-a43c-158b610e21d5",
  },
];

// Function to get a random wait time to simulate thinking
const getRandomWaitTime = () => Math.floor(Math.random() * 150) + 50; // 50-200ms

const ChatWindow: React.FC = () => {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const chatContainerRef = useRef<HTMLDivElement>(null);
  const navigate = useNavigate();

  // Commenting out the backend API integration
  // const { sendMessage, streamResponse, isLoading, error } = useChatApi();

  const handleSend = async () => {
    if (input.trim()) {
      const userMessage = input.trim();

      // Add user message to chat
      setMessages((prevMessages) => [
        ...prevMessages,
        {
          sender: "User",
          text: userMessage,
        },
      ]);

      setInput("");
      setIsLoading(true);

      // Add empty bot message that will be filled with streaming response
      setMessages((prevMessages) => [
        ...prevMessages,
        {
          sender: "Bot",
          text: "",
        },
      ]);

      // Use our mock response generator instead of the API
      await generateMockResponse(userMessage);
    }
  };

  // Generate a fake response about quadruped robots
  const generateMockResponse = async (userMessage: string) => {
    try {
      // Choose a relevant robot based on keywords in user message
      let selectedRobot;
      const userMessageLower = userMessage.toLowerCase();

      if (
        userMessageLower.includes("agile") ||
        userMessageLower.includes("mobility")
      ) {
        selectedRobot = quadrupedRobots.find((robot) => robot.name === "Go2");
      } else if (
        userMessageLower.includes("companion") ||
        userMessageLower.includes("small")
      ) {
        selectedRobot = quadrupedRobots.find((robot) => robot.name === "Go2");
      } else if (
        userMessageLower.includes("inspect") ||
        userMessageLower.includes("monitor") ||
        userMessageLower.includes("industrial")
      ) {
        selectedRobot = quadrupedRobots.find(
          (robot) => robot.name === "ANYmal"
        );
      } else {
        // If no specific match, pick a random robot
        const randomIndex = Math.floor(Math.random() * quadrupedRobots.length);
        selectedRobot = quadrupedRobots[randomIndex];
      }

      // Generate response text
      const responseIntro = getResponseIntro(userMessage);
      const fullResponse = `${responseIntro} ${selectedRobot.name}. ${selectedRobot.description}`;

      // Simulate streaming by adding words one by one with small delays
      const words = fullResponse.split(" ");
      for (const word of words) {
        await new Promise((resolve) =>
          setTimeout(resolve, getRandomWaitTime())
        );

        setMessages((prevMessages) => {
          const updatedMessages = [...prevMessages];
          const lastMessage = updatedMessages[updatedMessages.length - 1];

          if (lastMessage.sender === "Bot") {
            lastMessage.text += word + " ";
          }

          return updatedMessages;
        });
      }

      // Add the image and robot ID at the end
      await new Promise((resolve) => setTimeout(resolve, 300));
      setMessages((prevMessages) => {
        const updatedMessages = [...prevMessages];
        const lastMessage = updatedMessages[updatedMessages.length - 1];

        if (lastMessage.sender === "Bot") {
          lastMessage.imageUrl = selectedRobot.imageUrl;
          lastMessage.robotId = selectedRobot.id; // Store the robot ID for navigation
        }

        return updatedMessages;
      });
    } catch (error) {
      console.error("Error generating mock response:", error);
      // Handle error by providing a generic fallback
      setMessages((prevMessages) => {
        const updatedMessages = [...prevMessages];
        const lastMessage = updatedMessages[updatedMessages.length - 1];

        if (lastMessage.sender === "Bot") {
          lastMessage.text =
            "I'm sorry, I couldn't process your request. Please try asking about robots in a different way.";
        }

        return updatedMessages;
      });
    } finally {
      setIsLoading(false);
    }
  };

  // Navigate to content detail page
  const navigateToRobotDetail = (robotId: string) => {
    if (robotId) {
      navigate(`/content/${robotId}`);
    }
  };

  // Get varied intro phrases to make responses seem more natural
  const getResponseIntro = (userMessage: string) => {
    const introOptions = [
      "Based on your query, I recommend",
      "I think you might be interested in",
      "A great quadruped robot for your needs is",
      "You should check out",
      "Have you considered",
      "I'd suggest looking at",
    ];

    const randomIndex = Math.floor(Math.random() * introOptions.length);
    return introOptions[randomIndex];
  };

  // Fallback response is no longer needed since we're using mock responses

  useEffect(() => {
    if (chatContainerRef.current) {
      setTimeout(() => {
        chatContainerRef.current!.scrollTop =
          chatContainerRef.current!.scrollHeight;
      }, 50); // Add a slight delay to ensure the DOM is updated
    }
  }, [messages]);

  return (
    <div className="bg-[rgba(10,10,20,0.8)] backdrop-blur-lg border border-white/10 text-white p-6 rounded-lg shadow-2xl">
      <div
        ref={chatContainerRef}
        className="overflow-y-auto mb-6 scrollbar-none"
        style={{ maxHeight: "500px" }}
      >
        {messages.length === 0 && (
          <div className="text-center py-8 text-gray-400 italic">
            Ask me about robots, and I'll help you find the perfect fit for your
            needs. NOTE: For this demo, I only know about Go2 and ANYmal + don't
            want to use up all my LLM credits.
          </div>
        )}

        {messages.map((message, index) => (
          <div
            key={index}
            className={`mb-4 ${
              message.sender === "User" ? "text-right" : "text-left"
            } animate-fade-in`}
          >
            <div className="flex items-start gap-2 mb-1">
              <span
                className={`text-sm font-semibold ${
                  message.sender === "User" ? "ml-auto" : ""
                }`}
              >
                {message.sender === "User" ? "You" : "Assistant"}
              </span>
            </div>

            <span
              className={`inline-block px-4 py-3 rounded-lg ${
                message.sender === "User"
                  ? "bg-blue-600 text-white"
                  : "bg-gray-700/70"
              }`}
              style={{ whiteSpace: "pre-wrap" }}
            >
              {message.text}
            </span>

            {message.imageUrl && (
              <div
                className="mt-3 transition-all duration-300 hover:scale-105 cursor-pointer"
                onClick={() =>
                  message.robotId && navigateToRobotDetail(message.robotId)
                }
                title="Click to view robot details"
              >
                <img
                  src={message.imageUrl}
                  alt="Robot"
                  className="rounded-lg w-auto shadow-lg border border-white/10 hover:border-white/30"
                  style={{ maxHeight: "260px" }}
                />
                <div className="text-xs text-blue-300 mt-1 text-center">
                  Click to view details
                </div>
              </div>
            )}
          </div>
        ))}

        {isLoading &&
          messages.length > 0 &&
          !messages[messages.length - 1].text && (
            <div className="text-left animate-pulse">
              <span className="inline-block px-4 py-3 rounded-lg bg-gray-700/50">
                <div className="flex space-x-1">
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-75"></div>
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-150"></div>
                </div>
              </span>
            </div>
          )}
      </div>

      <div className="flex items-center relative">
        <textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          rows={1}
          placeholder="Type your message..."
          onInput={(e) => {
            const target = e.target as HTMLTextAreaElement;
            target.style.height = "auto";
            target.style.height = `${target.scrollHeight}px`;
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              handleSend();
            }
          }}
          className="flex-1 px-4 py-4 rounded-lg bg-gray-800/80 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-white/25 resize-none overflow-hidden pr-12 border border-white/5"
        />
        <button
          onClick={handleSend}
          className="absolute right-2 bottom-2 p-2.5 bg-blue-600 rounded-full hover:bg-blue-700 transition-colors disabled:opacity-50"
          disabled={isLoading}
        >
          <Send size={18} className="text-white" />
        </button>
      </div>
    </div>
  );
};

export default ChatWindow;