frontend/components/ChatPanel.tsx

'use client';

import { useState, useEffect, useRef, memo } from 'react';
import { Send, Bot, User, Sparkles, Loader2 } from 'lucide-react';

// Use environment variable or relative URL for production
const API_URL = process.env.NEXT_PUBLIC_API_URL || '';

interface Transaction {
  id: number;
  amount: number;
  merchant: string;
  prediction: string;
  final_score: number;
}

interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
}

interface ChatPanelProps {
  transactions: Transaction[];
  metrics: {
    total: number;
    flagged: number;
    accuracy: number;
  };
}

// Memoized to prevent re-renders from parent
const ChatPanel = memo(function ChatPanel({ transactions, metrics }: ChatPanelProps) {
  const [messages, setMessages] = useState<Message[]>([
    { 
      id: '1', 
      role: 'assistant', 
      content: "Hello! I'm the QuantumShield AI Assistant. I can help you analyze transactions and explain our quantum detection. What would you like to know?", 
      timestamp: new Date() 
    }
  ]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const abortControllerRef = useRef<AbortController | null>(null);

  // Store latest data in refs to avoid stale closures
  const transactionsRef = useRef(transactions);
  const metricsRef = useRef(metrics);

  useEffect(() => {
    transactionsRef.current = transactions;
    metricsRef.current = metrics;
  }, [transactions, metrics]);

  // Scroll to bottom on new messages
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

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

    const userInput = input.trim();
    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: userInput,
      timestamp: new Date()
    };

    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);

    // Cancel any pending request
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
    abortControllerRef.current = new AbortController();

    try {
      // Include current transaction context in the message
      const contextMessage = `

Current System Status:

- Total Transactions Processed: ${metricsRef.current.total}

- Flagged as Fraud: ${metricsRef.current.flagged}

- Model Accuracy: ${(metricsRef.current.accuracy * 100).toFixed(1)}%

- Recent Transactions: ${transactionsRef.current.slice(0, 5).map(t => 

  `#${t.id}: $${t.amount.toFixed(2)} at ${t.merchant} (${t.prediction}, score: ${(t.final_score * 100).toFixed(0)}%)`

).join('; ')}



User Question: ${userInput}`;

      const response = await fetch(`${API_URL}/api/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message: contextMessage,
          conversation_history: messages.slice(-10).map(m => ({ role: m.role, content: m.content }))
        }),
        signal: abortControllerRef.current.signal
      });

      if (response.ok) {
        const data = await response.json();
        setMessages(prev => [...prev, {
          id: (Date.now() + 1).toString(),
          role: 'assistant',
          content: data.response,
          timestamp: new Date()
        }]);
      } else {
        throw new Error('Request failed');
      }
    } catch (error: unknown) {
      if (error instanceof Error && error.name === 'AbortError') return;
      
      setMessages(prev => [...prev, {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: "Connection error. Please check if the backend is running.",
        timestamp: new Date()
      }]);
    } finally {
      setIsLoading(false);
    }
  };

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

  return (
    <div className="bg-white rounded-xl border border-gray-200 flex flex-col h-[450px] shadow-sm">

      {/* Header */}

      <div className="px-4 py-3 border-b border-gray-200 flex items-center gap-3">

        <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-sm">

          <Sparkles className="w-4 h-4 text-white" />

        </div>

        <div>

          <h3 className="text-gray-900 font-bold text-sm uppercase tracking-wide">AI Operations Lead</h3>

          <p className="text-[10px] text-gray-500">Quantum Analysis Expert</p>

        </div>

      </div>



      {/* Messages */}

      <div className="flex-1 overflow-y-auto p-3 space-y-3 bg-gray-50">

        {messages.map((msg) => (

          <div key={msg.id} className={`flex gap-2 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>

            <div className={`w-6 h-6 rounded-md flex items-center justify-center flex-shrink-0 ${

              msg.role === 'user' ? 'bg-gray-900' : 'bg-gradient-to-br from-indigo-500 to-purple-600'

            }`}>

              {msg.role === 'user' ? (

                <User className="w-3 h-3 text-white" />

              ) : (

                <Bot className="w-3 h-3 text-white" />

              )}

            </div>

            <div className={`max-w-[85%] rounded-xl px-3 py-2 text-xs ${

              msg.role === 'user' 

                ? 'bg-gray-900 text-white' 

                : 'bg-white text-gray-800 border border-gray-200 shadow-sm'

            }`}>

              {msg.content}

            </div>

          </div>

        ))}

        

        {isLoading && (

          <div className="flex gap-2">

            <div className="w-6 h-6 rounded-md bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">

              <Bot className="w-3 h-3 text-white" />

            </div>

            <div className="bg-white rounded-xl px-3 py-2 border border-gray-200 shadow-sm">

              <Loader2 className="w-4 h-4 text-indigo-500 animate-spin" />

            </div>

          </div>

        )}

        

        <div ref={messagesEndRef} />

      </div>



      {/* Input */}

      <div className="p-3 border-t border-gray-200 bg-white">

        <div className="flex gap-2">

          <input

            type="text"

            value={input}

            onChange={(e) => setInput(e.target.value)}

            onKeyPress={handleKeyPress}

            placeholder="Ask about fraud detection..."

            className="flex-1 bg-gray-100 rounded-lg px-3 py-2 text-gray-800 text-xs placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 border border-gray-200"

            disabled={isLoading}

          />

          <button

            onClick={sendMessage}

            disabled={isLoading || !input.trim()}

            className="px-3 py-2 bg-gray-900 hover:bg-gray-800 rounded-lg disabled:opacity-50 transition-colors"

          >

            <Send className="w-4 h-4 text-white" />

          </button>

        </div>

      </div>

    </div>
  );
});

export default ChatPanel;