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

defineProps<{
  reposWithSpecs: RepoSummary[]
  reposWithoutSpecs: RepoSummary[]
}>()

const auth = useAuthStore()
</script>

<template>
  <!-- Repos with specs -->
  <div v-for="repo in reposWithSpecs" :key="repo.full_name" class="mb-8">
    <div class="flex items-center gap-3 mb-4">
      <router-link
        :to="`/app/${auth.org}/repos/${repo.owner}/${repo.repo}`"
        class="text-lg font-semibold text-slate-800 dark:text-slate-200 hover:text-accent-500 transition-colors"
      >
        {{ repo.full_name }}
      </router-link>
      <span v-if="repo.config?.team" class="text-xs px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 dark:bg-accent-900/50 dark:text-accent-400">{{ repo.config.team }}</span>
      <span class="text-xs text-slate-400">{{ repo.spec_count }} spec{{ repo.spec_count !== 1 ? 's' : '' }}</span>
      <span v-if="repo.docs.length" class="text-xs text-slate-400">{{ repo.docs.length }} doc{{ repo.docs.length !== 1 ? 's' : '' }}</span>
    </div>

    <div class="space-y-2">
      <router-link
        v-for="spec in repo.specs"
        :key="spec.file_path"
        :to="`/app/${auth.org}/specs/${repo.owner}/${repo.repo}/${spec.file_path}`"
        class="block p-3 border border-border-light/60 dark:border-slate-800 rounded-lg hover:border-accent-500 dark:hover:border-accent-600 transition-colors"
      >
        <div class="flex items-center gap-2 flex-wrap">
          <span class="font-medium text-sm text-slate-800 dark:text-slate-200">{{ spec.title }}</span>
          <StatusBadge :status="spec.status" />
          <span v-if="spec.is_indexed" class="text-xs px-1.5 py-0.5 rounded bg-blue-50 text-brand-600 dark:bg-blue-900/50 dark:text-blue-400">indexed</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 mt-2 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>
    </div>
  </div>

  <!-- Repos without specs -->
  <div v-if="reposWithoutSpecs.length > 0" class="mt-10">
    <h3 class="text-sm font-medium text-slate-500 dark:text-slate-400 mb-4">Repos without specs</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      <router-link
        v-for="repo in reposWithoutSpecs"
        :key="repo.full_name"
        :to="`/app/${auth.org}/repos/${repo.owner}/${repo.repo}`"
        class="p-3 border border-border-light/60 dark:border-slate-800 rounded-lg hover:border-accent-500 transition-colors text-sm text-slate-500"
      >
        {{ repo.full_name }}
      </router-link>
    </div>
  </div>
</template>
