Praudyog

'use client';

import { useState, useRef, useEffect } from 'react';
import { Send, Mic, Volume2, Loader2, Sprout, MessageCircle } from 'lucide-react';

interface Message {
  id: string;
  text: string;
  sender: 'user' | 'ai';
  audioUrl?: string;
  timestamp: Date;
}

export default function SmartFarmingChat() {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: '1',
      text: 'Hello! 🌾 I\'m your Smart Farming Assistant. Ask me anything about:\n\n• Agriculture seasons in India\n• Crop recommendations\n• Planting and harvesting times\n• Soil management\n• Pest control\n• Irrigation techniques\n\nHow can I help you today?',
      sender: 'ai',
      timestamp: new Date(),
    }
  ]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [recording, setRecording] = useState(false);
  const audioRef = useRef<HTMLAudioElement>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // Backend URL - Update this with your Render URL after deployment
  const BACKEND_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000';

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

  // Send text message
  const sendMessage = async () => {
    if (!input.trim() || loading) return;

    const userMessage: Message = {
      id: Date.now().toString(),
      text: input,
      sender: 'user',
      timestamp: new Date(),
    };

    setMessages(prev => [...prev, userMessage]);
    const currentInput = input;
    setInput('');
    setLoading(true);

    try {
      const response = await fetch(`${BACKEND_URL}/api/chat`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ text: currentInput }),
      });

      if (!response.ok) {
        throw new Error('Failed to get response');
      }

      const data = await response.json();

      if (data.success) {
        const aiMessage: Message = {
          id: (Date.now() + 1).toString(),
          text: data.text,
          sender: 'ai',
          audioUrl: data.audio_url ? `${BACKEND_URL}${data.audio_url}` : undefined,
          timestamp: new Date(),
        };
        setMessages(prev => [...prev, aiMessage]);
      } else {
        throw new Error(data.error || 'Failed to get response');
      }
    } catch (error) {
      console.error('Error:', error);
      const errorMessage: Message = {
        id: (Date.now() + 1).toString(),
        text: '⚠️ Sorry, I encountered an error. Please make sure the backend API is running and try again.',
        sender: 'ai',
        timestamp: new Date(),
      };
      setMessages(prev => [...prev, errorMessage]);
    } finally {
      setLoading(false);
    }
  };

  // Play audio response
  const playAudio = (url: string) => {
    if (audioRef.current) {
      audioRef.current.src = url;
      audioRef.current.play().catch(err => {
        console.error('Audio play error:', err);
      });
    }
  };

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

  // Suggested questions
  const suggestedQuestions = [
    "What crops should I plant in monsoon season?",
    "Tell me about Kharif crops",
    "How to prevent pest attacks?",
    "Best irrigation methods for wheat",
  ];

  const askSuggestion = (question: string) => {
    setInput(question);
  };

  return (
    <div className="flex flex-col h-[700px] glass rounded-3xl border border-white/10 overflow-hidden">
      {/* Header */}
      <div className="p-6 border-b border-white/10 bg-gradient-to-r from-green-500/10 to-emerald-500/10">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-br from-green-400 to-emerald-500 rounded-2xl blur-lg opacity-50" />
              <div className="relative w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-2xl flex items-center justify-center">
                <Sprout className="w-6 h-6 text-white" />
              </div>
            </div>
            <div>
              <h3 className="text-xl font-bold text-white">Smart Farming Assistant</h3>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
                <p className="text-sm text-gray-400">Online • AI-Powered</p>
              </div>
            </div>
          </div>
          
          {/* Stats Badge */}
          <div className="hidden md:flex items-center gap-4">
            <div className="text-center">
              <p className="text-xs text-gray-400">Messages</p>
              <p className="text-lg font-bold text-green-400">{messages.length}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-6 space-y-4">
        {messages.length === 1 && (
          <div className="mb-6">
            <p className="text-sm text-gray-400 mb-3">Try asking:</p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
              {suggestedQuestions.map((question, idx) => (
                <button
                  key={idx}
                  onClick={() => askSuggestion(question)}
                  className="p-3 text-left glass rounded-xl border border-white/10 hover:border-green-400/30 transition-all text-sm text-gray-300 hover:text-white"
                >
                  💬 {question}
                </button>
              ))}
            </div>
          </div>
        )}

        {messages.map((message) => (
          <div
            key={message.id}
            className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'} animate-fadeIn`}
          >
            <div
              className={`
                max-w-[85%] md:max-w-[75%] p-4 rounded-2xl
                ${message.sender === 'user'
                  ? 'bg-gradient-to-br from-green-500 to-emerald-500 text-white'
                  : 'glass border border-white/10 text-white'
                }
              `}
            >
              {/* Message Icon */}
              {message.sender === 'ai' && (
                <div className="flex items-center gap-2 mb-2">
                  <Sprout className="w-4 h-4 text-green-400" />
                  <span className="text-xs text-green-400 font-semibold">AI Assistant</span>
                </div>
              )}
              
              <p className="whitespace-pre-wrap leading-relaxed">{message.text}</p>
              
              {/* Audio Player for AI responses */}
              {message.audioUrl && (
                <button
                  onClick={() => playAudio(message.audioUrl!)}
                  className="mt-3 flex items-center gap-2 px-3 py-2 bg-white/10 rounded-lg hover:bg-white/20 transition-colors group"
                >
                  <Volume2 className="w-4 h-4 group-hover:scale-110 transition-transform" />
                  <span className="text-sm font-medium">Play Audio Response</span>
                </button>
              )}
              
              {/* Timestamp */}
              <p className="text-xs opacity-50 mt-2">
                {message.timestamp.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}
              </p>
            </div>
          </div>
        ))}

        {loading && (
          <div className="flex justify-start animate-fadeIn">
            <div className="glass border border-white/10 p-4 rounded-2xl flex items-center gap-3">
              <Loader2 className="w-5 h-5 text-green-400 animate-spin" />
              <span className="text-gray-400">AI is thinking...</span>
            </div>
          </div>
        )}
        
        <div ref={messagesEndRef} />
      </div>

      {/* Input Area */}
      <div className="p-4 border-t border-white/10 bg-white/5">
        <div className="flex gap-2">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="Ask about crops, seasons, farming techniques..."
            className="flex-1 px-4 py-3 glass rounded-xl border border-white/10 text-white placeholder-gray-500 outline-none focus:border-green-400/50 transition-colors"
            disabled={loading}
          />
          
          <button
            onClick={sendMessage}
            disabled={loading || !input.trim()}
            className="px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl text-white font-semibold hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 flex items-center gap-2"
          >
            <Send className="w-5 h-5" />
            <span className="hidden md:inline">Send</span>
          </button>
        </div>
        
        <p className="text-xs text-gray-500 mt-2 text-center">
          Powered by OpenAI GPT-3.5 • Press Enter to send
        </p>
      </div>

      {/* Hidden Audio Element */}
      <audio ref={audioRef} className="hidden" />
    </div>
  );
}