<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 CashBalanceChip from '../components/CashBalanceChip.vue';
import UserAvatarMenu from '../components/UserAvatarMenu.vue';
import LocaleSwitcher from '../components/LocaleSwitcher.vue';
import { useAppLocale } from '../composables/useAppLocale';
import AnnouncementMarquee from '../components/AnnouncementMarquee.vue';
import BottomNavIcon from '../components/BottomNavIcon.vue';
import { computed, onMounted, watch } from 'vue';
import { usePlayerHome } from '../composables/usePlayerHome';
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
import { usePlayerProfile } from '../composables/usePlayerProfile';

const { t } = useI18n();
const auth = useAuthStore();
const { initFromUser } = useAppLocale();
const route = useRoute();
const slip = useBetSlipStore();

const isDetailPage = computed(() => {
  const p = route.path;
  return (
    p.startsWith('/match/') ||
    p.startsWith('/bet/') ||
    p.startsWith('/bets/') ||
    p.startsWith('/wallet/') ||
    p === '/profile/edit' ||
    p === '/profile/cashbacks'
  );
});

const showHeader = computed(() => !isDetailPage.value);
const showAnnouncement = computed(() => !isDetailPage.value && !route.path.startsWith('/profile'));

const showBottomNav = computed(() => {
  const p = route.path;
  if (p === '/' || p === '/bet' || p === '/bets' || p === '/wallet' || p === '/profile') return true;
  return false;
});
const { announcements, load: loadPlayerHome } = usePlayerHome();
const { loadProfile } = usePlayerProfile();

useOnLocaleChange(loadPlayerHome);

onMounted(() => {
  if (auth.user?.locale) initFromUser(auth.user.locale);
});

watch(
  () => auth.token,
  (token) => {
    if (token) {
      void loadPlayerHome();
      void loadProfile(true);
    }
  },
  { immediate: true },
);
</script>

<template>
  <div class="layout">
    <header v-if="showHeader" class="header">
      <img src="/logo.png" alt="TheBet365" class="logo" />
      <div class="header-actions">
        <LocaleSwitcher />
        <CashBalanceChip v-if="auth.user" />
        <UserAvatarMenu v-if="auth.user" />
      </div>
    </header>

    <div v-if="showAnnouncement" class="announce-strip">
      <AnnouncementMarquee :items="announcements" embedded />
    </div>

    <main :class="['main', { 'has-nav': showBottomNav }]">
      <RouterView />
    </main>

    <nav v-if="showBottomNav" class="bottom-nav" aria-label="Main">
      <RouterLink to="/" class="nav-item" :class="{ active: route.path === '/' }">
        <BottomNavIcon name="home" />
        <span class="nav-label">{{ t('nav.home') }}</span>
      </RouterLink>
      <RouterLink
        to="/bet"
        class="nav-item"
        :class="{ active: route.path === '/bet' || route.path.startsWith('/match') }"
      >
        <BottomNavIcon name="bet" />
        <span class="nav-label">{{ t('nav.bet') }}</span>
      </RouterLink>
      <RouterLink to="/bets" class="nav-item" :class="{ active: route.path === '/bets' }">
        <BottomNavIcon name="history" />
        <span class="nav-label">{{ t('nav.bet_history') }}</span>
      </RouterLink>
      <RouterLink to="/wallet" class="nav-item" :class="{ active: route.path === '/wallet' }">
        <BottomNavIcon name="wallet" />
        <span class="nav-label">{{ t('nav.wallet') }}</span>
      </RouterLink>
      <RouterLink to="/profile" class="nav-item" :class="{ active: route.path.startsWith('/profile') }">
        <BottomNavIcon name="profile" />
        <span class="nav-label">{{ t('nav.profile') }}</span>
      </RouterLink>
    </nav>

    <BetSlipDrawer v-model="slip.drawerOpen" />
  </div>
</template>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: transparent;
}
.header {
  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: rgba(26, 26, 26, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 110;
}
.logo {
  height: 36px; width: auto; display: block;
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.2));
}
.header-actions {
  --header-chip-h: 36px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.header-actions :deep(.locale-switch:not(.compact)),
.header-actions :deep(.cash-chip),
.header-actions :deep(.avatar-btn) {
  height: var(--header-chip-h);
  box-sizing: border-box;
}
.header-actions :deep(.avatar-btn) {
  width: var(--header-chip-h);
}
.announce-strip {
  flex-shrink: 0;
  z-index: 105;
  border-bottom: 1px solid var(--border);
}

.main {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 0;
}

.main.has-nav {
  padding-bottom: 16px;
}
.bottom-nav {
  display: flex;
  background: rgba(17, 17, 17, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 8px;
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  transition: color 0.2s;
  line-height: 1.2;
  min-width: 0;
}

.nav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

.nav-item.active {
  color: var(--primary-light);
  font-weight: 800;
}

.nav-item.active :deep(.nav-icon) {
  filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.35));
}

.nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 2px;
  background: var(--primary);
  border-radius: 0 0 4px 4px;
}
</style>
