<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useAdminLocale } from '../../composables/useAdminLocale';
import api from '../../api';
import { ensureLeagueExpanded } from '../../utils/matchesListState';
import { formatAmount } from '../../utils/format-amount';
const props = defineProps<{
  leagueId: string;
  filterStatus: string;
  keyword: string;
}>();

const emit = defineEmits<{
  changed: [];
  'add-match': [];
}>();

const { t, locale } = useAdminLocale();
const router = useRouter();
const matches = ref<unknown[]>([]);
const loading = ref(false);

async function load() {
  loading.value = true;
  try {
    const { data } = await api.get(`/admin/leagues/${props.leagueId}/matches`, {
      params: {
        status: props.filterStatus || undefined,
        keyword: props.keyword.trim() || undefined,
        locale: locale.value,
      },
    });
    matches.value = data.data.items;
  } catch (e: unknown) {
    const err = e as { response?: { data?: { error?: string } } };
    ElMessage.error(err.response?.data?.error ?? t('msg.load_matches_failed'));
  } finally {
    loading.value = false;
  }
}

watch(
  () => [props.leagueId, props.filterStatus, props.keyword, locale.value] as const,
  () => load(),
  { immediate: true },
);

function notifyParent() {
  emit('changed');
  load();
}

async function publish(id: string) {
  await api.post(`/admin/matches/${id}/publish`);
  await api.post(`/admin/matches/${id}/markets/templates`, {
    marketTypes: [
      'FT_1X2',
      'FT_HANDICAP',
      'FT_OVER_UNDER',
      'FT_ODD_EVEN',
      'HT_1X2',
      'HT_HANDICAP',
      'HT_OVER_UNDER',
      'FT_CORRECT_SCORE',
      'HT_CORRECT_SCORE',
      'SH_CORRECT_SCORE',
    ],
  });
  ElMessage.success(t('msg.published'));
  notifyParent();
}

async function close(id: string) {
  await api.post(`/admin/matches/${id}/close`);
  ElMessage.success(t('msg.closed'));
  notifyParent();
}

function beforeLeaveList() {
  ensureLeagueExpanded(props.leagueId);
}

function openManage(id: string) {
  beforeLeaveList();
  router.push(`/matches/${id}/edit`);
}

function openMarkets(id: string) {
  beforeLeaveList();
  router.push(`/matches/${id}/markets`);
}

function settle(id: string) {
  beforeLeaveList();
  router.push(`/settlement/${id}`);
}

type TagType = '' | 'info' | 'success' | 'warning' | 'danger';
function matchStatusText(status: string) {
  const key = `match.status.${status}`;
  const v = t(key);
  return v !== key ? v : status;
}
const statusTagTypes: Record<string, TagType> = {
  DRAFT: 'info',
  PUBLISHED: 'warning',
  CLOSED: 'danger',
  SETTLED: 'success',
};

function rowOf(row: unknown) {
  return row as Record<string, unknown>;
}
function matchStatus(row: unknown) {
  return String(rowOf(row).status ?? '');
}
function matchStatusLabel(row: unknown) {
  return matchStatusText(matchStatus(row));
}
function matchStatusType(row: unknown): TagType {
  return statusTagTypes[matchStatus(row)] ?? 'info';
}
function matchId(row: unknown) {
  return String(rowOf(row).id ?? '');
}
function matchTime(row: unknown) {
  return new Date(String(rowOf(row).startTime)).toLocaleString();
}
function betCount(row: unknown) {
  return Number(rowOf(row).betCount ?? 0);
}
function totalStake(row: unknown) {
  return formatAmount(String(rowOf(row).totalStake ?? '0'));
}
function pendingBets(row: unknown) {
  return Number(rowOf(row).pendingBets ?? 0);
}

function matchTitle(row: unknown) {
  const r = rowOf(row);
  const home =
    String(r.homeTeamName ?? '').trim() ||
    (r.homeTeam as { code?: string })?.code ||
    '';
  const away =
    String(r.awayTeamName ?? '').trim() ||
    (r.awayTeam as { code?: string })?.code ||
    '';
  if (home && away) return `${home} vs ${away}`;
  const matchName = String(r.matchName ?? '').trim();
  return matchName || '—';
}
function canManage(row: unknown) {
  const s = matchStatus(row);
  return s === 'DRAFT' || s === 'PUBLISHED';
}
function canDeleteRow(row: unknown) {
  return matchStatus(row) === 'DRAFT';
}
function canPublishRow(row: unknown) {
  return matchStatus(row) === 'DRAFT';
}
function canCloseRow(row: unknown) {
  return matchStatus(row) === 'PUBLISHED';
}
function canSettleRow(row: unknown) {
  return matchStatus(row) !== 'DRAFT';
}

async function confirmDelete(row: unknown) {
  const id = matchId(row);
  const title = matchTitle(row);
  try {
    await ElMessageBox.confirm(t('match.delete_confirm_body', { title }), t('match.delete_confirm_title'), {
      type: 'warning',
      confirmButtonText: t('common.delete'),
      cancelButtonText: t('common.cancel'),
    });
    await api.delete(`/admin/matches/${id}`);
    ElMessage.success(t('msg.deleted'));
    notifyParent();
  } catch (e) {
    if (e === 'cancel' || (e as { message?: string })?.message === 'cancel') return;
    const err = e as { response?: { data?: { error?: string } } };
    ElMessage.error(err.response?.data?.error ?? t('msg.delete_failed'));
  }
}

defineExpose({ reload: load });
</script>

<template>
  <div class="league-matches-panel">
    <div class="panel-toolbar">
      <el-button type="primary" size="small" @click="emit('add-match')">
        {{ t('match.create_fixture_btn') }}
      </el-button>
    </div>
    <el-table v-loading="loading" :data="matches" stripe row-key="id" class="nested-match-table">
      <el-table-column prop="id" label="ID" width="64" />
      <el-table-column :label="t('match.col.matchup')" min-width="180">
        <template #default="{ row }">
          <span class="matchup-link">{{ matchTitle(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('common.status')" width="88">
        <template #default="{ row }">
          <el-tag :type="matchStatusType(row)" size="small">{{ matchStatusLabel(row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="t('match.col.kickoff')" min-width="150">
        <template #default="{ row }">{{ matchTime(row) }}</template>
      </el-table-column>
      <el-table-column :label="t('match.col.bet_count')" width="72" align="center">
        <template #default="{ row }">
          <span :class="{ 'bet-stat-active': betCount(row) > 0 }">{{ betCount(row) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('match.col.total_stake')" width="100" align="right">
        <template #default="{ row }">{{ totalStake(row) }}</template>
      </el-table-column>
      <el-table-column :label="t('match.col.pending_bets')" width="80" align="center">
        <template #default="{ row }">
          <el-tag v-if="pendingBets(row) > 0" type="warning" size="small" effect="plain">
            {{ pendingBets(row) }}
          </el-tag>
          <span v-else class="bet-stat-zero">0</span>
        </template>
      </el-table-column>
      <el-table-column :label="t('common.actions')" width="460" align="center">
        <template #default="{ row }">
          <div class="action-btns">
            <div class="action-group">
              <el-button
                size="small"
                type="primary"
                :disabled="!canManage(row)"
                @click="openManage(matchId(row))"
              >
                {{ t('matchEditor.manage_btn') }}
              </el-button>
              <el-button
                size="small"
                type="primary"
                plain
                :disabled="!canManage(row)"
                @click="openMarkets(matchId(row))"
              >
                {{ t('match.btn.markets') }}
              </el-button>
            </div>
            <div class="action-group">
              <el-button
                size="small"
                type="success"
                :disabled="!canPublishRow(row)"
                @click="publish(matchId(row))"
              >
                {{ t('common.publish') }}
              </el-button>
              <el-button
                size="small"
                type="warning"
                :disabled="!canCloseRow(row)"
                @click="close(matchId(row))"
              >
                {{ t('common.close_betting') }}
              </el-button>
              <el-button
                size="small"
                type="primary"
                :disabled="!canSettleRow(row)"
                @click="settle(matchId(row))"
              >
                {{ t('common.settle') }}
              </el-button>
            </div>
            <el-button
              size="small"
              type="danger"
              plain
              :disabled="!canDeleteRow(row)"
              @click="confirmDelete(row)"
            >
              {{ t('common.delete') }}
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <p v-if="!loading && !matches.length" class="empty-hint">{{ t('match.no_fixtures') }}</p>
  </div>
</template>

<style scoped>
.league-matches-panel {
  padding: 10px 12px 12px;
  background: #0a0a0a;
}
.panel-toolbar {
  margin-bottom: 8px;
}
.empty-hint {
  font-size: 12px;
  color: #666;
  margin: 8px 0 0;
}
.matchup-link {
  color: var(--green-text);
}
.bet-stat-active {
  color: var(--green-text);
  font-weight: 600;
}
.bet-stat-zero {
  color: #555;
}
.action-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  justify-content: center;
}
.action-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.action-btns :deep(.el-button) {
  margin: 0 !important;
  min-width: 52px;
  padding: 4px 10px !important;
  font-size: 12px !important;
}
</style>
