<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;
    odds: string;
    oddsVersion: string;
  }>;
  stakes: Record<string, number>;
}>();

const emit = defineEmits<{
  'update:stakes': [Record<string, number>];
}>();

const { t } = useI18n();

const columns = computed(() =>
  groupCorrectScoreSelections(props.selections, props.marketType, t),
);

function setStake(sel: CsSelection, raw: string) {
  const n = Math.max(0, Number(raw) || 0);
  emit('update:stakes', { ...props.stakes, [sel.id]: n });
}

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

<template>
  <div class="cs-panel">
    <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">
        <div v-for="sel in columns[colKey]" :key="sel.id" class="score-card">
          <span class="score-line">{{ sel.scoreDisplay }}</span>
          <span class="odds">{{ formatOdds(sel.odds) }}</span>
          <input
            type="number"
            class="stake-input"
            min="0"
            step="1"
            inputmode="decimal"
            :placeholder="t('bet.stake_placeholder')"
            :value="stakes[sel.id] ?? ''"
            @input="setStake(sel, ($event.target as HTMLInputElement).value)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

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

.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;
  gap: 2px;
  padding: 4px 3px;
  background: #161616;
  border-radius: 3px;
}

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

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

.stake-input {
  width: 100%;
  padding: 4px 2px;
  border-radius: 2px;
  border: 1px solid #2a2a2a;
  background: #0a0a0a;
  color: var(--text);
  font-size: 12px;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}

.stake-input:focus {
  border-color: var(--border-gold-soft);
}

.stake-input::-webkit-outer-spin-button,
.stake-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
