<template>
  <div class="hidden" data-ui="needs_coverage_card_v1" />
  <UCard class="min-h-[140px] shadow-sm rounded-xl">
    <template #header>
      <div class="flex items-center gap-2">
        <UIcon name="i-heroicons-user-group" class="h-5 w-5" />
        <h3 class="font-semibold">Members covered</h3>
      </div>
    </template>
    
    <div class="text-center space-y-6">
      <div class="text-2xl font-semibold" :class="statusColor">
        {{ pctCovered }}%
      </div>
      <div class="text-sm text-gray-600">
        Median {{ median }}%
      </div>
      <div v-if="stats.under100 > 0" class="flex items-center justify-center gap-1 text-xs text-amber-600 mt-3">
        <span>⚠</span>
        <span>{{ stats.under100 }} under 100%</span>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const { members, teamCoverageStats } = useCoopBuilder()
const stats = computed(() => teamCoverageStats())
const pctCovered = computed(() => Math.round(stats.value.over100Pct || 0))
const median = computed(() => Math.round(stats.value.median ?? 0))

const statusColor = computed(() => {
  if (pctCovered.value >= 100) return 'text-green-600'
  if (pctCovered.value >= 80) return 'text-amber-600'
  return 'text-red-600'
})
</script>