import { Box, VStack, Button } from "@chakra-ui/react";
import { useState, useCallback, useEffect, useRef } from "react";
import { useChatContext, WidgetType } from "~/providers/chat/chat-context";
import { getSharingId } from "~/utils/sharing-id";
import { ProductCardData } from "~/types/product";
import { fetchBotDataWithProduct, trackPDPInteraction, trackDoriSession, API_URLS } from "~/utils/api";
import { getProductId, isProductPage } from "~/utils/product-context";
import SimpleInputField from "./SimpleInputField";
import { useBotInitializer } from "../widget/useBotInitializer";
import EmbeddedChatScreen from "../widget/screens/chat-screen/EmbeddedChatScreen";
import { FaCaretDown } from "react-icons/fa";
import { BsStars } from "react-icons/bs";
import MoriBranding from "../widget/components/MoriBranding";
import { COLORS } from "@/utils/constants";
import { captureApiError } from "~/utils/sentry";
import { updateBotData } from "~/utils/posthog";

export function EmbeddedWidget() {
  const {
    sendMessage,
    inputState,
    isInputDisabled,
    stopCurrentRequest,
    setWidgetType,
    chatState
  } = useChatContext();
  const [showChat, setShowChat] = useState(false);
  const [suggestedPrompts, setSuggestedPrompts] = useState<string[]>([]);
  const [selectedQuestion, setSelectedQuestion] = useState<string | null>(null);
  const { botData: initialBotData } = useBotInitializer(WidgetType.EMBEDDED);
  const [faqsExpanded, setFaqsExpanded] = useState(false);
  const [answeredFaqs, setAnsweredFaqs] = useState<Set<string>>(new Set());
  const isPdpEmbeddedWidgetEnabled =
    initialBotData?.is_pdp_embedded_widget_enabled ?? false;

  // Update PostHog bot data when available (fixes missing bot_id in events)
  useEffect(() => {
    if (initialBotData) {
      updateBotData(initialBotData);
    }
  }, [initialBotData]);

  useEffect(() => {
    setWidgetType(WidgetType.EMBEDDED);

    const sharingId = getSharingId();

    if (!sharingId) return;
    if (!isPdpEmbeddedWidgetEnabled) return;

    const fetchBotData = async () => {
      try {
        const productId = getProductId();
        const shouldUseProduct = isProductPage() && productId;

        if (shouldUseProduct && productId) {
          const result = await fetchBotDataWithProduct(sharingId, productId);

          if (result.data) {
            setSuggestedPrompts(result.data.suggested_prompts || []);
          } else {
            setSuggestedPrompts([]);
          }
        }
      } catch {
        setSuggestedPrompts([]);
      }
    };

    fetchBotData();
  }, [
    isPdpEmbeddedWidgetEnabled,
    setWidgetType,
    initialBotData
  ]);

  const faqs: string[] = suggestedPrompts;
  const unansweredFaqs = faqs.filter((faq) => !answeredFaqs.has(faq));
  const handleSendMessage = useCallback(
    async (
      {
        message,
        imageUrl
      }: {
        message: string;
        imageUrl?: string;
      },
      repliedProduct?: ProductCardData
    ) => {
      const trimmedMessage = message?.trim();
      if (!trimmedMessage) return;
      setShowChat(true);
      setFaqsExpanded(true)
      await sendMessage({ message: trimmedMessage, imageUrl }, repliedProduct);
    },
    [sendMessage]
  );
  const handleSelectFAQ = useCallback(
    (q: string) => {
      setSelectedQuestion(q);
      setAnsweredFaqs((prev) => new Set(prev).add(q));
      void handleSendMessage({ message: q });
    },
    [handleSendMessage]
  );

  // Track PDP interaction when threadId is available
  useEffect(() => {
    if (chatState.threadId && selectedQuestion) {
      const productId = getProductId();
      const sharingId = getSharingId();

      if (productId && sharingId) {
        trackPDPInteraction(
          sharingId,
          chatState.threadId,
          productId,
          selectedQuestion,
          "wordpress"
        ).catch((error) => {
          console.error("Failed to track PDP interaction:", error);
          captureApiError(
            error,
            "trackPDPInteraction",
            API_URLS.trackPDPInteraction,
            "POST"
          );
        });

        // Clear the selected question after tracking
        setSelectedQuestion(null);
      }
    }
  }, [chatState.threadId, selectedQuestion]);

  // Track session when threadId is first initialized for embedded widget
  const lastTrackedThreadIdRef = useRef<string | null>(null);
  useEffect(() => {
    if (chatState.threadId && initialBotData) {
      if (chatState.threadId !== lastTrackedThreadIdRef.current) {
        const sharingId = getSharingId();

        if (sharingId) {
          trackDoriSession(
            sharingId,
            chatState.threadId,
            "wordpress",
            WidgetType.EMBEDDED
          ).catch((error) => {
            console.error("Failed to track session:", error);
            captureApiError(
              error,
              "trackDoriSession",
              API_URLS.trackSession,
              "POST"
            );
          });

          lastTrackedThreadIdRef.current = chatState.threadId;
        }
      }
    }
  }, [chatState.threadId, initialBotData]);

  if (initialBotData === null || faqs.length === 0) {
    return null;
  }

  return (
    <Box
      fontFamily={"Estedad-FD, system-ui, sans-serif"}
      width={{ base: "100%", md: "80%" }}
      margin="0 auto"
      height={{ base: "40vh" }}
      borderRadius="12px"
      bg="transparent"
      border="1px solid"
      borderColor="gray.200"
      overflow="hidden"
      boxShadow="sm"
      display="flex"
      flexDirection="column"
    >
      <Box bg="gray.50" p={3} flex="1" minH="0" overflow="hidden">
        {showChat ? (
          <Box height="100%">
            <EmbeddedChatScreen faqs={unansweredFaqs} onSelectFAQ={handleSelectFAQ} />
          </Box>
        ) : (
          <VStack align="stretch" height="100%" gap={0}>
            <Box
              flex="1"
              display="flex"
              flexDirection="column"
              minH="0"
            >
              <Box
                flex={faqsExpanded ? "1" : "0.85"}
                overflowY={faqsExpanded ? "auto" : "hidden"}
                minH="0"
                position="relative"
                css={{
                  scrollbarWidth: "thin",
                  scrollbarColor: "var(--chakra-colors-gray-200) transparent",
                  "&::-webkit-scrollbar": { width: "6px" },
                  "&::-webkit-scrollbar-track": { background: "transparent" },
                  "&::-webkit-scrollbar-thumb": {
                    backgroundColor: "var(--chakra-colors-gray-200)",
                    borderRadius: "9999px"
                  },
                  ...(!faqsExpanded && {
                    "&::after": {
                      content: '""',
                      position: "absolute",
                      bottom: 0,
                      left: 0,
                      right: 0,
                      height: "60px",
                      background: "linear-gradient(to bottom, rgba(247, 250, 252, 0) 0%, rgba(247, 250, 252, 1) 100%)",
                      pointerEvents: "none"
                    }
                  })
                }}
              >
                <VStack align="stretch" gap={2}>
                  {faqs.map((q, idx) => (
                    <Button
                      fontFamily={"Estedad-FD, system-ui, sans-serif"}
                      key={idx}
                      onClick={() => handleSelectFAQ(q)}
                      justifyContent="flex-start"
                      variant="outline"
                      size="sm"
                      colorScheme="gray"
                      bg="white"
                      borderColor="gray.200"
                      borderRadius="12px"
                      _hover={{ bg: "gray.50" }}
                      lineClamp={3}
                      textAlign={"start"}
                      height={"fit-content"}
                      maxW={"fit-content"}
                      py={1.5}
                      px={3}
                      flexShrink={0}
                      gap={2}
                      display="inline-flex"
                      alignItems="center"
                    >
                      <BsStars style={{ flexShrink: 0 }} size={12} />
                      {q}
                    </Button>
                  ))}
                </VStack>
              </Box>

              {!faqsExpanded && faqs.length > 3 && (
                <Box
                  flex="0.15"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  minH="0"
                >
                  <Button
                    onClick={() => setFaqsExpanded(true)}
                    variant="plain"
                    w="full"
                    justifyContent="center"
                    color={COLORS.PRIMARY}
                    fontWeight="600"
                    _hover={{ textDecoration: "none", color: "#4A3FF0" }}
                    py={2}
                    gap={2}
                  >
                    نمایش بیشتر
                    <FaCaretDown />
                  </Button>
                </Box>
              )}
            </Box>

            <VStack bg="transparent" borderRadius="12px" flexShrink={0}>
              <SimpleInputField
                placeholder={
                  inputState === "generating"
                    ? "در حال پردازش..."
                    : "سؤال خود را بپرسید"
                }
                onSend={isInputDisabled ? undefined : handleSendMessage}
                onStop={stopCurrentRequest}
              />
              <Box transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)" mt={2}>
                <MoriBranding variant="default" />
              </Box>
            </VStack>

          </VStack>
        )}
      </Box>
    </Box>
  );
}