import { useState, useRef, useEffect } from 'react';
import MessageContent from './message-content';
import { useChat } from '../../contexts/ChatContext';
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from '@/components/ui/sheet';

export default function FloatingChat() {
  const { isOpen, messages, openChat, closeChat, sendMessage: sendChatMessage, isSendingMessage } = useChat();
  const [inputMessage, setInputMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

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

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

  useEffect(() => {
    if (isOpen && inputRef.current) {
      setTimeout(() => inputRef.current?.focus(), 300);
    }
  }, [isOpen]);

  const sendMessage = async () => {
    if (!inputMessage.trim() || isLoading) return;

    setIsLoading(true);
    const messageText = inputMessage;
    setInputMessage('');

    try {
      await sendChatMessage(messageText, false);
    } finally {
      setIsLoading(false);
      setTimeout(() => {
        if (inputRef.current) {
          inputRef.current.focus();
        }
      }, 100);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  return (
    <>
      {/* Chat Drawer */}
      <Sheet open={isOpen} onOpenChange={(open) => { if (!open) closeChat(); }}>
        <SheetContent
          side="right"
          className="w-full sm:max-w-md p-0 flex flex-col bg-white dark:bg-slate-900 border-l border-emerald-500/20 dark:border-cyan-400/20 [&>button]:hidden"
        >
          <SheetHeader className="p-4 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-emerald-50/50 via-blue-50/30 to-cyan-50/50 dark:from-emerald-900/20 dark:via-blue-900/10 dark:to-cyan-900/20">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 rounded-full bg-gradient-to-r from-emerald-500 via-blue-500 to-cyan-500 flex items-center justify-center shadow-md">
                  <img src="/assets/img/chat_bot.png" alt="PIERCE Bot" className="w-5 h-5" />
                </div>
                <div>
                  <SheetTitle className="font-semibold text-slate-900 dark:text-white text-left">PIERCE</SheetTitle>
                  <SheetDescription className="sr-only">Chat con el asistente PIERCE</SheetDescription>
                  <div className="flex items-center space-x-1">
                    <div className="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
                    <span className="text-xs text-slate-500 dark:text-slate-400">online</span>
                  </div>
                </div>
              </div>
              <button
                onClick={closeChat}
                className="w-8 h-8 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center justify-center transition-colors cursor-pointer"
                aria-label="Cerrar chat"
              >
                <svg className="w-5 h-5 text-slate-500 dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </SheetHeader>

          {/* Messages */}
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {messages.map((message) => (
              <div
                key={message.id}
                className={`flex ${message.isUser ? 'justify-end' : 'justify-start'}`}
              >
                <div
                  className={`max-w-[80%] rounded-2xl px-4 py-2 ${message.isUser
                    ? 'bg-gradient-to-r from-emerald-500 via-blue-500 to-cyan-500 text-white shadow-md'
                    : 'bg-gradient-to-r from-slate-100 to-slate-50 dark:from-slate-800 dark:to-slate-700 text-slate-900 dark:text-white border border-emerald-200/30 dark:border-cyan-400/20'
                    }`}
                >
                  <div className="text-sm">
                    <MessageContent content={message.text} isUser={message.isUser} />
                  </div>
                  <span className={`text-xs mt-1 block ${message.isUser ? 'text-emerald-100' : 'text-slate-500 dark:text-slate-400'
                    }`}>
                    {message.timestamp.toLocaleTimeString('es-ES', {
                      hour: '2-digit',
                      minute: '2-digit'
                    })}
                  </span>
                </div>
              </div>
            ))}

            {/* Indicador de carga silencioso (desde card) */}
            {isSendingMessage && !isLoading && (
              <div className="flex justify-start">
                <div className="bg-gradient-to-r from-slate-100 to-slate-50 dark:from-slate-800 dark:to-slate-700 rounded-2xl px-4 py-3 max-w-[80%] border border-emerald-200/30 dark:border-cyan-400/20">
                  <div className="flex items-center space-x-2">
                    <div className="w-4 h-4 border-2 border-emerald-500 border-t-transparent rounded-full animate-spin"></div>
                    <span className="text-sm text-slate-600 dark:text-slate-400">Pensando...</span>
                  </div>
                </div>
              </div>
            )}

            {/* Indicador de carga normal (desde el input del chat) */}
            {isLoading && !isSendingMessage && (
              <div className="flex justify-start">
                <div className="bg-gradient-to-r from-slate-100 to-slate-50 dark:from-slate-800 dark:to-slate-700 rounded-2xl px-4 py-3 max-w-[80%] border border-emerald-200/30 dark:border-cyan-400/20">
                  <div className="flex space-x-1">
                    <div className="w-2 h-2 bg-emerald-500 dark:bg-cyan-400 rounded-full animate-bounce"></div>
                    <div className="w-2 h-2 bg-blue-500 dark:bg-blue-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
                    <div className="w-2 h-2 bg-cyan-500 dark:bg-emerald-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                  </div>
                </div>
              </div>
            )}

            <div ref={messagesEndRef} />
          </div>

          {/* Input */}
          <div className="p-4 border-t border-slate-200 dark:border-slate-700 bg-gradient-to-r from-emerald-50/30 via-blue-50/20 to-cyan-50/30 dark:from-emerald-900/10 dark:via-blue-900/5 dark:to-cyan-900/10">
            <div className="flex space-x-2">
              <input
                ref={inputRef}
                type="text"
                value={inputMessage}
                onChange={(e) => setInputMessage(e.target.value)}
                onKeyPress={handleKeyPress}
                placeholder="Escribe tu mensaje..."
                disabled={isLoading || isSendingMessage}
                className="flex-1 px-4 py-2 border border-emerald-300/50 dark:border-cyan-400/30 rounded-xl bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-cyan-400 focus:border-transparent disabled:opacity-50 transition-all duration-200"
              />
              <button
                onClick={sendMessage}
                disabled={!inputMessage.trim() || isLoading || isSendingMessage}
                className="px-4 py-2 bg-gradient-to-r from-emerald-500 via-blue-500 to-cyan-500 hover:from-emerald-400 hover:via-blue-400 hover:to-cyan-400 text-white rounded-xl disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-all duration-200 flex items-center justify-center min-w-[48px] shadow-md hover:shadow-lg hover:shadow-emerald-500/20 dark:hover:shadow-cyan-400/20"
                aria-label="Enviar mensaje"
              >
                {isLoading ? (
                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                ) : (
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                  </svg>
                )}
              </button>
            </div>
          </div>
        </SheetContent>
      </Sheet>

      {/* Floating Button */}
      {!isOpen && (
        <div className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 lg:bottom-8 lg:right-8 z-[9999] transition-all duration-300 ease-out">
          <button
            onClick={() => {
              console.log('Floating chat clicked!');
              openChat();
            }}
            aria-label="Habla con PIERCE"
            className="relative h-[88px] w-[88px] sm:h-[92px] sm:w-[92px] lg:h-[96px] lg:w-[96px] rounded-full overflow-hidden cursor-pointer hover:scale-110 transition-transform duration-300"
            title="Habla con PIERCE"
          >
            <img
              src="/assets/img/chat.png"
              alt="PIERCE Bot"
              className="w-full h-full object-cover"
            />
          </button>
        </div>
      )}
    </>
  );
}