"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";

import { Button, Icon, IconName, TextareaAutoResize } from "@/components/ui";

import styles from "./MessageInput.module.scss";

interface MessageInputProps {
  onSend: (message: string) => void;
  disabled?: boolean;
  onDisabledClick?: () => void;
}

export default function MessageInput({
  onSend,
  disabled = false,
  onDisabledClick,
}: MessageInputProps) {
  const t = useTranslations("Chat");
  const [message, setMessage] = useState("");

  const handleSend = () => {
    if (message.trim() && !disabled) {
      onSend(message.trim());
      setMessage("");
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter") {
      // If disabled (e.g., zero balance), open refill modal instead of sending
      if (!e.ctrlKey && disabled) {
        e.preventDefault();
        onDisabledClick?.();
        return;
      }
      if (e.ctrlKey) {
        // Ctrl + Enter - добавляем перенос строки
        e.preventDefault();
        const target = e.target as HTMLTextAreaElement;
        const start = target.selectionStart;
        const end = target.selectionEnd;
        const newValue =
          message.substring(0, start) + "\n" + message.substring(end);
        setMessage(newValue);

        // Устанавливаем курсор после переноса строки
        setTimeout(() => {
          target.selectionStart = target.selectionEnd = start + 1;
        }, 0);
      } else {
        // Enter без Ctrl - отправляем сообщение
        e.preventDefault();
        handleSend();
      }
    }
  };

  return (
    <div className={styles.container}>
      <TextareaAutoResize
        value={message}
        onChange={e => setMessage(e.target.value)}
        placeholder={t("message_input_placeholder")}
        onKeyDown={handleKeyDown}
        maxRows={5}
      />
      <div className={styles.sendButtonWrapper}>
        {/* Capture clicks when disabled to open refill modal */}
        {disabled && typeof onDisabledClick === "function" && (
          <div
            className={styles.disabledOverlay}
            onClick={onDisabledClick}
            aria-hidden
          />
        )}
        <Button
          onClick={handleSend}
          disabled={!message.trim() || disabled}
          aria-label="Send"
          className={styles.sendButton}
        >
          <Icon
            name={IconName.PaperAirplane}
            size={{ height: 14, width: 14 }}
          />
        </Button>
      </div>
    </div>
  );
}