<script setup lang="ts">
import { computed } from 'vue'
import type { AcceptanceCriterion } from '@/api/types'

const props = defineProps<{ criteria: AcceptanceCriterion[] }>()

const progress = computed(() => {
  const total = props.criteria.length
  const done = props.criteria.filter(ac => ac.checked).length
  const pct = total > 0 ? Math.round((done / total) * 100) : 0
  return { done, total, pct }
})
</script>

<template>
  <div v-if="criteria.length > 0" class="mt-3">
    <div class="border-t border-border-light/60 dark:border-slate-800 pt-3">
      <div class="flex items-center gap-2 mb-2">
        <span class="text-[10px] font-medium text-slate-400 uppercase tracking-wider">Acceptance Criteria</span>
        <div class="flex-1 h-1.5 rounded-full bg-surface-light-elevated dark:bg-slate-700 overflow-hidden">
          <div
            class="h-full rounded-full transition-all duration-300"
            :class="progress.pct === 100 ? 'bg-emerald-500' : 'bg-brand-500'"
            :style="{ width: progress.pct + '%' }"
          ></div>
        </div>
        <span class="text-[10px] text-slate-400 tabular-nums">{{ progress.done }}/{{ progress.total }}</span>
      </div>

      <ul class="space-y-1">
        <li
          v-for="ac in criteria"
          :key="ac.text"
          class="flex items-start gap-2 py-0.5"
        >
          <input
            type="checkbox"
            :checked="ac.checked"
            disabled
            class="mt-1 rounded border-border-light dark:border-slate-600 text-accent-500"
          />
          <div class="flex-1 min-w-0">
            <span
              class="text-sm"
              :class="ac.checked
                ? 'line-through text-slate-400 dark:text-slate-500'
                : 'text-slate-700 dark:text-slate-300'"
            >{{ ac.text }}</span>
            <div v-if="ac.realized_in && ac.realized_in.length > 0" class="flex flex-wrap gap-1 mt-0.5">
              <span
                v-for="(ref, ri) in ac.realized_in"
                :key="ri"
                class="inline-flex items-center gap-1 px-1.5 py-0 rounded-full text-[10px] font-medium bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
                :title="`${ref.file_path}${ref.lines ? ':' + ref.lines : ''}`"
              >
                <svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
                </svg>
                PR #{{ ref.pr_number }}
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
