"use client";

import { useState } from "react";
import { ListItem, ListEntity } from "@/lib/api";
import { ListItemCard } from "./ListItemCard";
import { Plus } from "lucide-react";

interface ListColumnProps {
  list: ListEntity;
  onItemClick: (item: ListItem) => void;
  onAddItem: (listId: string, name: string) => void;
  onDragStart: (e: React.DragEvent, item: ListItem) => void;
  onDragEnd: (e: React.DragEvent) => void;
  onDrop: (e: React.DragEvent, targetListId: string) => void;
  onDragOver: (e: React.DragEvent) => void;
  draggingItemId?: string | null;
}

export function ListColumn({
  list,
  onItemClick,
  onAddItem,
  onDragStart,
  onDragEnd,
  onDrop,
  onDragOver,
  draggingItemId,
}: ListColumnProps) {
  const [isAdding, setIsAdding] = useState(false);
  const [newItemName, setNewItemName] = useState("");

  const handleAdd = () => {
    const trimmed = newItemName.trim();
    if (!trimmed) return;
    onAddItem(list.id, trimmed);
    setNewItemName("");
    setIsAdding(false);
  };

  return (
    <div className="w-72 flex-shrink-0 bg-gray-100 rounded-lg flex flex-col max-h-full">
      {/* Header */}
      <div className="px-3 py-2.5 flex items-center justify-between">
        <h3 className="text-sm font-bold text-gray-700">{list.name}</h3>
        <span className="text-xs text-gray-400">{list.items?.length || 0}</span>
      </div>

      {/* Items */}
      <div
        className="flex-1 overflow-y-auto px-2 pb-2 space-y-2"
        onDrop={(e) => onDrop(e, list.id)}
        onDragOver={onDragOver}
      >
        {list.items?.map((item) => (
          <ListItemCard
            key={item.id}
            item={item}
            onClick={onItemClick}
            onDragStart={onDragStart}
            onDragEnd={onDragEnd}
            isDragging={draggingItemId === item.id}
          />
        ))}

        {/* Add item form */}
        {isAdding && (
          <div className="bg-white rounded-md border border-gray-200 p-2">
            <textarea
              value={newItemName}
              onChange={(e) => setNewItemName(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter" && !e.shiftKey) {
                  e.preventDefault();
                  handleAdd();
                }
                if (e.key === "Escape") {
                  setIsAdding(false);
                  setNewItemName("");
                }
              }}
              placeholder="Enter item name..."
              autoFocus
              rows={2}
              className="w-full resize-none px-2 py-1.5 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-slack-purple focus:border-transparent text-sm"
            />
            <div className="flex gap-2 mt-2">
              <button
                onClick={handleAdd}
                disabled={!newItemName.trim()}
                className="px-3 py-1 rounded-md bg-slack-purple text-white text-xs font-medium hover:bg-slack-darkpurple disabled:opacity-40 transition-colors"
              >
                Add
              </button>
              <button
                onClick={() => {
                  setIsAdding(false);
                  setNewItemName("");
                }}
                className="px-3 py-1 rounded-md text-xs text-gray-500 hover:bg-gray-100 transition-colors"
              >
                Cancel
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Add button */}
      {!isAdding && (
        <button
          onClick={() => setIsAdding(true)}
          className="flex items-center gap-1.5 px-3 py-2 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-200/50 rounded-b-lg transition-colors"
        >
          <Plus size={16} />
          <span>Add item</span>
        </button>
      )}
    </div>
  );
}