<template>
  <div class="fc-sgroup">
    <div class="fc-sgroup__header-row">
      <button
        v-if="collapsible"
        class="fc-sgroup__header fc-sgroup__header--btn"
        @click="open = !open"
      >
        <v-icon size="small">{{ open ? 'mdi-chevron-down' : 'mdi-chevron-right' }}</v-icon>
        {{ label }} ({{ items.length }})
      </button>
      <div v-else class="fc-sgroup__header">{{ label }}</div>
      <!-- "Confirm what's right, reject the rest": clears every still-unhandled
           suggestion in this section at once. Reversible (each stays flagged
           rejected with one-click un-reject), so no confirm dialog. -->
      <button
        v-if="rejectableCount > 0"
        class="fc-sgroup__reject-rest" type="button"
        :title="`Reject the ${rejectableCount} remaining ${label} suggestion${rejectableCount === 1 ? '' : 's'}`"
        @click="$emit('reject-all')"
      >Reject rest</button>
    </div>

    <div v-show="open" class="fc-sgroup__items">
      <SuggestionItem
        v-for="(s, i) in items" :key="`${s.display_name}-${i}`"
        :suggestion="s"
        @accept="$emit('accept', $event)"
        @dismiss="$emit('dismiss', $event)"
        @undismiss="$emit('undismiss', $event)"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import SuggestionItem from './SuggestionItem.vue'

const props = defineProps({
  label: { type: String, required: true },
  items: { type: Array, required: true },
  collapsible: { type: Boolean, default: false },
  defaultOpen: { type: Boolean, default: true }
})
defineEmits(['accept', 'dismiss', 'undismiss', 'reject-all'])

// Still-unhandled suggestions (not yet rejected) — how many "Reject rest" clears.
const rejectableCount = computed(() => props.items.filter((s) => !s.rejected).length)
const open = ref(props.collapsible ? props.defaultOpen : true)
</script>

<style scoped>
.fc-sgroup { margin-bottom: 10px; }
.fc-sgroup__header-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.fc-sgroup__header {
  flex: 1 1 auto; min-width: 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgb(var(--v-theme-on-surface-variant, var(--v-theme-on-surface)));
}
.fc-sgroup__header--btn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  padding: 0; text-align: left;
  font: inherit; text-transform: uppercase; letter-spacing: 0.06em;
}
/* Section-level "reject the remaining" — subtle until hovered so it doesn't
   compete with the per-row verdicts. */
.fc-sgroup__reject-rest {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: rgb(var(--v-theme-error));
  padding: 2px 5px; border-radius: 4px;
}
.fc-sgroup__reject-rest:hover { background: rgb(var(--v-theme-error), 0.1); }
.fc-sgroup__reject-rest:focus-visible {
  outline: 2px solid rgb(var(--v-theme-error)); outline-offset: 1px;
}
</style>
