<!-- Mes Persos › Fond du chat (image de fond personnalisée, viewer-side) -->
<template>
  <PrefSection title="🖼️ Fond du chat">
    <p class="pf-sub">URL d'une image (jpg, png, gif, webp…) ou laisse vide pour le fond par défaut.</p>
    <div class="bg-row">
      <input
        v-model="bgDraft"
        class="bg-input"
        type="text"
        placeholder="https://example.com/image.jpg"
        @keydown.enter="applyBg"
      />
      <button class="btn-apply" @click="applyBg" type="button">Appliquer</button>
      <button v-if="prefs.chatBgUrl" class="btn-reset" @click="resetBg" type="button">✕ Retirer</button>
    </div>
    <div v-if="prefs.chatBgUrl" class="bg-preview" :style="{ backgroundImage: `url(${prefs.chatBgUrl})` }" />
  </PrefSection>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useCustomStyles } from '@/composables/useCustomStyles';
import PrefSection from '@/components/shop/PrefSection.vue';

const { prefs } = useCustomStyles();

const bgDraft = ref(prefs.chatBgUrl);
watch(() => prefs.chatBgUrl, (v) => { bgDraft.value = v; });

function applyBg(): void { prefs.chatBgUrl = bgDraft.value.trim(); }
function resetBg(): void { prefs.chatBgUrl = ''; bgDraft.value = ''; }
</script>

<style scoped>
.bg-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.bg-input {
  flex: 1; background: #141420; border: 1px solid #222234; border-radius: 6px;
  color: #aaaacc; font-family: Arial, sans-serif; font-size: 12px; padding: 8px 12px; outline: none;
}
.bg-input:focus { border-color: #333355; }
.btn-apply {
  background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77;
  font-size: 12px; font-weight: bold; padding: 7px 14px; border-radius: 14px; cursor: pointer;
}
.btn-apply:hover { background: #234a23; }
.btn-reset {
  background: #2a1010; border: 1px solid #882222; color: #ff6655;
  font-size: 11px; padding: 7px 12px; border-radius: 14px; cursor: pointer;
}
.btn-reset:hover { background: #3a1818; }
.bg-preview {
  width: 100%; height: 80px; background-size: cover; background-position: center;
  border-radius: 6px; border: 1px solid #222234;
}
</style>
