<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { groupCorrectScoreSelections, type CsSelection } from '../../utils/correctScoreLayout';

const props = defineProps<{
  marketType: string;
  selections: Array<{
    id: string;
    selectionCode: string;
    selectionName: string;
    selectionDisplayName?: string;
    odds: string;
    oddsVersion: string;
  }>;
  isSelected: (id: string) => boolean;
  locked?: boolean;
}>();

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

const { t } = useI18n();

const columns = computed(() =>
  groupCorrectScoreSelections(
    props.selections.map((s) => ({
      ...s,
      selectionName: s.selectionDisplayName?.trim() || s.selectionName,
    })),
    props.marketType,
    t,
  ),
);

function onPick(sel: CsSelection) {
  if (props.locked) return;
  emit('pick', sel.id);
}

function formatOdds(odds: string) {
  const n = parseFloat(odds);
  return Number.isFinite(n) ? n.toFixed(2) : odds;
}
</script>

<template>
  <div class="cs-panel" :class="{ 'cs-panel--locked': locked }">
    <div class="cols-head">
      <span>{{ t('bet.col_home') }}</span>
      <span>{{ t('bet.col_draw') }}</span>
      <span>{{ t('bet.col_away') }}</span>
    </div>

    <div class="cols-grid">
      <div v-for="colKey in ['home', 'draw', 'away'] as const" :key="colKey" class="col">
        <button
          v-for="sel in columns[colKey]"
          :key="sel.id"
          type="button"
          class="score-card"
          :class="{ selected: isSelected(sel.id), 'score-card--locked': locked }"
          :disabled="locked"
          @click="onPick(sel)"
        >
          <span class="score-line">{{ sel.scoreDisplay }}</span>
          <span class="odds">{{ formatOdds(sel.odds) }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.cs-panel {
  padding: 6px 8px 0;
}

.cs-panel--locked {
  opacity: 0.72;
}

.cs-panel--locked .score-card {
  cursor: not-allowed;
}

.cols-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

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

.col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 42px;
  padding: 6px 3px;
  background: #161616;
  border: 1px solid #282828;
  border-radius: 3px;
  text-align: center;
}

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

.score-card--locked {
  background: #111;
  border-color: #333;
}

.score-card--locked .score-line,
.score-card--locked .odds {
  color: #666;
}

.score-line {
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
}

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