<script setup lang="ts">
// <!-- ld-v2 --> Chain block: clickable parent and children with their chain
// kind in plain French (ratification / révision / révocation / élément).
import type { Decision } from '~/types/domain'
import { STATUS_LABELS } from '~/lexicon'
import { useCollectiveStore } from '~/stores/collective'
import { CHAIN_LABELS } from './decisionUi'

const props = defineProps<{ decision: Decision }>()

const col = useCollectiveStore()

const parent = computed(() =>
  props.decision.parentDecisionId
    ? col.decisions.find(d => d.id === props.decision.parentDecisionId)
    : undefined)

const parentLabel = computed(() =>
  props.decision.chainKind
    ? `${CHAIN_LABELS[props.decision.chainKind]} de`
    : 'liée à')

const children = computed(() =>
  col.decisions
    .filter(d => d.parentDecisionId === props.decision.id)
    .map(d => ({
      ...d,
      kindLabel: d.chainKind ? CHAIN_LABELS[d.chainKind] : 'liée',
    })))

const hasChain = computed(() => parent.value !== undefined || children.value.length > 0)
</script>

<template>
  <!-- ld-v2 -->
  <section v-if="hasChain" class="chain">
    <h2 class="chain__title">Chaînage</h2>

    <NuxtLink
      v-if="parent"
      :to="`/decisions/${parent.id}`"
      class="chain__link"
    >
      <UIcon name="i-lucide-corner-left-up" />
      <span class="chain__kind">{{ parentLabel }}</span>
      <span class="chain__name">{{ parent.title }}</span>
      <span class="status-pill" :class="`status-${parent.status}`">
        {{ STATUS_LABELS[parent.status] }}
      </span>
    </NuxtLink>

    <NuxtLink
      v-for="child in children"
      :key="child.id"
      :to="`/decisions/${child.id}`"
      class="chain__link"
    >
      <UIcon name="i-lucide-corner-down-right" />
      <span class="chain__kind">{{ child.kindLabel }}</span>
      <span class="chain__name">{{ child.title }}</span>
      <span class="status-pill" :class="`status-${child.status}`">
        {{ STATUS_LABELS[child.status] }}
      </span>
    </NuxtLink>
  </section>
</template>

<style scoped>
.chain { display: flex; flex-direction: column; gap: 0.5rem; }
.chain__title {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.chain__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-input);
  background: var(--mood-accent-soft);
  color: var(--mood-text);
  text-decoration: none;
  transition: transform 0.1s ease;
}
.chain__link:hover { transform: translateY(-1px); }
.chain__kind {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mood-accent);
  text-transform: none;
}
.chain__name {
  font-size: 0.9375rem;
  font-weight: 600;
  flex: 1;
  min-width: 10rem;
}
</style>
