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: {
    backgroundImage:
      "linear-gradient(180deg, #2E1B3D 0%, #23183E 100%), linear-gradient(120deg, #7c3aed 0%, #f97316 58%, #facc15 100%)",
    backgroundOrigin: "border-box",
    backgroundClip: "padding-box, border-box",
    border: "0.5px solid transparent",
    boxShadow: "0 -7px 20px rgba(7, 0, 18, 0.5), 0 6px 14px rgba(5, 2, 12, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 2px 5px rgba(255, 222, 255, 0.09), inset 0 -2px 0 rgba(12, 7, 27, 0.72), inset 0 -8px 14px rgba(8, 4, 18, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 0 0 2px rgba(17, 10, 35, 0.32)",
    backdropFilter: "blur(14px)",
    WebkitBackdropFilter: "blur(14px)",
  },
  sendButtonActive: {
    background:
      "linear-gradient(145deg, #F06EA8 0%, #C9579C 52%, #8A4FCF 100%)",
    boxShadow: "0 0 18px rgba(240, 110, 168, 0.42), inset 0 1px 0 rgba(255,255,255,0.22)",
    border: "1px solid rgba(255, 189, 228, 0.5)",
  },
  sendButtonDisabled: {
    background:
      "linear-gradient(145deg, rgba(72, 58, 105, 0.72) 0%, rgba(42, 35, 77, 0.76) 100%)",
    border: "1px solid rgba(198, 111, 177, 0.22)",
    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.12), 0 0 12px rgba(203,117,171,0.12)",
  },
};

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;
    }

  };

  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 pb-[env(safe-area-inset-bottom)]">
      <div
        className="flex min-h-[62px] items-center gap-2 rounded-[32px] p-2"
        style={inputStyles.container}
      >
        <motion.button
          whileTap={{ scale: 0.92 }}
          onClick={onNewChat}
          className="w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0"
          style={{
            background:
              "linear-gradient(145deg, rgba(60, 48, 93, 0.92) 0%, rgba(39, 32, 72, 0.92) 100%)",
            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.12)",
            border: "1px solid rgba(198, 111, 177, 0.28)",
          }}
        >
          <FilePlus className="w-5 h-5" 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:text-[rgba(207,168,212,0.7)] resize-none outline-none text-right"
          style={{
            direction: "auto",
            textAlign: inputText ? "start" : "right",
            maxHeight: "96px",
            minHeight: "36px",
            lineHeight: "1.4",
            overflow: "hidden",
            fontSize: "16px", // حداقل 16px برای جلوگیری از zoom در iOS Safari
          }}
          rows={1}
        />

        <motion.button
          whileTap={{ scale: isDisabled ? 1 : 0.92 }}
          onClick={onSend}
          disabled={isDisabled}
          className="w-12 h-12 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-5 h-5"
            style={{
              color: isDisabled ? "rgba(207, 168, 212, 0.7)" : "#FFFFFF",
            }}
          />
        </motion.button>
      </div>
    </div>
  );
}
