<template>
  <view
    class="nav-bar"
    :class="{ 'nav-bar--transparent': transparent }"
    :style="{ paddingTop: statusBarHeight + 'px' }"
  >
    <view class="nav-bar__inner">
      <!-- Back button -->
      <view v-if="showBack" class="nav-bar__left" @tap="handleBack">
        <text class="nav-bar__back-icon">‹</text>
      </view>
      <view v-else class="nav-bar__left" />

      <!-- Title -->
      <text class="nav-bar__title">{{ title }}</text>

      <!-- Right placeholder (balances the back button) -->
      <view class="nav-bar__right" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

defineProps<{
  title: string
  /** Transparent bg with white text — for pages with colored header */
  transparent?: boolean
  /** Show back arrow (for sub-pages navigated via navigateTo) */
  showBack?: boolean
}>()

const statusBarHeight = ref(0)

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  statusBarHeight.value = windowInfo.statusBarHeight ?? 20
})

function handleBack() {
  uni.navigateBack({ delta: 1 })
}
</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: #ffffff;

  &--transparent {
    background: transparent;

    .nav-bar__title {
      color: #ffffff;
    }

    .nav-bar__back-icon {
      color: #ffffff;
    }
  }

  &__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 24rpx;
  }

  &__left,
  &__right {
    width: 72rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  &__left {
    justify-content: flex-start;
  }

  &__right {
    justify-content: flex-end;
  }

  &__back-icon {
    font-size: 52rpx;
    font-weight: 300;
    color: #1a1a2e;
    line-height: 1;
    margin-top: -4rpx;
  }

  &__title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 600;
    color: #1a1a2e;
    letter-spacing: 2rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
