<!-- Bulk Tag Modal -->
<div v-if="showBulkTagModal" @click.self="closeBulkTagModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-[100] p-4 backdrop-blur-sm">
    <div class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md max-h-[80vh] flex flex-col">
        <div class="p-6 border-b border-[var(--border-primary)] flex-shrink-0">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-[var(--bg-accent)] rounded-full flex items-center justify-center">
                        <i class="fas fa-tags text-[var(--text-accent)]"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-[var(--text-primary)]">Bulk Tag Update</h3>
                        <p class="text-sm text-[var(--text-muted)]">${ selectedCount } recording${ selectedCount !== 1 ? 's' : '' } selected</p>
                    </div>
                </div>
                <button @click="closeBulkTagModal" class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
        </div>

        <div class="p-6 overflow-y-auto flex-1">
            <!-- Action Toggle -->
            <div class="flex rounded-lg bg-[var(--bg-tertiary)] p-1 mb-4">
                <button @click="bulkTagAction = 'add'"
                        :class="[
                            'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors',
                            bulkTagAction === 'add'
                                ? 'bg-[var(--bg-button)] text-[var(--text-button)]'
                                : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                        ]">
                    <i class="fas fa-plus mr-2"></i>Add Tag
                </button>
                <button @click="bulkTagAction = 'remove'"
                        :class="[
                            'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors',
                            bulkTagAction === 'remove'
                                ? 'bg-[var(--bg-button)] text-[var(--text-button)]'
                                : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                        ]">
                    <i class="fas fa-minus mr-2"></i>Remove Tag
                </button>
            </div>

            <!-- Tag Selection -->
            <div>
                <label class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                    Select a tag to ${ bulkTagAction }
                </label>
                <div class="max-h-64 overflow-y-auto space-y-2 border border-[var(--border-secondary)] rounded-lg p-3 bg-[var(--bg-input)]">
                    <button v-for="tag in availableTags" :key="tag.id"
                            @click="bulkTagSelectedId = tag.id"
                            :class="[
                                'w-full flex items-center justify-between px-3 py-2 rounded-lg transition-colors',
                                bulkTagSelectedId == tag.id
                                    ? 'bg-[var(--bg-accent)] ring-2 ring-[var(--border-accent)]'
                                    : 'hover:bg-[var(--bg-tertiary)]'
                            ]">
                        <div class="flex items-center gap-2">
                            <span class="w-3 h-3 rounded-full flex-shrink-0" :style="{ backgroundColor: tag.color }"></span>
                            <span class="text-sm text-[var(--text-primary)]">${ tag.name }</span>
                            <i v-if="tag.group_id" class="fas fa-users text-xs text-[var(--text-muted)]" title="Group tag"></i>
                        </div>
                        <i v-if="bulkTagSelectedId == tag.id" class="fas fa-check text-[var(--text-accent)]"></i>
                    </button>
                    <p v-if="availableTags.length === 0" class="text-sm text-[var(--text-muted)] text-center py-4">
                        No tags available. Create tags in settings.
                    </p>
                </div>
            </div>

            <!-- Info message -->
            <div class="mt-4 p-3 bg-[var(--bg-tertiary)] rounded-lg text-sm text-[var(--text-muted)]">
                <i class="fas fa-info-circle mr-2"></i>
                <span v-if="bulkTagAction === 'add'">
                    The selected tag will be added to all ${ selectedCount } recording${ selectedCount !== 1 ? 's' : '' }.
                </span>
                <span v-else>
                    The selected tag will be removed from all ${ selectedCount } recording${ selectedCount !== 1 ? 's' : '' } that have it.
                </span>
            </div>
        </div>

        <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3 flex-shrink-0">
            <button @click="closeBulkTagModal"
                    class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                Cancel
            </button>
            <button @click="executeBulkTag"
                    :disabled="!bulkTagSelectedId"
                    :class="[
                        'px-4 py-2 rounded-lg transition-colors flex items-center gap-2',
                        bulkTagSelectedId
                            ? 'bg-[var(--bg-button)] text-[var(--text-button)] hover:bg-[var(--bg-button-hover)]'
                            : 'bg-[var(--bg-tertiary)] text-[var(--text-muted)] cursor-not-allowed'
                    ]">
                <i :class="['fas', bulkTagAction === 'add' ? 'fa-plus' : 'fa-minus']"></i>
                ${ bulkTagAction === 'add' ? 'Add' : 'Remove' } Tag
            </button>
        </div>
    </div>
</div>
