<div class="space-y-6">
    <div class="flex justify-between items-center">
        <div>
            <div class="flex items-center">
                <a href="/admin/robots/{{.Robot.ID}}" class="text-indigo-600 hover:text-indigo-800 mr-4">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-2xl font-bold text-gray-800">{{.Robot.Nickname}} 的联系人</h1>
            </div>
            {{if .Robot.WechatID}}
                <p class="text-gray-500 mt-1">微信号：{{.Robot.WechatID}}</p>
            {{end}}
        </div>
        
        <div class="flex space-x-2">
            <button id="refresh-contacts" class="btn btn-secondary">
                <i class="fas fa-sync-alt mr-1"></i> 刷新
            </button>
        </div>
    </div>
    
    <!-- 联系人统计 -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="bg-white rounded-lg shadow-sm p-5">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
                    <i class="fas fa-address-book text-xl"></i>
                </div>
                <div>
                    <div class="text-gray-500">总联系人</div>
                    <div class="text-2xl font-semibold">{{len .Contacts}}</div>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-5">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
                    <i class="fas fa-user text-xl"></i>
                </div>
                <div>
                    <div class="text-gray-500">好友</div>
                    <div class="text-2xl font-semibold" id="friends-count">0</div>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-5">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
                    <i class="fas fa-users text-xl"></i>
                </div>
                <div>
                    <div class="text-gray-500">群聊</div>
                    <div class="text-2xl font-semibold" id="groups-count">0</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 搜索和过滤 -->
    <div class="bg-white rounded-lg shadow-sm p-4">
        <div class="flex flex-col sm:flex-row gap-4">
            <div class="relative flex-grow">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-search text-gray-400"></i>
                </div>
                <input id="contact-search" type="text" placeholder="搜索联系人..." 
                       class="block w-full pl-10 pr-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-indigo-200 focus:border-indigo-300 shadow-sm">
            </div>
            
            <div class="flex flex-wrap gap-2">
                <button data-filter="all" class="px-4 py-2 rounded-md text-sm border-2 border-indigo-600 bg-indigo-600 text-white filter-btn">
                    全部
                </button>
                <button data-filter="friend" class="px-4 py-2 rounded-md text-sm border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 filter-btn">
                    好友
                </button>
                <button data-filter="group" class="px-4 py-2 rounded-md text-sm border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 filter-btn">
                    群聊
                </button>
            </div>
        </div>
    </div>
    
    <!-- 联系人列表 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" id="contacts-grid">
        {{if .Contacts}}
            {{range .Contacts}}
                <div class="contact-card bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-all" data-type="{{.Type}}">
                    <div class="p-4">
                        <div class="flex items-center">
                            {{if .Avatar}}
                                <img src="{{.Avatar}}" alt="{{.Nickname}}" class="w-12 h-12 rounded-full mr-4 object-cover">
                            {{else}}
                                <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-4 text-gray-500">
                                    {{if eq .Type "group"}}
                                        <i class="fas fa-users"></i>
                                    {{else}}
                                        <i class="fas fa-user"></i>
                                    {{end}}
                                </div>
                            {{end}}
                            
                            <div class="min-w-0 flex-1">
                                <h3 class="text-gray-900 font-medium truncate contact-name" title="{{.Nickname}}">{{.Nickname}}</h3>
                                <div class="flex items-center mt-1">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{if eq .Type "group"}}bg-blue-100 text-blue-800{{else}}bg-green-100 text-green-800{{end}}">
                                        {{if eq .Type "group"}}群聊{{else}}好友{{end}}
                                    </span>
                                    {{if .WechatID}}
                                        <span class="ml-2 text-xs text-gray-500 truncate">{{.WechatID}}</span>
                                    {{end}}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 px-4 py-3 border-t border-gray-100 flex justify-end">
                        <a href="/admin/robots/{{$.Robot.ID}}/contacts/{{.ID}}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
                            查看详情 <i class="fas fa-chevron-right ml-1"></i>
                        </a>
                    </div>
                </div>
            {{end}}
        {{else}}
            <div class="col-span-1 sm:col-span-2 lg:col-span-3 bg-white rounded-lg shadow-sm p-8 text-center">
                <i class="fas fa-address-book text-5xl text-gray-300 mb-4"></i>
                <h3 class="text-lg font-medium text-gray-700 mb-2">没有联系人</h3>
                <p class="text-gray-500">机器人尚未同步联系人或者还没有联系人</p>
                <button id="sync-contacts" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-sync mr-2"></i> 同步联系人
                </button>
            </div>
        {{end}}
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 计算好友和群聊数量
        function updateCounts() {
            const contacts = document.querySelectorAll('.contact-card:not(.hidden)');
            let friendsCount = 0;
            let groupsCount = 0;
            
            contacts.forEach(card => {
                if (card.dataset.type === 'group') {
                    groupsCount++;
                } else {
                    friendsCount++;
                }
            });
            
            document.getElementById('friends-count').textContent = friendsCount;
            document.getElementById('groups-count').textContent = groupsCount;
        }
        
        // 初始化计数
        updateCounts();
        
        // 搜索功能
        const searchInput = document.getElementById('contact-search');
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const contacts = document.querySelectorAll('.contact-card');
            
            contacts.forEach(card => {
                const name = card.querySelector('.contact-name').textContent.toLowerCase();
                if (name.includes(searchTerm)) {
                    card.classList.remove('hidden');
                } else {
                    card.classList.add('hidden');
                }
            });
            
            updateCounts();
        });
        
        // 过滤功能
        const filterButtons = document.querySelectorAll('.filter-btn');
        let currentFilter = 'all';
        
        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 更新按钮样式
                filterButtons.forEach(btn => {
                    btn.classList.remove('bg-indigo-600', 'text-white', 'border-2', 'border-indigo-600');
                    btn.classList.add('bg-white', 'text-gray-700', 'border', 'border-gray-200');
                });
                
                this.classList.remove('bg-white', 'text-gray-700', 'border', 'border-gray-200');
                this.classList.add('bg-indigo-600', 'text-white', 'border-2', 'border-indigo-600');
                
                // 应用过滤
                currentFilter = this.dataset.filter;
                const contacts = document.querySelectorAll('.contact-card');
                
                contacts.forEach(card => {
                    if (currentFilter === 'all' || card.dataset.type === currentFilter) {
                        card.classList.remove('hidden');
                    } else {
                        card.classList.add('hidden');
                    }
                });
                
                updateCounts();
            });
        });
        
        // 刷新按钮
        document.getElementById('refresh-contacts').addEventListener('click', function() {
            const icon = this.querySelector('i');
            icon.classList.add('animate-spin');
            
            // 模拟刷新
            setTimeout(() => {
                window.location.reload();
            }, 500);
        });
        
        // 同步联系人按钮
        const syncBtn = document.getElementById('sync-contacts');
        if (syncBtn) {
            syncBtn.addEventListener('click', function() {
                this.disabled = true;
                this.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i> 同步中...';
                
                // 这里实际上应该调用API
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            });
        }
    });
</script>
