<!-- Zone de messages scrollable avec la pub casino en overlay -->
<template>
  <div class="feed-wrapper">
    <!-- Messages -->
    <div ref="listEl" class="feed-scroll">
      <MessageItem
        v-for="msg in messages"
        :key="msg.id"
        :message="msg"
        :my-ip="myIp"
        @reply="$emit('reply', $event)"
      />
      <div v-if="messages.length === 0" class="feed-empty">
        Aucun message pour l'instant.
      </div>
    </div>

    <!-- Pub casino : overlay absolu sur la droite du feed (masqué si NoAds) -->
    <InlineCasinoAd v-if="!hideAds" class="casino-overlay" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import type { Message } from '@/composables/useMessages';
import MessageItem from './MessageItem.vue';
import InlineCasinoAd from './InlineCasinoAd.vue';

const props = defineProps<{ messages: Message[]; hideAds?: boolean; myIp?: string }>();
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();

const listEl = ref<HTMLElement | null>(null);

// Auto-scroll vers le bas à chaque nouveau message
watch(
  () => props.messages.length,
  async () => {
    await nextTick();
    if (listEl.value) {
      listEl.value.scrollTop = listEl.value.scrollHeight;
    }
  },
);
</script>

<style scoped>
.feed-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.feed-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: #252535 #080810;
}
.feed-scroll::-webkit-scrollbar       { width: 8px; }
.feed-scroll::-webkit-scrollbar-track { background: #080810; }
.feed-scroll::-webkit-scrollbar-thumb { background: #252535; border-radius: 3px; }

.feed-empty {
  padding: 48px 25px;
  color: #2a2a44;
  font-family: Arial, sans-serif;
  font-size: 13px;
}

/* Positionné en absolu sur la droite du wrapper */
.casino-overlay {
  position: absolute;
  right: 30px;
  top: 20px;
  pointer-events: none;
}
.casino-overlay :deep(.casino-cta) {
  pointer-events: all;
}
</style>
