decision/frontend/app/pages/mandates/index.vue

<script setup lang="ts">
/**
 * Mandats — page index.
 *
 * Utilise SectionLayout avec status filters, recherche,
 * et sidebar "Boite a outils" affichant les protocoles de vote.
 * Etat vide enrichi avec onboarding expliquant le concept de mandat.
 */
import type { MandateCreate } from '~/stores/mandates'

const mandates = useMandatesStore()
const protocols = useProtocolsStore()
const auth = useAuthStore()

const activeStatus = ref<string | null>(null)
const searchQuery = ref('')
const sortBy = ref<'date' | 'title' | 'status'>('date')

const sortOptions = [
  { label: 'Date', value: 'date' },
  { label: 'Titre', value: 'title' },
  { label: 'Statut', value: 'status' },
]

// Create mandate modal state
const showCreateModal = ref(false)
const mandateTypeOptions = [
  { label: 'Comite technique', value: 'techcomm' },
  { label: 'Forgeron', value: 'smith' },
  { label: 'Personnalise', value: 'custom' },
]

const newMandate = ref<MandateCreate>({
  title: '',
  description: '',
  mandate_type: 'techcomm',
})
const creating = ref(false)

onMounted(async () => {
  await Promise.all([
    mandates.fetchAll(),
    protocols.fetchProtocols(),
  ])
})

/** Status filter pills with counts. */
const statuses = computed(() => [
  { id: 'draft', label: 'En prepa', count: mandates.list.filter(m => m.status === 'draft' || m.status === 'candidacy').length },
  { id: 'voting', label: 'En vote', count: mandates.list.filter(m => m.status === 'voting').length },
  { id: 'active', label: 'En vigueur', count: mandates.list.filter(m => m.status === 'active' || m.status === 'reporting').length },
  { id: 'closed', label: 'Clos', count: mandates.list.filter(m => m.status === 'completed' || m.status === 'revoked').length },
])

/** Map for status group filtering. */
const statusGroupMap: Record<string, string[]> = {
  draft: ['draft', 'candidacy'],
  voting: ['voting'],
  active: ['active', 'reporting'],
  closed: ['completed', 'revoked'],
}

/** Filtered and sorted mandates. */
const filteredMandates = computed(() => {
  let list = [...mandates.list]

  // Filter by status group
  if (activeStatus.value && statusGroupMap[activeStatus.value]) {
    const allowedStatuses = statusGroupMap[activeStatus.value]
    list = list.filter(m => allowedStatuses.includes(m.status))
  }

  // Filter by search query (client-side)
  if (searchQuery.value.trim()) {
    const q = searchQuery.value.toLowerCase()
    list = list.filter(m => m.title.toLowerCase().includes(q))
  }

  // Sort
  switch (sortBy.value) {
    case 'title':
      list.sort((a, b) => a.title.localeCompare(b.title, 'fr'))
      break
    case 'status':
      list.sort((a, b) => a.status.localeCompare(b.status))
      break
    case 'date':
    default:
      list.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
      break
  }

  return list
})

const typeLabel = (mandateType: string) => {
  switch (mandateType) {
    case 'techcomm': return 'Comite technique'
    case 'smith': return 'Forgeron'
    case 'custom': return 'Personnalise'
    default: return mandateType
  }
}

function formatDate(dateStr: string | null): string {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleDateString('fr-FR', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  })
}

async function handleCreate() {
  creating.value = true
  try {
    const mandate = await mandates.create(newMandate.value)
    showCreateModal.value = false
    newMandate.value = { title: '', description: '', mandate_type: 'techcomm' }
    if (mandate) {
      navigateTo(`/mandates/${mandate.id}`)
    }
  }
  catch {
    // Error handled by store
  }
  finally {
    creating.value = false
  }
}
</script>

<template>
  <SectionLayout
    title="Mandats"
    subtitle="Un contexte, un objectif, une duree, une ou plusieurs nominations ; par defaut : nomination d'un binome."
    :statuses="statuses"
    :active-status="activeStatus"
    @update:active-status="activeStatus = $event"
  >
    <!-- Search / sort bar -->
    <template #search>
      <div class="search-field">
        <UIcon name="i-lucide-search" class="search-field__icon" />
        <input
          v-model="searchQuery"
          type="text"
          class="search-field__input"
          placeholder="Rechercher un mandat..."
        />
      </div>
      <select v-model="sortBy" class="sort-select">
        <option v-for="opt in sortOptions" :key="opt.value" :value="opt.value">
          {{ opt.label }}
        </option>
      </select>
      <button
        v-if="auth.isAuthenticated"
        class="action-btn"
        @click="showCreateModal = true"
      >
        <UIcon name="i-lucide-plus" class="text-xs" />
        <span>Nouveau</span>
      </button>
    </template>

    <!-- Main content: mandates list -->
    <template #default>
      <!-- Error state -->
      <div v-if="mandates.error" class="flex items-center gap-3 p-4 rounded-lg" style="background: var(--mood-surface); border: 1px solid var(--mood-border);">
        <UIcon name="i-lucide-alert-circle" class="text-xl" style="color: var(--mood-error);" />
        <p style="color: var(--mood-text);">{{ mandates.error }}</p>
      </div>

      <!-- Loading state -->
      <div v-else-if="mandates.loading" class="space-y-3">
        <LoadingSkeleton v-for="i in 4" :key="i" :lines="2" card />
      </div>

      <!-- Onboarding empty state -->
      <div
        v-else-if="mandates.list.length === 0 && !activeStatus && !searchQuery"
        class="mandate-onboarding"
      >
        <div class="mandate-onboarding__icon">
          <UIcon name="i-lucide-user-check" class="text-3xl" />
        </div>
        <h3 class="mandate-onboarding__title">
          Qu'est-ce qu'un mandat ?
        </h3>
        <p class="mandate-onboarding__text">
          Un mandat definit un contexte, un objectif et une duree pour une mission de gouvernance.
          Il peut porter sur le comite technique, les forgerons, ou tout role specifique de la communaute.
        </p>
        <p class="mandate-onboarding__text">
          Par defaut, un mandat nomme un binome pour assurer la continuite.
          Le processus comprend : candidature, vote communautaire, periode active et rapport final.
        </p>
        <div class="mandate-onboarding__actions">
          <UButton
            v-if="auth.isAuthenticated"
            label="Creer un premier mandat"
            icon="i-lucide-plus"
            color="primary"
            size="sm"
            @click="showCreateModal = true"
          />
          <UButton
            to="/protocols"
            label="Decouvrir les protocoles"
            variant="outline"
            size="sm"
            icon="i-lucide-wrench"
          />
        </div>
      </div>

      <!-- Filtered empty state -->
      <div
        v-else-if="filteredMandates.length === 0"
        class="text-center py-12"
        style="color: var(--mood-text-muted);"
      >
        <UIcon name="i-lucide-user-check" class="text-4xl mb-3 block mx-auto" />
        <p>Aucun mandat trouve</p>
        <p v-if="searchQuery || activeStatus" class="text-sm mt-1">
          Essayez de modifier vos filtres
        </p>
      </div>

      <!-- Mandate cards -->
      <div v-else class="space-y-3">
        <div
          v-for="mandate in filteredMandates"
          :key="mandate.id"
          class="mandate-card"
          @click="navigateTo(`/mandates/${mandate.id}`)"
        >
          <div class="mandate-card__header">
            <div class="mandate-card__title-block">
              <h3 class="mandate-card__title">
                {{ mandate.title }}
              </h3>
              <p v-if="mandate.description" class="mandate-card__description">
                {{ mandate.description }}
              </p>
            </div>
            <StatusBadge :status="mandate.status" type="mandate" />
          </div>

          <div class="mandate-card__meta">
            <span class="mandate-card__type-badge">
              {{ typeLabel(mandate.mandate_type) }}
            </span>
            <span class="mandate-card__steps">
              <UIcon name="i-lucide-layers" class="text-xs" />
              {{ mandate.steps.length }} etape{{ mandate.steps.length !== 1 ? 's' : '' }}
            </span>
            <span v-if="mandate.mandatee_id" class="mandate-card__mandatee">
              <UIcon name="i-lucide-user" class="text-xs" />
              {{ mandate.mandatee_id.slice(0, 8) }}...
            </span>
          </div>

          <div class="mandate-card__dates">
            <span>Debut : {{ formatDate(mandate.starts_at) }}</span>
            <span>Fin : {{ formatDate(mandate.ends_at) }}</span>
          </div>
        </div>
      </div>
    </template>

    <!-- Toolbox sidebar -->
    <template #toolbox>
      <div class="toolbox-section-title">
        Modalites de vote
      </div>
      <template v-if="protocols.protocols.length > 0">
        <ToolboxVignette
          v-for="protocol in protocols.protocols"
          :key="protocol.id"
          :title="protocol.name"
          :bullets="['Applicable aux mandats', protocol.mode_params || 'Configuration standard']"
          :actions="[
            { label: 'Voir', icon: 'i-lucide-eye', to: `/protocols/${protocol.id}` },
          ]"
        />
      </template>
      <p v-else class="toolbox-empty-text">
        Aucun protocole configure
      </p>
    </template>
  </SectionLayout>

  <!-- Create mandate modal -->
  <UModal v-model:open="showCreateModal">
    <template #content>
      <form class="p-4 sm:p-6 space-y-4" @submit.prevent="handleCreate">
        <h3 class="text-base sm:text-lg font-semibold" style="color: var(--mood-text);">
          Nouveau mandat
        </h3>

        <div class="space-y-1">
          <label class="block text-sm font-medium" style="color: var(--mood-text-muted);">
            Titre <span style="color: var(--mood-error);">*</span>
          </label>
          <UInput
            v-model="newMandate.title"
            placeholder="Titre du mandat..."
            required
          />
        </div>

        <div class="space-y-1">
          <label class="block text-sm font-medium" style="color: var(--mood-text-muted);">
            Description
          </label>
          <UTextarea
            v-model="newMandate.description"
            placeholder="Description du mandat..."
            :rows="3"
          />
        </div>

        <div class="space-y-1">
          <label class="block text-sm font-medium" style="color: var(--mood-text-muted);">
            Type de mandat <span style="color: var(--mood-error);">*</span>
          </label>
          <USelect
            v-model="newMandate.mandate_type"
            :items="mandateTypeOptions"
          />
        </div>

        <div class="flex justify-end gap-2 pt-4" style="border-top: 1px solid var(--mood-border);">
          <UButton
            label="Annuler"
            variant="ghost"
            color="neutral"
            @click="showCreateModal = false"
          />
          <UButton
            type="submit"
            label="Creer"
            icon="i-lucide-plus"
            color="primary"
            :loading="creating"
            :disabled="!newMandate.title?.trim()"
          />
        </div>
      </form>
    </template>
  </UModal>
</template>

<style scoped>
.mandate-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--mood-surface);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

@media (min-width: 640px) {
  .mandate-card {
    gap: 0.625rem;
    padding: 1.25rem;
  }
}

.mandate-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--mood-shadow);
}

.mandate-card:active {
  transform: translateY(0);
}

.mandate-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.mandate-card__title-block {
  flex: 1;
  min-width: 0;
}

.mandate-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mood-text);
  line-height: 1.3;
}

@media (min-width: 640px) {
  .mandate-card__title {
    font-size: 1.0625rem;
  }
}

.mandate-card__description {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 640px) {
  .mandate-card__description {
    font-size: 0.875rem;
  }
}

.mandate-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

@media (min-width: 640px) {
  .mandate-card__meta {
    gap: 0.5rem;
  }
}

.mandate-card__steps {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}

.mandate-card__mandatee {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}

.mandate-card__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--mood-text-muted);
}

@media (min-width: 640px) {
  .mandate-card__dates {
    gap: 1rem;
    font-size: 0.8125rem;
  }
}

/* Onboarding empty state */
.mandate-onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  background: var(--mood-surface);
  border-radius: 20px;
}

@media (min-width: 640px) {
  .mandate-onboarding {
    gap: 1rem;
    padding: 3rem 2rem;
  }
}

.mandate-onboarding__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--mood-accent-soft);
  color: var(--mood-accent);
  font-size: 1.5rem;
}

@media (min-width: 640px) {
  .mandate-onboarding__icon {
    width: 4rem;
    height: 4rem;
    font-size: 1.75rem;
  }
}

.mandate-onboarding__title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--mood-text);
}

@media (min-width: 640px) {
  .mandate-onboarding__title {
    font-size: 1.375rem;
  }
}

.mandate-onboarding__text {
  font-size: 0.875rem;
  color: var(--mood-text-muted);
  line-height: 1.6;
  max-width: 32rem;
}

@media (min-width: 640px) {
  .mandate-onboarding__text {
    font-size: 0.9375rem;
  }
}

.mandate-onboarding__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.toolbox-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mood-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.toolbox-empty-text {
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}

.mandate-card__type-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--mood-accent-soft);
  color: var(--mood-accent);
}

/* --- Modern search / sort / action --- */
.search-field {
  flex: 1;
  min-width: 10rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--mood-accent-soft);
  border-radius: 12px;
  transition: box-shadow 0.15s ease;
}
.search-field:focus-within {
  box-shadow: 0 0 0 2.5px var(--mood-accent-soft);
}
.search-field__icon {
  color: var(--mood-text-muted);
  opacity: 0.5;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.search-field__input {
  flex: 1;
  background: none;
  font-size: 0.9375rem;
  color: var(--mood-text);
  min-width: 0;
}
.search-field__input::placeholder {
  color: var(--mood-text-muted);
  opacity: 0.4;
}

.sort-select {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mood-text);
  background: var(--mood-accent-soft);
  border-radius: 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 5.5rem;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mood-accent-text);
  background: var(--mood-accent);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}
.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--mood-shadow);
}
.action-btn:active {
  transform: translateY(0);
}
</style>