<script setup lang="ts">
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import DkuSpinner from '@/components/DkuSpinner.vue'

defineProps<{
  versionId: string
  title: string
  description: string
  breadcrumbItems?: { label: string; to?: string }[]
  // Save/Discard props
  showSaveDiscard?: boolean
  hasUnsavedChanges?: boolean
  isSaving?: boolean
}>()

const emit = defineEmits<{
  save: []
  discard: []
}>()
</script>

<template>
  <div class="flex items-center justify-between border-b border-sidebar-border bg-background px-6 py-1">
    <div>
      <!-- Breadcrumb -->
      <div class="flex items-center gap-2">
        <template v-if="breadcrumbItems?.length">
          <template v-for="(item, index) in breadcrumbItems" :key="index">
            <i v-if="index > 0" class="dku-icon-chevron-right-16 text-muted-foreground" />
            <router-link
              v-if="item.to"
              :to="item.to"
              class="subs-333 hover:underline"
            >
              {{ item.label }}
            </router-link>
            <span
              v-else
              :class="index === breadcrumbItems.length - 1 ? 'tile-title-222' : 'subs-333'"
            >
              {{ item.label }}
            </span>
          </template>
        </template>
        <template v-else>
          <span class="tile-title-222">{{ title }}</span>
        </template>
      </div>
      <p v-if="description" class="body-444 mt-1">
        {{ description }}
      </p>
    </div>

    <div class="flex items-center gap-3">
      <!-- Built-in Save/Discard buttons -->
      <template v-if="showSaveDiscard">
        <Tooltip v-if="hasUnsavedChanges">
          <TooltipTrigger as-child>
            <button
              class="btn-secondary inline-flex items-center justify-center"
              :disabled="isSaving"
              @click="emit('discard')"
            >
              <i class="dku-icon-arrow-undo-16" />
            </button>
          </TooltipTrigger>
          <TooltipContent>Discard changes</TooltipContent>
        </Tooltip>
        <button
          class="btn-primary inline-flex items-center gap-2 disabled:opacity-50"
          :disabled="isSaving || !hasUnsavedChanges"
          @click="emit('save')"
        >
          <DkuSpinner v-if="isSaving" size="md" />
          <i v-else class="dku-icon-save-16" />
          Save
        </button>
      </template>
      <!-- Additional actions slot -->
      <slot name="actions" />
    </div>
  </div>
</template>
