<script setup lang="ts">
import { computed, ref } from 'vue'
import type { ColorGroup } from '@/types/mosaic'
import { rgbToHex } from '@/utils/colors'
import { useMosaicStore } from '@/stores/mosaic'

const props = defineProps<{ group: ColorGroup; selected: boolean; totalPixels: number }>()
const store = useMosaicStore()
const mergeTarget = ref('')
const otherGroups = computed(() => store.groups.filter((group) => group.id !== props.group.id))

function merge(): void {
  if (mergeTarget.value) store.mergeGroups(props.group.id, mergeTarget.value)
}
</script>

<template>
  <article class="group-card" :class="{ selected }">
    <button class="group-main" type="button" @click="store.selectedGroupId = selected ? null : group.id">
      <span class="number">{{ group.number }}</span>
      <span class="swatch" :style="{ backgroundColor: rgbToHex(group.color) }" />
      <span class="group-data">
        <b>{{ rgbToHex(group.color) }}</b>
        <small>RGB {{ group.color.r }}, {{ group.color.g }}, {{ group.color.b }} · L {{ group.labColor.l.toFixed(1) }}</small>
      </span>
      <span class="count">{{ group.regionIds.length }}×</span>
    </button>
    <div v-if="selected" class="group-details">
      <span>{{ totalPixels.toLocaleString('sk-SK') }} pixelov</span>
      <label class="color-edit">Farba <input type="color" :value="rgbToHex(group.color)" @change="store.setGroupColor(group.id, ($event.target as HTMLInputElement).value)" /></label>
      <div v-if="otherGroups.length" class="merge-row">
        <select v-model="mergeTarget" aria-label="Cieľová skupina">
          <option value="">Zlúčiť do…</option>
          <option v-for="target in otherGroups" :key="target.id" :value="target.id">Skupina {{ target.number }} · {{ rgbToHex(target.color) }}</option>
        </select>
        <button class="button small" type="button" :disabled="!mergeTarget" @click="merge">Zlúčiť</button>
      </div>
    </div>
  </article>
</template>

<style scoped>
.group-card { margin-top: 7px; overflow: hidden; border: 1px solid #dce2e9; border-radius: 9px; background: white; }
.group-card.selected { border-color: #7aa7ee; box-shadow: 0 0 0 2px #dbeafe; }
.group-main { display: grid; width: 100%; grid-template-columns: 27px 29px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.number { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #eef2f6; color: #334155; font-size: .73rem; font-weight: 750; }
.swatch { width: 27px; height: 27px; border: 1px solid #cbd5e1; border-radius: 6px; }
.group-data { min-width: 0; }
.group-data b, .group-data small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-data b { font-size: .77rem; }
.group-data small { margin-top: 2px; color: #64748b; font-size: .65rem; }
.count { color: #64748b; font-size: .71rem; }
.group-details { display: grid; gap: 8px; padding: 8px 9px; border-top: 1px solid #e6eaf0; background: #f8fafc; color: #64748b; font-size: .69rem; }
.color-edit { display: flex; align-items: center; justify-content: space-between; }
.color-edit input { width: 48px; height: 26px; padding: 1px; border: 1px solid #cbd5e1; border-radius: 5px; background: white; }
.merge-row { display: flex; gap: 6px; }
.merge-row select { min-width: 0; flex: 1; }
</style>
