<template>
  <div 
    class="channel-list"
    :class="{ 'is-active': isActive }"
  >
    <div
      v-for="channel in channels"
      :key="channel.id"
      class="channel-item"
      :class="{ active: modelValue?.id === channel.id }"
      @click="selectChannel(channel)"
    >
      <div class="channel-logo">
        {{ getChannelLogo(channel.name) }}
      </div>
      <div class="channel-info">
        <div class="channel-name">{{ channel.name }}</div>
        <div class="channel-meta">
          <span class="source-count">
            {{ getValidCount(channel) }}/{{ channel.urls?.length || 0 }}线路
          </span>
          <span v-if="isFavorite(channel.id)" class="favorite-icon">★</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: Object,
    default: null
  },
  channels: {
    type: Array,
    default: () => []
  },
  isActive: {
    type: Boolean,
    default: false
  },
  favorites: {
    type: Set,
    default: () => new Set()
  },
  validityMap: {
    type: Map,
    default: () => new Map()
  }
});

const emit = defineEmits(['update:modelValue', 'select']);

const platform = import.meta.env.VITE_PLATFORM || 'web';
const isTV = platform === 'tv';

// 获取频道 LOGO（取前两个字符）
function getChannelLogo(name) {
  return name.slice(0, 2);
}

// 检查是否收藏
function isFavorite(channelId) {
  return props.favorites.has(channelId);
}

// 获取有效线路数
function getValidCount(channel) {
  if (!channel.urls) return 0;
  return channel.urls.filter(url => {
    const validity = props.validityMap.get(url);
    return validity && validity.status === 'online';
  }).length;
}

// 选择频道
function selectChannel(channel) {
  emit('update:modelValue', channel);
  emit('select', channel);
}
</script>

<style scoped>
.channel-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.85);
  padding: 8px;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.channel-item:hover,
.channel-item.active {
  background: rgba(255, 255, 255, 0.1);
}

.channel-item.active {
  background: rgba(255, 255, 255, 0.2);
}

.channel-logo {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

.channel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.channel-name {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.favorite-icon {
  color: #ffd700;
}

/* TV 模式焦点样式 */
.is-active .channel-item:focus {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
</style>
