<div class="space-y-6">
    <!-- 顶部导航链接 -->
    <div class="flex items-center text-sm text-gray-500 mb-6">
        <a href="/admin/robots/{{.Robot.ID}}" class="hover:text-gray-700">{{.Robot.Nickname}}</a>
        <span class="mx-2">/</span>
        <a href="/admin/robots/{{.Robot.ID}}/contacts" class="hover:text-gray-700">联系人</a>
        <span class="mx-2">/</span>
        <span class="text-gray-700 font-medium">{{.Contact.Nickname}}</span>
    </div>
    
    <!-- 联系人详情卡片 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- 头部信息 -->
        <div class="p-6 flex items-center border-b border-gray-100">
            <div class="flex-shrink-0 mr-6">
                {{if .Contact.Avatar}}
                    <img src="{{.Contact.Avatar}}" alt="{{.Contact.Nickname}}" class="w-24 h-24 rounded-full object-cover">
                {{else}}
                    <div class="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                        {{if eq .Contact.Type "group"}}
                            <i class="fas fa-users text-4xl"></i>
                        {{else}}
                            <i class="fas fa-user text-4xl"></i>
                        {{end}}
                    </div>
                {{end}}
            </div>
            
            <div class="flex-grow">
                <h2 class="text-2xl font-bold text-gray-800 mb-1">{{.Contact.Nickname}}</h2>
                <div class="flex flex-wrap items-center gap-3 mt-2">
                    {{if .Contact.WechatID}}
                        <div class="flex items-center text-gray-500 text-sm">
                            <i class="fas fa-id-card mr-2"></i> {{.Contact.WechatID}}
                        </div>
                    {{end}}
                    
                    <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{if eq .Contact.Type "group"}}bg-blue-100 text-blue-800{{else}}bg-green-100 text-green-800{{end}}">
                        {{if eq .Contact.Type "group"}}群聊{{else}}好友{{end}}
                    </div>
                </div>
                
                {{if eq .Contact.Type "group"}}
                    <div class="mt-4">
                        <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/members" class="text-indigo-600 hover:text-indigo-800 text-sm">
                            <i class="fas fa-users mr-1"></i> 查看群成员 ({{.MemberCount}})
                        </a>
                    </div>
                {{end}}
            </div>
            
            <div class="ml-auto">
                <button onclick="App.openModal('send-message-modal'); setMessageRecipient('{{.Contact.ID}}', '{{.Contact.Nickname}}', '{{.Contact.Type}}', '{{.Contact.Avatar}}');" 
                    class="btn btn-primary">
                    <i class="fas fa-paper-plane mr-2"></i> 发送消息
                </button>
            </div>
        </div>
        
        <!-- 统计信息 -->
        <div class="grid grid-cols-1 md:grid-cols-3 border-b border-gray-100">
            <div class="p-6 border-r border-gray-100">
                <div class="text-sm text-gray-500 mb-1">消息数量</div>
                <div class="text-xl font-semibold text-gray-800">{{.MessageCount}}</div>
            </div>
            <div class="p-6 border-r border-gray-100">
                <div class="text-sm text-gray-500 mb-1">上次互动</div>
                <div class="text-xl font-semibold text-gray-800">{{if .LastMessage}}{{.LastMessage.SendTime.Format "2006-01-02 15:04"}}{{else}}无记录{{end}}</div>
            </div>
            <div class="p-6">
                <div class="text-sm text-gray-500 mb-1">备注</div>
                <div class="text-xl font-semibold text-gray-800">{{if .Contact.Remark}}{{.Contact.Remark}}{{else}}无{{end}}</div>
            </div>
        </div>
        
        <!-- 最近消息和操作 -->
        <div class="p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-800">最近消息</h3>
                <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/messages" class="text-indigo-600 hover:text-indigo-800 text-sm">
                    查看全部 <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            
            {{if .RecentMessages}}
                <div class="space-y-4 max-h-80 overflow-y-auto p-2">
                    {{range .RecentMessages}}
                        <div class="flex {{if .IsFromMe}}justify-end{{else}}justify-start{{end}}">
                            <div class="max-w-sm {{if .IsFromMe}}bg-indigo-100 rounded-tl-lg rounded-tr-lg rounded-bl-lg{{else}}bg-gray-100 rounded-tl-lg rounded-tr-lg rounded-br-lg{{end}} p-3">
                                {{if not .IsFromMe}}
                                    <div class="text-xs text-gray-500 font-medium mb-1">{{.SenderName}}</div>
                                {{end}}
                                
                                {{if eq .ContentType "text"}}
                                    <p class="text-sm text-gray-800">{{.Content}}</p>
                                {{else if eq .ContentType "image"}}
                                    <p class="text-sm text-gray-500">[图片消息]</p>
                                {{else if eq .ContentType "file"}}
                                    <p class="text-sm text-gray-500">[文件消息]</p>
                                {{else if eq .ContentType "video"}}
                                    <p class="text-sm text-gray-500">[视频消息]</p>
                                {{else if eq .ContentType "voice"}}
                                    <p class="text-sm text-gray-500">[语音消息]</p>
                                {{end}}
                                
                                <div class="text-xs text-right text-gray-400 mt-1">{{.SendTime.Format "15:04"}}</div>
                            </div>
                        </div>
                    {{end}}
                </div>
            {{else}}
                <div class="text-center py-8 bg-gray-50 rounded-lg">
                    <i class="fas fa-comment-slash text-3xl text-gray-300 mb-2"></i>
                    <p class="text-gray-500">暂无聊天记录</p>
                </div>
            {{end}}
        </div>
    </div>
</div>

<!-- 引入发送消息对话框组件 -->
{{ embed "robot/send_message" .}}
