import React from "react";
import { Box, VStack, Text, Button, Image } from "@chakra-ui/react";
import { useChatContext } from "@/providers/chat/chat-context";
import { WidgetHeader } from "../../components/WidgetHeader";
import InputField from "~/components/widget/components/input-field/InputField";
import { useInput } from "./useInput";
import AiSearchIcon from "~/assets/icons/ai-search.svg";
import MoriBranding from "~/components/widget/components/MoriBranding";
import { HorizontalChannelsList } from "~/components/support-channel-menu";
import { createNameSentence } from "~/utils/helpers";
interface SuggestionScreenProps {
  onStartChat: (message: string, imageUrl?: string, apiMessage?: string) => void;
  isMobile?: boolean;
  isExpanded?: boolean;
  onToggleExpand?: () => void;
  onClose: () => void;
}

const SuggestionScreen: React.FC<SuggestionScreenProps> = ({
  onStartChat,
  isMobile,
  isExpanded = false,
  onToggleExpand,
  onClose
}) => {
  const { inputValue, handleInputChange } = useInput();
  const { botData, dynamicWelcomeMessage } = useChatContext();
  const isWhiteLabeled = botData?.white_label?.is_white_labeled ?? false;
  const isWidgetTestMode = botData?.widget_test === true;

  // Build suggestions array: dynamic suggestion first (if available), then backend suggestions
  const allSuggestions = React.useMemo(() => {
    const suggestions: Array<{ text: string; isDynamic: boolean }> = [];

    // Add dynamic suggestion first if in widget_test mode
    if (isWidgetTestMode && dynamicWelcomeMessage) {
      suggestions.push({ text: dynamicWelcomeMessage, isDynamic: true });
    }

    // Add backend suggestions
    if (botData?.suggestedReply) {
      botData.suggestedReply.forEach((s) => {
        suggestions.push({ text: s, isDynamic: false });
      });
    }

    return suggestions;
  }, [isWidgetTestMode, dynamicWelcomeMessage, botData?.suggestedReply]);

  const handleSuggestionClick = (suggestion: string, imageUrl?: string, isDynamicSuggestion?: boolean) => {
    handleSubmit({ message: suggestion, imageUrl, isDynamicSuggestion });
  };

  const handleSubmit = ({
    message,
    imageUrl,
    isDynamicSuggestion
  }: {
    message: string;
    imageUrl?: string;
    isDynamicSuggestion?: boolean;
  }) => {
    if (message.trim() || imageUrl) {
      // For dynamic suggestions, we pass a special apiMessage that tells the bot
      // this is its own suggestion that the user clicked on
      if (isDynamicSuggestion) {
        const apiMessage = `[SYSTEM: User clicked on your suggested prompt. Respond to this topic directly.]\n\n${message.trim()}`;
        onStartChat(message.trim(), imageUrl, apiMessage);
      } else {
        onStartChat(message.trim(), imageUrl);
      }
    }
  };

  return (
    <>
      <WidgetHeader
        onClose={onClose}
        isMobile={isMobile}
        isExpanded={isExpanded}
        onToggleExpand={onToggleExpand}
      />
      <VStack h="full" justify="space-between" align="stretch" gap={6}>
        <VStack gap={4} w={"full"} align="start" mb={"32px"}>
          <Text
            fontWeight={isExpanded ? 600 : 500}
            fontStyle="normal"
            fontSize="24px"
            letterSpacing="0"
            textAlign={isExpanded ? "center" : "right"}
            fontFamily="Estedad-FD, system-ui, sans-serif"
            css={{
              background:
                "linear-gradient(to right, #FF7E90, #A939FF, #0020FF)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              backgroundClip: "text"
            }}
          >
            {createNameSentence(botData?.agent_name)}
          </Text>
          <Text
            fontSize="16px"
            fontWeight={500}
            color="#666666"
            textAlign="center"
            lineHeight="21px"
            fontFamily="Estedad-FD, system-ui, sans-serif"
          >
            هر سوالی برای خرید داری، بپرس{" "}
          </Text>
        </VStack>

        <VStack gap={4} align="stretch" flex={1} justify="start">
          <Box>
            <InputField
              state="minimized"
              placeholder="هر چی لازم داری، فقط بپرس"
              value={inputValue}
              onChange={handleInputChange}
              onSend={handleSubmit}
            />
          </Box>

          <Box w="full">
            <Box
              display="grid"
              gridTemplateColumns={{
                base: "1fr",
                md: "1fr 1fr"
              }}
              gap={3}
              w="full"
            >
              {allSuggestions.map((suggestion, index) => (
                <Button
                  key={index}
                  variant="outline"
                  h="auto"
                  borderRadius="24px"
                  border={suggestion.isDynamic ? "1px solid #E8E0F0" : "1px solid #EDEDED"}
                  bg={suggestion.isDynamic ? "#FAF8FF" : "white"}
                  color={suggestion.isDynamic ? "#6B4D9E" : "#1A1A1A"}
                  fontSize="14px"
                  fontWeight={suggestion.isDynamic ? 500 : 400}
                  textAlign="right"
                  padding="8px 12px"
                  _hover={{
                    bg: suggestion.isDynamic ? "#F3EEFF" : "#F8F8F8",
                    borderColor: suggestion.isDynamic ? "#D0C0E8" : "#D0D0D0",
                    transform: "scale(1.01)"
                  }}
                  _active={{
                    bg: suggestion.isDynamic ? "#EDE5FC" : "#F0F0F0",
                    transform: "scale(0.98)"
                  }}
                  onClick={() => handleSuggestionClick(suggestion.text, undefined, suggestion.isDynamic)}
                  justifyContent={"start"}
                  w="full"
                  transition="all 0.2s ease"
                >
                  <Image
                    src={AiSearchIcon}
                    alt="AI Search"
                    w={4}
                    h={4}
                    opacity={suggestion.isDynamic ? 0.8 : 1}
                  />
                  <Box
                    as="span"
                    flex="1"
                    textAlign="right"
                    whiteSpace="normal"
                    wordBreak="break-word"
                    overflowWrap="break-word"
                    fontFamily="Estedad-FD, system-ui, sans-serif"
                  >
                    {suggestion.text}
                  </Box>
                </Button>
              ))}
            </Box>
          </Box>
        </VStack>

        {/* Support Channels List */}
        <Box w="full">
          <HorizontalChannelsList channels={botData?.merchant_support_channels} />
        </Box>

        {!isWhiteLabeled && (
          <Box transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)">
            <MoriBranding variant="default" />
          </Box>
        )}
      </VStack>
    </>
  );
};

export default SuggestionScreen;