<template>
  <div class="bg-white rounded-lg shadow p-6">
    <div class="flex justify-between items-start mb-4">
      <div>
        <h3 class="font-semibold text-gray-900 text-lg">{{ team.name }}</h3>
        <p class="text-sm text-gray-500 mt-1">
          {{ $t('teams.created') }}: {{ formatDate(team.createdAt) }}
        </p>
      </div>
      
      <div class="flex items-center space-x-2">
        <span :class="statusClasses" class="px-3 py-1 rounded-full text-xs font-medium">
          {{ $t('teams.status.' + team.status.toLowerCase()) }}
        </span>
      </div>
    </div>


    <!-- Members Preview -->
    <div class="mb-4">
      <div class="flex items-center justify-between mb-2">
        <span class="text-sm font-medium text-gray-700">{{ $t('teams.members') }}</span>
        <span class="text-sm text-gray-500">{{ membersCount }}</span>
      </div>
      
      <div class="flex -space-x-2">
        <div 
          v-for="(member, index) in displayMembers" 
          :key="member.id"
          class="w-8 h-8 rounded-full bg-blue-500 border-2 border-white flex items-center justify-center text-white text-xs font-medium"
          :title="member.userId"
        >
          {{ getInitials(member.userId) }}
        </div>
        <div 
          v-if="remainingMembers > 0"
          class="w-8 h-8 rounded-full bg-gray-400 border-2 border-white flex items-center justify-center text-white text-xs font-medium"
        >
          +{{ remainingMembers }}
        </div>
      </div>
    </div>

    <!-- Actions -->
    <div class="pt-4 border-t border-gray-200">
      <button
        v-if="canStartKyc"
        @click="$emit('startKyc', team.id)"
        class="w-full px-4 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors"
      >
        {{ $t('teams.start_kyc') }}
      </button>
      
      <button
        v-if="team.status === 'KYC_REJECTED'"
        @click="$emit('retryKyc', team.id)"
        class="w-full px-4 py-3 bg-orange-600 text-white font-medium rounded-lg hover:bg-orange-700 transition-colors"
      >
        {{ $t('teams.retry_kyc') }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  team: Team
}

const props = defineProps<Props>()
const emit = defineEmits(['startKyc', 'retryKyc'])

const membersCount = computed(() => props.team?.members?.length || 1)
const displayMembers = computed(() => (props.team?.members || []).slice(0, 3))
const remainingMembers = computed(() => Math.max(0, membersCount.value - 3))

const canStartKyc = computed(() => 
  props.team?.status && ['PENDING_KYC', 'KYC_REJECTED'].includes(props.team.status)
)

const statusClasses = computed(() => {
  if (!props.team?.status) return 'bg-gray-100 text-gray-800'
  
  switch (props.team.status) {
    case 'KYC_APPROVED':
      return 'bg-green-100 text-green-800'
    case 'KYC_REJECTED':
      return 'bg-red-100 text-red-800'
    case 'KYC_IN_REVIEW':
      return 'bg-yellow-100 text-yellow-800'
    case 'SUSPENDED':
      return 'bg-gray-100 text-gray-800'
    default:
      return 'bg-blue-100 text-blue-800'
  }
})

const formatDate = (dateString: string) => {
  if (!dateString) return ''
  try {
    return new Date(dateString).toLocaleDateString('ru-RU')
  } catch (e) {
    return dateString
  }
}

const getInitials = (userId: string) => {
  if (!userId) return '??'
  return userId.substring(0, 2).toUpperCase()
}
</script>