import { createContext, useContext, useState, ReactNode } from 'react';

interface Message {
  id: string;
  text: string;
  isUser: boolean;
  timestamp: Date;
}

interface ChatContextType {
  isOpen: boolean;
  messages: Message[];
  isSendingMessage: boolean;
  openChat: (skipInitialMessage?: boolean) => void;
  closeChat: () => void;
  sendMessage: (text: string, silent?: boolean) => Promise<void>;
  setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
}

const ChatContext = createContext<ChatContextType | undefined>(undefined);

export function ChatProvider({ children }: { children: ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState<Message[]>([
    {
      id: '1',
      text: '¡Hola! Soy **PIERCE**, tu asistente de IA. ¿En qué puedo ayudarte hoy?',
      isUser: false,
      timestamp: new Date()
    }
  ]);
  const [isSendingMessage, setIsSendingMessage] = useState(false);

  const openChat = (skipInitialMessage: boolean = false) => {
    if (skipInitialMessage) {
      // Limpiar el mensaje inicial cuando se abre desde una card
      setMessages([]);
    }
    setIsOpen(true);
  };

  const closeChat = () => {
    setIsOpen(false);
  };

  const sendMessage = async (text: string, silent: boolean = false) => {
    if (!text.trim()) return;

    // Si es silencioso, mostrar loading
    if (silent) {
      setIsSendingMessage(true);
    }

    // Si no es silencioso, agregar el mensaje del usuario a la vista
    if (!silent) {
      const userMessage: Message = {
        id: Date.now().toString(),
        text: text.trim(),
        isUser: true,
        timestamp: new Date()
      };
      setMessages(prev => [...prev, userMessage]);
    }

    try {
      const response = await fetch('/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
        },
        body: JSON.stringify({
          text: text.trim()
        })
      });

      if (!response.ok) {
        throw new Error(`Error ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();

      if (!data.success) {
        throw new Error(data.error || 'Error processing message');
      }

      const aiResponse: Message = {
        id: (Date.now() + 1).toString(),
        text: data.response || 'Lo siento, no pude procesar tu mensaje. Inténtalo de nuevo.',
        isUser: false,
        timestamp: new Date()
      };

      setMessages(prev => [...prev, aiResponse]);
    } catch (error) {
      console.error('Error enviando mensaje:', error);
      const errorMessage: Message = {
        id: (Date.now() + 1).toString(),
        text: 'Lo siento, hubo un error al procesar tu mensaje. Por favor, inténtalo de nuevo.',
        isUser: false,
        timestamp: new Date()
      };
      setMessages(prev => [...prev, errorMessage]);
    } finally {
      // Ocultar loading cuando termine
      if (silent) {
        setIsSendingMessage(false);
      }
    }
  };

  return (
    <ChatContext.Provider value={{ isOpen, messages, isSendingMessage, openChat, closeChat, sendMessage, setMessages }}>
      {children}
    </ChatContext.Provider>
  );
}

export function useChat() {
  const context = useContext(ChatContext);
  if (context === undefined) {
    throw new Error('useChat must be used within a ChatProvider');
  }
  return context;
}