<script setup lang="ts">
import { RouterView, RouterLink, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../stores/auth';
import { useBetSlipStore } from '../stores/betSlip';
import BetSlipDrawer from '../components/BetSlipDrawer.vue';
import { ref } from 'vue';

const { t, locale } = useI18n();
const auth = useAuthStore();
const slip = useBetSlipStore();
const route = useRoute();
const showSlip = ref(false);

const locales = [
  { code: 'zh-CN', label: '中文' },
  { code: 'en-US', label: 'EN' },
  { code: 'ms-MY', label: 'BM' },
];

function setLocale(code: string) {
  locale.value = code;
  localStorage.setItem('locale', code);
}
</script>

<template>
  <div class="layout">
    <header class="header">
      <span class="logo">TheBet365</span>
      <div class="header-actions">
        <select :value="locale" @change="setLocale(($event.target as HTMLSelectElement).value)" class="lang-select">
          <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.label }}</option>
        </select>
        <span class="balance">{{ auth.user?.username }}</span>
      </div>
    </header>

    <main class="main">
      <RouterView />
    </main>

    <nav class="bottom-nav">
      <RouterLink to="/" :class="{ active: route.path === '/' }">{{ t('nav.home') }}</RouterLink>
      <RouterLink to="/football" :class="{ active: route.path.startsWith('/football') || route.path.startsWith('/match') }">{{ t('nav.football') }}</RouterLink>
      <button class="slip-btn" @click="showSlip = true">
        {{ t('bet.bet_slip') }}
        <span v-if="slip.count" class="badge">{{ slip.count }}</span>
      </button>
      <RouterLink to="/bets" :class="{ active: route.path === '/bets' }">{{ t('nav.my_bets') }}</RouterLink>
      <RouterLink to="/profile" :class="{ active: route.path === '/profile' }">{{ t('nav.profile') }}</RouterLink>
    </nav>

    <BetSlipDrawer v-model="showSlip" />
  </div>
</template>

<style scoped>
.layout { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 60px; }
.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: #1a2332; border-bottom: 1px solid var(--border);
}
.logo { font-weight: 800; color: var(--primary); font-size: 18px; }
.header-actions { display: flex; gap: 12px; align-items: center; }
.lang-select { background: var(--bg-card); color: #fff; border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; width: auto; }
.balance { font-size: 13px; color: var(--text-muted); }
.main { flex: 1; padding: 12px; }
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: #1a2332; border-top: 1px solid var(--border);
  z-index: 100;
}
.bottom-nav a, .slip-btn {
  flex: 1; text-align: center; padding: 10px 4px; font-size: 11px;
  color: var(--text-muted); background: none; position: relative;
}
.bottom-nav a.active, .slip-btn.active { color: var(--primary); }
.badge {
  position: absolute; top: 2px; right: 20%;
  background: var(--danger); color: #fff; font-size: 10px;
  padding: 1px 5px; border-radius: 10px;
}
</style>
