<script setup lang="ts">
const props = withDefaults(defineProps<{
  status: string
  type?: 'document' | 'decision' | 'mandate' | 'vote' | 'version'
  clickable?: boolean
  active?: boolean
}>(), {
  clickable: true,
  active: false,
})

const emit = defineEmits<{
  click: []
}>()

const STATUS_MAP: Record<string, { label: string; cssClass: string }> = {
  // Universal statuses
  draft: { label: 'En prepa', cssClass: 'status-prepa' },
  active: { label: 'En vigueur', cssClass: 'status-vigueur' },
  closed: { label: 'Clos', cssClass: 'status-clos' },

  // Decision/vote specific
  qualification: { label: 'En prepa', cssClass: 'status-prepa' },
  review: { label: 'En prepa', cssClass: 'status-prepa' },
  voting: { label: 'En vote', cssClass: 'status-vote' },
  open: { label: 'En vote', cssClass: 'status-vote' },
  executed: { label: 'En vigueur', cssClass: 'status-vigueur' },

  // Version specific
  pending: { label: 'En prepa', cssClass: 'status-prepa' },
  accepted: { label: 'En vigueur', cssClass: 'status-vigueur' },
  rejected: { label: 'Clos', cssClass: 'status-clos' },

  // Mandate specific
  formulation: { label: 'En prepa', cssClass: 'status-prepa' },
  candidature: { label: 'En prepa', cssClass: 'status-prepa' },
  candidacy: { label: 'En prepa', cssClass: 'status-prepa' },
  investiture: { label: 'En vote', cssClass: 'status-vote' },
  revoked: { label: 'Clos', cssClass: 'status-clos' },
  completed: { label: 'Clos', cssClass: 'status-clos' },
  archived: { label: 'Clos', cssClass: 'status-clos' },
  reporting: { label: 'En vote', cssClass: 'status-vote' },
}

const resolved = computed(() => {
  return STATUS_MAP[props.status] ?? { label: props.status, cssClass: 'status-prepa' }
})

function handleClick() {
  if (props.clickable) {
    emit('click')
  }
}
</script>

<template>
  <button
    v-if="clickable"
    type="button"
    class="status-pill"
    :class="[resolved.cssClass, { active: active }]"
    @click="handleClick"
  >
    {{ resolved.label }}
  </button>
  <span
    v-else
    class="status-pill"
    :class="[resolved.cssClass]"
  >
    {{ resolved.label }}
  </span>
</template>
