<template>
  <div class="space-y-3">
    <div v-for="member in membersWithCoverage" :key="member.id" class="space-y-1">
      <div class="flex justify-between text-xs font-medium text-gray-700">
        <span>{{ member.displayName || 'Unnamed' }}</span>
        <span>{{ Math.round(member.coverageMinPct || 0) }}%</span>
      </div>
      
      <div class="relative h-6 bg-gray-100 rounded overflow-hidden">
        <!-- Min coverage bar -->
        <div 
          class="absolute top-0 left-0 h-full transition-all duration-300"
          :class="getBarColor(member.coverageMinPct)"
          :style="{ width: `${Math.min(100, member.coverageMinPct || 0)}%` }"
        />
        
        <!-- Target coverage tick/ghost -->
        <div 
          v-if="member.coverageTargetPct"
          class="absolute top-0 h-full w-0.5 bg-gray-400 opacity-50"
          :style="{ left: `${Math.min(100, member.coverageTargetPct)}%` }"
        >
          <div class="absolute -top-1 -left-1 w-2 h-2 bg-gray-400 rounded-full opacity-50" />
        </div>
        
        <!-- 100% line -->
        <div class="absolute top-0 left-0 h-full w-full pointer-events-none">
          <div class="absolute top-0 h-full w-px bg-gray-600" style="left: 100%" />
        </div>
      </div>
    </div>
    
    <!-- Summary stats -->
    <div class="pt-3 border-t border-gray-200 text-xs text-gray-600">
      <div class="flex justify-between">
        <span>Team median: {{ Math.round(teamStats.median || 0) }}%</span>
        <span v-if="teamStats.under100 > 0" class="text-yellow-600 font-medium">
          {{ teamStats.under100 }} under minimum
        </span>
        <span v-else class="text-green-600 font-medium">
          All covered ✓
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'

const membersStore = useMembersStore()
const { members, teamStats } = storeToRefs(membersStore)

const membersWithCoverage = computed(() => {
  return members.value.map(member => {
    const coverage = membersStore.getMemberCoverage(member.id)
    return {
      ...member,
      coverageMinPct: coverage.minPct,
      coverageTargetPct: coverage.targetPct
    }
  })
})

function getBarColor(coverage: number | undefined) {
  const pct = coverage || 0
  if (pct >= 100) return 'bg-green-500'
  if (pct >= 80) return 'bg-yellow-500'
  return 'bg-red-500'
}
</script>