import { useState, useRef, useEffect } from "react";
import { useBoardStore } from "@/stores/board-store";

interface AddCardInputProps {
  columnId: string;
  onClose: () => void;
}

export function AddCardInput({ columnId, onClose }: AddCardInputProps) {
  const [value, setValue] = useState("");
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const addCard = useBoardStore((s) => s.addCard);

  useEffect(() => {
    textareaRef.current?.focus();
  }, []);

  function handleSubmit() {
    const trimmed = value.trim();
    if (trimmed) {
      addCard(columnId, trimmed);
      setValue("");
      // Keep the input open for quick multi-add
      textareaRef.current?.focus();
    }
  }

  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSubmit();
    } else if (e.key === "Escape") {
      onClose();
    }
  }

  return (
    <div className="px-2 pb-2">
      <textarea
        ref={textareaRef}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={handleKeyDown}
        onBlur={() => {
          if (!value.trim()) onClose();
        }}
        aria-label="Card title"
        placeholder="Card title..."
        rows={2}
        className="w-full resize-none rounded-lg bg-pylon-surface p-3 text-sm text-pylon-text shadow-sm outline-none placeholder:text-pylon-text-secondary focus:ring-1 focus:ring-pylon-accent"
      />
    </div>
  );
}