<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useChatStore } from '@/stores/chat'
import { storeToRefs } from 'pinia'
import type { AnalysisSession, MemberActivity, HourlyActivity, DailyActivity, MessageType } from '@/types/chat'
import { formatDateRange } from '@/utils'
import UITabs from '@/components/UI/Tabs.vue'
import OverviewTab from '@/components/analysis/OverviewTab.vue'
import RankingTab from '@/components/analysis/RankingTab.vue'
import TimelineTab from '@/components/analysis/TimelineTab.vue'
import QuotesTab from '@/components/analysis/QuotesTab.vue'
import RelationshipsTab from '@/components/analysis/RelationshipsTab.vue'
import AITab from '@/components/analysis/AITab.vue'

const route = useRoute()
const router = useRouter()
const chatStore = useChatStore()
const { currentSessionId } = storeToRefs(chatStore)

// 数据状态
const isLoading = ref(true)
const session = ref<AnalysisSession | null>(null)
const memberActivity = ref<MemberActivity[]>([])
const hourlyActivity = ref<HourlyActivity[]>([])
const dailyActivity = ref<DailyActivity[]>([])
const messageTypes = ref<Array<{ type: MessageType; count: number }>>([])
const timeRange = ref<{ start: number; end: number } | null>(null)

// 年份筛选
const availableYears = ref<number[]>([])
const selectedYear = ref<number>(0) // 0 表示全部
const isInitialLoad = ref(true) // 用于跳过初始加载时的 watch 触发，并控制首屏加载状态

// Tab 配置
const tabs = [
  { id: 'overview', label: '总览', icon: 'i-heroicons-chart-pie' },
  { id: 'ranking', label: '群榜单', icon: 'i-heroicons-trophy' },
  { id: 'quotes', label: '群语录', icon: 'i-heroicons-chat-bubble-bottom-center-text' },
  { id: 'relationships', label: '群关系', icon: 'i-heroicons-heart' },
  { id: 'timeline', label: '群趋势', icon: 'i-heroicons-chart-bar' },
  { id: 'ai', label: 'AI实验室', icon: 'i-heroicons-sparkles' },
]

const activeTab = ref((route.query.tab as string) || 'overview')

// 计算时间过滤参数
const timeFilter = computed(() => {
  if (selectedYear.value === 0) {
    return undefined
  }
  // 计算年份的开始和结束时间戳
  const startDate = new Date(selectedYear.value, 0, 1, 0, 0, 0)
  const endDate = new Date(selectedYear.value, 11, 31, 23, 59, 59)
  return {
    startTs: Math.floor(startDate.getTime() / 1000),
    endTs: Math.floor(endDate.getTime() / 1000),
  }
})

// 年份选项
const yearOptions = computed(() => {
  const options = [{ label: '全部时间', value: 0 }]
  for (const year of availableYears.value) {
    options.push({ label: `${year}年`, value: year })
  }
  return options
})

// 计算属性
const topMembers = computed(() => memberActivity.value.slice(0, 3))
const bottomMembers = computed(() => {
  if (memberActivity.value.length <= 1) return []
  return [...memberActivity.value].sort((a, b) => a.messageCount - b.messageCount).slice(0, 1)
})

// 当前筛选后的消息总数
const filteredMessageCount = computed(() => {
  return memberActivity.value.reduce((sum, m) => sum + m.messageCount, 0)
})

// 当前筛选后的活跃成员数
const filteredMemberCount = computed(() => {
  return memberActivity.value.filter((m) => m.messageCount > 0).length
})

// 格式化时间范围显示
const dateRangeText = computed(() => {
  if (selectedYear.value) {
    return `${selectedYear.value}年`
  }
  if (!timeRange.value) return ''
  return formatDateRange(timeRange.value.start, timeRange.value.end)
})

// Sync route param to store
function syncSession() {
  const id = route.params.id as string
  if (id) {
    chatStore.selectSession(id)
    // If selection failed (e.g. invalid ID), redirect to home
    if (chatStore.currentSessionId !== id) {
      router.replace('/')
    }
  }
}

// 加载基础数据（不受年份筛选影响）
async function loadBaseData() {
  if (!currentSessionId.value) return

  try {
    const [sessionData, years, range] = await Promise.all([
      window.chatApi.getSession(currentSessionId.value),
      window.chatApi.getAvailableYears(currentSessionId.value),
      window.chatApi.getTimeRange(currentSessionId.value),
    ])

    session.value = sessionData
    availableYears.value = years
    timeRange.value = range

    // 初始化年份选择
    // 1. 优先使用 URL 参数中的年份
    // 2. 否则默认选择最近的年份（years 已按降序排列）
    // 3. 如果没有年份数据，选 0 (全部)
    const queryYear = Number(route.query.year)
    if (queryYear === 0 || (queryYear && years.includes(queryYear))) {
      selectedYear.value = queryYear
    } else if (years.length > 0) {
      selectedYear.value = years[0]
    } else {
      selectedYear.value = 0
    }
  } catch (error) {
    console.error('加载基础数据失败:', error)
  }
}

// 加载分析数据（受年份筛选影响）
async function loadAnalysisData() {
  if (!currentSessionId.value) return

  isLoading.value = true

  try {
    const filter = timeFilter.value

    const [members, hourly, daily, types] = await Promise.all([
      window.chatApi.getMemberActivity(currentSessionId.value, filter),
      window.chatApi.getHourlyActivity(currentSessionId.value, filter),
      window.chatApi.getDailyActivity(currentSessionId.value, filter),
      window.chatApi.getMessageTypeDistribution(currentSessionId.value, filter),
    ])

    memberActivity.value = members
    hourlyActivity.value = hourly
    dailyActivity.value = daily
    messageTypes.value = types
  } catch (error) {
    console.error('加载分析数据失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 加载所有数据
async function loadData() {
  isInitialLoad.value = true
  await loadBaseData()
  await loadAnalysisData()
  isInitialLoad.value = false
}

// 监听路由参数变化
watch(
  () => route.params.id,
  () => {
    // 切换会话时，重置 activeTab 为默认值（如果 URL 中没有 tab 参数）
    // 注意：sidebar 导航通常会 push 新的 URL，不带 query 参数，所以这里会自动重置
    // 但为了保险，我们可以在这里强制重置，或者依赖 activeTab 的初始化逻辑（它只在组件创建时初始化）
    // 由于组件是复用的，我们需要手动处理
    if (!route.query.tab) {
      activeTab.value = 'overview'
    } else {
      activeTab.value = route.query.tab as string
    }
    syncSession()
  }
)

// 监听会话变化 (syncSession 会触发 currentSessionId 变化)
watch(
  currentSessionId,
  () => {
    // 年份筛选会在 loadBaseData 中自动设置为最近年份
    loadData()
  },
  { immediate: true }
)

// 监听年份筛选变化（仅用户手动切换年份时触发）
watch(selectedYear, () => {
  // 跳过初始加载时的触发，避免重复加载
  if (isInitialLoad.value) return
  loadAnalysisData()
})

// 同步状态到 URL
watch([activeTab, selectedYear], ([newTab, newYear]) => {
  // 避免在初始化过程中频繁更新 URL
  if (isInitialLoad.value) return

  router.replace({
    query: {
      ...route.query,
      tab: newTab,
      year: newYear,
    },
  })
})

onMounted(() => {
  syncSession()
  // loadData is triggered by currentSessionId watch
})
</script>

<template>
  <div class="flex h-full flex-col bg-gray-50 dark:bg-gray-950">
    <!-- Loading State -->
    <div v-if="isInitialLoad" class="flex h-full items-center justify-center">
      <div class="flex flex-col items-center justify-center text-center">
        <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-pink-500" />
        <p class="mt-2 text-sm text-gray-500">加载分析数据...</p>
      </div>
    </div>

    <!-- Content -->
    <template v-else-if="session">
      <!-- Header -->
      <div class="border-b border-gray-200 bg-white px-6 py-4 dark:border-gray-800 dark:bg-gray-900">
        <div class="flex items-center justify-between">
          <!-- Session Info -->
          <div class="flex items-center gap-3">
            <div
              class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-pink-400 to-pink-600"
            >
              <UIcon name="i-heroicons-chat-bubble-left-right" class="h-5 w-5 text-white" />
            </div>
            <div>
              <h1 class="text-lg font-semibold text-gray-900 dark:text-white">
                {{ session.name }}
              </h1>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ dateRangeText }}，{{ selectedYear ? filteredMemberCount : session.memberCount }} 位成员共聊了
                {{ selectedYear ? filteredMessageCount : session.messageCount }} 条消息
              </p>
            </div>
          </div>
        </div>

        <!-- Tabs -->
        <div class="mt-4 flex items-center justify-between gap-4">
          <div class="flex flex-shrink-0 items-center gap-1 overflow-x-auto scrollbar-hide">
            <button
              v-for="tab in tabs"
              :key="tab.id"
              class="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all"
              :class="[
                activeTab === tab.id
                  ? 'bg-pink-500 text-white dark:bg-pink-900/30 dark:text-pink-300'
                  : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800',
              ]"
              @click="activeTab = tab.id"
            >
              <UIcon :name="tab.icon" class="h-4 w-4" />
              <span class="whitespace-nowrap">{{ tab.label }}</span>
            </button>
          </div>
          <!-- 年份选择器靠右，允许收缩 -->
          <UITabs v-model="selectedYear" :items="yearOptions" size="sm" class="min-w-0 flex-shrink" />
        </div>
      </div>

      <!-- Tab Content -->
      <div class="relative flex-1 overflow-y-auto">
        <!-- Loading Overlay -->
        <div
          v-if="isLoading"
          class="absolute inset-0 z-10 flex items-center justify-center bg-white/50 backdrop-blur-sm dark:bg-gray-950/50"
        >
          <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-pink-500" />
        </div>

        <div class="h-full">
          <Transition name="tab-slide" mode="out-in">
            <OverviewTab
              v-if="activeTab === 'overview'"
              :key="'overview-' + selectedYear"
              :session="session"
              :member-activity="memberActivity"
              :top-members="topMembers"
              :bottom-members="bottomMembers"
              :message-types="messageTypes"
              :hourly-activity="hourlyActivity"
              :time-range="timeRange"
              :selected-year="selectedYear"
              :filtered-message-count="filteredMessageCount"
              :filtered-member-count="filteredMemberCount"
              :time-filter="timeFilter"
            />
            <RankingTab
              v-else-if="activeTab === 'ranking'"
              :key="'ranking-' + selectedYear"
              :session-id="currentSessionId!"
              :member-activity="memberActivity"
              :time-filter="timeFilter"
              :selected-year="selectedYear"
              :available-years="availableYears"
            />
            <QuotesTab
              v-else-if="activeTab === 'quotes'"
              :key="'quotes-' + selectedYear"
              :session-id="currentSessionId!"
              :time-filter="timeFilter"
            />
            <RelationshipsTab
              v-else-if="activeTab === 'relationships'"
              :key="'relationships-' + selectedYear"
              :session-id="currentSessionId!"
              :time-filter="timeFilter"
            />
            <TimelineTab
              v-else-if="activeTab === 'timeline'"
              :key="'timeline-' + selectedYear"
              :session-id="currentSessionId!"
              :daily-activity="dailyActivity"
              :member-activity="memberActivity"
              :time-range="timeRange"
              :time-filter="timeFilter"
            />
            <AITab
              v-else-if="activeTab === 'ai'"
              :key="'ai-' + selectedYear"
              :session-id="currentSessionId!"
              :session-name="session.name"
              :time-filter="timeFilter"
            />
          </Transition>
        </div>
      </div>
    </template>

    <!-- Empty State -->
    <div v-else class="flex h-full items-center justify-center">
      <p class="text-gray-500">无法加载会话数据</p>
    </div>
  </div>
</template>

<style scoped>
.tab-slide-enter-active,
.tab-slide-leave-active {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.tab-slide-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.tab-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
