function createParticipantPlaceholder() {
    const placeholder = document.createElement('div');
    placeholder.className = 'participant-video-placeholder absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900/80 to-purple-900/80 hidden';
    placeholder.innerHTML = `
        <div class="text-center">
            <div class="w-20 h-20 rounded-full bg-indigo-700/50 flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-video-slash text-2xl text-white/70"></i>
            </div>
            <p class="text-white text-sm font-medium">\u6444\u50cf\u5934\u5df2\u5173\u95ed</p>
        </div>
    `;
    return placeholder;
}

export function createParticipantTile(connectionId, displayName) {
    const tile = document.createElement('div');
    tile.className = 'relative bg-black/60 rounded-xl overflow-hidden flex items-center justify-center';
    tile.dataset.participantId = connectionId;

    const video = document.createElement('video');
    video.className = 'w-full h-full object-contain';
    video.autoplay = true;
    video.playsinline = true;
    video.muted = false;
    video.id = `participantVideo_${connectionId}`;
    tile.appendChild(video);
    tile.appendChild(createParticipantPlaceholder());

    const label = document.createElement('div');
    label.className = 'absolute bottom-3 left-3 glass px-3 py-1 rounded-full text-xs flex items-center gap-2';
    label.innerHTML = `<i class="fas fa-user text-purple-400"></i><span>${displayName || '\u53c2\u4e0e\u8005'}</span>`;
    tile.appendChild(label);

    const liveTag = document.createElement('div');
    liveTag.className = 'absolute top-3 right-3 bg-green-500/80 px-2 py-0.5 rounded-full text-xs flex items-center gap-1';
    liveTag.innerHTML = `<span class="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></span><span>\u5728\u7ebf</span>`;
    tile.appendChild(liveTag);

    return tile;
}

export function getParticipantTile(grid, participantId) {
    return grid?.querySelector(`[data-participant-id="${participantId}"]`) || null;
}

export function updateParticipantTilePlaceholder(grid, participantId, showPlaceholder) {
    const tile = getParticipantTile(grid, participantId);
    if (!tile) return;

    const placeholder = tile.querySelector('.participant-video-placeholder');
    if (placeholder) {
        placeholder.classList.toggle('hidden', !showPlaceholder);
    }
}

export function updateParticipantTileName(grid, participantId, name) {
    const tile = getParticipantTile(grid, participantId);
    if (!tile) return;

    const label = tile.querySelector('.absolute.bottom-3 span');
    if (label && name) {
        label.textContent = name;
    }
}