<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { useVotingStore } from '../stores/voting';
import { useConnectionStore } from '../stores/connection';
import VotingDock from '../components/VotingDock.vue';
import ProgramCard from '../components/ProgramCard.vue';

const votingStore = useVotingStore();
const connectionStore = useConnectionStore();

// Use server-synced programs from voting store
const programs = computed(() => {
  // If no programs from server, show default list
  if (votingStore.programs.length === 0) {
    return [
      { id: 'p1', name: '龙腾四海', teamName: '市场部', order: 1, status: 'pending' as const, votes: 0 },
      { id: 'p2', name: '金马奔腾', teamName: '技术部', order: 2, status: 'pending' as const, votes: 0 },
      { id: 'p3', name: '春风得意', teamName: '人力资源部', order: 3, status: 'pending' as const, votes: 0 },
      { id: 'p4', name: '鸿运当头', teamName: '财务部', order: 4, status: 'pending' as const, votes: 0 },
      { id: 'p5', name: '马到成功', teamName: '运营部', order: 5, status: 'pending' as const, votes: 0 },
      { id: 'p6', name: '一马当先', teamName: '产品部', order: 6, status: 'pending' as const, votes: 0 },
      { id: 'p7', name: '万马奔腾', teamName: '设计部', order: 7, status: 'pending' as const, votes: 0 },
      { id: 'p8', name: '龙马精神', teamName: '销售部', order: 8, status: 'pending' as const, votes: 0 },
    ];
  }
  return votingStore.programs;
});

// Voting status message
const votingStatusMessage = computed(() => {
  if (!votingStore.votingOpen) return '投票尚未开始';
  return '投票进行中';
});

onMounted(() => {
  if (!connectionStore.isConnected) {
    connectionStore.connect();
  }
});
</script>

<template>
  <div class="vote-view">
    <!-- Header -->
    <header class="page-header">
      <h1 class="page-title">节目投票</h1>
      <div class="progress-ring">
        <svg viewBox="0 0 36 36" class="circular-progress">
          <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
          <path class="circle-progress" :stroke-dasharray="`${(votingStore.usedTickets.length / 7) * 100}, 100`"
            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
        </svg>
        <span class="progress-text">{{ votingStore.usedTickets.length }}/7</span>
      </div>
    </header>

    <!-- Voting Status Bar -->
    <div class="voting-status-bar" :class="{ active: votingStore.votingOpen }">
      <span class="status-dot" :class="{ pulsing: votingStore.votingOpen }"></span>
      <span class="status-text">{{ votingStatusMessage }}</span>
    </div>

    <!-- Program List -->
    <main class="program-list">
      <ProgramCard
        v-for="(program, index) in programs"
        :key="program.id"
        :program-id="program.id"
        :program-name="program.name"
        :team-name="program.teamName"
        :index="index"
        :status="program.status"
        :is-current="program.id === votingStore.currentProgramId"
      />
    </main>

    <!-- Voting Dock -->
    <VotingDock />
  </div>
</template>

<style lang="scss" scoped>
@use '../assets/styles/variables.scss' as *;

.vote-view {
  min-height: 100vh;
  background: $color-bg-primary;
  padding-bottom: 120px;
}

.page-header {
  background: $color-surface-glass;
  backdrop-filter: $backdrop-blur;
  -webkit-backdrop-filter: $backdrop-blur;
  padding: $spacing-lg;
  padding-top: calc(env(safe-area-inset-top) + #{$spacing-lg});
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: $z-index-sticky;
}

.page-title {
  font-size: $font-size-2xl;
  font-weight: bold;
  color: $color-text-inverse;
}

.progress-ring {
  position: relative;
  width: 48px;
  height: 48px;
}

.circular-progress {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 3;
}

.circle-progress {
  fill: none;
  stroke: $color-gold;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}

.progress-ring .progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: $font-size-xs;
  font-weight: bold;
  color: $color-text-inverse;
}

.program-list {
  padding: $spacing-md;
  display: flex;
  flex-direction: column;
  gap: $spacing-lg;
}

// Voting Status Bar
.voting-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: $spacing-sm $spacing-lg;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: $font-size-sm;
  color: $color-text-secondary;

  &.active {
    background: rgba($color-gold, 0.1);
    border-color: rgba($color-gold, 0.2);
  }
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;

  &.pulsing {
    background: #22c55e;
    animation: pulse-dot 1.5s ease-in-out infinite;
  }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

.status-text {
  flex: 1;
}

.late-catch-hint {
  font-size: 10px;
  color: $color-gold;
  padding: 2px 8px;
  background: rgba($color-gold, 0.15);
  border-radius: 4px;
}
</style>

