import { useState, useRef, useEffect, type ReactNode } from 'react';
import { Send, MessageCircle, Settings, Search, BarChart3, User, Bot, Sparkles, HelpCircle, Moon, Sun, Globe, Database, BookOpen, Crown, Zap, Menu, ChevronLeft, ChevronRight, ThumbsUp, ThumbsDown, MessageSquare } from 'lucide-react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Message } from './Message';
import { TypingIndicator } from './TypingIndicator';
import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription } from './ui/sheet';
import { Textarea } from './ui/textarea';
import { motion, AnimatePresence } from 'motion/react';

interface ChatMessage {
  id: string;
  content: string;
  isUser: boolean;
  timestamp: Date;
  isPlusResponse?: boolean;
  sources?: Array<{ name: string; icon: ReactNode; url?: string }>;
}

export function ChatInterface() {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [isTyping, setIsTyping] = useState(false);
  const [showComingSoon, setShowComingSoon] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(false);
  const [isUnivAiPlusMode, setIsUnivAiPlusMode] = useState(false);
  const [hasUsedPlusResponse, setHasUsedPlusResponse] = useState(false);
  const [currentSources, setCurrentSources] = useState<Array<{ name: string; icon: ReactNode; url?: string }>>([]);
  const [showFeedback, setShowFeedback] = useState(false);
  const [feedbackType, setFeedbackType] = useState<'positive' | 'negative' | null>(null);
  const [feedbackComment, setFeedbackComment] = useState('');
  const [lastBotMessageId, setLastBotMessageId] = useState<string | null>(null);
  const [leftSheetOpen, setLeftSheetOpen] = useState(false);
  const [rightSheetOpen, setRightSheetOpen] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // Initialize messages based on current mode
  useEffect(() => {
    const initialMessage: ChatMessage = {
      id: '1',
      content: isUnivAiPlusMode 
        ? "Feel free to explore UnivAi+++ for a richer, more responsive conversation experience. Please note: due to limited computational resources, the AI can provide only one response per session. Make it count!"
        : "Hello! I'm your AI assistant. How can I help you today? Feel free to ask me anything!",
      isUser: false,
      timestamp: new Date(),
      isPlusResponse: isUnivAiPlusMode
    };
    setMessages([initialMessage]);
    setHasUsedPlusResponse(false);
    setCurrentSources([]); // Reset sources when switching modes
    setShowFeedback(false);
    setFeedbackType(null);
    setFeedbackComment('');
  }, [isUnivAiPlusMode]);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages, isTyping]);

  useEffect(() => {
    // Apply dark mode class to document
    if (isDarkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDarkMode]);

  const handleSendMessage = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputValue.trim()) return;
    if (isUnivAiPlusMode && hasUsedPlusResponse) return; // Prevent sending if already used Plus response

    const userMessage: ChatMessage = {
      id: Date.now().toString(),
      content: inputValue,
      isUser: true,
      timestamp: new Date(),
    };

    setMessages(prev => [...prev, userMessage]);
    setInputValue('');
    setIsTyping(true);

    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          query: inputValue,
          dev_mode: isUnivAiPlusMode,
        }),
      });
      const data = await res.json();
      // Optionally, you can extract sources from data if provided
      const botResponse: ChatMessage = {
        id: (Date.now() + 1).toString(),
        content: data.response,
        isUser: false,
        timestamp: new Date(),
        isPlusResponse: isUnivAiPlusMode,
        sources: [], // Optionally fill from data.source
      };

      setMessages(prev => [...prev, botResponse]);
      setCurrentSources([]); // Optionally update if sources are available
      setIsTyping(false);
      setLastBotMessageId(botResponse.id);

      // Show feedback form after bot response
      setShowFeedback(true);
      setFeedbackType(null);
      setFeedbackComment('');

      // Mark Plus response as used
      if (isUnivAiPlusMode) {
        setHasUsedPlusResponse(true);
      }
    } catch (err) {
      setIsTyping(false);
    }
  };

  const handleFeedbackSubmit = async () => {
    console.log('Feedback submitted:', { messageId: lastBotMessageId, feedbackType, feedbackComment });
    if (!lastBotMessageId) return;
    const lastBotMsg = messages.find(m => m.id === lastBotMessageId);
    if (!lastBotMsg) return;
    try {
      await fetch('/api/feedback', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          query: lastBotMsg.content,
          response: lastBotMsg.content,
          feedback: feedbackType,
        }),
      });
      setFeedbackType(null);
      setFeedbackComment('');
    } catch (err) {
      // Optionally handle error
    }
  };



  const handleComingSoonClick = () => {
    setShowComingSoon(true);
    setTimeout(() => {
      setShowComingSoon(false);
    }, 2000);
  };

  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
  };

  const toggleUnivAiMode = () => {
    setIsUnivAiPlusMode(!isUnivAiPlusMode);
  };

  const sidebarItems = [
    { icon: <MessageCircle size={20} />, active: true },
    { icon: <BarChart3 size={20} />, active: false },
    { icon: <Search size={20} />, active: false },
    { icon: <User size={20} />, active: false },
    { icon: <Settings size={20} />, active: false },
  ];

  const isInputDisabled = isTyping || (isUnivAiPlusMode && hasUsedPlusResponse);

  // Sidebar content components
  const LeftSidebarContent = () => (
    <>
      {/* Logo */}
      <div className={`w-9 h-9 rounded-lg flex items-center justify-center mb-6 shadow-lg transition-all duration-300 ${
        isUnivAiPlusMode
          ? 'bg-gradient-to-r from-purple-500 to-pink-500 shadow-purple-500/30'
          : 'bg-gradient-to-r from-red-500 to-orange-500 shadow-red-500/30'
      }`}>
        {isUnivAiPlusMode ? <Crown className="text-white" size={20} /> : <Bot className="text-white" size={20} />}
      </div>

      {/* Navigation */}
      <div className="flex flex-col gap-3">
        {sidebarItems.map((item, index) => (
          <motion.button
            key={index}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.95 }}
            onClick={!item.active ? handleComingSoonClick : undefined}
            className={`
              w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-200
              ${item.active 
                ? isUnivAiPlusMode
                  ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg shadow-purple-500/30'
                  : 'bg-gradient-to-r from-red-500 to-orange-500 text-white shadow-lg shadow-red-500/30'
                : 'bg-white/80 text-red-600 hover:bg-white hover:text-red-700 shadow-sm cursor-pointer dark:bg-gray-800/80 dark:text-red-400 dark:hover:bg-gray-700'
              }
            `}
          >
            {item.active ? item.icon : <HelpCircle size={18} />}
          </motion.button>
        ))}
      </div>
    </>
  );

  const RightSidebarContent = () => (
    <>
      {/* AI Status Card - More compact */}
      <div className={`rounded-xl p-4 border backdrop-blur-sm shadow-lg transition-all duration-300 min-h-[200px] ${
        isUnivAiPlusMode
          ? 'bg-gradient-to-br from-white/90 to-purple-50/90 border-purple-200/50 shadow-purple-100/30 dark:from-gray-800/90 dark:to-purple-900/90 dark:border-purple-600/50 dark:shadow-purple-900/30'
          : 'bg-gradient-to-br from-white/90 to-red-50/90 border-red-200/50 shadow-red-100/30 dark:from-gray-800/90 dark:to-gray-700/90 dark:border-gray-600/50 dark:shadow-gray-900/30'
      }`}>
        <div className="flex items-center justify-center mb-3">
          <div className={`w-16 h-16 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 ${
            isUnivAiPlusMode
              ? 'bg-gradient-to-r from-purple-400 to-pink-500 shadow-purple-500/30'
              : 'bg-gradient-to-r from-yellow-400 to-orange-500 shadow-yellow-500/30'
          }`}>
            {isUnivAiPlusMode ? <Crown className="text-white" size={24} /> : <Bot className="text-white" size={24} />}
          </div>
        </div>
        <div className="text-center">
          {/* Fixed height container for title */}
          <div className="h-6 overflow-hidden flex items-center justify-center mb-1">
            <motion.h3 
              key={isUnivAiPlusMode ? 'plus' : 'regular'}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.2 }}
              className={`text-sm transition-all duration-300 whitespace-nowrap flex items-center ${
                isUnivAiPlusMode
                  ? 'text-purple-900 dark:text-purple-100'
                  : 'text-red-900 dark:text-red-100'
              }`}
            >
              {isUnivAiPlusMode ? 'UnivAi+++' : 'UnivAi'}
              {isUnivAiPlusMode && <Crown className="ml-1" size={12} />}
            </motion.h3>
          </div>
          {/* Fixed height container for description */}
          <div className="h-5 overflow-hidden flex items-center justify-center mb-3">
            <motion.p 
              key={isUnivAiPlusMode ? 'plus-desc' : 'regular-desc'}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.2 }}
              className={`text-xs text-center transition-all duration-300 ${
                isUnivAiPlusMode
                  ? 'text-purple-700/80 dark:text-purple-300/80'
                  : 'text-red-700/80 dark:text-red-300/80'
              }`}
            >
              {isUnivAiPlusMode 
                ? 'Smarter with human-like responses' 
                : 'Any PUP-Related Queries?'
              }
            </motion.p>
          </div>
          {/* Fixed button */}
          <div className="flex justify-center">
            <Button 
              size="sm" 
              onClick={toggleUnivAiMode}
              className={`text-white border-0 shadow-lg transition-all duration-300 text-xs px-3 py-1 w-40 h-7 ${
                isUnivAiPlusMode
                  ? 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 shadow-purple-500/20'
                  : 'bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 shadow-red-500/20'
              }`}
            >
              <span className="truncate">
                {isUnivAiPlusMode ? 'Switch to UnivAi' : 'Try the New UnivAi+++'}
              </span>
            </Button>
          </div>
        </div>
      </div>

      {/* Chat Stats - Equalized for both modes */}
      <div className={`rounded-xl p-3 border backdrop-blur-sm shadow-lg transition-all duration-300 ${
        isUnivAiPlusMode
          ? 'bg-gradient-to-br from-white/90 to-pink-50/90 border-pink-200/50 shadow-pink-100/30 dark:from-gray-800/90 dark:to-pink-900/90 dark:border-pink-600/50 dark:shadow-pink-900/30'
          : 'bg-gradient-to-br from-white/90 to-orange-50/90 border-orange-200/50 shadow-orange-100/30 dark:from-gray-800/90 dark:to-gray-700/90 dark:border-gray-600/50 dark:shadow-gray-900/30'
      }`}>
        <h4 className={`mb-2 text-sm transition-all duration-300 ${
          isUnivAiPlusMode
            ? 'text-purple-900 dark:text-purple-100'
            : 'text-red-900 dark:text-red-100'
        }`}>Chat Statistics</h4>
        <div className="space-y-2">
          <div className="flex justify-between">
            <span className={`text-xs transition-all duration-300 ${
              isUnivAiPlusMode
                ? 'text-purple-700/80 dark:text-purple-300/80'
                : 'text-red-700/80 dark:text-red-300/80'
            }`}>Response Time</span>
            <span className={`text-xs transition-all duration-300 ${
              isUnivAiPlusMode
                ? 'text-purple-900 dark:text-purple-100'
                : 'text-red-900 dark:text-red-100'
            }`}>{isUnivAiPlusMode ? '2.5s' : '1.2s'}</span>
          </div>
          <div className="flex justify-between">
            <span className={`text-xs transition-all duration-300 ${
              isUnivAiPlusMode
                ? 'text-purple-700/80 dark:text-purple-300/80'
                : 'text-red-700/80 dark:text-red-300/80'
            }`}>Status</span>
            <span className="text-green-600 text-xs">{isUnivAiPlusMode ? 'Premium' : 'Online'}</span>
          </div>
          <div className="flex justify-between">
            <span className={`text-xs transition-all duration-300 ${
              isUnivAiPlusMode
                ? 'text-purple-700/80 dark:text-purple-300/80'
                : 'text-red-700/80 dark:text-red-300/80'
            }`}>{isUnivAiPlusMode ? 'Responses Left' : 'Queries Processed'}</span>
            <span className={`text-xs transition-all duration-300 ${
              isUnivAiPlusMode
                ? 'text-purple-900 dark:text-purple-100'
                : 'text-red-900 dark:text-red-100'
            }`}>{isUnivAiPlusMode ? (hasUsedPlusResponse ? '0' : '1') : '∞'}</span>
          </div>
        </div>
      </div>

      {/* Sources - More compact */}
      <div className={`rounded-xl p-3 border backdrop-blur-sm shadow-lg transition-all duration-300 ${
        isUnivAiPlusMode
          ? 'bg-gradient-to-br from-white/90 to-amber-50/90 border-amber-200/50 shadow-amber-100/30 dark:from-gray-800/90 dark:to-amber-900/90 dark:border-amber-600/50 dark:shadow-amber-900/30'
          : 'bg-gradient-to-br from-white/90 to-yellow-50/90 border-yellow-200/50 shadow-yellow-100/30 dark:from-gray-800/90 dark:to-gray-700/90 dark:border-gray-600/50 dark:shadow-gray-900/30'
      }`}>
        <h4 className={`mb-2 text-sm transition-all duration-300 ${
          isUnivAiPlusMode
            ? 'text-purple-900 dark:text-purple-100'
            : 'text-red-900 dark:text-red-100'
        }`}>Sources</h4>
        <div className="space-y-2 min-h-[40px]">
          {currentSources.length === 0 ? (
            <div className="flex items-center justify-center py-2">
              <p className={`text-xs text-center transition-all duration-300 ${
                isUnivAiPlusMode
                  ? 'text-purple-600/60 dark:text-purple-400/60'
                  : 'text-red-600/60 dark:text-red-400/60'
              }`}>
                Sources will appear here after AI responses
              </p>
            </div>
          ) : (
            currentSources.map((source, index) => (
              <motion.div 
                key={index} 
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                className="flex items-center justify-between"
              >
                <div className="flex items-center gap-2 min-w-0 flex-1">
                  <div className={`transition-all duration-300 flex-shrink-0 ${
                    isUnivAiPlusMode
                      ? 'text-purple-600 dark:text-purple-400'
                      : 'text-red-600 dark:text-red-400'
                  }`}>
                    {source.icon}
                  </div>
                  <span className={`text-xs transition-all duration-300 truncate ${
                    isUnivAiPlusMode
                      ? 'text-purple-700/80 dark:text-purple-300/80'
                      : 'text-red-700/80 dark:text-red-300/80'
                  }`}>{source.name}</span>
                </div>
                {source.url && (
                  <button
                    onClick={() => window.open(source.url, '_blank')}
                    className={`text-xs px-2 py-1 rounded-full transition-all duration-300 flex-shrink-0 hover:opacity-80 ${
                      isUnivAiPlusMode
                        ? 'bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 dark:from-purple-900/30 dark:to-pink-900/30 dark:text-purple-400'
                        : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                    }`}
                  >
                    View
                  </button>
                )}
              </motion.div>
            ))
          )}
        </div>
      </div>
    </>
  );

  return (
    <div className={`h-screen flex p-1 md:p-2 transition-all duration-500 ${
      isUnivAiPlusMode 
        ? 'bg-gradient-to-br from-purple-100 via-pink-50 to-amber-50 dark:from-purple-900 dark:via-indigo-900 dark:to-amber-900' 
        : 'bg-gradient-to-br from-orange-100 via-red-50 to-yellow-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900'
    }`}>
      {/* Coming Soon Toast */}
      <AnimatePresence>
        {showComingSoon && (
          <motion.div
            initial={{ opacity: 0, y: -50, x: '-50%' }}
            animate={{ opacity: 1, y: 0, x: '-50%' }}
            exit={{ opacity: 0, y: -50, x: '-50%' }}
            className="fixed top-4 left-1/2 z-50 bg-gradient-to-r from-red-500 to-orange-500 text-white px-6 py-3 rounded-lg shadow-lg shadow-red-500/30"
          >
            <p className="text-sm">Coming soon!</p>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Usage Limit Warning */}
      <AnimatePresence>
        {isUnivAiPlusMode && hasUsedPlusResponse && (
          <motion.div
            initial={{ opacity: 0, y: -50, x: '-50%' }}
            animate={{ opacity: 1, y: 0, x: '-50%' }}
            exit={{ opacity: 0, y: -50, x: '-50%' }}
            className="fixed top-16 left-1/2 z-50 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-lg shadow-lg shadow-purple-500/30"
          >
            <p className="text-sm">UnivAi+++ limit reached. Switch to UnivAi to continue.</p>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Dark Mode Toggle - Top Right */}
      <motion.button
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        onClick={toggleDarkMode}
        className={`fixed top-2 right-2 md:top-3 md:right-3 z-40 w-8 h-8 md:w-10 md:h-10 rounded-full text-white flex items-center justify-center shadow-lg transition-all duration-200 hover:scale-110 ${
          isUnivAiPlusMode
            ? 'bg-gradient-to-r from-purple-500 to-pink-500 shadow-purple-500/30 hover:shadow-purple-500/50'
            : 'bg-gradient-to-r from-red-500 to-orange-500 shadow-red-500/30 hover:shadow-red-500/50'
        }`}
      >
        <motion.div
          key={isDarkMode ? 'dark' : 'light'}
          initial={{ rotate: -180, opacity: 0 }}
          animate={{ rotate: 0, opacity: 1 }}
          transition={{ duration: 0.3 }}
        >
          {isDarkMode ? <Sun size={16} className="md:w-[18px] md:h-[18px]" /> : <Moon size={16} className="md:w-[18px] md:h-[18px]" />}
        </motion.div>
      </motion.button>

      {/* Mobile Left Sheet Trigger */}
      <Sheet open={leftSheetOpen} onOpenChange={setLeftSheetOpen}>
        <SheetTrigger asChild>
          <motion.button
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            className={`md:hidden fixed left-0 top-1/2 -translate-y-1/2 z-30 w-8 h-16 rounded-r-lg flex items-center justify-center shadow-lg transition-all duration-200 ${
              isUnivAiPlusMode
                ? 'bg-gradient-to-r from-purple-500 to-pink-500 shadow-purple-500/30'
                : 'bg-gradient-to-r from-red-500 to-orange-500 shadow-red-500/30'
            }`}
          >
            <ChevronRight className="text-white" size={20} />
          </motion.button>
        </SheetTrigger>
        <SheetContent side="left" className={`w-20 p-3 transition-all duration-300 ${
          isUnivAiPlusMode
            ? 'bg-gradient-to-br from-white/95 to-purple-50/95 border-purple-200/50'
            : 'bg-gradient-to-br from-white/95 to-red-50/95 border-red-200/50'
        }`}>
          <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
          <SheetDescription className="sr-only">
            Access chat navigation, statistics, search, profile, and settings
          </SheetDescription>
          <div className="flex flex-col items-center py-3">
            <LeftSidebarContent />
          </div>
        </SheetContent>
      </Sheet>

      {/* Sidebar - Desktop only */}
      <motion.div 
        initial={{ x: -20, opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        className="hidden md:flex w-14 flex-col items-center py-3 px-1 mr-2"
      >
        <LeftSidebarContent />
      </motion.div>

      {/* Main Container */}
      <div className={`flex-1 flex flex-col rounded-2xl backdrop-blur-sm border overflow-hidden shadow-xl transition-all duration-300 ${
        isUnivAiPlusMode
          ? 'bg-white/95 border-purple-200/50 shadow-purple-100/50 dark:bg-gray-900/95 dark:border-purple-700/50 dark:shadow-purple-900/50'
          : 'bg-white/90 border-red-200/50 shadow-red-100/50 dark:bg-gray-900/90 dark:border-gray-700/50 dark:shadow-gray-900/50'
      }`}>
        {/* Header */}
        <motion.div 
          initial={{ y: -20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          className={`p-3 md:p-4 border-b backdrop-blur-sm transition-all duration-300 flex-shrink-0 ${
            isUnivAiPlusMode
              ? 'border-purple-200/50 bg-gradient-to-r from-white/95 to-purple-50/95 dark:from-gray-900/95 dark:to-purple-900/95 dark:border-purple-700/50'
              : 'border-red-200/50 bg-gradient-to-r from-white/95 to-red-50/95 dark:from-gray-900/95 dark:to-gray-800/95 dark:border-gray-700/50'
          }`}
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
              <div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
                <div className={`w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center shadow-lg transition-all duration-300 flex-shrink-0 ${
                  isUnivAiPlusMode
                    ? 'bg-gradient-to-r from-purple-400 to-pink-500 shadow-purple-500/30'
                    : 'bg-gradient-to-r from-yellow-400 to-orange-500 shadow-yellow-500/30'
                }`}>
                  {isUnivAiPlusMode ? <Crown className="text-white" size={16} /> : <Bot className="text-white" size={16} />}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="overflow-hidden">
                    <motion.h1 
                      key={isUnivAiPlusMode ? 'plus-header' : 'regular-header'}
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      transition={{ duration: 0.2 }}
                      className={`transition-all duration-300 truncate whitespace-nowrap ${
                        isUnivAiPlusMode
                          ? 'text-purple-900 dark:text-purple-100'
                          : 'text-red-900 dark:text-red-100'
                      }`}
                    >
                      {isUnivAiPlusMode ? 'UnivAi+++' : 'UnivAi'}
                      {isUnivAiPlusMode && <Crown className="inline ml-1 md:ml-2" size={12} />}
                    </motion.h1>
                  </div>
                  <p className={`text-xs md:text-sm transition-all duration-300 truncate ${
                    isUnivAiPlusMode
                      ? 'text-purple-700/80 dark:text-purple-300/80'
                      : 'text-red-700/80 dark:text-red-300/80'
                  }`}>
                    {isUnivAiPlusMode ? 'Premium AI Experience' : 'Always ready to help'}
                  </p>
                </div>
              </div>
            </div>
            <div className="flex items-center gap-2 flex-shrink-0">
              <div className={`w-5 h-5 md:w-6 md:h-6 rounded-full shadow-lg transition-all duration-300 ${
                isUnivAiPlusMode
                  ? 'bg-gradient-to-r from-purple-400 to-pink-500 shadow-purple-500/20'
                  : 'bg-gradient-to-r from-yellow-400 to-orange-500 shadow-yellow-500/20'
              }`}></div>
            </div>
          </div>
        </motion.div>

        {/* Chat Container */}
        <div className="flex-1 flex min-h-0">
          {/* Messages Area */}
          <div className="flex-1 flex flex-col min-h-0">
            {/* Messages */}
            <div className={`flex-1 overflow-y-auto p-2 md:p-4 transition-all duration-300 ${
              isUnivAiPlusMode
                ? 'bg-gradient-to-br from-white to-purple-50/30 dark:from-gray-900 dark:to-purple-900/30'
                : 'bg-gradient-to-br from-white to-red-50/30 dark:from-gray-900 dark:to-gray-800/30'
            }`}>
              <div className="max-w-4xl mx-auto space-y-3 md:space-y-4">
                {messages.map((message) => (
                  <Message
                    key={message.id}
                    content={message.content}
                    isUser={message.isUser}
                    timestamp={message.timestamp}
                    isPlusResponse={message.isPlusResponse}
                    isUnivAiPlusMode={isUnivAiPlusMode}
                  />
                ))}
                {isTyping && <TypingIndicator isUnivAiPlusMode={isUnivAiPlusMode} />}
                <div ref={messagesEndRef} />
              </div>
            </div>

            {/* Feedback Section - Appears after AI responses */}
            <AnimatePresence>
              {showFeedback && messages.length > 1 && (
                <motion.div 
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: 20 }}
                  className={`px-2 md:px-4 pb-2 md:pb-3 transition-all duration-300 flex-shrink-0 ${
                    isUnivAiPlusMode
                      ? 'bg-gradient-to-r from-white to-purple-50/30 dark:from-gray-900 dark:to-purple-900/30'
                      : 'bg-gradient-to-r from-white to-red-50/30 dark:from-gray-900 dark:to-gray-800/30'
                  }`}
                >
                  <div className={`max-w-4xl mx-auto rounded-xl p-3 md:p-4 border backdrop-blur-sm shadow-lg transition-all duration-300 ${
                    isUnivAiPlusMode
                      ? 'bg-gradient-to-br from-white/95 to-purple-50/95 border-purple-200/50 shadow-purple-100/30 dark:from-gray-800/95 dark:to-purple-900/95 dark:border-purple-600/50'
                      : 'bg-gradient-to-br from-white/95 to-red-50/95 border-red-200/50 shadow-red-100/30 dark:from-gray-800/95 dark:to-gray-700/95 dark:border-gray-600/50'
                  }`}>
                    <div className="flex items-center gap-2 mb-3">
                      <MessageSquare className={`${
                        isUnivAiPlusMode
                          ? 'text-purple-600 dark:text-purple-400'
                          : 'text-red-600 dark:text-red-400'
                      }`} size={18} />
                      <h4 className={`text-sm transition-all duration-300 ${
                        isUnivAiPlusMode
                          ? 'text-purple-900 dark:text-purple-100'
                          : 'text-red-900 dark:text-red-100'
                      }`}>How was this response?</h4>
                    </div>
                    
                    <div className="flex gap-2 mb-3">
                      <Button
                        variant={feedbackType === 'positive' ? 'default' : 'outline'}
                        size="sm"
                        onClick={() => setFeedbackType('positive')}
                        className={`flex items-center gap-1.5 transition-all duration-300 text-xs ${
                          feedbackType === 'positive'
                            ? isUnivAiPlusMode
                              ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-purple-500/30'
                              : 'bg-gradient-to-r from-red-500 to-orange-500 text-white shadow-red-500/30'
                            : isUnivAiPlusMode
                            ? 'border-purple-200 text-purple-700 hover:bg-purple-50 dark:border-purple-600 dark:text-purple-300'
                            : 'border-red-200 text-red-700 hover:bg-red-50 dark:border-red-600 dark:text-red-300'
                        }`}
                      >
                        <ThumbsUp size={14} />
                        Helpful
                      </Button>
                      <Button
                        variant={feedbackType === 'negative' ? 'default' : 'outline'}
                        size="sm"
                        onClick={() => setFeedbackType('negative')}
                        className={`flex items-center gap-1.5 transition-all duration-300 text-xs ${
                          feedbackType === 'negative'
                            ? isUnivAiPlusMode
                              ? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-purple-500/30'
                              : 'bg-gradient-to-r from-red-500 to-orange-500 text-white shadow-red-500/30'
                            : isUnivAiPlusMode
                            ? 'border-purple-200 text-purple-700 hover:bg-purple-50 dark:border-purple-600 dark:text-purple-300'
                            : 'border-red-200 text-red-700 hover:bg-red-50 dark:border-red-600 dark:text-red-300'
                        }`}
                      >
                        <ThumbsDown size={14} />
                        Not helpful
                      </Button>
                    </div>

                    <Textarea
                      value={feedbackComment}
                      onChange={(e) => setFeedbackComment(e.target.value)}
                      placeholder="Additional comments (optional)..."
                      className={`mb-2 text-sm transition-all duration-300 ${
                        isUnivAiPlusMode
                          ? 'border-purple-200 focus:border-purple-400 dark:border-purple-600'
                          : 'border-red-200 focus:border-red-400 dark:border-red-600'
                      }`}
                      rows={2}
                    />

                    <div className="flex justify-end">
                      <Button
                        size="sm"
                        onClick={handleFeedbackSubmit}
                        disabled={!feedbackType}
                        className={`text-xs transition-all duration-300 ${
                          isUnivAiPlusMode
                            ? 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-purple-500/30'
                            : 'bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white shadow-red-500/30'
                        }`}
                      >
                        Submit Feedback
                      </Button>
                    </div>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

            {/* Input */}
            <motion.div 
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              className={`p-2 md:p-4 border-t backdrop-blur-sm transition-all duration-300 flex-shrink-0 ${
                isUnivAiPlusMode
                  ? 'border-purple-200/50 bg-gradient-to-r from-white/95 to-purple-50/95 dark:from-gray-900/95 dark:to-purple-900/95 dark:border-purple-700/50'
                  : 'border-red-200/50 bg-gradient-to-r from-white/95 to-red-50/95 dark:from-gray-900/95 dark:to-gray-800/95 dark:border-gray-700/50'
              }`}
            >
              <div className="max-w-4xl mx-auto">
                <form onSubmit={handleSendMessage} className="flex gap-2 md:gap-3">
                  <div className="flex-1 relative">
                    <Input
                      value={inputValue}
                      onChange={(e) => setInputValue(e.target.value)}
                      placeholder={
                        isUnivAiPlusMode && hasUsedPlusResponse 
                          ? "Switch to UnivAi to continue..." 
                          : "Type your message..."
                      }
                      className={`backdrop-blur-sm transition-all duration-200 shadow-sm text-sm ${
                        isUnivAiPlusMode
                          ? 'bg-white/90 border-purple-200 text-purple-900 placeholder:text-purple-500/60 focus:bg-white focus:border-purple-400 dark:bg-gray-800/90 dark:border-purple-600 dark:text-purple-100 dark:placeholder:text-purple-400/60 dark:focus:bg-gray-800'
                          : 'bg-white/90 border-red-200 text-red-900 placeholder:text-red-500/60 focus:bg-white focus:border-red-400 dark:bg-gray-800/90 dark:border-gray-600 dark:text-red-100 dark:placeholder:text-red-400/60 dark:focus:bg-gray-800'
                      }`}
                      disabled={isInputDisabled}
                    />
                  </div>
                  <Button 
                    type="submit" 
                    disabled={!inputValue.trim() || isInputDisabled}
                    className={`text-white border-0 shadow-lg transition-all duration-300 px-3 md:px-4 ${
                      isUnivAiPlusMode
                        ? 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 shadow-purple-500/30'
                        : 'bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 shadow-red-500/30'
                    }`}
                  >
                    <Send size={16} className="md:w-[18px] md:h-[18px]" />
                  </Button>
                </form>
              </div>
            </motion.div>
          </div>

          {/* Stats Sidebar - Desktop & Tablet */}
          <motion.div 
            initial={{ x: 20, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            className={`hidden md:flex w-72 flex-shrink-0 border-l p-4 space-y-4 transition-all duration-300 overflow-y-auto flex-col ${
              isUnivAiPlusMode
                ? 'border-purple-200/50 bg-gradient-to-br from-white/50 to-purple-50/50 dark:from-gray-900/50 dark:to-purple-900/50 dark:border-purple-700/50'
                : 'border-red-200/50 bg-gradient-to-br from-white/50 to-yellow-50/50 dark:from-gray-900/50 dark:to-gray-800/50 dark:border-gray-700/50'
            }`}
          >
            <RightSidebarContent />
          </motion.div>
        </div>
      </div>

      {/* Mobile Right Sheet Trigger */}
      <Sheet open={rightSheetOpen} onOpenChange={setRightSheetOpen}>
        <SheetTrigger asChild>
          <motion.button
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            className={`md:hidden fixed right-0 top-1/2 -translate-y-1/2 z-30 w-8 h-16 rounded-l-lg flex items-center justify-center shadow-lg transition-all duration-200 ${
              isUnivAiPlusMode
                ? 'bg-gradient-to-r from-purple-500 to-pink-500 shadow-purple-500/30'
                : 'bg-gradient-to-r from-red-500 to-orange-500 shadow-red-500/30'
            }`}
          >
            <ChevronLeft className="text-white" size={20} />
          </motion.button>
        </SheetTrigger>
        <SheetContent side="right" className={`w-80 p-4 transition-all duration-300 overflow-y-auto ${
          isUnivAiPlusMode
            ? 'bg-gradient-to-br from-white/95 to-purple-50/95 border-purple-200/50'
            : 'bg-gradient-to-br from-white/95 to-red-50/95 border-red-200/50'
        }`}>
          <SheetTitle className="sr-only">Chat Information Panel</SheetTitle>
          <SheetDescription className="sr-only">
            View AI status, chat statistics, and source references
          </SheetDescription>
          <div className="space-y-4">
            <RightSidebarContent />
          </div>
        </SheetContent>
      </Sheet>
    </div>
  );
}