<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { resolveSelectionLabel } from '../../utils/selectionLabel';

const props = defineProps<{
  selections: {
    id: string;
    selectionCode?: string;
    selectionName: string;
    selectionDisplayName?: string;
    odds: string;
  }[];
  isSelected: (id: string) => boolean;
  compact?: boolean;
  locked?: boolean;
  lineValue?: string | number | null;
}>();

const emit = defineEmits<{ pick: [id: string] }>();
const { t } = useI18n();

function label(sel: (typeof props.selections)[number]) {
  if (sel.selectionDisplayName?.trim()) return sel.selectionDisplayName;
  if (sel.selectionCode) {
    return resolveSelectionLabel(t, sel.selectionCode, sel.selectionName, {
      lineValue: props.lineValue,
    });
  }
  return sel.selectionName;
}

function onPick(id: string) {
  if (props.locked) return;
  emit('pick', id);
}
</script>

<template>
  <div class="wrap" :class="{ compact, locked }">
    <div class="panel">
      <button
        v-for="sel in selections"
        :key="sel.id"
        type="button"
        class="odds-btn"
        :class="{ selected: isSelected(sel.id), 'odds-btn--locked': locked }"
        :disabled="locked"
        @click="onPick(sel.id)"
      >
        <span class="label">{{ label(sel) }}</span>
        <span class="odds">{{ sel.odds }}</span>
      </button>
    </div>
  </div>
</template>

<style scoped>
.wrap {
  padding: 6px 8px 8px;
  background: #0c0c0c;
}

.wrap.locked {
  opacity: 0.78;
}

.panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.odds-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 4px;
  background: #141414;
  border: 1px solid #262626;
  text-align: center;
}

.odds-btn.selected {
  border-color: var(--primary);
  background: rgba(212, 175, 55, 0.1);
}

.odds-btn--locked {
  background: #111;
  border-color: #333;
  cursor: not-allowed;
}

.odds-btn--locked .label,
.odds-btn--locked .odds {
  color: #666;
}

.label {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.15;
}

.odds {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-light);
}
</style>
