<template>
  <Transition name="slide-left">
    <div 
      v-show="visible"
      class="left-panel"
      :class="{ 'tv-mode': isTV }"
    >
      <!-- 第一栏：分组列表 -->
      <div 
        class="column column-1"
        :class="{ active: activeColumn === 0 }"
      >
        <GroupList
          v-model="selectedGroup"
          :groups="groups"
          :is-active="activeColumn === 0"
          @select="onGroupSelect"
        />
      </div>

      <!-- 第二栏：频道列表 -->
      <div 
        class="column column-2"
        :class="{ active: activeColumn === 1 }"
      >
        <ChannelList
          v-model="selectedChannel"
          :channels="filteredChannels"
          :is-active="activeColumn === 1"
          :favorites="favorites"
          :validity-map="validityMap"
          @select="onChannelSelect"
        />
      </div>

      <!-- 第三栏：日期列表 -->
      <div 
        class="column column-3"
        :class="{ active: activeColumn === 2 }"
      >
        <DateList
          v-model="selectedDate"
          :is-active="activeColumn === 2"
          @select="onDateSelect"
        />
      </div>

      <!-- 第四栏：节目单列表 -->
      <div 
        class="column column-4"
        :class="{ active: activeColumn === 3 }"
      >
        <ProgramList
          v-model="selectedProgram"
          :programs="programs"
          :is-active="activeColumn === 3"
          @select="onProgramSelect"
        />
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import GroupList from './GroupList.vue';
import ChannelList from './ChannelList.vue';
import DateList from './DateList.vue';
import ProgramList from './ProgramList.vue';
import { useUI } from '../../composables/useUI.js';

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

const emit = defineEmits(['close', 'play', 'lookback']);

const { isTV, currentActiveColumn, moveColumn } = useUI();
const activeColumn = computed(() => currentActiveColumn.value);

// 选中的状态
const selectedGroup = ref('');
const selectedChannel = ref(null);
const selectedDate = ref('');
const selectedProgram = ref(null);

// 过滤后的频道
const filteredChannels = computed(() => {
  if (!selectedGroup.value) return props.channels;
  
  // 置顶分组特殊处理
  if (selectedGroup.value === 'recent') {
    // TODO: 返回最近播放
    return [];
  }
  if (selectedGroup.value === 'favorite') {
    // TODO: 返回收藏
    return props.channels.filter(c => props.favorites.has(c.id));
  }
  
  return props.channels.filter(c => c.group === selectedGroup.value);
});

// 节目单数据（TODO: 实际从 EPG 获取）
const programs = ref([
  { id: 1, time: '08:00', title: '朝闻天下', isCurrent: false },
  { id: 2, time: '09:00', title: '今日说法', isCurrent: false },
  { id: 3, time: '10:00', title: '电视剧:繁花', isCurrent: true },
  { id: 4, time: '12:00', title: '新闻30分', isCurrent: false },
]);

// 监听面板显示，初始化选中状态
watch(() => props.visible, (val) => {
  if (val && props.currentChannel) {
    // 默认选中当前播放频道对应的分组/频道/日期/节目
    selectedGroup.value = props.currentChannel.group || props.groups[0] || '';
    selectedChannel.value = props.currentChannel;
    selectedDate.value = new Date().toISOString().split('T')[0];
    // TODO: 根据当前时间选中当前节目
  }
});

// 分组选择
function onGroupSelect(groupId) {
  // 第二栏自动切换到该分组第一个频道
  const firstChannel = filteredChannels.value[0];
  if (firstChannel) {
    selectedChannel.value = firstChannel;
  }
}

// 频道选择
function onChannelSelect(channel) {
  // 播放频道
  emit('play', channel);
  // 关闭面板
  emit('close');
}

// 日期选择
function onDateSelect(dateValue) {
  // 第四栏自动切换到该日期第一个节目
  // TODO: 加载对应日期的节目单
}

// 节目选择
function onProgramSelect(program) {
  // TODO: 回看功能
  emit('lookback', program);
  // 关闭面板
  emit('close');
}

// 监听 TV 导航（由父组件传入）
watch(activeColumn, (val) => {
  // 栏切换时的处理
});

// 导出方法供父组件调用
defineExpose({
  moveColumn,
});
</script>

<style scoped>
.left-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 900px;
  display: flex;
  z-index: 100;
  background: transparent;
}

.column {
  height: 100%;
  overflow: hidden;
}

.column-1 {
  width: 140px;
}

.column-2 {
  width: 200px;
}

.column-3 {
  width: 100px;
}

.column-4 {
  flex: 1;
  min-width: 200px;
}

/* TV 模式下当前激活栏的高亮 */
.tv-mode .column.active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* 滑入动画 */
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}
</style>
