<script setup lang="ts">
import { computed } from 'vue'
import type { SpecDetail as SpecDetailType, SpecSection } from '@/api/types'
import StatusBadge from '@/components/common/StatusBadge.vue'

const props = defineProps<{
  spec: SpecDetailType
  org: string
}>()

interface CoverageStats {
  totalSections: number
  doneSections: number
  totalAc: number
  doneAc: number
  pct: number
}

function walkSections(sections: SpecSection[], stats: CoverageStats) {
  for (const s of sections) {
    stats.totalSections++
    const state = typeof s.status === 'string' ? s.status : s.status.state
    if (state === 'done') stats.doneSections++
    for (const ac of s.acceptance_criteria) {
      stats.totalAc++
      if (ac.checked) stats.doneAc++
    }
    if (s.children?.length) walkSections(s.children, stats)
  }
}

const coverage = computed<CoverageStats>(() => {
  const stats: CoverageStats = { totalSections: 0, doneSections: 0, totalAc: 0, doneAc: 0, pct: 0 }
  walkSections(props.spec.document.sections, stats)
  stats.pct = stats.totalAc > 0 ? Math.round((stats.doneAc / stats.totalAc) * 100) : 0
  return stats
})

const fm = computed(() => props.spec.document.frontmatter)

function reviewClass(r: string) {
  const map: Record<string, string> = {
    draft: 'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400',
    in_review: 'bg-purple-50 text-purple-700 dark:bg-purple-900/50 dark:text-purple-400',
    approved: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-400',
  }
  return map[r] || map.draft
}
</script>

<template>
  <div class="mb-6 p-6 border border-border-light dark:border-slate-700 rounded-lg bg-surface-light-alt dark:bg-surface-alt">
    <!-- Title row -->
    <div class="flex items-start justify-between flex-wrap gap-4">
      <div class="flex-1 min-w-0">
        <h1 class="text-2xl font-bold font-display text-slate-800 dark:text-slate-100 mb-2">
          {{ fm.title }}
        </h1>

        <!-- Badges row -->
        <div class="flex items-center gap-2 flex-wrap">
          <StatusBadge :status="fm.status" />
          <span
            v-if="fm.review_status"
            class="text-xs px-1.5 py-0.5 rounded"
            :class="reviewClass(fm.review_status)"
          >{{ fm.review_status.replace('_', ' ') }}</span>
          <span v-if="fm.owner" class="text-xs text-slate-500">{{ fm.owner }}</span>
          <span
            v-if="fm.team"
            class="text-xs px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-700 dark:bg-accent-900/50 dark:text-accent-400"
          >{{ fm.team }}</span>
          <span
            v-for="tag in fm.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>

        <!-- Dates -->
        <div class="flex items-center gap-4 mt-2 text-xs text-slate-400">
          <span v-if="fm.created">Created: {{ fm.created }}</span>
          <span v-if="fm.updated">Updated: {{ fm.updated }}</span>
        </div>
      </div>

      <!-- Action buttons -->
      <div class="flex items-center gap-2">
        <router-link
          :to="`/app/${org}/editor/${spec.repo_owner}/${spec.repo_name}/${spec.document.file_path}`"
          class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-border-light dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated transition-colors"
        >
          Edit
        </router-link>
        <a
          :href="spec.github_url"
          target="_blank"
          rel="noopener"
          class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-border-light dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated transition-colors"
        >View on GitHub</a>
      </div>
    </div>

    <!-- Coverage bar -->
    <div v-if="coverage.totalAc > 0" class="mt-4">
      <div class="flex items-center gap-3">
        <div class="flex-1 h-2 rounded-full bg-surface-light-elevated dark:bg-slate-700 overflow-hidden">
          <div
            class="h-full rounded-full transition-all duration-300"
            :class="coverage.pct === 100 ? 'bg-emerald-500' : 'bg-brand-500'"
            :style="{ width: coverage.pct + '%' }"
          ></div>
        </div>
        <span class="text-xs text-slate-500 tabular-nums whitespace-nowrap">
          {{ coverage.doneAc }}/{{ coverage.totalAc }} ACs ({{ coverage.pct }}%)
        </span>
      </div>
      <div class="flex gap-4 mt-1 text-[11px] text-slate-400">
        <span>{{ coverage.doneSections }}/{{ coverage.totalSections }} sections done</span>
      </div>
    </div>
  </div>
</template>
