import React, { useState, useRef, useEffect, useCallback } from 'react';
import { Message, Role, ChatbotSettings, Citation } from '../types';
import MessageComponent from './Message';
import { CloseIcon, SendIcon, UserSupportIcon } from './icons';

// --- Start of inlined services ---

const getApiParams = () => {
    if (!window.jaguar_chatbot_params) {
        throw new Error("Jaguar Chatbot params not found.");
    }
    return window.jaguar_chatbot_params;
};

type ChatPayload = {
  history: Message[];
  message: string;
  conversationId: string;
  userName?: string;
  userEmail?: string;
  phoneNumber?: string;
};

const getChatResponse = async (payload: ChatPayload): Promise<{ text: string; suggestions?: string[], citations?: Citation[] }> => {
    const params = getApiParams();

    if (!params.rest_url) {
        throw new Error("REST API URL is not configured. Cannot send chat message.");
    }

    const body = { ...payload };

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

    if (!response.ok) {
        try {
            const jsonError = await response.json();
            const errorMessage = (jsonError.data && jsonError.data.message) ? jsonError.data.message : (jsonError.message || 'An unknown server error occurred.');
            
            if (window.jaguar_chatbot_params?.is_admin) {
                const details = (jsonError.data && jsonError.data.details) ? ` Details: ${JSON.stringify(jsonError.data.details)}` : '';
                throw new Error(errorMessage + details);
            } else {
                if (errorMessage.includes('API key')) {
                    throw new Error('خطای پیکربندی: کلید API معتبر نیست. لطفاً با مدیر سایت تماس بگیرید.');
                }
                throw new Error('متاسفانه در ارتباط با سرویس هوش مصنوعی خطایی رخ داد. لطفاً لحظاتی دیگر دوباره تلاش کنید.');
            }
        } catch (e: any) {
             if (e instanceof Error && e.message) {
                throw e; 
             }
            const errorText = await response.text().catch(() => 'Could not retrieve error details.');
            console.error("Jaguar Chatbot: Server returned a non-OK status.", {
                status: response.status,
                statusText: response.statusText,
                body: errorText,
            });
            if (window.jaguar_chatbot_params?.is_admin) {
                throw new Error(`خطای سرور: ${response.status} ${response.statusText}. به نظر می‌رسد فایروال پاسخ خطا را مسدود کرده است. پاسخ کامل در کنسول مرورگر ثبت شد.`);
            } else {
                throw new Error('متاسفانه در ارتباط با سرور خطایی رخ داد. این مشکل معمولا به دلیل فایروال امنیتی سرور است. لطفاً با مدیر سایت تماس بگیرید.');
            }
        }
    }

    const jsonResponse = await response.json();

    if (!jsonResponse.success) {
        const errorData = jsonResponse.data || {};
        const finalMessage = errorData.message || 'Failed to get chat response from application';

        if (window.jaguar_chatbot_params?.is_admin) {
             throw new Error(finalMessage);
        } else {
            if (finalMessage.includes('API key')) {
                throw new Error('خطای پیکربندی: کلید API معتبر نیست. لطفاً با مدیر سایت تماس بگیرید.');
            }
            throw new Error('متاسفانه در ارتباط با سرویس هوش مصنوعی خطایی رخ داد. لطفاً لحظاتی دیگر دوباره تلاش کنید.');
        }
    }

    return jsonResponse.data;
};


const requestHumanSupport = async (conversationId: string, userName: string, userEmail: string, phoneNumber: string): Promise<void> => {
    const params = getApiParams();
    const response = await fetch(`${params.rest_url}/conversations/request-support`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': params.nonce,
        },
        body: JSON.stringify({ conversationId, userName, userEmail, phoneNumber }),
    });

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

const getConversationHistory = async (conversationId: string): Promise<Message[]> => {
    const params = getApiParams();
    const response = await fetch(`${params.rest_url}/conversations/${conversationId}/poll`, {
        method: 'GET',
        headers: {
             // Polling should be public and not require a nonce that might expire or cause issues.
             // 'X-WP-Nonce': params.nonce,
        },
    });
     if (!response.ok) {
        throw new Error('Failed to fetch conversation history');
    }
    return response.json();
};

// --- End of inlined services ---

interface ChatWindowProps {
  isOpen: boolean;
  onClose: () => void;
  settings: ChatbotSettings | null;
  isInline?: boolean;
}

const ChatWindow: React.FC<ChatWindowProps> = ({ isOpen, onClose, settings, isInline = false }) => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [userInput, setUserInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  
  const [isPreChat, setIsPreChat] = useState(true);
  const [userName, setUserName] = useState('');
  const [userEmail, setUserEmail] = useState('');
  const [userPhone, setUserPhone] = useState('');
  const [nameError, setNameError] = useState('');
  const [emailError, setEmailError] = useState('');
  const [phoneError, setPhoneError] = useState('');
  const [conversationId, setConversationId] = useState('');
  const [supportRequested, setSupportRequested] = useState(false);
  const [suggestedActions, setSuggestedActions] = useState<string[]>([]);

  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const pollIntervalRef = useRef<number | null>(null);

  const suggestionsRef = useRef<HTMLDivElement>(null);
  const dragInfo = useRef({
    isDragging: false,
    startX: 0,
    scrollLeft: 0,
    hasDragged: false
  }).current;

  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
      if (!suggestionsRef.current) return;
      dragInfo.isDragging = true;
      dragInfo.hasDragged = false;
      dragInfo.startX = e.pageX - suggestionsRef.current.offsetLeft;
      dragInfo.scrollLeft = suggestionsRef.current.scrollLeft;
      suggestionsRef.current.style.cursor = 'grabbing';
      suggestionsRef.current.style.userSelect = 'none';
  };

  const handleMouseLeaveOrUp = () => {
      if (!suggestionsRef.current) return;
      dragInfo.isDragging = false;
      suggestionsRef.current.style.cursor = 'grab';
      suggestionsRef.current.style.removeProperty('user-select');
  };

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
      if (!dragInfo.isDragging || !suggestionsRef.current) return;
      e.preventDefault();
      dragInfo.hasDragged = true;
      const x = e.pageX - suggestionsRef.current.offsetLeft;
      const walk = (x - dragInfo.startX) * 2; // Adjust scroll speed
      suggestionsRef.current.scrollLeft = dragInfo.scrollLeft - walk;
  };

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages, isLoading]);

  useEffect(() => {
    if (isOpen) {
      inputRef.current?.focus();
    }
  }, [isOpen]);

  // Initialize conversation and add initial greeting
  useEffect(() => {
    if (settings && !conversationId) {
      const newConversationId = `web-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
      setConversationId(newConversationId);
      
      const greetingMessage: Message = {
        id: 'initial-greeting',
        role: Role.AI,
        text: settings.initialGreeting,
      };
      setMessages([greetingMessage]);
      
      // Reset state if window is re-opened (unless inline)
      if (!isInline) {
          setIsPreChat(settings.saveConversations);
          setSupportRequested(false);
          setUserInput('');
      } else {
          // For inline mode, always skip pre-chat
          setIsPreChat(false);
      }
    }
  }, [settings, conversationId, isInline, isOpen]); // Rerun if reopened
  
  const pollMessages = useCallback(async () => {
    if (document.hidden || !conversationId) return;

    try {
        const history = await getConversationHistory(conversationId);
        setMessages(currentMessages => {
            // Only update if the history from the server is different to avoid unnecessary re-renders
            if (JSON.stringify(history) !== JSON.stringify(currentMessages)) {
                return history;
            }
            return currentMessages;
        });
    } catch (error) {
        console.error("Polling error:", error);
        // Stop polling on error to avoid spamming a broken endpoint
        if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
    }
  }, [conversationId]);


  useEffect(() => {
    if (isOpen && conversationId && settings?.saveConversations) {
        if (pollIntervalRef.current) {
            clearInterval(pollIntervalRef.current);
        }
        pollIntervalRef.current = window.setInterval(pollMessages, 3000);

        return () => {
            if (pollIntervalRef.current) {
                clearInterval(pollIntervalRef.current);
            }
        };
    }
  }, [isOpen, conversationId, settings?.saveConversations, pollMessages]);

  const validatePreChat = () => {
      let isValid = true;
      if (!userName.trim()) {
          setNameError('لطفا نام خود را وارد کنید.');
          isValid = false;
      } else {
          setNameError('');
      }
      
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!userEmail.trim() || !emailRegex.test(userEmail.trim())) {
          setEmailError('لطفا یک ایمیل معتبر وارد کنید.');
          isValid = false;
      } else {
          setEmailError('');
      }

      // More permissive validation for the optional phone number
      const phoneRegex = /^\+?[0-9\s-()]{7,20}$/;
      if (userPhone.trim() && !phoneRegex.test(userPhone.trim())) {
          setPhoneError('لطفا شماره تلفن معتبری وارد کنید.');
          isValid = false;
      } else {
          setPhoneError('');
      }
      
      return isValid;
  };

  const handleStartChat = () => {
      if (validatePreChat()) {
          setIsPreChat(false);
      }
  };

  const handleSendMessage = async (messageText = userInput) => {
    if (!messageText.trim()) return;

    setIsLoading(true);
    setSuggestedActions([]);

    const newUserMessage: Message = {
      id: `user-${Date.now()}`,
      role: Role.USER,
      text: messageText,
    };
    const updatedMessages = [...messages, newUserMessage];
    setMessages(updatedMessages);
    setUserInput('');

    try {
      const { text, suggestions, citations } = await getChatResponse({
        history: messages,
        message: messageText,
        conversationId,
        userName,
        userEmail,
        phoneNumber: userPhone
      });
      
      const aiResponseMessage: Message = {
        id: `ai-${Date.now()}`,
        role: Role.AI,
        text: text,
        citations,
      };

      setMessages([...updatedMessages, aiResponseMessage]);

      if (suggestions && suggestions.length > 0) {
        setSuggestedActions(suggestions);
      }

    } catch (error) {
      const errorMessage = (error instanceof Error) ? error.message : 'An unknown error occurred.';
      
      const errorResponseMessage: Message = {
        id: `error-${Date.now()}`,
        role: Role.AI,
        text: errorMessage + (settings?.humanSupportEnabled ? `\n\n${settings.humanSupportFallbackMessage}` : ''),
      };
      setMessages([...updatedMessages, errorResponseMessage]);
    } finally {
      setIsLoading(false);
      inputRef.current?.focus();
    }
  };

  const handleRequestSupport = async () => {
    if (supportRequested) return; // Prevent multiple requests
    
    // If user hasn't filled pre-chat form, we must ask for it now.
    if (isPreChat) {
      if (!validatePreChat()) return;
      setIsPreChat(false); // Hide the form after validation. Now they are in the chat.
    }

    try {
        await requestHumanSupport(conversationId, userName, userEmail, userPhone);
        setSupportRequested(true);
        const supportMessage: Message = {
            id: `support-request-${Date.now()}`,
            role: Role.AI, // Displayed as a system/AI message
            text: settings?.humanSupportMessage || 'Support requested. An agent will be with you shortly.',
        };
        setMessages([...messages, supportMessage]);
    } catch (error) {
        const supportErrorMessage: Message = {
            id: `support-error-${Date.now()}`,
            role: Role.AI,
            text: 'Could not request human support. Please try again later.',
        };
        setMessages([...messages, supportErrorMessage]);
    }
  };

  const positionClass = settings?.widgetPosition === 'left' ? 'end-4' : 'start-4';
  const animationClass = isOpen ? 'animate-fade-in-up' : 'animate-fade-out-down';

  if (!settings || (!isOpen && !isInline)) {
    return null;
  }
  
  const containerClass = isInline 
    ? "jaguar-chatbot-inline-container w-full h-[600px] max-h-full"
    : `jaguar-chatbot-container fixed bottom-[74px] sm:bottom-6 ${positionClass} z-50 w-[calc(100%-2rem)] max-w-sm h-[70vh] max-h-[600px] ${animationClass}`;

  return (
    <div className={containerClass} dir="rtl">
      <div className="flex flex-col h-full bg-gray-800 text-gray-100 rounded-lg shadow-2xl border border-gray-700/50">
        <header
          className="flex items-center justify-between p-4 text-white rounded-t-lg"
          style={{ backgroundColor: settings.headerColor }}
        >
          <div className="flex items-center gap-2">
             {settings.humanSupportEnabled && (
                <button
                  onClick={handleRequestSupport}
                  className={`p-2 rounded-full transition-colors ${supportRequested ? 'text-green-300' : 'hover:bg-white/20'}`}
                  title={supportRequested ? "درخواست شما ثبت شد" : "درخواست پشتیبانی انسانی"}
                  disabled={supportRequested}
                  aria-label={supportRequested ? "Support request submitted" : "Request human support"}
                >
                  <UserSupportIcon className="w-6 h-6" />
                </button>
             )}
          </div>
          <h3 className="text-lg font-bold">{settings.chatbotTitle}</h3>
          {!isInline && (
              <button onClick={onClose} className="p-2 rounded-full hover:bg-white/20" aria-label="بستن چت">
                <CloseIcon className="w-6 h-6" />
              </button>
          )}
        </header>

        {isPreChat ? (
            <div className="flex-1 p-6 overflow-y-auto bg-gray-700">
                <h4 className="text-lg font-bold text-center mb-2 text-gray-200">شروع گفتگو</h4>
                <p className="text-sm text-center mb-6 text-gray-400">برای شروع، لطفاً اطلاعات زیر را وارد کنید.</p>
                <div className="space-y-4">
                    <div>
                        <label htmlFor="userName" className="block text-sm font-medium text-gray-300 mb-1">نام و نام خانوادگی</label>
                        <input type="text" id="userName" value={userName} onChange={(e) => setUserName(e.target.value)} className="w-full p-2 bg-gray-800 border border-gray-600 rounded-md focus:ring-orange-500 focus:border-orange-500 text-sm"/>
                        {nameError && <p className="text-xs text-red-400 mt-1">{nameError}</p>}
                    </div>
                     <div>
                        <label htmlFor="userEmail" className="block text-sm font-medium text-gray-300 mb-1">ایمیل</label>
                        <input type="email" id="userEmail" value={userEmail} onChange={(e) => setUserEmail(e.target.value)} className="w-full p-2 bg-gray-800 border border-gray-600 rounded-md focus:ring-orange-500 focus:border-orange-500 text-sm"/>
                        {emailError && <p className="text-xs text-red-400 mt-1">{emailError}</p>}
                    </div>
                     <div>
                        <label htmlFor="userPhone" className="block text-sm font-medium text-gray-300 mb-1">شماره موبایل (اختیاری)</label>
                        <input type="tel" id="userPhone" value={userPhone} onChange={(e) => setUserPhone(e.target.value)} className="w-full p-2 bg-gray-800 border border-gray-600 rounded-md focus:ring-orange-500 focus:border-orange-500 text-sm" placeholder="مثال: 09123456789"/>
                         {phoneError && <p className="text-xs text-red-400 mt-1">{phoneError}</p>}
                    </div>
                    <button onClick={handleStartChat} style={{ backgroundColor: settings.widgetColor }} className="w-full px-4 py-2.5 text-white rounded-md font-semibold hover:opacity-90 transition-opacity">
                        شروع چت
                    </button>
                </div>
            </div>
        ) : (
            <>
                <main className="flex-1 p-4 overflow-y-auto">
                    {messages.map((msg, index) => (
                    <MessageComponent key={`${msg.id}-${index}`} message={msg} settings={settings}/>
                    ))}
                    {isLoading && (
                    <div className="flex justify-start mb-4">
                        <div className="p-3 rounded-lg bg-gray-700 text-sm">
                        <div className="typing-indicator">
                            <span></span><span></span><span></span>
                        </div>
                        </div>
                    </div>
                    )}
                    <div ref={messagesEndRef} />
                </main>

                <footer className="p-2 sm:p-4 border-t border-gray-700/50 bg-gray-800">
                  {suggestedActions.length > 0 && (
                      <div
                          ref={suggestionsRef}
                          onMouseDown={handleMouseDown}
                          onMouseLeave={handleMouseLeaveOrUp}
                          onMouseUp={handleMouseLeaveOrUp}
                          onMouseMove={handleMouseMove}
                          className="flex items-center gap-2 overflow-x-auto pb-2 no-scrollbar cursor-grab"
                      >
                          {suggestedActions.map((action, index) => (
                              <button
                                  key={index}
                                  onClick={(e) => {
                                      if (dragInfo.hasDragged) {
                                          e.stopPropagation();
                                          return;
                                      }
                                      handleSendMessage(action);
                                  }}
                                  className="text-nowrap text-sm px-3 py-1.5 border border-gray-600 rounded-full hover:bg-gray-700 transition-colors"
                              >
                                  {action}
                              </button>
                          ))}
                      </div>
                  )}
                    <form
                    onSubmit={(e) => {
                        e.preventDefault();
                        handleSendMessage();
                    }}
                    className="flex items-center gap-2"
                    >
                    <input
                        ref={inputRef}
                        type="text"
                        value={userInput}
                        onChange={(e) => setUserInput(e.target.value)}
                        placeholder={isLoading ? 'در حال پردازش...' : 'پیام خود را بنویسید...'}
                        className="flex-1 w-full px-4 py-2 text-sm text-gray-200 bg-gray-700 border-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-orange-500"
                        disabled={isLoading}
                        aria-label="ورودی پیام"
                    />
                    <button
                        type="submit"
                        className="p-3 text-white rounded-full transition-colors disabled:bg-gray-500 disabled:cursor-not-allowed"
                        style={{ backgroundColor: !isLoading && userInput.trim() ? settings.widgetColor : undefined }}
                        disabled={isLoading || !userInput.trim()}
                        aria-label="ارسال پیام"
                    >
                        <SendIcon className="w-5 h-5" />
                    </button>
                    </form>
                </footer>
            </>
        )}
      </div>
      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes fadeOut {
          from { opacity: 1; }
          to { opacity: 0; }
        }
        @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeOutDown {
          from { opacity: 1; transform: translateY(0); }
          to { opacity: 0; transform: translateY(20px); }
        }
        .animate-fade-in-up { animation: fadeInUp 0.3s ease-out forwards; }
        .animate-fade-out-down { animation: fadeOutDown 0.3s ease-out forwards; }
        .typing-indicator span {
            height: 8px; width: 8px; background-color: #9ca3af; border-radius: 50%; display: inline-block;
            animation: bounce 1.4s infinite ease-in-out both;
        }
        .typing-indicator span:nth-of-type(1) { animation-delay: -0.32s; }
        .typing-indicator span:nth-of-type(2) { animation-delay: -0.16s; }
        @keyframes bounce {
          0%, 80%, 100% { transform: scale(0); }
          40% { transform: scale(1.0); }
        }
      `}</style>
    </div>
  );
};

export default ChatWindow;