import { useRef, useState, useEffect } from "react";
import SendIcon from "../icons/SendIcon";
import Button from "../ui/Button";
import { useMe } from "../../hooks/useAuth";
import clsx from "clsx";
import PopupWrapper from "../PopupWrapper";

export default function ChatPopup() {
  const [messages, setMessages] = useState<MessageItemProps[]>([
    {
      senderId: "1",
      timestamp: "12:22",
      content:
        "У меня все сломалось, ничего не работает, картинки нет, все пошло по пизде, помогите мне кто-нибудь, пожалуйста",
    },
    {
      senderId: "2",
      timestamp: "12:22",
      content: "🤡🤡🤡",
    },
  ]);

  function onMessageSend(message: string) {
    setMessages([
      ...messages,
      {
        senderId: "2",
        timestamp: "12:22",
        content: message,
      },
    ]);
  }

  return (
    <PopupWrapper title="Чат" draggable className="max-h-[40]">
      <div className="flex flex-col h-[27.778vw] relative -m-[1.389vw]">
        <MessageFeed messages={messages} />
        <MessageInput onMessageSend={onMessageSend} />
      </div>
    </PopupWrapper>
  );
}

function MessageFeed({ messages }: { messages: MessageItemProps[] }) {
  const messagesEndRef = useRef<HTMLDivElement>(null);

  //   Скролл к концу при получении нового сообщения
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  return (
    <div
      className="flex flex-col w-full h-[calc(100%-4.444vw)] bg-[#F0F0F0] p-[1.111vw] pb-[0] overflow-y-auto"
      style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
    >
      <style>
        {`
        .flex::-webkit-scrollbar {
          display: none;
        }
      `}
      </style>
      {messages.length === 0 ? (
        <div className="w-full flex flex-col gap-[1.667vw] items-center justify-center px-[2.778vw] m-auto">
          <img
            src="/img/popups/EmptyMessageFeed.svg"
            className="size-[8.333vw]"
          />
          <span className="text-center text-s">
            Здесь пока нет сообщений. <br /> Можно начать беседу с приветствия
          </span>
        </div>
      ) : (
        <div className="flex flex-col gap-[1.111vw] items-end mt-auto">
          {messages.map((message, index) => (
            <MessageItem key={index} {...message} />
          ))}
          <div ref={messagesEndRef} />
        </div>
      )}
    </div>
  );
}

interface MessageItemProps {
  senderId: string;
  timestamp: string;
  content: string;
}

function MessageItem({ senderId, timestamp, content }: MessageItemProps) {
  const { data: user } = useMe();
  const isFromMe = senderId === "1";

  return (
    <div
      className={clsx(
        "flex w-full items-end gap-[0.556vw] justify-end",
        isFromMe ? "" : "flex-row-reverse"
      )}
    >
      <div
        className={clsx(
          "p-[1.111vw] w-[16.667vw] flex items-end justify-between",
          isFromMe
            ? "bg-[#7B60F3] rounded-[1.111vw_1.111vw_0_1.111vw] text-white"
            : "bg-[#FFFFFF] rounded-[1.111vw_1.111vw_1.111vw_0] c text-[#141414]"
        )}
      >
        <div className="break-words text-s w-[12.917vw]">
          {!isFromMe && (
            <div className="caption-s text-[#7B60F3] mb-[0.278vw]">
              {user?.fullName}
            </div>
          )}
          <div>{content}</div>
        </div>
        <span className="caption-xs opacity-30">{timestamp}</span>
      </div>

      <div className="size-[2.222vw rounded-full">
        <img
          src="/img/popups/MessageUserPfp.png"
          className="size-full object-cover"
          alt="user"
        />
      </div>
    </div>
  );
}

function MessageInput({
  onMessageSend,
}: {
  onMessageSend: (message: string) => void;
}) {
  const [message, setMessage] = useState("");
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    const textarea = textareaRef.current;
    if (!textarea) return;
    textarea.style.height = "auto";

    const computedStyle = window.getComputedStyle(textarea);
    const lineHeight = parseInt(computedStyle.lineHeight);
    const maxHeight = lineHeight * 4;
    const newHeight = Math.min(textarea.scrollHeight, maxHeight);

    textarea.style.height = `${newHeight}px`;
    textarea.style.overflowY =
      textarea.scrollHeight > maxHeight ? "auto" : "hidden";
  }, [message]);

  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
    setMessage(e.target.value);
  }

  function sendMessage() {
    setMessage("");
    onMessageSend(message);
  }

  return (
    <div
      onClick={() => textareaRef.current?.focus()}
      className="flex w-full min-h-[4.444vw] p-[1.111vw] items-end justify-between absolute bottom-0 left-0 bg-white"
    >
      <textarea
        ref={textareaRef}
        value={message}
        onChange={handleChange}
        className="w-[80%] resize-none focus:outline-none my-auto text-s"
        rows={1}
        placeholder="Сообщение..."
      />
      <Button
        size="small"
        variant="cta"
        disabled={message.length === 0}
        className="size-[2.222vw]"
        onClick={sendMessage}
      >
        <div className="size-full">
          <SendIcon />
        </div>
      </Button>
    </div>
  );
}
