<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import type { SpecSummary } from '@/api/types'
import StatusBadge from '@/components/common/StatusBadge.vue'
import SpecProgressIndicator from '@/components/common/SpecProgressIndicator.vue'

defineProps<{
  spec: SpecSummary
  owner: string
  repo: string
}>()

const auth = useAuthStore()
</script>

<template>
  <router-link
    :to="`/app/${auth.org}/specs/${owner}/${repo}/${spec.file_path}`"
    class="block p-4 border border-border-light dark:border-slate-700 rounded-lg hover:border-accent-500 dark:hover:border-accent-600 transition-colors"
  >
    <div class="flex items-center gap-2 flex-wrap mb-2">
      <span class="font-medium text-slate-800 dark:text-slate-200">{{ spec.title }}</span>
      <StatusBadge :status="spec.status" />
      <span
        v-if="spec.review_status"
        class="text-xs px-1.5 py-0.5 rounded"
        :class="{
          'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-400': spec.review_status === 'approved',
          'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-400': spec.review_status === 'in_review',
          'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400': spec.review_status === 'draft',
        }"
      >{{ spec.review_status?.replace('_', ' ') }}</span>
      <span v-for="tag in spec.tags" :key="tag" class="text-xs px-1.5 py-0.5 rounded bg-surface-light-elevated text-gray-600 dark:bg-slate-800 dark:text-slate-400">{{ tag }}</span>
    </div>
    <div class="flex items-center gap-4 text-xs text-slate-400">
      <span v-if="spec.owner">{{ spec.owner }}</span>
      <SpecProgressIndicator
        :status="spec.status"
        :total-sections="spec.total_sections"
        :done-sections="spec.done_sections"
        :total-ac="spec.total_ac"
        :done-ac="spec.done_ac"
        :is-stale="spec.is_stale"
        :stale-since="spec.stale_since"
      />
    </div>
  </router-link>
</template>
