decision/frontend/app/components/votes/VoteBinary.vue

<script setup lang="ts">
/**
 * Binary vote component: Pour / Contre.
 *
 * Displays two large buttons for binary voting with confirmation modal.
 * Integrates with the votes store and auth store for submission and access control.
 */
const props = defineProps<{
  sessionId: string
  disabled?: boolean
}>()

const auth = useAuthStore()
const votes = useVotesStore()

const submitting = ref(false)
const pendingVote = ref<'pour' | 'contre' | null>(null)
const showConfirm = ref(false)

/** Check if the current user has already voted in this session. */
const userVote = computed(() => {
  if (!auth.identity) return null
  return votes.votes.find(v => v.voter_id === auth.identity!.id && v.is_active)
})

const isDisabled = computed(() => {
  return props.disabled || !auth.isAuthenticated || !votes.isSessionOpen || submitting.value
})

function requestVote(value: 'pour' | 'contre') {
  if (isDisabled.value) return
  pendingVote.value = value
  showConfirm.value = true
}

async function confirmVote() {
  if (!pendingVote.value) return
  showConfirm.value = false
  submitting.value = true

  try {
    await votes.submitVote({
      session_id: props.sessionId,
      vote_value: pendingVote.value,
      signature: 'pending',
      signed_payload: 'pending',
    })
  } finally {
    submitting.value = false
    pendingVote.value = null
  }
}

function cancelVote() {
  showConfirm.value = false
  pendingVote.value = null
}

const confirmLabel = computed(() => {
  return pendingVote.value === 'pour'
    ? 'Confirmer le vote POUR'
    : 'Confirmer le vote CONTRE'
})
</script>

<template>
  <div class="space-y-4">
    <!-- Vote buttons -->
    <div class="flex gap-4">
      <UButton
        size="xl"
        :color="userVote?.vote_value === 'pour' ? 'success' : 'neutral'"
        :variant="userVote?.vote_value === 'pour' ? 'solid' : 'outline'"
        :disabled="isDisabled"
        :loading="submitting && pendingVote === 'pour'"
        icon="i-lucide-thumbs-up"
        class="flex-1 justify-center py-6 text-lg"
        @click="requestVote('pour')"
      >
        Pour
      </UButton>

      <UButton
        size="xl"
        :color="userVote?.vote_value === 'contre' ? 'error' : 'neutral'"
        :variant="userVote?.vote_value === 'contre' ? 'solid' : 'outline'"
        :disabled="isDisabled"
        :loading="submitting && pendingVote === 'contre'"
        icon="i-lucide-thumbs-down"
        class="flex-1 justify-center py-6 text-lg"
        @click="requestVote('contre')"
      >
        Contre
      </UButton>
    </div>

    <!-- Status messages -->
    <div v-if="!auth.isAuthenticated" class="text-sm text-amber-600 dark:text-amber-400 text-center">
      Connectez-vous pour voter
    </div>
    <div v-else-if="!votes.isSessionOpen" class="text-sm text-gray-500 text-center">
      Cette session de vote est fermee
    </div>
    <div v-else-if="userVote" class="text-sm text-green-600 dark:text-green-400 text-center">
      Vous avez vote : {{ userVote.vote_value === 'pour' ? 'Pour' : 'Contre' }}
    </div>

    <!-- Error display -->
    <div v-if="votes.error" class="text-sm text-red-500 text-center">
      {{ votes.error }}
    </div>

    <!-- Confirmation modal -->
    <UModal v-model:open="showConfirm">
      <template #content>
        <div class="p-6 space-y-4">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
            Confirmation du vote
          </h3>
          <p class="text-gray-600 dark:text-gray-400">
            Vous etes sur le point de voter
            <strong :class="pendingVote === 'pour' ? 'text-green-600' : 'text-red-600'">
              {{ pendingVote === 'pour' ? 'POUR' : 'CONTRE' }}
            </strong>.
            Cette action est definitive.
          </p>
          <div class="flex justify-end gap-3">
            <UButton variant="ghost" color="neutral" @click="cancelVote">
              Annuler
            </UButton>
            <UButton
              :color="pendingVote === 'pour' ? 'success' : 'error'"
              @click="confirmVote"
            >
              {{ confirmLabel }}
            </UButton>
          </div>
        </div>
      </template>
    </UModal>
  </div>
</template>