import React, { useState, useEffect, useRef } from "react";
import {
  Box,
  VStack,
  HStack,
  Text,
  Textarea,
  IconButton,
  Image
} from "@chakra-ui/react";
import { InputFieldProps } from "~/components/types";
import ArrowLeftIcon from "~/assets/icons/arrow-left.svg";
import AiRainbowIcon from "~/assets/icons/ai-rainbow.svg";

const ChatOnlyInputField: React.FC<InputFieldProps> = ({
  placeholder = "Write a prompt or paste a contract address",
  value = "",
  onChange,
  onSend
}) => {
  const [inputValue, setInputValue] = useState(value);
  const [isExpanded, setIsExpanded] = useState(false);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const handleContainerClick = () => {
    setIsExpanded(true);
    setTimeout(() => {
      if (textareaRef.current) {
        textareaRef.current.focus();

        const length = textareaRef.current.value.length;

        textareaRef.current.setSelectionRange(length, length);
      }
    }, 100);
  };

  useEffect(() => {
    setInputValue(removeSpaces(value));
  }, [value]);

  const handleInputChange = (newValue: string) => {
    const trimmedValue = removeSpaces(newValue);

    setInputValue(trimmedValue);
    onChange?.(trimmedValue);
  };

  const handleSend = () => {
    if (inputValue.trim()) {
      onSend?.({
        message: inputValue.trim()
      });
      setInputValue("");
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey && !e.repeat) {
      e.preventDefault();
      handleSend();
    }
  };

  const addSpaces = (text: string) => `       ${text}`;
  const removeSpaces = (text: string) => text.trimStart();

  return (
    <VStack gap={2} w="full" align="stretch">
      <Box
        bg="white"
        borderRadius="24px"
        position="relative"
        p={2}
        w="full"
        h={isExpanded ? "80px" : "48px"}
        transition="all 0.6s cubic-bezier(0.4, 0, 0.2, 1)"
        overflow="hidden"
        cursor="pointer"
        onClick={handleContainerClick}
      >
        <Box position="absolute" top="8px" right="8px" zIndex={2}>
          <Image src={AiRainbowIcon} alt="AI" w="24px" h="24px" />
        </Box>

        <Box
          position="absolute"
          top={0}
          left={0}
          right={0}
          bottom={0}
          p={2}
          opacity={!isExpanded ? 1 : 0}
          transform={
            !isExpanded
              ? "translateY(0) scale(1)"
              : "translateY(-20px) scale(0.95)"
          }
          transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)"
          pointerEvents={!isExpanded ? "auto" : "none"}
        >
          <HStack justify="space-between" align="center" h="full">
            <Text
              color="#999999"
              fontSize="16px"
              flex={1}
              paddingStart={"32px"}
              textAlign="right"
              transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
            >
              {placeholder}
            </Text>
          </HStack>
        </Box>

        <IconButton
          position="absolute"
          bottom="8px"
          left="12px"
          size="xs"
          borderRadius="full"
          bg="#040404"
          color="white"
          aria-label="Send"
          onClick={(e) => {
            e.stopPropagation();
            handleSend();
          }}
          _hover={{ bg: "gray.800" }}
          disabled={!inputValue.trim()}
          transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
          _disabled={{
            bg: "#CCCCCC",
            cursor: "not-allowed"
          }}
          transform="scale(1)"
          zIndex={2}
        >
          <img src={ArrowLeftIcon} alt="Send" />
        </IconButton>

        <Box
          position="absolute"
          top={0}
          left={0}
          right={0}
          bottom={0}
          p={2}
          opacity={isExpanded ? 1 : 0}
          transform={
            isExpanded
              ? "translateY(0) scale(1)"
              : "translateY(20px) scale(0.95)"
          }
          transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)"
          pointerEvents={isExpanded ? "auto" : "none"}
        >
          <Textarea
            ref={textareaRef}
            value={addSpaces(inputValue)}
            onChange={(e) => handleInputChange(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder={addSpaces(placeholder)}
            fontSize="16px"
            color="black"
            fontWeight={300}
            textAlign="right"
            resize="none"
            h="100%"
            border="none"
            bg="transparent"
            _focus={{ boxShadow: "none", border: "none", outline: "none" }}
            _placeholder={{ color: "#999999" }}
            transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
            rows={2}
          />
        </Box>
      </Box>
    </VStack>
  );
};

export default ChatOnlyInputField;