import React from "react";
import { Box, VStack, Button } from "@chakra-ui/react";
import { BsStars } from "react-icons/bs";
import { MessageRenderer } from "./message-renderer/MessageRenderer";
import SimpleInputField from "~/components/embedded-widget/SimpleInputField";
import { useChatContext } from "@/providers/chat/chat-context";
import MoriBranding from "~/components/widget/components/MoriBranding";

interface EmbeddedChatScreenProps {
  faqs?: string[];
  onSelectFAQ?: (faq: string) => void;
}

export const EmbeddedChatScreen: React.FC<EmbeddedChatScreenProps> = ({
  faqs = [],
  onSelectFAQ
}) => {
  const chat = useChatContext();

  const lastMoriMessageId = (() => {
    for (let i = chat.messages.length - 1; i >= 0; i--) {
      if (chat.messages[i].type === "mori") {
        return chat.messages[i].id;
      }
    }
    return null;
  })();

  return (
    <Box position="relative" height="100%" display="flex" flexDirection="column">
      <Box
        overflowY="auto"
        overflowX="hidden"
        flex="1"
        minH="0"
        data-scroll-container="chat-messages"
        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"
          }
        }}
      >
        <VStack gap={2} align="stretch" pb={2}>
          {chat.messages.map((msg) => (
            <MessageRenderer
              key={msg.id}
              message={msg}
              source="embedded"
              isStreaming={
                chat.inputState === "generating" &&
                msg.id === lastMoriMessageId
              }
            />
          ))}
          <div ref={chat.messagesEndRef} style={{ height: "1px" }} />
        </VStack>

        {chat.inputState !== "generating" && faqs.length > 0 && onSelectFAQ && (
          <Box flexShrink={0} mt={3}>
            <VStack align="stretch" gap={2}>
              {faqs.map((q, idx) => (
                <Button
                  fontFamily={"Estedad-FD, system-ui, sans-serif"}
                  key={idx}
                  onClick={() => onSelectFAQ(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>
        )}
      </Box>

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

export default EmbeddedChatScreen;