<script setup lang="ts">
// Q0 « déjà décidé ? » — inline results while typing, from the ONE search
// index (same as Cmd+K). Max 3: standing clauses first, then close decisions.
import type { Id } from '~/types/domain'
import { useCollectiveStore } from '~/stores/collective'
import { useSearch } from '~/composables/useSearch'

const props = defineProps<{ title: string; linkedClauseId?: Id }>()
const emit = defineEmits<{ (e: 'contest', clauseId: Id): void }>()

const col = useCollectiveStore()
const { search } = useSearch()

interface Q0Hit {
  kind: 'clause' | 'decision'
  id: Id
  label: string
  to: string
}

const hits = computed<Q0Hit[]>(() => {
  const needle = props.title.trim()
  if (needle.length < 3) return []
  const out: Q0Hit[] = []
  for (const hit of search(needle)) {
    if (out.length >= 3) break
    if (hit.kind === 'clause') {
      const clause = col.clauses.find(c => c.id === hit.id)
      const doc = col.docs.find(d => d.id === clause?.docId)
      out.push({
        kind: 'clause',
        id: hit.id,
        label: hit.label,
        to: doc ? `/textes/${doc.slug}` : '/textes',
      })
    } else if (hit.kind === 'decision') {
      out.push({ kind: 'decision', id: hit.id, label: hit.label, to: `/decisions/${hit.id}` })
    }
  }
  return out
})
</script>

<template>
  <!-- ld-v2 -->
  <div v-if="hits.length > 0" class="q0">
    <div v-for="hit in hits" :key="hit.id" class="q0__row">
      <template v-if="hit.kind === 'clause'">
        <UIcon name="i-lucide-book-open-check" class="q0__icon" />
        <NuxtLink :to="hit.to" class="q0__link">
          C'est déjà décidé ({{ hit.label }}) — agis
        </NuxtLink>
        <button
          class="q0__contest"
          type="button"
          :class="{ 'q0__contest--active': linkedClauseId === hit.id }"
          @click="emit('contest', hit.id)"
        >
          Conteste la règle
        </button>
      </template>
      <template v-else>
        <UIcon name="i-lucide-history" class="q0__icon q0__icon--decision" />
        <NuxtLink :to="hit.to" class="q0__link">
          Décision proche : {{ hit.label }}
        </NuxtLink>
      </template>
    </div>
  </div>
</template>

<style scoped>
.q0 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem 0;
}
.q0__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.q0__icon { color: var(--mood-accent); flex-shrink: 0; }
.q0__icon--decision { color: var(--mood-text-muted); }
.q0__link {
  color: var(--mood-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mood-accent) 45%, transparent);
  text-underline-offset: 3px;
}
.q0__link:hover { color: var(--mood-accent); }
.q0__contest {
  background: none;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mood-accent);
  background: var(--mood-accent-soft);
  cursor: pointer;
}
.q0__contest--active { box-shadow: 0 0 0 2px var(--mood-accent); }
</style>
