import React, { useState, useRef, useEffect } from 'react';
import { GoogleGenAI, Chat, GenerateContentResponse } from '@google/genai';
import { ChatbotIcon, SendIcon, XIcon } from './Icons';

interface Message {
  role: 'user' | 'model';
  text: string;
}

const AiChatbot: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState<Message[]>([
    {
      role: 'model',
      text: 'আসসালামু আলাইকুম! আমি আপনার কৃত্রিম বুদ্ধিমত্তাসম্পন্ন সহকারী। ‘সব সেবা .শপ’ সম্পর্কে আপনার কী জানার আছে? আমাদের প্রতিনিধির সাথে সরাসরি কথা বলতে চাইলে হোয়াটসঅ্যাপ আইকনে ক্লিক করুন।',
    },
  ]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [chat, setChat] = useState<Chat | null>(null);
  const chatContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (isOpen && !chat) {
        try {
            const ai = new GoogleGenAI({ apiKey: process.env.API_KEY as string });
            const chatSession = ai.chats.create({
                model: 'gemini-3-flash-preview',
                config: {
                    systemInstruction: 'You are a friendly and helpful AI assistant for a website called "sobsheba.shop". Your goal is to answer user questions about the services offered, which include land services, citizen services, and tax services in Bangladesh. Be concise, speak in Bengali, and always be polite. If you don\'t know an answer, say that you are an AI and cannot answer that question.',
                },
            });
            setChat(chatSession);
        } catch (error) {
            console.error("Failed to initialize Gemini AI:", error);
            setMessages(prev => [...prev, { role: 'model', text: 'চ্যাটবট চালু করতে একটি ত্রুটি হয়েছে। অনুগ্রহ করে পুনরায় চেষ্টা করুন।' }]);
        }
    }
  }, [isOpen, chat]);
  
  useEffect(() => {
    // Scroll to the bottom of the chat when messages change
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }
  }, [messages]);


  const handleSendMessage = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim() || isLoading || !chat) return;

    const userMessage: Message = { role: 'user', text: input };
    setMessages((prevMessages) => [...prevMessages, userMessage]);
    setInput('');
    setIsLoading(true);

    try {
      const response: GenerateContentResponse = await chat.sendMessage({ message: input });
      const modelMessage: Message = { role: 'model', text: response.text };
      setMessages((prevMessages) => [...prevMessages, modelMessage]);
    } catch (error) {
      console.error('Error sending message to Gemini:', error);
      const errorMessage: Message = {
        role: 'model',
        text: 'দুঃখিত, একটি ত্রুটি হয়েছে। অনুগ্রহ করে পুনরায় চেষ্টা করুন।',
      };
      setMessages((prevMessages) => [...prevMessages, errorMessage]);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="fixed bottom-6 left-6 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-4 shadow-lg flex items-center justify-center z-50 transition-transform transform hover:scale-110"
        aria-label="Open AI Chatbot"
      >
        <ChatbotIcon className="w-8 h-8" />
      </button>

      {isOpen && (
        <div className="fixed bottom-24 left-6 w-80 sm:w-96 h-[500px] bg-white rounded-2xl shadow-2xl z-50 flex flex-col overflow-hidden border border-gray-200">
          {/* Header */}
          <div className="bg-blue-600 text-white p-4 flex justify-between items-center flex-shrink-0">
            <h3 className="font-bold text-lg">AI সহকারী</h3>
            <button onClick={() => setIsOpen(false)} className="hover:bg-blue-700 p-1 rounded-full">
              <XIcon className="w-6 h-6" />
            </button>
          </div>

          {/* Messages */}
          <div ref={chatContainerRef} className="flex-grow p-4 overflow-y-auto space-y-4 bg-gray-50">
            {messages.map((msg, index) => (
              <div
                key={index}
                className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
              >
                <div
                  className={`max-w-xs md:max-w-md lg:max-w-lg rounded-xl px-4 py-2 ${
                    msg.role === 'user'
                      ? 'bg-blue-500 text-white'
                      : 'bg-gray-200 text-gray-800'
                  }`}
                >
                  {msg.text}
                </div>
              </div>
            ))}
            {isLoading && (
               <div className="flex justify-start">
                   <div className="bg-gray-200 text-gray-800 rounded-xl px-4 py-2">
                       <span className="animate-pulse">অনুগ্রহ করে অপেক্ষা করুন...</span>
                   </div>
               </div>
            )}
          </div>

          {/* Input Form */}
          <div className="p-4 border-t bg-white flex-shrink-0">
            <form onSubmit={handleSendMessage} className="flex items-center space-x-2">
              <input
                type="text"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="আপনার প্রশ্নটি এখানে লিখুন..."
                className="w-full px-4 py-2 border border-gray-300 rounded-full focus:ring-blue-500 focus:border-blue-500"
                disabled={isLoading}
              />
              <button
                type="submit"
                className="bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 disabled:bg-gray-400"
                disabled={isLoading || !input.trim()}
                aria-label="Send message"
              >
                <SendIcon className="w-5 h-5" />
              </button>
            </form>
          </div>
        </div>
      )}
    </>
  );
};

export default AiChatbot;