<script setup lang="ts">
import { ref } from 'vue'
import type { SpecDetail as SpecDetailType } from '@/api/types'
import SpecSummary from './SpecSummary.vue'
import SpecSectionCard from './SpecSectionCard.vue'

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

// null = default (done collapsed, rest expanded), true = all expanded, false = all collapsed
const allExpanded = ref<boolean | null>(null)

function expandAll() { allExpanded.value = true }
function collapseAll() { allExpanded.value = false }
function resetExpansion() { allExpanded.value = null }
</script>

<template>
  <div>
    <SpecSummary :spec="spec" :org="org" />

    <!-- Expand/Collapse controls -->
    <div class="flex items-center gap-2 mb-4">
      <button
        class="text-xs px-2 py-1 rounded border border-border-light dark:border-slate-700 text-slate-500 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated transition-colors"
        :class="{ 'bg-surface-light-elevated dark:bg-surface-elevated': allExpanded === true }"
        @click="expandAll"
      >Expand All</button>
      <button
        class="text-xs px-2 py-1 rounded border border-border-light dark:border-slate-700 text-slate-500 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated transition-colors"
        :class="{ 'bg-surface-light-elevated dark:bg-surface-elevated': allExpanded === false }"
        @click="collapseAll"
      >Collapse All</button>
      <button
        v-if="allExpanded !== null"
        class="text-xs px-2 py-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
        @click="resetExpansion"
      >Reset</button>
    </div>

    <!-- Section cards -->
    <div class="space-y-4">
      <SpecSectionCard
        v-for="section in spec.document.sections"
        :key="section.id"
        :section="section"
        :repo-owner="spec.repo_owner"
        :repo-name="spec.repo_name"
        :all-expanded="allExpanded"
        @reset-global="allExpanded = null"
      />
    </div>
  </div>
</template>
