import { motion } from "motion/react";
import { Send, FilePlus } from "lucide-react";
import { RefObject } from "react";

interface ChatInputProps {
  inputText: string;
  onInputChange: (value: string) => void;
  onSend: () => void;
  onNewChat: () => void;
  inputRef: RefObject<HTMLTextAreaElement>;
}

const inputStyles = {
  container: {
    background:
      "linear-gradient(135deg, rgba(32, 76, 106, 0.9) 0%, rgba(20, 40, 60, 0.9) 100%)",
    border: "2px solid rgba(138, 206, 224, 0.3)",
    boxShadow: "0 4px 16px rgba(0, 0, 0, 0.4)",
  },
  sendButtonActive: {
    background:
      "linear-gradient(135deg, rgba(255, 193, 7, 0.95) 0%, rgba(255, 152, 0, 0.95) 100%)",
    boxShadow: "0 4px 12px rgba(255, 193, 7, 0.4)",
  },
  sendButtonDisabled: {
    background:
      "linear-gradient(135deg, rgba(96, 147, 157, 0.3) 0%, rgba(76, 127, 137, 0.3) 100%)",
  },
};

export function ChatInput({
  inputText,
  onInputChange,
  onSend,
  onNewChat,
  inputRef,
}: ChatInputProps) {
    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    const isSelectAll =
      (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a";

    if (isSelectAll) {
      e.preventDefault();
      e.currentTarget.select();
      return;
    }

    if (e.ctrlKey || e.metaKey || e.altKey) {
      return;
    }

    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      onSend();
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    onInputChange(e.target.value);

    const el = e.target;
    el.style.height = "auto";
    el.style.height = `${Math.min(el.scrollHeight, 100)}px`;
  };

  const isDisabled = !inputText.trim();

  return (
    <div className="flex-shrink-0 px-3 mb-16 pb-[env(safe-area-inset-bottom)]">
      <div
        className="flex items-end gap-2 p-2.5 rounded-2xl"
        style={inputStyles.container}
      >
        <motion.button
          whileTap={{ scale: 0.92 }}
          onClick={onNewChat}
          className="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0"
          style={{
            background:
              "linear-gradient(135deg, rgba(138, 206, 224, 0.9) 0%, rgba(76, 127, 137, 0.9) 100%)",
            boxShadow: "0 3px 10px rgba(138, 206, 224, 0.4)",
          }}
        >
          <FilePlus className="w-4 h-4" style={{ color: "#FFFFFF" }} />
        </motion.button>

        <textarea
          ref={inputRef}
          value={inputText}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
          placeholder="پیام خود را بنویسید"
          dir="auto"
          className="flex-1 bg-transparent text-white placeholder-white/50 resize-none outline-none"
          style={{
            direction: "auto",
            textAlign: inputText ? "start" : "right",
            maxHeight: "90px",
            minHeight: "36px",
            lineHeight: "20px",
            paddingTop: "8px",
            paddingBottom: "8px",
            fontSize: "16px", // حداقل 16px برای جلوگیری از zoom در iOS Safari
          }}
          rows={1}
        />

        <motion.button
          whileTap={{ scale: isDisabled ? 1 : 0.92 }}
          onClick={onSend}
          disabled={isDisabled}
          className="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0"
          style={{
            ...(isDisabled
              ? inputStyles.sendButtonDisabled
              : inputStyles.sendButtonActive),
            cursor: isDisabled ? "not-allowed" : "pointer",
            opacity: isDisabled ? 0.5 : 1,
          }}
        >
          <Send
            className="w-4 h-4"
            style={{
              color: isDisabled ? "rgba(255, 255, 255, 0.3)" : "#5A3800",
            }}
          />
        </motion.button>
      </div>
    </div>
  );
}