<template>
  <div 
    class="company-card bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
    :class="sizeClasses"
  >
    <div class="flex items-center space-x-3">
      <!-- Логотип компании -->
      <div class="flex-shrink-0">
        <div 
          class="rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold"
          :class="logoSizeClasses"
        >
          {{ getCompanyInitials(company.name) }}
        </div>
      </div>
      
      <!-- Информация о компании -->
      <div class="flex-1 min-w-0">
        <h4 class="font-semibold text-gray-900 truncate" :class="nameSizeClasses">
          {{ company.name }}
        </h4>
        <p class="text-gray-600 text-xs">
          {{ company.country }} • {{ company.taxId }}
        </p>
        
        <!-- Дополнительная информация -->
        <div v-if="tripCount" class="mt-2">
          <p class="text-xs text-blue-600 font-medium">
            {{ tripCount }} рейсов
          </p>
        </div>
      </div>
      
      <!-- Рейтинг доверия -->
      <div class="flex-shrink-0 text-center">
        <div class="flex items-center space-x-1">
          <span class="font-semibold text-sm">{{ getTrustRating(company) }}</span>
        </div>
        <p class="text-xs text-gray-500">рейтинг</p>
      </div>
    </div>
    
    <!-- Статистика (только для больших карточек) -->
    <div v-if="size === 'large'" class="mt-4 pt-4 border-t border-gray-100">
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <p class="text-lg font-semibold text-gray-900">{{ getCompanyStats().totalTrips }}</p>
          <p class="text-xs text-gray-500">рейсов</p>
        </div>
        <div>
          <p class="text-lg font-semibold text-gray-900">{{ getCompanyStats().totalWeight }}т</p>
          <p class="text-xs text-gray-500">перевезено</p>
        </div>
        <div>
          <p class="text-lg font-semibold text-gray-900">{{ getCompanyStats().onTimePercentage }}%</p>
          <p class="text-xs text-gray-500">вовремя</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  company: {
    type: Object,
    required: true
  },
  tripCount: {
    type: Number,
    default: 0
  },
  size: {
    type: String,
    default: 'medium', // small, medium, large
    validator: value => ['small', 'medium', 'large'].includes(value)
  }
})

const sizeClasses = computed(() => {
  switch (props.size) {
    case 'small': return 'p-3'
    case 'large': return 'p-6'
    default: return 'p-4'
  }
})

const logoSizeClasses = computed(() => {
  switch (props.size) {
    case 'small': return 'w-8 h-8 text-xs'
    case 'large': return 'w-16 h-16 text-xl'
    default: return 'w-12 h-12 text-sm'
  }
})

const nameSizeClasses = computed(() => {
  switch (props.size) {
    case 'small': return 'text-sm'
    case 'large': return 'text-lg'
    default: return 'text-base'
  }
})

const getCompanyInitials = (name) => {
  if (!name) return '??'
  
  const words = name.split(' ')
  if (words.length >= 2) {
    return (words[0][0] + words[1][0]).toUpperCase()
  }
  return name.substring(0, 2).toUpperCase()
}

const getTrustRating = (company) => {
  // Генерируем псевдо-рейтинг на основе имени компании
  const ratings = {
    'Kenya Coffee Logistics Ltd': 4.8,
    'Kenya Highland Transport': 4.6,
    'Mombasa Express Cargo': 4.4,
    'East Africa Shipping Lines': 4.7,
    'ООО "Грузовичок"': 4.5,
    'ИП Автобаза №1': 4.3,
    'ООО "ЖДТранс"': 4.6,
    'Kenya Ports Authority': 4.9
  }
  
  return ratings[company.name] || 4.2
}

const getCompanyStats = () => {
  // Заглушка статистики для демонстрации
  return {
    totalTrips: props.tripCount || Math.floor(Math.random() * 50) + 10,
    totalWeight: (props.tripCount || 25) * 25, // 25т на рейс
    onTimePercentage: Math.floor(Math.random() * 20) + 80 // 80-100%
  }
}
</script>

<style scoped>
.company-card {
  @apply transition-all duration-200;
}

.company-card:hover {
  @apply transform scale-105;
}
</style>