<script lang="ts">
import type { TemplateId } from '~/data/templates'

/** Per-template icon — also becomes Collective.icon at creation (/creer). */
export const TEMPLATE_ICONS: Record<TemplateId, string> = {
  'blank': 'i-lucide-notebook-pen',
  'informal': 'i-lucide-coffee',
  'association': 'i-lucide-heart-handshake',
  'cooperative': 'i-lucide-wheat',
  'commune': 'i-lucide-map-pinned',
  'free-currency': 'i-lucide-coins',
  'symmetric': 'i-lucide-scale',
}

/** « Qui doit être d'accord ? » — the concrete line of each card. */
const TEMPLATE_AGREEMENT: Record<TemplateId, string> = {
  'blank': "celles et ceux que ça touche — sans objection maintenue, c'est adopté.",
  'informal': "le groupe, par consentement ; rien d'exigé avant de décider.",
  'association': 'les membres concernés ; nombreux, vous décidez en nuances — jamais deux camps.',
  'cooperative': 'celles et ceux que ça engage ; les nuances décident des grandes questions.',
  'commune': 'chaque périmètre à sa juste échelle ; les nuances au-delà du cercle proche.',
  'free-currency': "la toile entière sur les grands sujets — le pour/contre inertiel hérité de Ğ1.",
  'symmetric': 'tout le collectif, en pleine lumière — la transparence est la règle.',
}
</script>

<script setup lang="ts">
/** Étape 2 — les sept gabarits (blank en premier) + les deux collectifs à explorer. */
import { TEMPLATE_CARDS } from '~/data/templates'
import type { SeedName } from '~/stores/collective'

const selected = defineModel<TemplateId | null>({ required: true })
const emit = defineEmits<{ next: []; seed: [name: SeedName] }>()
</script>

<template>
  <!-- ld-v2 -->
  <section class="tplstep">
    <div class="tpl-grid">
      <button
        v-for="card in TEMPLATE_CARDS"
        :key="card.id"
        type="button"
        class="ld-card ld-card--hover tpl-card"
        :class="{ 'tpl-card--active': selected === card.id, 'tpl-card--blank': card.id === 'blank' }"
        :aria-pressed="selected === card.id"
        @click="selected = card.id"
        @dblclick="emit('next')"
      >
        <span class="tpl-card__top">
          <span class="tpl-card__icon"><UIcon :name="TEMPLATE_ICONS[card.id]" /></span>
          <span class="tpl-card__head">
            <span class="tpl-card__title">{{ card.title }}</span>
            <span class="tpl-card__subtitle">{{ card.subtitle }}</span>
          </span>
        </span>
        <span class="tpl-card__desc">{{ card.description }}</span>
        <span class="tpl-card__agree">
          <strong>Qui doit être d'accord ?</strong>
          {{ TEMPLATE_AGREEMENT[card.id] }}
        </span>
      </button>
    </div>

    <div class="tpl-seeds">
      <p class="tpl-seeds__label">Ou entre d'abord dans un collectif déjà vivant :</p>
      <div class="tpl-seeds__row">
        <button type="button" class="ld-btn ld-btn--ghost" @click="emit('seed', 'duniter-g1')">
          <UIcon name="i-lucide-coins" /> Explorer Duniter Ğ1
        </button>
        <button type="button" class="ld-btn ld-btn--ghost" @click="emit('seed', 'atelier-du-canal')">
          <UIcon name="i-lucide-hammer" /> Explorer l'Atelier du Canal
        </button>
      </div>
    </div>
  </section>
</template>

<style scoped>
.tplstep {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  width: 100%;
}

.tpl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

@media (min-width: 768px) {
  .tpl-grid { grid-template-columns: 1fr 1fr; }
  .tpl-card--blank { grid-column: 1 / -1; }
}

.tpl-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  padding: clamp(0.875rem, 2.5vw, 1.15rem);
  text-align: left;
  cursor: pointer;
  color: var(--mood-text);
  background: var(--mood-surface);
}
.tpl-card--active {
  box-shadow: var(--shadow-card), 0 0 0 2.5px var(--mood-accent);
}
.tpl-card--blank {
  background: var(--mood-accent-soft);
}

.tpl-card__top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.tpl-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--r-icon);
  font-size: 1.25rem;
  background: var(--mood-accent-soft);
  color: var(--mood-accent);
}

.tpl-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tpl-card__title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
}

.tpl-card__subtitle {
  font-size: 0.8125rem;
  font-weight: 600;
  font-style: italic;
  color: var(--mood-text-muted);
}

.tpl-card__desc {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--mood-text);
}

.tpl-card__agree {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--mood-text-muted);
}
.tpl-card__agree strong {
  font-weight: 700;
  color: var(--mood-accent);
}

.tpl-seeds {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  text-align: center;
}

.tpl-seeds__label {
  margin: 0;
  font-size: 0.875rem;
  color: var(--mood-text-muted);
}

.tpl-seeds__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
</style>
