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

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;
  /** PC 全宽紧凑：更小单元格、三列均分 */
  dense?: boolean;
}>();

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

const { t } = useI18n();
const { cancelClose } = useDesktopBetPopover();

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

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

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, 'cs-panel--dense': dense }"
    @mouseenter="cancelClose"
  >
    <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 }"
          :data-bet-selection-id="sel.id"
          :disabled="locked"
          @mouseenter="onPick(sel, $event)"
          @click="onPick(sel, $event)"
        >
          <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, minmax(0, 1fr));
  gap: 4px;
  align-items: start;
}

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

.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 42px;
  padding: 6px 3px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.score-card:hover:not(.score-card--locked) {
  border-color: var(--primary-light);
  background: var(--bg-hover);
}

.score-card.selected {
  border-color: var(--primary);
  border-width: 2px;
  background: rgba(0, 61, 107, 0.08);
}

.score-card.selected .score-line {
  color: var(--primary);
}

.score-card.selected .odds {
  color: var(--odds-accent);
}

.score-card--locked {
  background: #E8EDF2;
  border-color: #E5E7EB;
  cursor: not-allowed;
}

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

.score-line {
  font-size: 11px;
  font-weight: 800;
  color: #1A1A2E;
}

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

.cs-panel--dense {
  padding: 4px 6px 6px;
}

.cs-panel--dense .cols-head {
  font-size: 9px;
  margin-bottom: 3px;
}

.cs-panel--dense .cols-grid {
  gap: 3px;
}

.cs-panel--dense .col {
  gap: 3px;
}

.cs-panel--dense .score-card {
  min-height: 34px;
  padding: 4px 2px;
  gap: 2px;
  border-radius: 4px;
}

.cs-panel--dense .score-line {
  font-size: 10px;
}

.cs-panel--dense .odds {
  font-size: 9px;
}
</style>
