function renderRooms(rooms) {
    const grid = document.getElementById('rooms-grid');
    grid.innerHTML = '';

    const isManualSort = document.getElementById('sort-select').value === 'manual' && currentFilterStatus === 'all' && !isSelectMode;

    rooms.forEach(room => {
        const progress = getRoomProgress(room);

        let statusBadgeColor = 'bg-slate-700 text-slate-300';
        let ampelBorder = 'border-t-4 border-t-red-500 border-slate-700 shadow-red-500/5';

        if (room.status === 'In Arbeit') {
            statusBadgeColor = 'bg-amber-500/20 text-amber-400 border border-amber-500/30';
            ampelBorder = 'border-t-4 border-t-amber-500 border-slate-700 shadow-amber-500/5';
        } else if (room.status === 'Fertig') {
            statusBadgeColor = 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30';
            ampelBorder = 'border-2 border-emerald-500 shadow-emerald-500/20 shadow-lg';
        }

        if (room.is_pinned) {
            ampelBorder += ' ring-1 ring-amber-400';
        }

        const card = document.createElement('div');
        card.dataset.id = room.id;
        
        const canDrag = isManualSort;
        card.draggable = canDrag;

        card.className = `bg-slate-800 ${ampelBorder} rounded-xl p-5 transition cursor-pointer flex flex-col justify-between shadow-lg relative group`;
        
        card.onclick = (e) => {
            if (e.target.closest('.pin-btn') || e.target.closest('.select-checkbox-container')) return;
            if (isSelectMode) {
                toggleRoomSelection(room.id, e);
            } else {
                openModal(room);
            }
        };

        if (canDrag) {
            card.addEventListener('dragstart', handleDragStart);
            card.addEventListener('dragover', handleDragOver);
            card.addEventListener('drop', handleDrop);
            card.addEventListener('dragend', handleDragEnd);
        }

        const isChecked = selectedRoomIds.has(room.id);

        card.innerHTML = `
            <div class="flex justify-between items-center mb-2">
                <div class="flex items-center gap-2">
                    ${isSelectMode ? `
                        <div class="select-checkbox-container" onclick="toggleRoomSelection(${room.id}, event)">
                            <input type="checkbox" ${isChecked ? 'checked' : ''} class="w-4 h-4 rounded text-indigo-600 bg-slate-900 border-slate-700 focus:ring-indigo-500 cursor-pointer">
                        </div>
                    ` : ''}
                    <span class="text-xs text-slate-400">${room.floor}</span>
                </div>
                <div class="flex items-center gap-1.5">
                    ${canDrag ? '<span class="text-slate-600 group-hover:text-slate-400 text-xs cursor-grab">⋮⋮</span>' : ''}
                    <button onclick="togglePin(${room.id}, ${!room.is_pinned})" class="pin-btn p-1 text-xs rounded transition ${room.is_pinned ? 'text-amber-400 opacity-100' : 'text-slate-600 opacity-0 group-hover:opacity-100 hover:text-amber-400'}" title="${room.is_pinned ? 'Anpinnung aufheben' : 'Anpinnen'}">
                        📌
                    </button>
                </div>
            </div>
            <div>
                <div class="flex justify-between items-start mb-3">
                    <h3 class="font-bold text-white text-lg flex items-center gap-2">
                        ${room.room_number}
                    </h3>
                    <span class="text-xs px-2.5 py-1 rounded-full font-medium ${statusBadgeColor}">${room.status}</span>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-slate-400 mb-1">
                    <span>Fortschritt</span>
                    <span>${progress}%</span>
                </div>
                <div class="w-full bg-slate-900 rounded-full h-2 overflow-hidden">
                    <div class="${room.status === 'Fertig' ? 'bg-emerald-500' : 'bg-indigo-500'} h-full rounded-full transition-all duration-300" style="width: ${progress}%"></div>
                </div>
            </div>
        `;
        grid.appendChild(card);
    });
}

function openModal(room) {
    currentRoomId = room.id;
    document.getElementById('modal-title').textContent = `${room.room_number} (${room.floor})`;
    document.getElementById('modal-room-number').value = room.room_number;
    document.getElementById('modal-status-select').value = room.status;
    document.getElementById('modal-material-select').value = room.material_status || 'Offen';
    document.getElementById('modal-notes').value = room.notes || '';

    renderModalTasks(room.tasks || []);
    renderRoomHistory(room);
    if (typeof renderRoomPhotoComparison === 'function') {
        renderRoomPhotoComparison(room);
    }
    document.getElementById('room-modal').classList.remove('hidden');
}

function renderModalTasks(tasks) {
    const tasksList = document.getElementById('modal-tasks-list');
    tasksList.innerHTML = '';

    if (!tasks || tasks.length === 0) {
        tasksList.innerHTML = '<p class="text-xs text-slate-500 italic p-2 bg-slate-900/50 rounded-lg border border-slate-800 text-center">Keine Aufgaben eingetragen. Fügen Sie oben eine neue Aufgabe hinzu.</p>';
        return;
    }

    const adminUser = isAdmin();

    tasks.forEach(task => {
        const isUnassigned = !task.assigned_to;
        let assigneeOptions = `<option value="" ${isUnassigned ? 'selected' : ''}>👥 Alle (Team)</option>`;
        
        allProfiles.forEach(p => {
            if (p.alias) {
                const selected = (task.assigned_to === p.id) ? 'selected' : '';
                assigneeOptions += `<option value="${p.id}" ${selected}>👤 ${p.alias}</option>`;
            }
        });

        const rewardAmount = parseFloat(task.reward_amount || 0);

        let statusBadgeHTML = '';
        if (rewardAmount > 0) {
            if (task.is_completed && !task.is_approved) {
                statusBadgeHTML = `<span class="font-bold text-amber-300 bg-amber-950/80 border border-amber-500/40 px-2 py-0.5 rounded text-[11px]">💰 ${rewardAmount.toFixed(2)} € (Prüfung)</span>`;
            } else if (task.is_paid) {
                statusBadgeHTML = `<span class="text-[10px] bg-slate-800 text-slate-400 border border-slate-700 px-1.5 py-0.5 rounded font-bold">✅ Ausbezahlt</span>`;
            } else if (task.is_approved) {
                statusBadgeHTML = `<span class="font-bold text-emerald-400 bg-emerald-950/80 border border-emerald-500/40 px-2 py-0.5 rounded text-[11px]">💰 ${rewardAmount.toFixed(2)} € (Bestätigt)</span>`;
            } else {
                statusBadgeHTML = `<span class="font-bold text-emerald-400 bg-emerald-950/80 border border-emerald-500/40 px-2 py-0.5 rounded text-[11px]">💰 ${rewardAmount.toFixed(2)} € Vergütung</span>`;
            }
        }

        const taskItem = document.createElement('div');
        taskItem.className = "flex flex-col sm:flex-row items-start sm:items-center justify-between bg-slate-900 border border-slate-700 p-3 rounded-lg gap-2";
        taskItem.innerHTML = `
            <div class="flex-1 flex flex-col gap-1">
                <label class="flex items-center space-x-3 cursor-pointer">
                    <input type="checkbox" ${task.is_completed ? 'checked' : ''} onchange="toggleTask(${task.id}, this.checked)" class="w-4 h-4 rounded text-indigo-600 focus:ring-indigo-500 bg-slate-800 border-slate-700">
                    <span class="text-sm ${task.is_completed ? 'line-through text-slate-500' : 'text-slate-200'}">${task.task_name}</span>
                </label>
                <div class="flex items-center gap-2 text-xs ml-7">
                    ${statusBadgeHTML}
                </div>
            </div>
            <div class="flex items-center gap-2 w-full sm:w-auto justify-end">
                <select onchange="reassignTask(${task.id}, this.value)" class="bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2 py-1 focus:outline-none focus:border-indigo-500">
                    ${assigneeOptions}
                </select>
                ${adminUser ? `
                    <button onclick="deleteTask(${task.id})" class="text-slate-500 hover:text-red-400 text-xs px-2 py-1 transition" title="Aufgabe löschen">&times;</button>
                ` : ''}
            </div>
        `;
        tasksList.appendChild(taskItem);
    });
}

function handleDragStart(e) {
    draggedCard = this;
    this.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
}

function handleDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
}

function handleDrop(e) {
    e.preventDefault();
    if (this === draggedCard) return;

    const grid = document.getElementById('rooms-grid');
    const cards = Array.from(grid.children);
    const draggedIndex = cards.indexOf(draggedCard);
    const targetIndex = cards.indexOf(this);

    if (draggedIndex < targetIndex) {
        this.after(draggedCard);
    } else {
        this.before(draggedCard);
    }

    saveNewOrder();
}

function handleDragEnd() {
    this.classList.remove('dragging');
    draggedCard = null;
}