<script setup lang="ts">
import { toRef } from 'vue';
import { useI18n } from 'vue-i18n';
import { useBackToTop } from '../composables/useBackToTop';

const props = defineProps<{
  scrollEl: HTMLElement | null;
  aboveNav?: boolean;
}>();

const { t } = useI18n();
const { visible, scrollToTop } = useBackToTop(toRef(props, 'scrollEl'));
</script>

<template>
  <Transition name="back-top-fade">
    <button
      v-if="visible"
      type="button"
      class="back-top-btn"
      :class="{ 'above-nav': aboveNav }"
      :aria-label="t('common.back_to_top')"
      @click="scrollToTop"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M12 5.5 6 11.5l1.4 1.4 3.6-3.6V18h2V9.3l3.6 3.6 1.4-1.4-6-6Z"
          fill="currentColor"
        />
      </svg>
    </button>
  </Transition>
</template>

<style scoped>
.back-top-btn {
  position: fixed;
  right: 16px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-gold-soft, rgba(200, 168, 78, 0.35));
  background: rgba(17, 17, 17, 0.92);
  color: var(--primary-light, #c8a84e);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.back-top-btn.above-nav {
  bottom: calc(var(--player-bottom-nav-h, 54px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px);
}

.back-top-btn:active {
  background: rgba(200, 168, 78, 0.16);
  transform: scale(0.96);
}

.back-top-btn svg {
  width: 22px;
  height: 22px;
}

.back-top-fade-enter-active,
.back-top-fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-top-fade-enter-from,
.back-top-fade-leave-to {
  opacity: 0;
  transform: translateY(8px);
}
</style>
