<!-- Bouton d'envoi — clic gauche : envoyer / clic droit : personnaliser le style -->
<template>
  <button
    class="send-btn"
    :disabled="disabled"
    :style="btnStyle"
    aria-label="Envoyer"
    title="Clic droit pour personnaliser"
    @click="$emit('send')"
    @contextmenu.prevent="onRightClick"
  >
    <span v-if="activeSkinChar" class="skin-char">{{ activeSkinChar }}</span>
    <svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
      <polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
    </svg>
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { openContextMenu } from '@/composables/useContextMenu';
import { useCustomStyles, SEND_BUTTON_PRESETS } from '@/composables/useCustomStyles';
import { useMyPerks } from '@/composables/useMessages';

defineProps<{ disabled?: boolean }>();
defineEmits<{ send: [] }>();

const { prefs } = useCustomStyles();
const { myPerks } = useMyPerks();

const activeSkinChar = computed(() => {
  const skinId = prefs.sendSkin;
  if (!skinId) return null;
  return myPerks.value.sendSkins?.find((s) => s.id === skinId)?.char ?? null;
});

const btnStyle = computed(() => {
  const p = SEND_BUTTON_PRESETS[prefs.sendButton];
  return { background: p.bg, color: p.color, borderRadius: p.radius };
});

function onRightClick(e: MouseEvent): void {
  if (!myPerks.value.elementSkin) return;
  openContextMenu({
    x: e.clientX,
    y: e.clientY,
    title: 'Bouton d\'envoi',
    items: Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
      value: k,
      label: v.label,
      swatch: v.color,
    })),
    current: prefs.sendButton,
    onSelect: (v) => { prefs.sendButton = v as typeof prefs.sendButton; },
  });
}
</script>

<style scoped>
.send-btn {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid #ffffff10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s;
}
.send-btn:hover:not(:disabled) { filter: brightness(1.3); }
.send-btn:active:not(:disabled) { filter: brightness(0.85); }
.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.skin-char { font-size: 18px; line-height: 1; }
</style>
