'use client';

import { useState, useRef, useEffect } from 'react';
import { useLanguage } from './LanguageProvider';

interface ChatMessage {
  id: string;
  type: 'user' | 'ai';
  content: string;
  timestamp: Date;
}

export default function MissionControl() {
  const { language } = useLanguage();
  const [question, setQuestion] = useState('');
  const [isThinking, setIsThinking] = useState(false);
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  
  const uiTexts = {
    en: {
      title: "AI Learning Chat",
      subtitle: "Ask me anything!",
      placeholder: "Type your question here...",
      send: "Send",
      thinking: "AI is thinking...",
      examples: ["How do plants grow?", "What's gravity?", "Tell me about art!", "Why is the sky blue?"],
      clearChat: "Clear Chat",
      you: "You",
      ai: "AI Assistant"
    },
    de: {
      title: "KI-Lern-Chat", 
      subtitle: "Frag mich alles!",
      placeholder: "Stelle hier deine Frage...",
      send: "Senden",
      thinking: "KI denkt nach...",
      examples: ["Wie wachsen Pflanzen?", "Was ist Schwerkraft?", "Erzähl mir über Kunst!", "Warum ist der Himmel blau?"],
      clearChat: "Chat löschen",
      you: "Du",
      ai: "KI-Assistent"
    }
  };

  // Auto-scroll to bottom when new messages arrive
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [chatMessages, isThinking]);

  // Focus textarea when component mounts
  useEffect(() => {
    textareaRef.current?.focus();
  }, []);

  const addMessage = (type: 'user' | 'ai', content: string) => {
    const newMessage: ChatMessage = {
      id: Date.now().toString(),
      type,
      content,
      timestamp: new Date()
    };
    setChatMessages(prev => [...prev, newMessage]);
  };

  const askAI = async () => {
    if (!question.trim() || isThinking) return;
    
    const userQuestion = question.trim();
    
    // Add user message to chat
    addMessage('user', userQuestion);
    
    // Clear input and show thinking
    setQuestion('');
    setIsThinking(true);
    
    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question: userQuestion, language }),
      });
      
      if (res.ok) {
        const aiResponse = await res.json();
        addMessage('ai', aiResponse.message || "Great question! Let me help you think about this...");
      } else {
        addMessage('ai', language === 'en' ? "Sorry, I had trouble with that. Try again!" : "Entschuldigung, da gab es ein Problem. Versuch es nochmal!");
      }
    } catch (err) {
      addMessage('ai', language === 'en' ? "Oops! Something went wrong." : "Ups! Etwas ist schiefgelaufen.");
    } finally {
      setIsThinking(false);
      // Focus back to input
      setTimeout(() => textareaRef.current?.focus(), 100);
    }
  };

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

  const clearChat = () => {
    setChatMessages([]);
    setQuestion('');
    textareaRef.current?.focus();
  };

  return (
    <div className="flex flex-col h-full max-w-4xl mx-auto">
      {/* Header */}
      <div className="text-center py-6 border-b border-emerald-400/30">
        <h2 className="text-3xl font-bold text-amber-300 mb-2 animate-pulse-rainbow">
          {(uiTexts as any)[language].title}
        </h2>
        <p className="text-emerald-200 text-lg">{(uiTexts as any)[language].subtitle}</p>
        {chatMessages.length > 0 && (
          <button
            onClick={clearChat}
            className="mt-3 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm transition-colors"
          >
            🗑️ {(uiTexts as any)[language].clearChat}
          </button>
        )}
      </div>

      {/* Chat Messages Area */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4 min-h-0">
        {chatMessages.length === 0 && (
          <div className="text-center py-8">
            <p className="text-emerald-300 text-lg mb-6">
              {language === 'en' ? 'Start a conversation!' : 'Beginne ein Gespräch!'}
            </p>
            
            {/* Example questions */}
            <div className="bg-black/20 rounded-xl p-4 border border-amber-400">
              <h3 className="text-amber-300 font-semibold mb-3">
                {language === 'en' ? 'Try asking:' : 'Frag zum Beispiel:'}
              </h3>
              <div className="flex flex-wrap gap-3 justify-center">
                {(uiTexts as any)[language].examples.map((example: string, index: number) => (
                  <button
                    key={index}
                    onClick={() => setQuestion(example)}
                    className="px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm transition-colors"
                    disabled={isThinking}
                  >
                    {example}
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Chat Messages */}
        {chatMessages.map((message) => (
          <div
            key={message.id}
            className={`flex ${message.type === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            <div
              className={`max-w-[80%] rounded-xl p-4 ${
                message.type === 'user'
                  ? 'bg-blue-600 text-white ml-auto'
                  : 'bg-gray-800 text-emerald-100 border border-emerald-500'
              }`}
            >
              <div className="flex items-center gap-2 mb-2">
                <span className="font-semibold text-sm">
                  {message.type === 'user' ? (uiTexts as any)[language].you : (uiTexts as any)[language].ai}
                </span>
                <span className="text-xs opacity-70">
                  {message.timestamp.toLocaleTimeString()}
                </span>
              </div>
              <p className="whitespace-pre-line leading-relaxed">{message.content}</p>
            </div>
          </div>
        ))}

        {/* Thinking indicator */}
        {isThinking && (
          <div className="flex justify-start">
            <div className="bg-gray-800 text-emerald-100 border border-emerald-500 rounded-xl p-4 max-w-[80%]">
              <div className="flex items-center gap-2 mb-2">
                <span className="font-semibold text-sm">{(uiTexts as any)[language].ai}</span>
              </div>
              <p className="flex items-center gap-2">
                <span className="animate-pulse">🤔</span>
                {(uiTexts as any)[language].thinking}
                <span className="animate-bounce">...</span>
              </p>
            </div>
          </div>
        )}

        {/* Scroll anchor */}
        <div ref={messagesEndRef} />
      </div>

      {/* Input Area - Always at bottom */}
      <div className="border-t border-emerald-400/30 p-4 bg-black/40 backdrop-blur-sm">
        <div className="flex gap-3 items-end">
          <div className="flex-1">
            <textarea
              ref={textareaRef}
              value={question}
              onChange={(e) => setQuestion(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder={(uiTexts as any)[language].placeholder}
              className="w-full bg-gray-900/80 text-emerald-100 rounded-xl p-4 border border-emerald-500 focus:border-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-400/50 resize-none text-lg placeholder-emerald-600"
              rows={2}
              disabled={isThinking}
            />
            <p className="text-xs text-emerald-400 mt-1">
              {language === 'en' ? 'Press Enter to send, Shift+Enter for new line' : 'Enter zum Senden, Shift+Enter für neue Zeile'}
            </p>
          </div>
          <button
            onClick={askAI}
            disabled={!question.trim() || isThinking}
            className={`px-6 py-4 rounded-xl font-bold text-lg transition-all ${
              !question.trim() || isThinking
                ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
                : 'bg-emerald-600 hover:bg-emerald-700 text-white shadow-lg hover:shadow-xl'
            }`}
          >
            {isThinking ? '⏳' : '🚀'} {(uiTexts as any)[language].send}
          </button>
        </div>
      </div>
    </div>
  );
}
