import React, { useState, useEffect } from 'react';

interface DraggableLabelProps {
    id: string;
    text: string;
    x: number;
    y: number;
    isLocked: boolean;
    onPositionChange: (id: string, x: number, y: number) => void;
    fontSize?: number;
    anchor?: 'start' | 'middle' | 'end';
    rotation?: number;
    color?: string;
    fontWeight?: string | number;
    className?: string;
}

export const DraggableLabel = ({
    id,
    text,
    x,
    y,
    isLocked,
    onPositionChange,
    fontSize = 12,
    anchor = 'start',
    rotation = 0,
    color = 'black',
    fontWeight = 'normal',
    className = ''
}: DraggableLabelProps) => {
    const [isDragging, setIsDragging] = useState(false);
    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });

    const handleMouseDown = (e: React.MouseEvent) => {
        if (isLocked) return;
        e.preventDefault();
        e.stopPropagation(); // Prevent event bubbling
        setIsDragging(true);
        setDragOffset({ x: e.clientX - x, y: e.clientY - y });
    };

    useEffect(() => {
        const handleMouseMove = (e: MouseEvent) => {
            if (!isDragging) return;
            onPositionChange(id, e.clientX - dragOffset.x, e.clientY - dragOffset.y);
        };

        const handleMouseUp = () => {
            setIsDragging(false);
        };

        if (isDragging) {
            window.addEventListener('mousemove', handleMouseMove);
            window.addEventListener('mouseup', handleMouseUp);
        }

        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
        };
    }, [isDragging, dragOffset, id, onPositionChange]);

    return (
        <g
            transform={`translate(${x}, ${y})`}
            style={{ cursor: isLocked ? 'default' : 'move' }}
            onMouseDown={handleMouseDown}
            className={className}
        >
            <text
                fontSize={fontSize}
                textAnchor={anchor}
                transform={`rotate(${rotation})`}
                fill={color}
                fontWeight={fontWeight}
                style={{ userSelect: 'none', pointerEvents: 'none' }} // Ensure text doesn't capture events, group does
            >
                {text}
            </text>
            {/* Invisible hit area for easier grabbing */}
            {!isLocked && (
                <rect
                    x={anchor === 'middle' ? -20 : anchor === 'end' ? -40 : 0}
                    y={-15}
                    width={40}
                    height={20}
                    fill="transparent"
                    stroke="blue"
                    strokeWidth="1"
                    strokeDasharray="2 2"
                    opacity={0.5}
                    transform={`rotate(${rotation})`}
                />
            )}
        </g>
    );
};