import React, { useState, useEffect } from "react";
import {
  Button,
  HStack,
  Text,
  Box,
  IconButton,
  Image,
  useBreakpointValue,
} from "@chakra-ui/react";
import AiBigIcon from "~/assets/icons/ai-big.svg";
import CloseIcon from "~/assets/icons/close.svg";
import { useChatContext } from "@/providers/chat/chat-context";
import {
  shouldTriggerFabAnimation,
  saveFabAnimationTimestamp,
} from "~/utils/session-storage";
import { getPositionConfig } from "~/utils/positioning";
import { SupportChannelMenu } from "../support-channel-menu";

interface FloatingActionButtonProps {
  onClick?: () => void;
}

const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({
  onClick,
}) => {
  const { botData, dynamicWelcomeMessage, isLoadingWelcomeMessage } =
    useChatContext();
  const [buttonVariant, setButtonVariant] = useState<"expanded" | "minimized">(
    "expanded"
  );
  const [isVisible, setIsVisible] = useState(false);
  const [isTextBubbleVisible, setIsTextBubbleVisible] = useState(false);
  const [shouldAnimate, setShouldAnimate] = useState(false);
  const isMobile = useBreakpointValue({ base: true, md: false }) ?? false;
  const positionConfig = getPositionConfig(botData, isMobile);
  const askFromMoriText = botData?.agent_name
    ? `از ${botData?.agent_name} بپرس!`
    : "از موری بپرس!";


  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isHovering, setIsHovering] = useState(false);
  const menuCloseTimer = React.useRef<NodeJS.Timeout | null>(null);

  const clearCloseTimer = () => {
    if (menuCloseTimer.current) {
      clearTimeout(menuCloseTimer.current);
      menuCloseTimer.current = null;
    }
  };

  const openMenu = () => {
    clearCloseTimer();
    if (!isMobile) {
      setIsMenuOpen(true);
      setIsHovering(true);
    }
  };

  const closeMenu = () => {
    if (!isMobile) {
      clearCloseTimer();
      menuCloseTimer.current = setTimeout(() => {
        setIsMenuOpen(false);
        setIsHovering(false);
      }, 100);
    }
  };

  useEffect(() => {
    return () => clearCloseTimer();
  }, []);

  // Check if widget_test mode is enabled
  const isWidgetTestMode = botData?.widget_test === true;

  // Static welcome message (original behavior)
  const hasStaticWelcomeMessage =
    botData?.wellcomeMessage && botData.wellcomeMessage.trim().length > 0;
  const staticWelcomeMessageText = botData?.wellcomeMessage;

  // Determine which welcome message to use based on mode
  const welcomeMessageText = isWidgetTestMode
    ? dynamicWelcomeMessage
    : staticWelcomeMessageText;

  // ============================================
  // ORIGINAL BEHAVIOR (widget_test = false)
  // ============================================
  const triggerAnimationCycle = () => {
    saveFabAnimationTimestamp();
    setButtonVariant("expanded");
    setIsTextBubbleVisible(false);
    setIsVisible(true);

    if (hasStaticWelcomeMessage) {
      const showDelay = 100;
      const stayDuration = 5000;

      const bubbleTimer = setTimeout(() => {
        setIsTextBubbleVisible(true);

        const minimizeTimer = setTimeout(() => {
          setIsTextBubbleVisible(false);
          setTimeout(() => {
            setButtonVariant("minimized");
          }, 100);
        }, stayDuration);

        return () => clearTimeout(minimizeTimer);
      }, showDelay);

      return () => clearTimeout(bubbleTimer);
    } else {
      const minimizeTimer = setTimeout(() => {
        setButtonVariant("minimized");
      }, 3000);

      return () => clearTimeout(minimizeTimer);
    }
  };

  const startMinimized = () => {
    setButtonVariant("minimized");
    setIsTextBubbleVisible(false);
    setIsVisible(true);
  };

  // Original behavior effect - only runs when widget_test is false
  useEffect(() => {
    if (isWidgetTestMode) {
      return; // Skip original behavior when in test mode
    }

    if (botData === null) {
      return;
    }

    const shouldTrigger = shouldTriggerFabAnimation();
    setShouldAnimate(true);

    if (shouldTrigger) {
      return triggerAnimationCycle();
    } else {
      return startMinimized();
    }
  }, [botData, isWidgetTestMode]);

  // Original periodic check - only runs when widget_test is false
  useEffect(() => {
    if (isWidgetTestMode) {
      return; // Skip when in test mode
    }

    const timer = setInterval(() => {
      if (shouldTriggerFabAnimation()) {
        triggerAnimationCycle();
      }
    }, 30000);

    return () => clearInterval(timer);
  }, [shouldAnimate, isWidgetTestMode]);

  // ============================================
  // NEW BEHAVIOR (widget_test = true)
  // ============================================

  // Show widget when botData is loaded (widget_test mode)
  // Behavior should be same as non-test mode: show expanded, then minimize after 3s
  useEffect(() => {
    if (!isWidgetTestMode) {
      return; // Skip when not in test mode
    }

    if (botData) {
      setButtonVariant("expanded");
      setIsVisible(true);

      // Minimize after 3 seconds (same as non-test mode without welcome message)
      const minimizeTimer = setTimeout(() => {
        setButtonVariant("minimized");
      }, 3000);

      return () => clearTimeout(minimizeTimer);
    }
  }, [botData, isWidgetTestMode]);

  // Show welcome message bubble when dynamic message is available (widget_test mode)
  // This runs independently - shows bubble when message arrives, hides after 3.5s
  useEffect(() => {
    if (!isWidgetTestMode) {
      return; // Skip when not in test mode
    }

    if (!isLoadingWelcomeMessage && dynamicWelcomeMessage) {
      // Expand button and show bubble when message arrives
      setButtonVariant("expanded");

      const showTimer = setTimeout(() => {
        setIsTextBubbleVisible(true);
      }, 300);

      const hideTimer = setTimeout(() => {
        setIsTextBubbleVisible(false);
        setTimeout(() => {
          setButtonVariant("minimized");
        }, 300);
      }, 3500);

      return () => {
        clearTimeout(showTimer);
        clearTimeout(hideTimer);
      };
    }
  }, [isLoadingWelcomeMessage, dynamicWelcomeMessage, isWidgetTestMode]);

  // ============================================
  // SHARED HANDLERS
  // ============================================

  const resetToExpanded = () => {
    if (buttonVariant === "minimized") {
      setIsTextBubbleVisible(false);
      setButtonVariant("expanded");
      setTimeout(() => {
        setIsTextBubbleVisible(true);
      }, 300);
    }
  };

  const handleClick = () => {
    if (onClick) {
      onClick();
      if (!isWidgetTestMode) {
        resetToExpanded();
      }
    }
  };

  const handleCloseBubble = () => {
    setIsTextBubbleVisible(false);
    setTimeout(() => {
      setButtonVariant("minimized");
    }, 300);
  };

  // ============================================
  // RENDER
  // ============================================

  // Determine bubble render condition based on mode
  const shouldRenderBubble = isWidgetTestMode
    ? dynamicWelcomeMessage // New mode: render if dynamic message exists
    : buttonVariant === "expanded" && hasStaticWelcomeMessage; // Original: expanded + static message

  // Dynamic bubble for widget_test mode - slightly more polished
  const renderDynamicBubble = () => (
    <Box
      position="absolute"
      bottom="100%"
      {...{
        [positionConfig.align]: "0",
      }}
      mb={2}
      maxW={{ base: "85vw", md: "300px" }}
      bg="linear-gradient(223deg, rgba(255, 252, 253, 1) 0%, rgba(255, 248, 249, 1) 25%, rgba(252, 248, 255, 1) 50%, rgba(249, 249, 255, 1) 76%, rgba(252, 253, 255, 1) 100%)"
      borderRadius="16px"
      px={3}
      py={3}
      boxShadow="0 4px 20px rgba(0, 0, 0, 0.1)"
      opacity={isTextBubbleVisible ? 1 : 0}
      transform={
        isTextBubbleVisible
          ? "translateY(0) scale(1)"
          : "translateY(10px) scale(0.95)"
      }
      transition="all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)"
      pointerEvents={isTextBubbleVisible ? "auto" : "none"}
      cursor="pointer"
      onClick={handleClick}
      _hover={{ boxShadow: "0 6px 24px rgba(0, 0, 0, 0.14)" }}
    >
      <HStack
        gap={2}
        align="flex-start"
        justifyContent="flex-start"
      >
        <IconButton
          size="xs"
          variant="ghost"
          aria-label="Close"
          onClick={(e) => {
            e.stopPropagation();
            handleCloseBubble();
          }}
          color="#666"
          _hover={{ bg: "rgba(0,0,0,0.08)" }}
          h="auto"
          p={1}
          borderRadius="full"
          flexShrink={0}
        >
          <Image src={CloseIcon} alt="Close" w={3.5} h={3.5} />
        </IconButton>
        <Text
          fontSize="13px"
          fontWeight="400"
          color="#333"
          textAlign="right"
          lineHeight="1.85"
          fontFamily="Estedad-FD, system-ui, sans-serif"
          whiteSpace="nowrap"
        >
          {welcomeMessageText}
        </Text>
      </HStack>
    </Box>
  );

  // Original bubble for non-test mode
  const renderStaticBubble = () => (
    <Box
      position="absolute"
      bottom="100%"
      {...{
        [positionConfig.align]: "0",
      }}
      mb={2}
      w={{ base: "90vw", md: "25vw" }}
      maxW={{ base: "90vw", md: "300px" }}
      bg="linear-gradient(223deg, rgba(255, 252, 253, 1) 0%, rgba(255, 248, 249, 1) 25%, rgba(252, 248, 255, 1) 50%, rgba(249, 249, 255, 1) 76%, rgba(252, 253, 255, 1) 100%)"
      borderRadius="16px"
      px={3}
      py={3}
      boxShadow="lg"
      opacity={isTextBubbleVisible ? 1 : 0}
      transform={
        isTextBubbleVisible
          ? "translateY(0) scale(1)"
          : "translateY(10px) scale(0.95)"
      }
      transition="all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1)"
      pointerEvents={isTextBubbleVisible ? "auto" : "none"}
    >
      <HStack
        gap={1}
        align="center"
        width={"100%"}
        justifyContent={"flex-start"}
      >
        <IconButton
          size="xs"
          variant="ghost"
          aria-label="Close"
          onClick={handleCloseBubble}
          color="black"
          _hover={{ bg: "rgba(0,0,0,0.1)" }}
          h="auto"
          p={1}
        >
          <Image src={CloseIcon} alt="Close" w={4} h={4} />
        </IconButton>
        <Text
          fontSize="12px"
          fontWeight="400"
          color="black"
          textAlign="right"
          lineHeight="1.75"
          flex={1}
          width={"100%"}
          fontFamily="Estedad-FD, system-ui, sans-serif"
        >
          {welcomeMessageText}
        </Text>
      </HStack>
    </Box>
  );

  return (
    <Box
      position="relative"
      transform={
        isVisible ? "translateY(0) scale(1)" : "translateY(100px) scale(0.9)"
      }
      opacity={isVisible ? 1 : 0}
      transition="all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)"
      onMouseLeave={closeMenu}
    >
      <Box
        position="absolute"
        bottom={shouldRenderBubble ? "calc(100% + 55px)" : "100%"} // Adjust higher when bubble is visible
        right={0}
        transition="bottom 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)"
        w="full"
        zIndex={10}
      >
        <SupportChannelMenu
          channels={botData?.merchant_support_channels}
          isOpen={isMenuOpen}
          onToggle={() => setIsMenuOpen(!isMenuOpen)}
          isMobile={isMobile}
          onMouseEnter={openMenu}
          onChatClick={onClick}
        />
      </Box>

      {/* Welcome message bubble */}
      {shouldRenderBubble && (
        isWidgetTestMode ? renderDynamicBubble() : renderStaticBubble()
      )}

      <Button
        borderRadius={
          positionConfig.align === "right"
            ? "32px 0px 32px 32px"
            : "0px 32px 32px 32px"
        }
        borderWidth={0}
        bg="linear-gradient(126deg, rgba(255, 126, 144, 1) 16%, rgba(169, 57, 255, 1) 49%, rgba(0, 32, 255, 1) 88%)"
        color="white"
        p={{ base: 3, md: 4 }}
        border={"none !important"}
        w={
          buttonVariant === "expanded"
            ? { base: "150px", md: "180px" }
            : { base: "56px", md: "64px" }
        }
        h="auto"
        transition="width 0.3s linear, min-width 0.3s linear, max-width 0.3s linear"
        onClick={handleClick}
        onMouseEnter={openMenu}
        _hover={{
          transform: "scale(1.05)",
          boxShadow: "0 10px 25px rgba(0, 0, 0, 0.2)",
          filter: "brightness(1.1)",
          border: "none",
        }}
        _focus={{
          border: "none",
          outline: "none",
          boxShadow: "none",
        }}
        _active={{
          transform: "scale(0.98)",
          border: "none",
          outline: "none",
          boxShadow: "none",
        }}
      >
        <HStack
          gap={buttonVariant == "expanded" ? 2 : 0}
          position="relative"
          w={buttonVariant == "expanded" ? "full" : "auto"}
          justify="space-between"
        >
          <Image
            src={AiBigIcon}
            alt="AI"
            w={{ base: 5, md: 6 }}
            h={{ base: 5, md: 6 }}
            transform={
              buttonVariant === "expanded"
                ? "rotate(0deg)"
                : positionConfig.align === "right"
                  ? "rotate(90deg)"
                  : "rotate(-90deg)"
            }
            transition="transform 0.3s linear"
          />
          {buttonVariant == "expanded" && (
            <Text
              fontSize={{ base: "14px", md: "16px" }}
              fontWeight={{ base: "500", md: "600" }}
              textAlign="left"
              lineHeight="1.5"
              whiteSpace="nowrap"
              overflow="hidden"
              fontFamily="Estedad-FD, system-ui, sans-serif"
            >
              {askFromMoriText}
            </Text>
          )}
        </HStack>
      </Button>
    </Box>
  );
};

export default FloatingActionButton;