<script setup lang="ts">
import { onActivated, computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import emptyMatchesImg from '../assets/images/empty-matches.svg';
import vsImg from '../assets/images/vs.png';
import cardBg from '../assets/images/card-bg.webp';
import BannerCarousel from '../components/BannerCarousel.vue';
import { usePlayerHome } from '../composables/usePlayerHome';
import TeamEmblem from '../components/TeamEmblem.vue';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
import { formatLocalMatchDateTime } from '@thebet365/shared';
import type { PlayerHomeMatch } from '../composables/usePlayerHome';

type HotTab = 'hot' | 'upcoming';

const matchCardBg = `url(${cardBg})`;
const { t, locale } = useI18n();
const router = useRouter();
const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
const activeTab = ref<HotTab>('hot');

const bannerFallbackTo = computed(() => {
  const id = announcementItems.value[0]?.id;
  return id ? `/announcements/${id}` : '/announcements';
});

const displayedMatches = computed<PlayerHomeMatch[]>(() =>
  activeTab.value === 'hot' ? hotMatches.value : upcomingMatches.value,
);

const emptyMessage = computed(() =>
  activeTab.value === 'hot' ? t('home.no_matches') : t('home.upcoming_empty'),
);

const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
  onRefresh: async () => { await load(true); },
});

onActivated(() => { void load(true); });

const pullIndicatorStyle = () => ({
  height: `${pullDistance.value}px`,
  opacity: Math.min(pullDistance.value / 48, 1),
});

function goMatch(id: string) {
  router.push(`/match/${id}`);
}

function formatKickoff(startTime: string) {
  return formatLocalMatchDateTime(startTime, locale.value, { variant: 'full' });
}

</script>

<template>
  <div>
    <div
      class="pull-indicator"
      :style="pullIndicatorStyle()"
    >
      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
    </div>

    <BannerCarousel :banners="banners" :fallback-to="bannerFallbackTo" />

    <div class="hot-tabs" role="tablist" :aria-label="t('home.hot_matches')">
      <button
        type="button"
        role="tab"
        class="hot-tab"
        :class="{ active: activeTab === 'hot' }"
        :aria-selected="activeTab === 'hot'"
        @click="activeTab = 'hot'"
      >
        {{ t('home.hot_tab') }}
      </button>
      <button
        type="button"
        role="tab"
        class="hot-tab"
        :class="{ active: activeTab === 'upcoming' }"
        :aria-selected="activeTab === 'upcoming'"
        @click="activeTab = 'upcoming'"
      >
        {{ t('home.upcoming_tab') }}
      </button>
    </div>
    <div
      v-for="(match, index) in displayedMatches"
      :key="match.id"
      class="match-card"
      :class="{ 'match-card--live-anim': activeTab === 'hot' && index < 3 }"
      @click="goMatch(match.id)"
    >
      <div class="match-info">
        <div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
        <div class="match-time">{{ formatKickoff(match.startTime) }}</div>
      </div>
      <div class="match-flags" aria-hidden="true">
        <TeamEmblem
          size="md"
          :team-code="match.homeTeamCode"
          :team-name="match.homeTeamName"
          :logo-url="match.homeTeamLogoUrl"
        />
        <div class="vs-arena">
          <svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
            <defs>
              <linearGradient :id="`hzBoltGrad-${match.id}`" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#5eb8ff" stop-opacity="0.2" />
                <stop offset="35%" stop-color="#b8ecff" stop-opacity="1" />
                <stop offset="50%" stop-color="#ffffff" stop-opacity="1" />
                <stop offset="65%" stop-color="#ffd080" stop-opacity="1" />
                <stop offset="100%" stop-color="#ff9040" stop-opacity="0.2" />
              </linearGradient>
            </defs>
            <path
              class="hz-path hz-path-main"
              :stroke="`url(#hzBoltGrad-${match.id})`"
              d="M1 14 H16 L20 5 L24 23 L28 9 L32 14 H40 L44 6 L48 22 L52 12 L56 14 H71"
            />
            <path
              class="hz-path hz-path-sub"
              :stroke="`url(#hzBoltGrad-${match.id})`"
              d="M3 19 H14 L18 15 L22 19 H50 L54 16 L58 19 H69"
            />
          </svg>
          <span class="hz-beam" aria-hidden="true" />
          <img :src="vsImg" alt="" class="vs-img" />
        </div>
        <TeamEmblem
          size="md"
          :team-code="match.awayTeamCode"
          :team-name="match.awayTeamName"
          :logo-url="match.awayTeamLogoUrl"
        />
      </div>
    </div>

    <div v-if="!loading && !displayedMatches.length" class="empty">
      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
      <p>{{ emptyMessage }}</p>
    </div>
  </div>
</template>

<style scoped>
.pull-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: height 0.15s ease;
}

.hot-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}

.hot-tab {
  flex: 1;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.hot-tab.active {
  font-weight: 700;
  background: var(--surface-active);
  border-color: var(--primary);
  color: var(--text);
}

.hot-tab:active {
  opacity: 0.92;
}

.match-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px 16px;
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  background: var(--bg-card);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  overflow: hidden;
}

.match-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: v-bind(matchCardBg) center / 100% 100% no-repeat;
  opacity: 0.25;
  z-index: 0;
  pointer-events: none;
}

.match-card:active {
  opacity: 0.92;
  transform: scale(0.995);
}

.match-info,
.match-flags {
  position: relative;
  z-index: 1;
}

.match-info {
  flex: 1;
  min-width: 0;
}

.match-teams {
  font-weight: 800;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.3;
}

.match-time {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.match-flags {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 46%;
}

.vs-arena {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hz-lightning {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.hz-path {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
  opacity: 0;
}

.match-card--live-anim .hz-path-main {
  animation: hz-strike-main 2.6s ease-in-out infinite;
}

.match-card--live-anim .hz-path-sub {
  stroke-width: 1.6;
  animation: hz-strike-sub 2.6s ease-in-out infinite;
  animation-delay: 0.12s;
}

.match-card--live-anim .hz-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(94, 184, 255, 0) 0%,
    rgba(184, 236, 255, 0.95) 28%,
    #fff 50%,
    rgba(255, 208, 128, 0.95) 72%,
    rgba(255, 144, 64, 0) 100%
  );
  opacity: 0;
  filter: blur(0.4px);
  animation: hz-beam-flash 2.6s ease-in-out infinite;
}

.hz-beam {
  display: none;
}

.vs-img {
  position: relative;
  z-index: 0;
  width: 48px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
}

.match-card--live-anim .vs-img {
  animation: vs-glow 2.4s ease-in-out infinite;
}

@keyframes hz-strike-main {
  0%,
  72%,
  100% {
    opacity: 0;
  }

  74% {
    opacity: 1;
  }

  75% {
    opacity: 0.25;
  }

  76% {
    opacity: 0.95;
  }

  78% {
    opacity: 0;
  }
}

@keyframes hz-strike-sub {
  0%,
  74%,
  100% {
    opacity: 0;
  }

  76% {
    opacity: 0.85;
  }

  77% {
    opacity: 0.2;
  }

  78% {
    opacity: 0.7;
  }

  80% {
    opacity: 0;
  }
}

@keyframes hz-beam-flash {
  0%,
  71%,
  100% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.6);
  }

  73% {
    opacity: 0.85;
    transform: translateY(-50%) scaleX(1);
  }

  75% {
    opacity: 0.15;
    transform: translateY(-50%) scaleX(0.95);
  }

  76% {
    opacity: 0.75;
    transform: translateY(-50%) scaleX(1);
  }

  78% {
    opacity: 0;
    transform: translateY(-50%) scaleX(1.05);
  }
}

@keyframes vs-glow {
  0%,
  100% {
    opacity: 0.82;
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
  }

  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 3px rgba(255, 230, 140, 0.7))
      drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs-img {
    animation: none;
    filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
  }

  .hz-path,
  .hz-beam {
    animation: none;
    opacity: 0;
  }
}

.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 20px;
  font-weight: 600;
}

.empty-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 14px;
}
</style>
