<template>
  <div 
    class="group-list"
    :class="{ 'is-active': isActive }"
  >
    <!-- 置顶分组 -->
    <div class="group-section pinned">
      <div
        v-for="group in pinnedGroups"
        :key="group.id"
        class="group-item"
        :class="{ active: modelValue === group.id }"
        @click="selectGroup(group.id)"
      >
        <span class="group-icon">{{ group.icon }}</span>
        <div class="group-info">
          <span class="group-name">{{ group.name }}</span>
          <span class="group-count">{{ group.count }}个</span>
        </div>
      </div>
    </div>

    <!-- 分隔线 -->
    <div class="divider"></div>

    <!-- 普通分组 -->
    <div class="group-section normal">
      <div
        v-for="group in normalGroups"
        :key="group.id"
        class="group-item"
        :class="{ active: modelValue === group.id }"
        @click="selectGroup(group.id)"
      >
        <span class="group-icon">{{ group.icon }}</span>
        <div class="group-info">
          <span class="group-name">{{ group.name }}</span>
          <span class="group-count">{{ group.count }}个</span>
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  groups: {
    type: Array,
    default: () => []
  },
  isActive: {
    type: Boolean,
    default: false
  }
});

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

// 置顶分组
const pinnedGroups = computed(() => {
  return [
    { id: 'recent', name: '最近播放', icon: '⏱', count: 0 }, // TODO: 实际数量
    { id: 'favorite', name: '收藏', icon: '❤️', count: 0 }, // TODO: 实际数量
  ];
});

// 普通分组
const normalGroups = computed(() => {
  return props.groups.map(group => ({
    id: group,
    name: group,
    icon: getGroupIcon(group),
    count: 0 // TODO: 实际数量
  }));
});

// 获取分组图标
function getGroupIcon(groupName) {
  if (groupName.includes('央视')) return '📺';
  if (groupName.includes('卫视')) return '📡';
  if (groupName.includes('体育')) return '⚽';
  if (groupName.includes('电影')) return '🎬';
  if (groupName.includes('少儿')) return '👶';
  return '📺';
}

// 选择分组
function selectGroup(groupId) {
  emit('update:modelValue', groupId);
  emit('select', groupId);
}
</script>

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

.group-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px;
}

.divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px;
}

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

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

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

.group-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.group-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.group-name {
  font-size: 14px;
  color: #fff;
}

.group-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

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