<template>
  <BaseBottomSheet :model-value="modelValue" label="Add sticker" @update:model-value="$emit('update:modelValue', $event)">
    <div class="sticker-tray">
      <div class="sticker-tray__cats" role="tablist">
        <button
          v-for="cat in STICKER_CATEGORIES"
          :key="cat.id"
          type="button"
          role="tab"
          :class="['sticker-tray__cat', { 'sticker-tray__cat--active': activeCategory === cat.id }]"
          @click="activeCategory = cat.id"
        >{{ cat.label }}</button>
      </div>
      <div class="sticker-tray__grid" role="tabpanel">
        <button
          v-for="s in visibleStickers"
          :key="s.id"
          type="button"
          class="sticker-tray__item"
          :aria-label="s.label"
          @click="$emit('pick', s.id)"
        >
          <span class="sticker-tray__emoji" aria-hidden="true">{{ s.emoji }}</span>
          <span class="sticker-tray__label">{{ s.label }}</span>
        </button>
      </div>
    </div>
  </BaseBottomSheet>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import BaseBottomSheet from '@/components/BaseBottomSheet.vue'
import { STICKERS, STICKER_CATEGORIES } from '@/assets/stickers/index'
import type { StickerCategory } from '@/assets/stickers/index'

defineProps<{ modelValue: boolean }>()
defineEmits<{
  (e: 'update:modelValue', v: boolean): void
  (e: 'pick', stickerId: string): void
}>()

const activeCategory = ref<StickerCategory>('seasonal')

const visibleStickers = computed(() =>
  STICKERS.filter(s => s.category === activeCategory.value)
)
</script>

<style scoped lang="scss">
.sticker-tray {
  &__cats {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }

  &__cat {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    color: var(--color-text-muted);
    transition: all var(--duration-fast);

    &--active {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-primary-fg);
    }
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-2) var(--space-1);
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background var(--duration-fast);

    &:active { background: var(--color-surface-2); }
  }

  &__emoji {
    font-size: 36px;
    line-height: 1;
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  }

  &__label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
  }
}
</style>
