<template>
  <CustomModal
    :visible="isVisible"
    title="用户资料"
    size="medium"
    @close="closeModal"
  >
    <div class="user-profile-content" :class="{ 'dark': themeStore.isDarkMode }">
      <!-- 用户头像和基本信息 -->
      <div class="profile-header">
        <div class="user-avatar" :style="{ background: userInfo.color }">
          {{ userInfo.nick_name?.charAt(0) }}
        </div>
        <div class="user-basic-info">
          <h2 class="user-name">{{ userInfo.nick_name }}</h2>
          <p class="user-id">ID: {{ userInfo.id }}</p>
          <div class="user-status">
            <span class="status-dot" :class="isOnline ? 'online' : 'offline'"></span>
            <span class="status-text">{{ isOnline ? '在线' : '离线' }}</span>
          </div>
        </div>
      </div>

      <!-- 用户详细信息 -->
      <div class="profile-details">
        <div class="detail-section">
          <h3 class="section-title">个人信息</h3>
          <div class="detail-grid">
            <div class="detail-item">
              <label>昵称</label>
              <span>{{ userInfo.nick_name || '未设置' }}</span>
            </div>
            <div class="detail-item">
              <label>用户ID</label>
              <span>{{ userInfo.id }}</span>
            </div>
            <div class="detail-item">
              <label>注册时间</label>
              <span>{{ formatDate(userInfo.createdAt) }}</span>
            </div>
            <div class="detail-item">
              <label>最后在线</label>
              <span>{{ formatDate(userInfo.lastSeen) }}</span>
            </div>
          </div>
        </div>

        <!-- 聊天统计 -->
        <div class="detail-section">
          <h3 class="section-title">聊天统计</h3>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-number">{{ chatStats.messageCount || 0 }}</div>
              <div class="stat-label">消息数量</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ chatStats.callCount || 0 }}</div>
              <div class="stat-label">通话次数</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">{{ formatDuration(chatStats.totalCallTime || 0) }}</div>
              <div class="stat-label">通话时长</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="profile-actions">
        <button class="action-btn primary-btn" @click="startChat">
          <i class="fas fa-comment"></i>
          发送消息
        </button>
        <button class="action-btn secondary-btn" @click="startVoiceCall">
          <i class="fas fa-phone"></i>
          语音通话
        </button>
        <button class="action-btn secondary-btn" @click="startVideoCall">
          <i class="fas fa-video"></i>
          视频通话
        </button>
      </div>
    </div>
  </CustomModal>
</template>

<script setup>
import {ref, computed, watch} from 'vue'
import {useThemeStore} from '../stores/theme.ts'
import {useChatStore} from '../stores/chat.ts'
import {useUserStore} from '../stores/user.ts'
import CustomModal from './CustomModal.vue'

const themeStore = useThemeStore()
const chatStore = useChatStore()
const userStore = useUserStore()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['close', 'start-chat', 'start-call'])

const isVisible = computed(() => props.visible)
const isOnline = ref(true) // 简化处理，实际应该从服务器获取

// 聊天统计数据
const chatStats = ref({
  messageCount: 0,
  callCount: 0,
  totalCallTime: 0
})

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知'

  const date = new Date(dateString)
  const now = new Date()
  const diff = now - date

  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) { // 24小时内
    return `${Math.floor(diff / 3600000)}小时前`
  } else if (diff < 604800000) { // 7天内
    return `${Math.floor(diff / 86400000)}天前`
  } else {
    return date.toLocaleDateString('zh-CN')
  }
}

// 格式化时长
const formatDuration = (seconds) => {
  if (seconds < 60) {
    return `${seconds}秒`
  } else if (seconds < 3600) {
    return `${Math.floor(seconds / 60)}分钟`
  } else {
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    return `${hours}小时${minutes}分钟`
  }
}

// 加载聊天统计
const loadChatStats = async () => {
  try {
    // 这里应该从数据库或API获取统计数据
    // 暂时使用模拟数据
    chatStats.value = {
      messageCount: Math.floor(Math.random() * 1000),
      callCount: Math.floor(Math.random() * 50),
      totalCallTime: Math.floor(Math.random() * 7200)
    }
  } catch (error) {
    console.error('加载聊天统计失败:', error)
  }
}

// 开始聊天
const startChat = () => {
  emit('start-chat', props.userInfo)
  closeModal()
}

// 开始语音通话
const startVoiceCall = () => {
  emit('start-call', {
    user: props.userInfo,
    type: 'audio'
  })
  closeModal()
}

// 开始视频通话
const startVideoCall = () => {
  emit('start-call', {
    user: props.userInfo,
    type: 'video'
  })
  closeModal()
}

// 关闭模态框
const closeModal = () => {
  emit('close')
}

// 监听用户信息变化
watch(() => props.userInfo, (newUserInfo) => {
  if (newUserInfo && newUserInfo.id) {
    loadChatStats()
  }
}, {immediate: true})
</script>

<style scoped>
.user-profile-content {
  padding: 0;
}

.user-profile-content.dark {
  color: #f7fafc;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.user-profile-content.dark .profile-header {
  border-bottom-color: #374151;
  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  font-weight: bold;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.user-basic-info {
  flex: 1;
}

.user-name {
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 8px 0;
}

.user-profile-content.dark .user-name {
  color: #f7fafc;
}

.user-id {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 12px 0;
  font-family: 'Courier New', monospace;
}

.user-profile-content.dark .user-id {
  color: #9ca3af;
}

.user-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-dot.online {
  background: #10b981;
}

.status-dot.offline {
  background: #ef4444;
}

.status-text {
  font-size: 14px;
  font-weight: 500;
}

.status-text {
  color: #64748b;
}

.user-profile-content.dark .status-text {
  color: #9ca3af;
}

.profile-details {
  padding: 24px;
}

.detail-section {
  margin-bottom: 32px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.user-profile-content.dark .section-title {
  color: #f7fafc;
  border-bottom-color: #374151;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-profile-content.dark .detail-item label {
  color: #9ca3af;
}

.detail-item span {
  font-size: 14px;
  color: #1a202c;
  font-weight: 500;
}

.user-profile-content.dark .detail-item span {
  color: #f7fafc;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.user-profile-content.dark .stat-item {
  background: #374151;
  border-color: #4b5563;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #4361ee;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.user-profile-content.dark .stat-label {
  color: #9ca3af;
}

.profile-actions {
  padding: 24px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.user-profile-content.dark .profile-actions {
  border-top-color: #374151;
}

.action-btn {
  flex: 1;
  min-width: 120px;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary-btn {
  background: linear-gradient(135deg, #4361ee, #3f37c9);
  color: white;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
}

.secondary-btn {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.secondary-btn:hover {
  background: #e2e8f0;
  color: #475569;
  transform: translateY(-1px);
}

.user-profile-content.dark .secondary-btn {
  background: #4b5563;
  color: #d1d5db;
  border-color: #6b7280;
}

.user-profile-content.dark .secondary-btn:hover {
  background: #6b7280;
  color: #f3f4f6;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .user-avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .profile-actions {
    flex-direction: column;
  }

  .action-btn {
    min-width: unset;
  }
}
</style>
