import { ChevronDown, ChevronRight, Eye, EyeOff, Trash2, Lock, Unlock } from 'lucide-react';
import { useState } from 'react';
import { useLayoutStore, ROOM_COLORS } from '../../../stores/layoutStore';

export function LayersPanel() {
    const {
        rooms,
        selectedIds,
        select,
        deleteRoom,
        property,
        buildingId,
        floorId,
        setFloor,
    } = useLayoutStore();

    const [expandedFloors, setExpandedFloors] = useState<Set<string>>(new Set(['floor-1']));

    const toggleFloor = (id: string) => {
        setExpandedFloors(prev => {
            const next = new Set(prev);
            if (next.has(id)) {
                next.delete(id);
            } else {
                next.add(id);
            }
            return next;
        });
    };

    // Group rooms by floor
    const currentBuilding = property?.buildings.find(b => b.id === buildingId);
    const floors = currentBuilding?.floors || [{ id: 'floor-1', name: 'Floor 1', number: 1 }];

    return (
        <div className="flex-1 overflow-auto">
            <div className="p-3 border-b border-white/10">
                <h3 className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">
                    Layers
                </h3>
            </div>

            <div className="p-2">
                {floors.map(floor => {
                    const floorRooms = rooms.filter(r => r.floorId === floor.id || floor.id === 'floor-1');
                    const isExpanded = expandedFloors.has(floor.id);
                    const isActive = floorId === floor.id || (floor.id === 'floor-1' && !floorId);

                    return (
                        <div key={floor.id} className="mb-1">
                            {/* Floor Header */}
                            <button
                                onClick={() => toggleFloor(floor.id)}
                                className={`
                                    w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm transition-colors
                                    ${isActive ? 'bg-[var(--color-primary)]/20 text-emerald-400' : 'hover:bg-white/5 text-slate-300'}
                                `}
                            >
                                {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
                                <span className="font-medium">{floor.name}</span>
                                <span className="text-xs text-[var(--color-text-tertiary)] ml-auto">
                                    {floorRooms.length}
                                </span>
                            </button>

                            {/* Floor Rooms */}
                            {isExpanded && (
                                <div className="ml-4 mt-1 space-y-0.5">
                                    {floorRooms.length === 0 ? (
                                        <div className="text-xs text-[var(--color-text-tertiary)] px-2 py-1">
                                            No rooms
                                        </div>
                                    ) : (
                                        floorRooms.map(room => {
                                            const isSelected = selectedIds.includes(room.id);
                                            const color = ROOM_COLORS[room.type];

                                            return (
                                                <div
                                                    key={room.id}
                                                    onClick={() => select([room.id])}
                                                    className={`
                                                        flex items-center gap-2 px-2 py-1.5 rounded-lg cursor-pointer text-sm
                                                        ${isSelected
                                                            ? 'bg-[var(--color-primary)]/30 text-white'
                                                            : 'hover:bg-white/5 text-[var(--color-text-tertiary)]'
                                                        }
                                                    `}
                                                >
                                                    <div
                                                        className="w-3 h-3 rounded"
                                                        style={{ backgroundColor: color }}
                                                    />
                                                    <span className="flex-1 truncate">{room.code}</span>
                                                    <button
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            deleteRoom(room.id);
                                                        }}
                                                        className="p-0.5 opacity-0 group-hover:opacity-100 hover:text-red-400 transition-opacity"
                                                    >
                                                        <Trash2 size={12} />
                                                    </button>
                                                </div>
                                            );
                                        })
                                    )}
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>

            {/* Add Floor Button */}
            <div className="p-2 border-t border-white/10">
                <button className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-xs text-[var(--color-text-tertiary)] transition-colors">
                    + Add Floor
                </button>
            </div>
        </div>
    );
}
