import { useState, useRef, useEffect } from "react";
import { Send } from "lucide-react";
import { motion } from "motion/react";

interface ChatInputBarProps {
  onSendMessage: (message: string) => void;
  disabled?: boolean;
}

export function ChatInputBar({ onSendMessage, disabled = false }: ChatInputBarProps) {
  const [inputText, setInputText] = useState("");
  const inputRef = useRef<HTMLTextAreaElement>(null);

  const canSend = inputText.trim().length > 0 && !disabled;

  const handleSend = () => {
    if (!canSend) return;
    onSendMessage(inputText.trim());
    setInputText("");

    // Reset height after send and refocus
    setTimeout(() => {
      if (inputRef.current) {
        inputRef.current.style.height = "auto";
        inputRef.current.focus();
      }
    }, 0);
  };

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

  // Auto-resize textarea based on content
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.style.height = "auto";
      const scrollHeight = inputRef.current.scrollHeight;
      const maxHeight = 96; // max-h-24 = 6rem = 96px
      inputRef.current.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
    }
  }, [inputText]);

  return (
    <div className="px-3">
      <div
        className="rounded-3xl p-2.5 flex items-center gap-1.5"
        style={{
          background: "linear-gradient(135deg, rgba(50, 107, 118, 0.95) 0%, rgba(32, 76, 106, 0.95) 100%)",
          boxShadow: "0 -3px 16px rgba(0, 0, 0, 0.3), 0 3px 12px rgba(138, 206, 224, 0.2)",
          border: "1.5px solid rgba(138, 206, 224, 0.3)",
        }}
      >
        {/* Text Input */}
        <textarea
          ref={inputRef}
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="پیام خود را بنویسید..."
          rows={1}
          dir="rtl"
          disabled={disabled}
          aria-label="پیام خود را بنویسید"
          className="chat-input-textarea flex-1 bg-transparent text-white placeholder-white/50 resize-none outline-none text-right disabled:opacity-50"
          style={{
            fontFamily: "Alibaba, sans-serif",
            textAlign: "right",
            lineHeight: "1.4",
            overflow: "hidden",
            fontSize: "16px", // حداقل 16px برای جلوگیری از zoom در iOS Safari
          }}
        />

        {/* Send Button */}
        <motion.button
          whileTap={{ scale: 0.92 }}
          onClick={handleSend}
          disabled={!canSend}
          aria-label="ارسال پیام"
          className="flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center"
          style={{
            background: canSend
              ? "linear-gradient(135deg, #FFB800 0%, #FF9500 100%)"
              : "rgba(255, 255, 255, 0.1)",
            boxShadow: canSend ? "0 3px 10px rgba(255, 165, 0, 0.4)" : "none",
          }}
        >
          <Send className={`w-4 h-4 ${canSend ? "text-white" : "text-white/30"}`} />
        </motion.button>
      </div>

      <style>{`
        .chat-input-textarea {
          scrollbar-width: none;
          -ms-overflow-style: none;
        }

        .chat-input-textarea::-webkit-scrollbar {
          display: none;
        }
      `}</style>
    </div>
  );
}