import React from "react";
import { Box, VStack, Text } from "@chakra-ui/react";
import { MessageRenderer } from "./message-renderer/MessageRenderer";
import InputField from "~/components/widget/components/input-field/InputField";
import { useChatContext } from "@/providers/chat/chat-context";
import { createNameSentence } from "~/utils/helpers";

interface ChatScreenProps {
  header: React.ReactNode;
}

const ChatScreen: React.FC<ChatScreenProps> = ({ header }) => {
  const chat = useChatContext();

  // Find the last bot message ID so we can pass isStreaming only to it
  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 (
    <>
      {header}

      <Text
        fontWeight="600"
        fontStyle="normal"
        fontSize="24px"
        letterSpacing="0"
        w={"fit-content"}
        transition="opacity 0.5s ease"
        textAlign="right"
        fontFamily="Estedad-FD, system-ui, sans-serif"
        css={{
          background: "linear-gradient(to right, #FF7E90, #A939FF, #0020FF)",
          WebkitBackgroundClip: "text",
          WebkitTextFillColor: "transparent",
          backgroundClip: "text"
        }}
      >
        {createNameSentence(chat.botData?.agent_name)}
      </Text>

      <VStack
        flex={1}
        justify="center"
        align="stretch"
        gap={4}
        minH={0}
        transition="opacity 0.5s ease"
        opacity={1}
      >
        <Box
          flex={1}
          overflowY="auto"
          overflowX="hidden"
          data-scroll-container="chat-messages"
          css={{
            "&::-webkit-scrollbar": {
              display: "none"
            },
            scrollbarWidth: "none",
            msOverflowStyle: "none"
          }}
        >
          <VStack gap={2} align="stretch" pb={2}>
            {chat.messages.map((msg) => (
              <MessageRenderer
                key={msg.id}
                message={msg}
                isStreaming={
                  chat.inputState === "generating" &&
                  msg.id === lastMoriMessageId
                }
              />
            ))}

            <div ref={chat.messagesEndRef} style={{ height: "1px" }} />
          </VStack>
        </Box>

        <Box
          flexShrink={0}
          bg="transparent"
          borderRadius="12px"
          transition="all 0.2s ease"
        >
          <InputField
            state={chat.inputState}
            placeholder={
              chat.inputState === "generating"
                ? "در حال پردازش..."
                : "چه سوالی داری؟"
            }
            onSend={chat.isInputDisabled ? undefined : chat.sendMessage}
            onStop={chat.stopCurrentRequest}
          />
        </Box>
      </VStack>
    </>
  );
};

export default ChatScreen;