import { ChevronRight, Building2, Layers, LayoutGrid, Box, Grid3X3 } from 'lucide-react';

export interface BreadcrumbData {
    facility?: string;
    building?: string;
    floor?: string;
    room?: string;
    section?: string;
    tier?: number;
    position?: string;
}

interface HierarchyBreadcrumbProps {
    data: BreadcrumbData;
    onNavigate?: (level: keyof BreadcrumbData) => void;
}

const levelIcons: Record<string, React.ReactNode> = {
    facility: <Building2 size={14} />,
    building: <Building2 size={14} />,
    floor: <Layers size={14} />,
    room: <LayoutGrid size={14} />,
    section: <Grid3X3 size={14} />,
    tier: <Box size={14} />,
};

export function HierarchyBreadcrumb({ data, onNavigate }: HierarchyBreadcrumbProps) {
    const allLevels: { key: keyof BreadcrumbData; label: string }[] = [
        { key: 'facility', label: data.facility || '' },
        { key: 'building', label: data.building || '' },
        { key: 'floor', label: data.floor || '' },
        { key: 'room', label: data.room || '' },
        { key: 'section', label: data.section || '' },
        { key: 'tier', label: data.tier ? `Tier ${data.tier}` : '' },
    ];
    const levels = allLevels.filter((l) => !!l.label);

    if (levels.length === 0) return null;

    return (
        <div className="w-full overflow-x-auto scrollbar-thin scrollbar-thumb-slate-600 scrollbar-track-transparent">
            <div className="flex items-center gap-1 text-xs bg-black/60 px-3 py-2 rounded-lg backdrop-blur border border-white/10 whitespace-nowrap min-w-max">
                {levels.map((level, i) => (
                    <div key={level.key} className="flex items-center gap-1">
                        {i > 0 && <ChevronRight size={12} className="text-[var(--color-text-tertiary)]" />}
                        <button
                            onClick={() => onNavigate?.(level.key)}
                            className="flex items-center gap-1.5 hover:text-cyan-400 hover:bg-white/5 px-1.5 py-0.5 rounded transition-colors"
                            title={`Navigate to ${level.key}`}
                        >
                            <span className="text-[var(--color-text-tertiary)]">{levelIcons[level.key]}</span>
                            <span className="text-slate-200">{level.label}</span>
                        </button>
                    </div>
                ))}
            </div>
        </div>
    );
}
