<script setup lang="ts">
// Sticky save bar — appears at bottom-center of the page when any field
// in the active tab is dirty. Dark pill with Discard + Save changes.

defineProps<{ dirty: boolean }>()
defineEmits<{ discard: []; save: [] }>()
</script>

<template>
  <Teleport to="body">
    <Transition name="lift">
      <div v-if="dirty" class="save-bar">
        <span class="pulse" />
        <div class="text">
          <span class="t1">You have unsaved changes</span>
          <span class="t2">changes are queued · not yet applied</span>
        </div>
        <button class="discard" @click="$emit('discard')">Discard</button>
        <button class="save" @click="$emit('save')">
          <UiIcon name="check" :size="13" :stroke-width="2.4" />
          Save changes
        </button>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.save-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 420px;
  padding: 12px 14px 12px 20px;
  background: var(--text);
  color: var(--bg);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  z-index: 70;
  font-family: var(--font-sans);
}

.pulse {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(212, 255, 58, 0.18);
}

.text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.t1 { font-size: 13px; font-weight: 500; }
.t2 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; opacity: 0.55; }

.discard, .save {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
}
.discard { background: transparent; color: var(--bg); opacity: 0.7; }
.discard:hover { opacity: 1; }

.save {
  background: var(--accent);
  color: var(--accent-fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  padding: 8px 16px;
}
.save:hover { filter: brightness(0.94); }

.lift-enter-active, .lift-leave-active {
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s;
}
.lift-enter-from, .lift-leave-to { transform: translate(-50%, 24px); opacity: 0; }
</style>
