"use client";

import { useRef, useEffect } from "react";
import { useDraggable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";
import { cn } from "@/lib/utils";
import type { DraggableElement as DraggableElementType } from "@/lib/types";

interface DraggableElementProps {
  element: DraggableElementType;
  onLabelChange?: (label: string) => void;
  onRemove?: () => void;
  isSelected?: boolean;
  onClick?: () => void;
}

const ELEMENT_COLORS: Record<string, { bg: string; border: string; text: string }> = {
  stakeholder: { bg: "bg-blue-100", border: "border-blue-400", text: "text-blue-800" },
  signal: { bg: "bg-amber-100", border: "border-amber-400", text: "text-amber-800" },
  concept: { bg: "bg-purple-100", border: "border-purple-400", text: "text-purple-800" },
  action: { bg: "bg-green-100", border: "border-green-400", text: "text-green-800" },
  note: { bg: "bg-gray-100", border: "border-gray-400", text: "text-gray-800" },
};

export function DraggableElement({
  element,
  onLabelChange,
  onRemove,
  isSelected,
  onClick,
}: DraggableElementProps) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: element.id,
    data: element,
  });

  const style = {
    transform: CSS.Translate.toString(transform),
    left: element.position.x,
    top: element.position.y,
  };

  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto';
      textarea.style.height = `${textarea.scrollHeight}px`;
    }
  }, [element.label]);

  const colors = element.color
    ? { bg: element.color, border: element.color, text: "text-white" }
    : ELEMENT_COLORS[element.type] || ELEMENT_COLORS.note;

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={cn(
        "absolute cursor-grab active:cursor-grabbing",
        "select-none touch-none",
        isDragging && "z-50 opacity-75"
      )}
      onClick={(e) => {
        // Stop propagation so clicking an element doesn't trigger background click (deselect)
        e.stopPropagation();
        onClick?.();
      }}
      {...listeners}
      {...attributes}
      onPointerDown={(e) => {
        // We must manually call the dnd-kit listener
        listeners?.onPointerDown?.(e);
        // Then stop propagation so the canvas background doesn't receive the event
        e.stopPropagation();
      }}
    >
      <div
        className={cn(
          "px-3 py-1.5 rounded-xl border-2 shadow-sm min-w-[70px] max-w-[160px] text-center",
          "transition-all duration-150",
          colors.bg,
          colors.border,
          colors.text,
          isSelected && "ring-2 ring-offset-2 ring-blue-500",
          isDragging && "shadow-lg scale-105"
        )}
      >
        {onLabelChange ? (
          <textarea
            value={element.label}
            onChange={(e) => onLabelChange(e.target.value)}
            // Allow click to propagate to parent div so it selects the element
            onClick={() => { }}
            onFocus={() => {
              // Also ensure selection on focus (e.g. tabbing)
              if (onClick) onClick();
            }}
            className={cn(
              "bg-transparent text-center font-medium text-xs w-full resize-none overflow-hidden",
              "focus:outline-none",
              colors.text
            )}
            placeholder="Label..."
            onPointerDown={(e) => e.stopPropagation()}
            ref={textareaRef}
            rows={1}
          />
        ) : (
          <span className="font-medium text-xs">{element.label}</span>
        )}
      </div>

      {/* Remove button */}
      {
        onRemove && isSelected && (
          <button
            onClick={(e) => {
              e.stopPropagation();
              onRemove();
            }}
            onPointerDown={(e) => e.stopPropagation()}
            className="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center text-xs hover:bg-red-600 transition-colors"
          >
            ×
          </button>
        )
      }
    </div >
  );
}