import React, { useCallback, useEffect, useRef } from "react";
import { useScreenState } from "./hooks/useScreenState";
import { useResponsive } from "./hooks/useResponsive";
import { useChatContext, WidgetType } from "@/providers/chat/chat-context";
import { WidgetHeader } from "./components/WidgetHeader";
import { WidgetContainer } from "./components/WidgetContainer";
import WelcomeScreen from "./screens/WelcomeScreen";
import SuggestionScreen from "./screens/suggestion-screen/SuggestionScreen";
import ChatScreen from "./screens/chat-screen/ChatScreen";

interface WidgetProps {
  isOpen: boolean;
  onClose: () => void;
  isExpanded?: boolean;
  onToggleExpand?: (state?: boolean) => void;
  sharingId?: string;
}

export const Widget: React.FC<WidgetProps> = ({
  isOpen,
  onClose,
  isExpanded = false,
  onToggleExpand
}) => {
  const {
    botData,
    messages,
    sendMessage,
    addWelcomeMessage,
    setWidgetType,
    startNewConversation
  } = useChatContext();
  const { showWelcomeScreen, isFadingOut, showSuggestionScreen, goToChat, resetToWelcomeScreen } =
    useScreenState(isOpen);
  const { isMobile } = useResponsive();
  const shouldUseMobile = isMobile;
  const pendingGlobalMessagesRef = useRef<string[]>([]);

  useEffect(() => {
    setWidgetType(WidgetType.FLOATING);
  }, [setWidgetType]);

  const handleStartChat = (message: string, imageUrl?: string, apiMessage?: string) => {
    goToChat();
    addWelcomeMessage();
    sendMessage({ message, imageUrl, apiMessage });
  };

  const handleReset = () => {
    resetToWelcomeScreen();
    startNewConversation();
  };

  const handleGlobalMessageSubmit = useCallback(
    (rawMessage: string) => {
      const message = rawMessage.trim();

      if (!message) {
        return;
      }

      goToChat();

      if (messages.length === 0) {
        addWelcomeMessage();
      }

      console.log("[Mori Widget] Submitting global message");
      void sendMessage({ message });
    },
    [goToChat, messages.length, addWelcomeMessage, sendMessage]
  );

  useEffect(() => {
    if (botData && pendingGlobalMessagesRef.current.length > 0) {
      const queuedMessages = [...pendingGlobalMessagesRef.current];
      pendingGlobalMessagesRef.current = [];

      queuedMessages.forEach((queuedMessage) => {
        handleGlobalMessageSubmit(queuedMessage);
      });
    }
  }, [botData, handleGlobalMessageSubmit]);

  useEffect(() => {
    const handleSubmitEvent = (event: Event) => {
      const message = (
        event as CustomEvent<{
          message?: string;
        }>
      ).detail?.message;

      if (typeof message !== "string") {
        return;
      }

      if (!botData) {
        const trimmedMessage = message.trim();

        if (!trimmedMessage) {
          return;
        }

        pendingGlobalMessagesRef.current.push(trimmedMessage);
        console.log("[Mori Widget] Queued global message until bot data is ready");
        return;
      }

      handleGlobalMessageSubmit(message);
    };

    window.addEventListener("mori:submit-message", handleSubmitEvent);

    return () => {
      window.removeEventListener("mori:submit-message", handleSubmitEvent);
    };
  }, [botData, handleGlobalMessageSubmit]);

  const renderContent = () => {
    if (!botData) {
      return <WelcomeScreen isFadingOut={isFadingOut} />;
    }

    if (showWelcomeScreen) {
      return <WelcomeScreen isFadingOut={isFadingOut} />;
    }

    if (showSuggestionScreen) {
      return (
        <SuggestionScreen
          onStartChat={handleStartChat}
          isMobile={shouldUseMobile}
          isExpanded={isExpanded}
          onToggleExpand={onToggleExpand}
          onClose={onClose}
        />
      );
    }

    return (
      <ChatScreen
        header={
          <WidgetHeader
            onClose={onClose}
            isMobile={shouldUseMobile}
            isExpanded={isExpanded}
            onToggleExpand={onToggleExpand}
            onReset={handleReset}
          />
        }
      />
    );
  };

  return (
    <WidgetContainer
      showWelcomeScreen={showWelcomeScreen}
      showSuggestionScreen={showSuggestionScreen}
      isOpen={isOpen}
      isExpanded={isExpanded}
    >
      {renderContent()}
    </WidgetContainer>
  );
};