<template>
  <Transition name="slide-left">
    <div
      v-show="leftPanelVisible"
      class="left-panel"
      :class="{ 'tv-mode': isTV }"
    >
      <!-- 第一栏：分组列表 -->
      <div class="column column-1" :class="{ active: activeColumn === 0 }">
        <div class="group-list" :class="{ 'is-active': activeColumn === 0 }">
          <!-- 置顶分组 -->
          <div class="group-section pinned">
            <div
              v-for="group in pinnedGroups"
              :key="group.id"
              class="group-item"
              :class="{ active: selectedGroup === group.id }"
              @click="onGroupSelect(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: selectedGroup === group.id }"
              @click="onGroupSelect(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>
      </div>

      <!-- 第二栏：频道列表 -->
      <div class="column column-2" :class="{ active: activeColumn === 1 }">
        <div class="channel-list" :class="{ 'is-active': activeColumn === 1 }">
          <div
            v-for="channel in filteredChannels"
            :key="channel.id"
            class="channel-item"
            :class="{ active: selectedChannel?.id === channel.id }"
            @click="onChannelSelect(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>
      </div>

      <!-- 第三栏：日期列表 -->
      <div class="column column-3" :class="{ active: activeColumn === 2 }">
        <div class="date-list" :class="{ 'is-active': activeColumn === 2 }">
          <div
            v-for="date in dates"
            :key="date.value"
            class="date-item"
            :class="{ active: selectedDate === date.value }"
            @click="onDateSelect(date.value)"
          >
            <div class="date-day">{{ date.day }}</div>
            <div class="date-label">{{ date.label }}</div>
          </div>
        </div>
      </div>

      <!-- 第四栏：节目单列表 -->
      <div class="column column-4" :class="{ active: activeColumn === 3 }">
        <div class="program-list" :class="{ 'is-active': activeColumn === 3 }">
          <div
            v-for="program in programs"
            :key="program.id"
            class="program-item"
            :class="{
              active: selectedProgram?.id === program.id,
              current: program.isCurrent,
            }"
            @click="onProgramSelect(program)"
          >
            <div class="program-time">{{ program.time }}</div>
            <div class="program-title">
              {{ program.title }}
              <span v-if="program.isCurrent" class="current-badge">当前</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { computed, watch } from "vue";
import { useUI } from "../../composables/useUI.js";
import { useKeyEvent } from "../../composables/useEvent.js";
import { useGroups } from "../../composables/useGroups.js";
import { useChannelFilter } from "../../composables/useChannelFilter.js";
import { useDates } from "../../composables/useDates.js";
import { usePrograms } from "../../composables/usePrograms.js";
import { useFavorites } from "../../composables/useFavorites.js";
import { useChannels } from "../../composables/useChannels.js";

const props = defineProps({
  currentChannel: {
    type: Object,
    default: null,
  },
  validityMap: {
    type: Map,
    default: () => new Map(),
  },
});

const emit = defineEmits(["play"]);

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

// 从 hooks 获取数据
const { favorites } = useFavorites();
const { channels, groups } = useChannels();

// ===== 分组逻辑 =====
const {
  selectedGroup,
  pinnedGroups,
  normalGroups,
  selectGroup,
  setGroups,
  initSelectedGroup,
} = useGroups();

// ===== 频道过滤逻辑 =====
const {
  selectedChannel,
  filteredChannels,
  selectChannel,
  setChannels,
  setSelectedGroup: setChannelFilterGroup,
  setFavorites,
  setValidityMap,
  getFirstChannel,
  getChannelLogo,
  isFavorite,
  getValidCount,
} = useChannelFilter();

// ===== 日期逻辑 =====
const { selectedDate, dates, selectDate, initToday } = useDates();

// ===== 节目单逻辑 =====
const { selectedProgram, programs, selectProgram, loadProgramsByDate } =
  usePrograms();

// 同步 hooks 数据到过滤逻辑
watch(groups, (g) => setGroups(g), { immediate: true });

watch(channels, (c) => setChannels(c), { immediate: true });

// 同步收藏到频道过滤
watch(favorites, (favs) => setFavorites(favs), { immediate: true });

watch(
  () => props.validityMap,
  (map) => setValidityMap(map),
  { immediate: true },
);

// 同步选中分组到频道过滤
watch(selectedGroup, (group) => {
  setChannelFilterGroup(group);
});

// 监听面板显示，初始化选中状态
watch(leftPanelVisible, (val) => {
  if (val && props.currentChannel) {
    initSelectedGroup(props.currentChannel, groups.value[0]);
    selectChannel(props.currentChannel);
    initToday();
  }
});

// 分组选择
function onGroupSelect(groupId) {
  selectGroup(groupId);
  // 第二栏自动切换到该分组第一个频道
  const firstChannel = getFirstChannel();
  if (firstChannel) {
    selectChannel(firstChannel);
  }
}

// 频道选择
function onChannelSelect(channel) {
  selectChannel(channel);
  emit("play", channel);
  hideLeftPanel();
}

// 日期选择
function onDateSelect(dateValue) {
  selectDate(dateValue);
  loadProgramsByDate(dateValue);
}

// 节目选择
function onProgramSelect(program) {
  selectProgram(program);
  // TODO: 实现回看逻辑
  hideLeftPanel();
}

useKeyEvent("Escape", hideLeftPanel);
</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%);
}

/* ===== 分组列表样式 ===== */
.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.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);
}

/* ===== 频道列表样式 ===== */
.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.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;
}

/* ===== 日期列表样式 ===== */
.date-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px;
}

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

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

.date-day {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.date-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* ===== 节目单列表样式 ===== */
.program-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.75);
  padding: 8px;
}

.program-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
  border-left: 3px solid transparent;
}

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

.program-item.active {
  border-left-color: #fff;
}

.program-item.current {
  border-left-color: #ff6b6b;
}

.program-time {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-family: monospace;
}

.program-title {
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-badge {
  font-size: 10px;
  background: #ff6b6b;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}

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