<script setup lang="ts">
import { useRoute } from 'vue-router'
import type { RepoSummary } from '@/api/types'
import SpecCard from './SpecCard.vue'
import DocCard from './DocCard.vue'
import EmptyState from '@/components/common/EmptyState.vue'

defineProps<{ repo: RepoSummary }>()

const route = useRoute()
const org = route.params.org as string
</script>

<template>
  <div>
    <!-- Config summary -->
    <div v-if="repo.config" class="mb-8 p-4 border border-border-light dark:border-slate-700 rounded-lg bg-surface-light-alt dark:bg-surface-alt">
      <div class="flex items-center justify-between mb-2">
        <h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300">SPECWRIGHT.yaml</h3>
        <router-link
          :to="`/app/${org}/editor/${repo.owner}/${repo.repo}/config`"
          class="text-xs text-accent-500 hover:text-accent-400 transition-colors"
        >
          Edit
        </router-link>
      </div>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
        <div v-if="repo.config.team">
          <span class="text-slate-400">Team:</span>
          <span class="ml-1 text-slate-700 dark:text-slate-300">{{ repo.config.team }}</span>
        </div>
        <div v-if="repo.config.ticket_system">
          <span class="text-slate-400">Tickets:</span>
          <span class="ml-1 text-slate-700 dark:text-slate-300">{{ repo.config.ticket_system }}</span>
        </div>
        <div v-if="repo.config.project_key">
          <span class="text-slate-400">Project:</span>
          <span class="ml-1 text-slate-700 dark:text-slate-300">{{ repo.config.project_key }}</span>
        </div>
        <div>
          <span class="text-slate-400">PR Analysis:</span>
          <span class="ml-1 text-slate-700 dark:text-slate-300">{{ repo.config.agents.pr_analysis ? 'on' : 'off' }}</span>
        </div>
      </div>
    </div>

    <!-- Specs -->
    <div v-if="repo.specs.length > 0" class="mb-8">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-slate-800 dark:text-slate-200">
          Specs <span class="text-sm font-normal text-slate-400">({{ repo.specs.length }})</span>
        </h2>
        <router-link
          :to="`/app/${org}/editor/${repo.owner}/${repo.repo}/new`"
          class="inline-flex items-center gap-1 px-2.5 py-1 text-xs rounded-md bg-accent-500 text-white hover:bg-accent-600 transition-colors"
        >
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
          New Spec
        </router-link>
      </div>
      <div class="space-y-3">
        <SpecCard v-for="spec in repo.specs" :key="spec.file_path" :spec="spec" :owner="repo.owner" :repo="repo.repo" />
      </div>
    </div>

    <!-- Docs -->
    <div v-if="repo.docs.length > 0" class="mb-8">
      <h2 class="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-4">
        Docs <span class="text-sm font-normal text-slate-400">({{ repo.docs.length }})</span>
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <DocCard v-for="doc in repo.docs" :key="doc.path" :doc="doc" :owner="repo.owner" :repo="repo.repo" />
      </div>
    </div>

    <EmptyState v-if="!repo.specs.length && !repo.docs.length" heading="No specs or docs yet" description="Add a spec file in docs/specs/ to get started." />
  </div>
</template>
