import React from 'react';

interface GridCellIndicatorProps {
    startCol: number;
    startRow: number;
    width: number;
    height: number;
    onResize?: (newWidth: number, newHeight: number) => void;
}

const GridCellIndicator: React.FC<GridCellIndicatorProps> = ({
    startCol,
    startRow,
    width,
    height,
    onResize
}) => {
    // Convert grid units to cell indices
    const endCol = startCol + width - 1;
    const endRow = startRow + height - 1;

    // Generate array of cells that should be highlighted
    const cells = [];
    for (let row = startRow; row <= endRow; row++) {
        for (let col = startCol; col <= endCol; col++) {
            cells.push({ row, col });
        }
    }

    // Handle resize interactions
    const handleResizeStart = (e: React.MouseEvent, edge: 'se' | 'e' | 's') => {
        e.preventDefault();
        const startX = e.clientX;
        const startY = e.clientY;
        const startWidth = width;
        const startHeight = height;

        const handleMouseMove = (moveEvent: MouseEvent) => {
            const deltaX = Math.round((moveEvent.clientX - startX) / (window.innerWidth * 0.05)); // 5% per cell
            const deltaY = Math.round((moveEvent.clientY - startY) / (window.innerHeight * 0.125)); // 12.5% per cell

            let newWidth = startWidth;
            let newHeight = startHeight;

            if (edge === 'se' || edge === 'e') {
                newWidth = Math.max(1, startWidth + deltaX);
            }
            if (edge === 'se' || edge === 's') {
                newHeight = Math.max(1, startHeight + deltaY);
            }

            // Ensure we don't exceed grid boundaries
            newWidth = Math.min(newWidth, 20 - startCol);
            newHeight = Math.min(newHeight, 8 - startRow);

            onResize?.(newWidth, newHeight);
        };

        const handleMouseUp = () => {
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
        };

        document.addEventListener('mousemove', handleMouseMove);
        document.addEventListener('mouseup', handleMouseUp);
    };

    return (
        <>
            {/* Highlight occupied cells */}
            {cells.map(({ row, col }) => (
                <div
                    key={`${row}-${col}`}
                    className="absolute border-2 border-teal-200 bg-teal-50/20"
                    style={{
                        left: `${col * 5}%`,
                        top: `${row * 12.5}%`,
                        width: '5%',
                        height: '12.5%',
                        pointerEvents: 'none'
                    }}
                />
            ))}

            {/* Resize handles */}
            <div
                className="absolute w-3 h-3 bg-teal-500 rounded-full cursor-se-resize hover:scale-125 transition-transform"
                style={{
                    right: `${(20 - endCol - 1) * 5}%`,
                    bottom: `${(8 - endRow - 1) * 12.5}%`,
                    transform: 'translate(50%, 50%)',
                }}
                onMouseDown={(e) => handleResizeStart(e, 'se')}
            />
            <div
                className="absolute w-3 h-3 bg-teal-500 rounded-full cursor-e-resize hover:scale-125 transition-transform"
                style={{
                    right: `${(20 - endCol - 1) * 5}%`,
                    top: '50%',
                    transform: 'translate(50%, -50%)',
                }}
                onMouseDown={(e) => handleResizeStart(e, 'e')}
            />
            <div
                className="absolute w-3 h-3 bg-teal-500 rounded-full cursor-s-resize hover:scale-125 transition-transform"
                style={{
                    bottom: `${(8 - endRow - 1) * 12.5}%`,
                    left: '50%',
                    transform: 'translate(-50%, 50%)',
                }}
                onMouseDown={(e) => handleResizeStart(e, 's')}
            />
        </>
    );
};

export default GridCellIndicator; 