import { useState } from 'react';
import { ChevronRight, ChevronLeft, Building2, Layers, LayoutGrid, Home, Maximize } from 'lucide-react';
import type { Floor3DData, Room3D } from '../../lib/layoutApi';

interface HierarchyNavProps {
    floorData: Floor3DData;
    onRoomSelect: (room: Room3D) => void;
    onResetView: () => void;
}

type NavLevel = 'facility' | 'building' | 'floor' | 'rooms';

export function HierarchyNav({ floorData, onRoomSelect, onResetView }: HierarchyNavProps) {
    const [currentLevel, setCurrentLevel] = useState<NavLevel>('rooms');
    const [selectedRoom, setSelectedRoom] = useState<Room3D | null>(null);

    const facility = floorData.floor.property || 'Facility';
    const building = floorData.floor.building || 'Building';
    const floor = floorData.floor.name || 'Floor';

    const handleBack = () => {
        switch (currentLevel) {
            case 'rooms':
                setCurrentLevel('floor');
                break;
            case 'floor':
                setCurrentLevel('building');
                break;
            case 'building':
                setCurrentLevel('facility');
                break;
        }
    };

    const handleForward = (level: NavLevel) => {
        setCurrentLevel(level);
    };

    const handleRoomClick = (room: Room3D) => {
        setSelectedRoom(room);
        onRoomSelect(room);
    };

    // Breadcrumb path based on current level
    const getBreadcrumb = () => {
        const parts: { label: string; level: NavLevel }[] = [];
        parts.push({ label: facility, level: 'facility' });
        if (currentLevel !== 'facility') {
            parts.push({ label: building, level: 'building' });
        }
        if (currentLevel === 'floor' || currentLevel === 'rooms') {
            parts.push({ label: floor, level: 'floor' });
        }
        if (currentLevel === 'rooms') {
            parts.push({ label: 'Rooms', level: 'rooms' });
        }
        return parts;
    };

    return (
        <div className="bg-black/50 backdrop-blur rounded-lg border border-slate-700 overflow-hidden">
            {/* Header with breadcrumb */}
            <div className="p-2 border-b border-slate-700 flex items-center gap-2">
                {currentLevel !== 'facility' && (
                    <button
                        onClick={handleBack}
                        className="p-1 hover:bg-slate-700 rounded"
                        title="Back"
                    >
                        <ChevronLeft size={16} />
                    </button>
                )}
                <div className="flex items-center gap-1 text-xs overflow-x-auto flex-1">
                    {getBreadcrumb().map((part, i) => (
                        <span key={part.level} className="flex items-center gap-1 whitespace-nowrap">
                            {i > 0 && <ChevronRight size={10} className="text-[var(--color-text-tertiary)]" />}
                            <button
                                onClick={() => setCurrentLevel(part.level)}
                                className={`hover:text-cyan-400 ${part.level === currentLevel ? 'text-white font-medium' : 'text-[var(--color-text-tertiary)]'}`}
                            >
                                {part.label}
                            </button>
                        </span>
                    ))}
                </div>
                <button
                    onClick={onResetView}
                    className="p-1 hover:bg-slate-700 rounded"
                    title="Reset View"
                >
                    <Maximize size={14} />
                </button>
            </div>

            {/* Content based on level */}
            <div className="max-h-[50vh] overflow-y-auto">
                {currentLevel === 'facility' && (
                    <div className="p-2">
                        <button
                            onClick={() => handleForward('building')}
                            className="w-full text-left px-3 py-2 rounded hover:bg-slate-800 flex items-center gap-2"
                        >
                            <Building2 size={16} className="text-blue-400" />
                            <span>{building}</span>
                            <ChevronRight size={14} className="ml-auto text-[var(--color-text-tertiary)]" />
                        </button>
                    </div>
                )}

                {currentLevel === 'building' && (
                    <div className="p-2">
                        <button
                            onClick={() => handleForward('floor')}
                            className="w-full text-left px-3 py-2 rounded hover:bg-slate-800 flex items-center gap-2"
                        >
                            <Layers size={16} className="text-green-400" />
                            <span>{floor}</span>
                            <ChevronRight size={14} className="ml-auto text-[var(--color-text-tertiary)]" />
                        </button>
                    </div>
                )}

                {currentLevel === 'floor' && (
                    <div className="p-2">
                        <button
                            onClick={() => handleForward('rooms')}
                            className="w-full text-left px-3 py-2 rounded hover:bg-slate-800 flex items-center gap-2"
                        >
                            <LayoutGrid size={16} className="text-purple-400" />
                            <span>View Rooms ({floorData.rooms.length})</span>
                            <ChevronRight size={14} className="ml-auto text-[var(--color-text-tertiary)]" />
                        </button>
                    </div>
                )}

                {currentLevel === 'rooms' && (
                    <div className="p-1">
                        {floorData.rooms.map((room) => (
                            <button
                                key={room.id}
                                onClick={() => handleRoomClick(room)}
                                className={`w-full text-left px-3 py-2 rounded flex items-center gap-2 transition-colors ${selectedRoom?.id === room.id
                                        ? 'bg-blue-600/30 text-blue-300'
                                        : 'hover:bg-slate-800'
                                    }`}
                            >
                                <LayoutGrid size={14} className="text-[var(--color-text-tertiary)]" />
                                <span className="truncate flex-1">{room.name}</span>
                                <span className="text-xs text-[var(--color-text-tertiary)]">
                                    {room.sections?.reduce((acc, s) => acc + (s.positions?.length || 0), 0) || 0}
                                </span>
                            </button>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}
