<script setup lang="ts">
// <!-- ld-v2 --> Registry filters: circles grouped by kind (lieu/thème/équipe
// icons), tags, « me concerne », weight, engraved 井, recorded entries.
import type { CircleKind, Weight } from '~/types/domain'
import { CONCERN_ME, ROUTE_SHORT } from '~/lexicon'
import { useCollectiveStore } from '~/stores/collective'
import { KIND_ICONS, KIND_LABELS, WEIGHT_SHORT } from './decisionUi'

const circleId = defineModel<string | null>('circleId', { default: null })
const tag = defineModel<string | null>('tag', { default: null })
const mine = defineModel<boolean>('mine', { default: false })
const weight = defineModel<Weight | null>('weight', { default: null })
const engraved = defineModel<boolean>('engraved', { default: false })
const recorded = defineModel<boolean>('recorded', { default: false })

const col = useCollectiveStore()

const KINDS: CircleKind[] = ['place', 'theme', 'team']

/** Circles grouped by kind — untyped circles last, under « Cercles ». */
const circleGroups = computed(() => {
  const groups = KINDS
    .map(kind => ({
      kind,
      icon: KIND_ICONS[kind],
      label: KIND_LABELS[kind],
      circles: col.circles.filter(c => c.kind === kind),
    }))
    .filter(g => g.circles.length > 0)
  const untyped = col.circles.filter(c => c.kind === undefined)
  if (untyped.length > 0) {
    groups.push({ kind: 'team', icon: 'i-lucide-circle-dashed', label: 'Cercles', circles: untyped })
  }
  return groups
})

const allTags = computed(() =>
  [...new Set(col.decisions.flatMap(d => d.tags))].sort((a, b) => a.localeCompare(b, 'fr')))

const WEIGHTS: Weight[] = ['light', 'binding', 'structural']

function toggleCircle(id: string) { circleId.value = circleId.value === id ? null : id }
function toggleTag(t: string) { tag.value = tag.value === t ? null : t }
function toggleWeight(w: Weight) { weight.value = weight.value === w ? null : w }
</script>

<template>
  <!-- ld-v2 -->
  <details class="reg-filters">
    <summary class="reg-filters__summary">
      <UIcon name="i-lucide-sliders-horizontal" />
      <span>Filtres</span>
      <span
        v-if="circleId || tag || mine || weight || engraved || recorded"
        class="reg-filters__dot"
      />
    </summary>

    <div class="reg-filters__body">
      <div v-for="group in circleGroups" :key="group.label" class="reg-filters__row">
        <span class="reg-filters__label">
          <UIcon :name="group.icon" />
          <span>{{ group.label }}</span>
        </span>
        <button
          v-for="circle in group.circles"
          :key="circle.id"
          type="button"
          class="reg-filters__chip"
          :class="{ 'reg-filters__chip--on': circleId === circle.id }"
          @click="toggleCircle(circle.id)"
        >
          {{ circle.name }}
        </button>
      </div>

      <div v-if="allTags.length > 0" class="reg-filters__row">
        <span class="reg-filters__label">
          <UIcon name="i-lucide-hash" />
          <span>Tags</span>
        </span>
        <button
          v-for="t in allTags"
          :key="t"
          type="button"
          class="reg-filters__chip"
          :class="{ 'reg-filters__chip--on': tag === t }"
          @click="toggleTag(t)"
        >
          #{{ t }}
        </button>
      </div>

      <div class="reg-filters__row">
        <span class="reg-filters__label">
          <UIcon name="i-lucide-anchor" />
          <span>Poids</span>
        </span>
        <button
          v-for="w in WEIGHTS"
          :key="w"
          type="button"
          class="reg-filters__chip"
          :class="{ 'reg-filters__chip--on': weight === w }"
          @click="toggleWeight(w)"
        >
          {{ WEIGHT_SHORT[w] }}
        </button>
      </div>

      <div class="reg-filters__row">
        <span class="reg-filters__label">
          <UIcon name="i-lucide-filter" />
          <span>Et aussi</span>
        </span>
        <button
          type="button"
          class="reg-filters__chip"
          :class="{ 'reg-filters__chip--on': mine }"
          @click="mine = !mine"
        >
          <UIcon name="i-lucide-hand" />
          <span>{{ CONCERN_ME }}</span>
        </button>
        <button
          type="button"
          class="reg-filters__chip"
          :class="{ 'reg-filters__chip--on': engraved }"
          @click="engraved = !engraved"
        >
          <span>井 gravées</span>
        </button>
        <button
          type="button"
          class="reg-filters__chip"
          :class="{ 'reg-filters__chip--on': recorded }"
          @click="recorded = !recorded"
        >
          <UIcon name="i-lucide-notebook-pen" />
          <span>{{ ROUTE_SHORT.record }}es</span>
        </button>
      </div>
    </div>
  </details>
</template>

<style scoped>
.reg-filters__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.375rem 1rem;
  border-radius: var(--r-pill);
  background: var(--mood-accent-soft);
  color: var(--mood-accent);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.reg-filters__summary::-webkit-details-marker { display: none; }
.reg-filters__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mood-accent);
}
.reg-filters__body {
  margin-top: 0.75rem;
  padding: 1rem 1.125rem;
  border-radius: var(--r-card);
  background: var(--mood-surface);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.reg-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.reg-filters__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mood-text-muted);
  min-width: 6rem;
}
.reg-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  border-radius: var(--r-pill);
  background: var(--mood-accent-soft);
  color: var(--mood-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.reg-filters__chip:hover { transform: translateY(-1px); color: var(--mood-text); }
.reg-filters__chip:active { transform: translateY(0); }
.reg-filters__chip--on {
  background: var(--mood-accent);
  color: var(--mood-accent-text);
}
</style>
