import React, { useCallback, useLayoutEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import { colors } from '../colors';

interface DragOverlayProps {
    active: boolean;
    label?: string;
    className?: string;
    containerRef?: React.RefObject<HTMLElement>;
    dropTargetPath?: string | null;
}

const DragOverlay: React.FC<DragOverlayProps> = ({ active, label = 'Drop files to upload', className, containerRef, dropTargetPath }) => {
    const overlayRef = useRef<HTMLDivElement>(null);

    const updatePosition = useCallback(() => {
        if (!overlayRef.current || !containerRef?.current) return;
        const rect = containerRef.current.getBoundingClientRect();
        overlayRef.current.style.top = `${rect.top}px`;
        overlayRef.current.style.left = `${rect.left}px`;
        overlayRef.current.style.width = `${rect.width}px`;
        overlayRef.current.style.height = `${rect.height}px`;
    }, [containerRef]);

    useLayoutEffect(() => {
        if (!active) return;
        updatePosition();
        const container = containerRef?.current;
        if (!container) return;
        const handleScroll = () => updatePosition();
        container.addEventListener('scroll', handleScroll, { passive: true });
        window.addEventListener('resize', handleScroll);
        return () => {
            container.removeEventListener('scroll', handleScroll);
            window.removeEventListener('resize', handleScroll);
        };
    }, [active, containerRef, updatePosition]);

    if (!active) return null;

    const portalTarget = typeof document !== 'undefined' ? document.body : null;
    const content = (
        <div
            ref={overlayRef}
            className={`fixed border-4 border-dashed flex items-center justify-center pointer-events-none z-[9999] ${className ?? ''}`}
            style={{
                top: 0,
                left: 0,
                width: 0,
                height: 0,
                backgroundColor: colors.primary.opacity(0.35),
                borderColor: colors.primary.light,
                boxSizing: 'border-box',
                borderRadius: 8,
            }}
        >
            <div className="flex flex-col items-center gap-2">
                <div className="text-neutral-300 text-xl font-semibold">{label}</div>
                {dropTargetPath && (
                    <div className="flex flex-col items-center gap-1">
                        <svg className="w-6 h-6 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
                        </svg>
                        <div className="text-neutral-400 text-sm font-medium">Drop into:</div>
                        <div className="text-neutral-200 text-base font-mono bg-black/30 px-3 py-1.5 rounded border border-white/10">
                            {dropTargetPath === '/' ? '/ (root)' : dropTargetPath}
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
    
    return portalTarget ? createPortal(content, portalTarget) : null;
};

export default DragOverlay;