import React, { useMemo } from 'react';

interface BreadcrumbNavProps {
    currentPath: string;
    hasUnsavedChanges?: boolean;
    isFile?: boolean;
    onNavigate: (path: string) => void;
    onFileSelect?: (path: string) => void;
    onDragStart?: (e: React.DragEvent, path: string, name: string) => void;
}

const BreadcrumbNav: React.FC<BreadcrumbNavProps> = ({
    currentPath,
    hasUnsavedChanges,
    isFile = false,
    onNavigate,
    onFileSelect,
    onDragStart,
}) => {
    const segments = useMemo(() => {
        if (!currentPath || currentPath === '/') return [];
        const parts = currentPath.split('/').filter(Boolean);
        return parts.map((name, index) => ({
            name,
            path: '/' + parts.slice(0, index + 1).join('/'),
            isLast: index === parts.length - 1,
        }));
    }, [currentPath]);

    const lastPart = segments.length > 0 ? segments[segments.length - 1].name : '';
    const treatLastAsFile = isFile || (!!lastPart && lastPart.includes('.') && !lastPart.startsWith('.'));

    return (
        <div className='flex w-full max-w-full min-w-0 items-center overflow-x-auto overflow-y-hidden text-sm text-neutral-500'>
            <button
                onClick={() => onNavigate('/')}
                className='px-1 text-neutral-200 hover:text-neutral-100 bg-transparent border-0 cursor-pointer whitespace-nowrap'
            >
                home
            </button>
            <span>/</span>
            {segments.map((segment) => {
                const isFileCrumb = segment.isLast && treatLastAsFile;

                if (segment.isLast && !isFileCrumb) {
                    return (
                        <React.Fragment key={segment.path}>
                            <span className='px-1 text-neutral-300 whitespace-nowrap'>
                                {segment.name}
                            </span>
                        </React.Fragment>
                    );
                }

                if (isFileCrumb) {
                    return (
                        <React.Fragment key={segment.path}>
                            <span
                                className='px-1 text-neutral-300 whitespace-nowrap cursor-grab'
                                draggable
                                onDragStart={(e: React.DragEvent) => onDragStart?.(e, segment.path, segment.name)}
                            >
                                {segment.name}
                            </span>
                        </React.Fragment>
                    );
                }

                return (
                    <React.Fragment key={segment.path}>
                        <button
                            onClick={() => onNavigate(segment.path)}
                            className='px-1 text-neutral-200 hover:text-neutral-100 bg-transparent border-0 cursor-pointer whitespace-nowrap'
                        >
                            {segment.name}
                        </button>
                        <span>/</span>
                    </React.Fragment>
                );
            })}
        </div>
    );
};

export default BreadcrumbNav;