<script setup lang="ts">
import type { SpecDocument } from '@/api/types'
import StatusBadge from '@/components/common/StatusBadge.vue'

defineProps<{
  document: SpecDocument
  githubUrl: string
  org: string
  repoOwner: string
  repoName: string
}>()
</script>

<template>
  <div class="mb-8 p-6 border border-border-light dark:border-slate-700 rounded-lg bg-surface-light-alt dark:bg-surface-alt">
    <div class="flex items-start justify-between flex-wrap gap-4">
      <div>
        <h1 class="text-2xl font-bold font-display text-slate-800 dark:text-slate-100 mb-2">{{ document.frontmatter.title }}</h1>
        <div class="flex items-center gap-2 flex-wrap">
          <StatusBadge :status="document.frontmatter.status" />
          <span
            v-if="document.frontmatter.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': document.frontmatter.review_status === 'approved',
              'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-400': document.frontmatter.review_status === 'in_review',
              'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400': document.frontmatter.review_status === 'draft',
            }"
          >{{ document.frontmatter.review_status?.replace('_', ' ') }}</span>
          <span v-if="document.frontmatter.owner" class="text-xs text-slate-500">{{ document.frontmatter.owner }}</span>
          <span v-if="document.frontmatter.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">{{ document.frontmatter.team }}</span>
          <span v-for="tag in document.frontmatter.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="document.frontmatter.created">Created: {{ document.frontmatter.created }}</span>
          <span v-if="document.frontmatter.updated">Updated: {{ document.frontmatter.updated }}</span>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <router-link
          :to="`/app/${org}/editor/${repoOwner}/${repoName}/${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="githubUrl"
          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>
  </div>
</template>
