<template>
  <div 
    :class="[
      'agent-card', 
      `agent-card--${agent.status}`, 
      { 'agent-card--hovered': isHovered }
    ]" 
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    ref="cardRef"
  >
    <!-- 卡片头部 -->
    <div class="agent-card__header">
      <div class="agent-avatar-section">
        <div class="agent-avatar">
          <img 
            :src="agent.avatar || defaultAvatar" 
            :alt="agent.name"
            class="avatar-image"
            @error="handleImageError"
          />
          <div 
            :class="[
              'status-indicator',
              { 'status-indicator--online': agent.status === AGENT_STATUS.ACTIVE }
            ]"
          ></div>
        </div>
        <div class="agent-basic-info">
          <h3 class="agent-name">{{ agent.name }}</h3>
          <div class="agent-role">
            <el-tag :type="roleType" size="small">
              <el-icon v-if="roleIcon" class="role-icon"><component :is="roleIcon" /></el-icon>
              {{ roleLabel }}
            </el-tag>
          </div>
        </div>
      </div>
      
      <div class="agent-menu">
        <el-dropdown trigger="click" @command="handleMenuCommand">
          <el-button size="small" text>
            <el-icon><MoreFilled /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit">
                <el-icon><Edit /></el-icon>
                {{ $t('agents.card.actions.edit') }}
              </el-dropdown-item>
              <el-dropdown-item command="duplicate" :disabled="isProcessing">
                <el-icon><CopyDocument /></el-icon>
                {{ $t('agents.card.actions.duplicate') }}
              </el-dropdown-item>
              <el-dropdown-item 
                command="device" 
                :disabled="isProcessing"
              >
                <el-icon><Connection /></el-icon>
                {{ $t('agents.card.actions.device') }}
              </el-dropdown-item>
              <el-dropdown-item 
                command="export" 
                :disabled="isProcessing"
              >
                <el-icon><Download /></el-icon>
                {{ $t('agents.card.actions.export') }}
              </el-dropdown-item>
              <el-dropdown-item divided command="delete" class="text-danger">
                <el-icon><Delete /></el-icon>
                {{ $t('agents.card.actions.delete') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 智能体描述 -->
    <div class="agent-card__description">
      <p class="description-text" :title="agent.description">
        {{ truncatedDescription }}
      </p>
    </div>

    <!-- 设备绑定状态 -->
    <div class="device-binding-section">
      <div class="device-status">
        <el-icon 
          :class="[
            'device-icon',
            { 'device-icon--bound': agent.device.bound }
          ]"
        >
          <Phone v-if="agent.device.bound" />
          <Monitor v-else />
        </el-icon>
        <div class="device-info">
          <span class="device-status-text">
            {{ agent.device.bound ? $t('agents.card.device.bound') : $t('agents.card.device.unbound') }}
          </span>
          <span v-if="agent.device.bound && agent.device.deviceName" class="device-name">
            {{ agent.device.deviceName }}
          </span>
        </div>
        <el-button 
          v-if="!agent.device.bound"
          type="primary" 
          size="small" 
          @click="handleBindDevice"
          :loading="bindingState.loading"
          :disabled="isProcessing"
        >
          {{ $t('agents.card.device.bind') }}
        </el-button>
        <el-dropdown v-else trigger="click" @command="handleDeviceMenuCommand">
          <el-button size="small" text>
            <el-icon><MoreFilled /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="view-device">
                <el-icon><View /></el-icon>
                {{ $t('agents.card.device.viewDetails') }}
              </el-dropdown-item>
              <el-dropdown-item command="unbind-device">
                <el-icon><CloseBold /></el-icon>
                {{ $t('agents.card.device.unbind') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 最新活动/对话预览 -->
    <div v-if="lastActivity" class="activity-preview">
      <div class="activity-header">
        <el-icon class="activity-icon"><ChatDotRound /></el-icon>
        <span class="activity-title">{{ $t('agents.card.activity.title') }}</span>
      </div>
      <div class="activity-content">
        <p class="activity-text">{{ lastActivity.message }}</p>
        <span class="activity-time">{{ formatRelativeTime(lastActivity.timestamp) }}</span>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-item">
          <span class="stat-value">{{ agent.settings?.temperature || 0.7 }}</span>
          <span class="stat-label">{{ $t('agents.card.stats.temperature') }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-value">{{ formatNumber(agent.settings?.maxTokens || 0) }}</span>
          <span class="stat-label">{{ $t('agents.card.stats.tokens') }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-value">{{ agent.voice }}</span>
          <span class="stat-label">{{ $t('agents.card.stats.voice') }}</span>
        </div>
      </div>
    </div>

    <!-- 错误状态显示 -->
    <div v-if="error" class="error-section">
      <el-alert
        :title="error"
        type="error"
        :closable="false"
        show-icon
        class="error-alert"
      />
    </div>

    <!-- 加载状态覆盖 -->
    <div v-if="bindingState.loading || isProcessing" class="loading-overlay">
      <el-icon class="loading-icon"><Loading /></el-icon>
      <span class="loading-text">
        {{ bindingState.verifying ? $t('agents.card.device.verifying') : $t('agents.card.loading') }}
      </span>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  MoreFilled,
  Edit,
  CopyDocument,
  Connection,
  Download,
  Delete,
  Phone,
  Monitor,
  ChatDotRound,
  View,
  CloseBold,
  Loading,
  User,
  Briefcase,
  MagicStick,
  Reading,
} from '@element-plus/icons-vue'
import { AGENT_STATUS, AGENT_ROLES, VOICE_MODELS } from '../stores/agents.js'

// 默认头像
const defaultAvatar = '/images/default-avatar.png'

export default {
  name: 'AgentCard',
  components: {
    MoreFilled,
    Edit,
    CopyDocument,
    Connection,
    Download,
    Delete,
    Phone,
    Monitor,
    ChatDotRound,
    View,
    CloseBold,
    Loading,
    User,
    Briefcase,
    MagicStick,
    Reading,
  },
  props: {
    agent: {
      type: Object,
      required: true,
      validator: (agent) => {
        return agent && typeof agent.id === 'string' && typeof agent.name === 'string'
      }
    },
    isProcessing: {
      type: Boolean,
      default: false
    }
  },
  emits: [
    'edit',
    'duplicate', 
    'delete',
    'bind-device',
    'unbind-device',
    'view-details',
    'export'
  ],
  setup(props, { emit, expose }) {
    const { t } = useI18n()
    const cardRef = ref(null)
    const isHovered = ref(false)
    const error = ref(null)

    // 绑定状态
    const bindingState = ref({
      loading: false,
      error: null,
      verifying: false
    })

    // ==================== 计算属性 ====================
    
    const truncatedDescription = computed(() => {
      if (!props.agent.description) return ''
      const maxLength = 80
      if (props.agent.description.length <= maxLength) {
        return props.agent.description
      }
      return props.agent.description.substring(0, maxLength) + '...'
    })

    const roleType = computed(() => {
      const typeMap = {
        [AGENT_ROLES.ASSISTANT]: 'success',
        [AGENT_ROLES.CONSULTANT]: 'warning',
        [AGENT_ROLES.CREATIVE]: 'info',
        [AGENT_ROLES.EDUCATOR]: 'primary',
        [AGENT_ROLES.CUSTOM]: 'default'
      }
      return typeMap[props.agent.role] || 'default'
    })

    const roleLabel = computed(() => {
      const labelMap = {
        [AGENT_ROLES.ASSISTANT]: t('agents.card.role.assistant'),
        [AGENT_ROLES.CONSULTANT]: t('agents.card.role.consultant'),
        [AGENT_ROLES.CREATIVE]: t('agents.card.role.creative'),
        [AGENT_ROLES.EDUCATOR]: t('agents.card.role.educator'),
        [AGENT_ROLES.CUSTOM]: t('agents.card.role.custom')
      }
      return labelMap[props.agent.role] || props.agent.role
    })

    const roleIcon = computed(() => {
      const iconMap = {
        [AGENT_ROLES.ASSISTANT]: 'User',
        [AGENT_ROLES.CONSULTANT]: 'Briefcase',
        [AGENT_ROLES.CREATIVE]: 'MagicStick',
        [AGENT_ROLES.EDUCATOR]: 'Reading',
        [AGENT_ROLES.CUSTOM]: 'Setting'
      }
      return iconMap[props.agent.role]
    })

    const lastActivity = computed(() => {
      if (!props.agent.lastActive) return null
      
      // 模拟最新对话数据（实际中可能从其他地方获取）
      const sampleMessages = [
        t('agents.card.activity.messages.greeting'),
        t('agents.card.activity.messages.help'),
        t('agents.card.activity.messages.conversation'),
        t('agents.card.activity.messages.task')
      ]
      
      return {
        message: sampleMessages[Math.floor(Math.random() * sampleMessages.length)],
        timestamp: props.agent.lastActive
      }
    })

    // ==================== 事件处理 ====================
    
    const handleMouseEnter = () => {
      isHovered.value = true
    }

    const handleMouseLeave = () => {
      isHovered.value = false
    }

    const handleMenuCommand = (command) => {
      error.value = null
      
      switch (command) {
        case 'edit':
          emit('edit', props.agent)
          break
        case 'duplicate':
          emit('duplicate', props.agent)
          break
        case 'delete':
          emit('delete', props.agent)
          break
        case 'device':
          if (props.agent.device.bound) {
            emit('view-details', props.agent)
          } else {
            emit('bind-device', props.agent)
          }
          break
        case 'export':
          emit('export', props.agent)
          break
        default:
          console.warn('Unknown menu command:', command)
      }
    }

    const handleDeviceMenuCommand = (command) => {
      error.value = null
      
      switch (command) {
        case 'view-device':
          emit('view-details', props.agent)
          break
        case 'unbind-device':
          emit('unbind-device', props.agent)
          break
        default:
          console.warn('Unknown device menu command:', command)
      }
    }

    const handleBindDevice = () => {
      emit('bind-device', props.agent)
    }

    // ==================== 工具函数 ====================
    
    const handleImageError = (event) => {
      event.target.src = defaultAvatar
    }

    const formatRelativeTime = (timestamp) => {
      const now = new Date()
      const time = new Date(timestamp)
      const diffMs = now - time
      const diffMins = Math.floor(diffMs / (1000 * 60))
      const diffHours = Math.floor(diffMins / 60)
      const diffDays = Math.floor(diffHours / 24)

      if (diffMins < 1) return t('agents.card.time.justNow')
      if (diffMins < 60) return `${diffMins}${t('agents.card.time.minutesAgo')}`
      if (diffHours < 24) return `${diffHours}${t('agents.card.time.hoursAgo')}`
      if (diffDays < 7) return `${diffDays}${t('agents.card.time.daysAgo')}`
      
      return time.toLocaleDateString()
    }

    const formatNumber = (num) => {
      if (num >= 1000) {
        return `${(num / 1000).toFixed(1)}k`
      }
      return num.toString()
    }

    // ==================== 暴露方法 ====================
    
    const updateBindingState = (newState) => {
      bindingState.value = { ...bindingState.value, ...newState }
    }

    const setError = (errorMessage) => {
      error.value = errorMessage
    }

    const clearError = () => {
      error.value = null
    }

    expose({
      updateBindingState,
      setError,
      clearError
    })

    return {
      // 常量
      AGENT_STATUS,
      defaultAvatar,
      
      // 响应式数据
      cardRef,
      isHovered,
      error,
      bindingState,
      
      // 计算属性
      truncatedDescription,
      roleType,
      roleLabel,
      roleIcon,
      lastActivity,
      
      // 方法
      handleMouseEnter,
      handleMouseLeave,
      handleMenuCommand,
      handleDeviceMenuCommand,
      handleBindDevice,
      handleImageError,
      formatRelativeTime,
      formatNumber
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.agent-card {
  @apply relative bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
  @apply transition-all duration-300 ease-in-out;
  min-height: 280px;
}

.agent-card:hover {
  @apply shadow-md border-gray-300;
  transform: translateY(-2px);
}

.agent-card--hovered {
  @apply border-blue-300;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

/* 卡片头部 */
.agent-card__header {
  @apply flex items-start justify-between p-4 border-b border-gray-100;
}

.agent-avatar-section {
  @apply flex items-center space-x-3;
}

.agent-avatar {
  @apply relative;
}

.avatar-image {
  @apply w-12 h-12 rounded-full object-cover;
  @apply border-2 border-gray-200;
}

.status-indicator {
  @apply absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white;
  @apply bg-gray-400;
}

.status-indicator--online {
  @apply bg-green-500;
}

.agent-basic-info {
  @apply flex-1 min-w-0;
}

.agent-name {
  @apply text-lg font-semibold text-gray-900 mb-1;
  @apply truncate;
}

.agent-role {
  @apply flex items-center;
}

.role-icon {
  @apply mr-1;
}

.agent-menu {
  @apply flex-shrink-0;
}

/* 描述区域 */
.agent-card__description {
  @apply p-4 border-b border-gray-100;
}

.description-text {
  @apply text-sm text-gray-600 leading-relaxed;
  @apply line-clamp-2;
}

/* 设备绑定状态 */
.device-binding-section {
  @apply p-4 border-b border-gray-100;
}

.device-status {
  @apply flex items-center space-x-3;
}

.device-icon {
  @apply text-gray-400;
  @apply transition-colors duration-200;
}

.device-icon--bound {
  @apply text-green-500;
}

.device-info {
  @apply flex-1 min-w-0;
}

.device-status-text {
  @apply text-sm font-medium text-gray-900;
}

.device-name {
  @apply text-xs text-gray-500 block;
  @apply truncate;
}

/* 活动预览 */
.activity-preview {
  @apply p-4 border-b border-gray-100;
}

.activity-header {
  @apply flex items-center space-x-2 mb-2;
}

.activity-icon {
  @apply text-blue-500 text-sm;
}

.activity-title {
  @apply text-xs font-medium text-gray-500 uppercase tracking-wide;
}

.activity-content {
  @apply flex items-center justify-between;
}

.activity-text {
  @apply text-sm text-gray-600;
  @apply truncate flex-1 mr-2;
}

.activity-time {
  @apply text-xs text-gray-400 flex-shrink-0;
}

/* 统计信息 */
.stats-section {
  @apply p-4;
}

.stats-grid {
  @apply grid grid-cols-3 gap-4;
}

.stat-item {
  @apply text-center;
}

.stat-value {
  @apply block text-sm font-semibold text-gray-900;
}

.stat-label {
  @apply block text-xs text-gray-500 mt-1;
}

/* 错误状态 */
.error-section {
  @apply p-2;
}

.error-alert {
  @apply mb-0;
}

/* 加载状态 */
.loading-overlay {
  @apply absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center;
  @apply space-y-2;
}

.loading-icon {
  @apply text-blue-500 text-lg animate-spin;
}

.loading-text {
  @apply text-sm text-gray-600;
}

/* 文本截断 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 危险操作样式 */
.text-danger {
  @apply text-red-600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .agent-card__header {
    @apply p-3;
  }
  
  .agent-avatar-section {
    @apply space-x-2;
  }
  
  .avatar-image {
    @apply w-10 h-10;
  }
  
  .agent-name {
    @apply text-base;
  }
  
  .device-binding-section,
  .activity-preview,
  .stats-section {
    @apply p-3;
  }
  
  .description-text {
    @apply text-xs;
  }
  
  .stats-grid {
    @apply gap-3;
  }
}

@media (max-width: 480px) {
  .agent-card {
    @apply rounded-md;
  }
  
  .stats-grid {
    @apply grid-cols-2;
  }
  
  .device-status {
    @apply flex-col items-start space-y-2;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .agent-card {
    @apply bg-gray-800 border-gray-700;
  }
  
  .agent-card:hover {
    @apply border-gray-600;
  }
  
  .agent-card__header {
    @apply border-gray-700;
  }
  
  .agent-name {
    @apply text-gray-100;
  }
  
  .description-text,
  .activity-text,
  .device-status-text {
    @apply text-gray-300;
  }
  
  .stat-value {
    @apply text-gray-100;
  }
  
  .activity-icon {
    @apply text-blue-400;
  }
  
  .loading-overlay {
    @apply bg-gray-800 bg-opacity-80;
  }
  
  .loading-text {
    @apply text-gray-300;
  }
}
</style>