<template>
  <PageFrame section-class="tasks-section">
    <div class="tasks-panel">
      <TaskSidebar v-model="activeTab" />
      <div class="tasks-content">
        <ActivityProgress v-if="activeTab === 'daily'" subtitle="本日活跃" />
        <ActivityProgress v-else-if="activeTab === 'achievement'" subtitle="当前成就点" />
        <TaskCard
          v-for="task in currentTasks"
          :key="task.title"
          :title="task.title"
          :progress="task.progress"
          :disabled="task.disabled"
        />
      </div>
    </div>
  </PageFrame>
</template>

<script setup lang="ts">
import PageFrame from '@/components/layout/PageFrame.vue'
import TaskCard from '@/components/cards/TaskCard.vue'
import TaskSidebar, { type TaskTab } from '@/components/tasks/TaskSidebar.vue'
import ActivityProgress from '@/components/tasks/ActivityProgress.vue'

type TaskItem = {
  title: string
  progress: string
  disabled?: boolean
}

const activeTab = ref<TaskTab>('newbie')

const newbieTasks: TaskItem[] = [
  { title: '任务名称任务名称任务名称', progress: '2/5' },
  { title: '任务名称任务名称任务名称', progress: '0/5' },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
  { title: '任务名称任务名称任务名称', progress: '2/5' },
  { title: '任务名称任务名称任务名称', progress: '0/5' },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
  { title: '任务名称任务名称任务名称', progress: '2/5' },
  { title: '任务名称任务名称任务名称', progress: '0/5' },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
]

const dailyTasks: TaskItem[] = [
  { title: '任务名称任务名称任务名称', progress: '2/5' },
  { title: '任务名称任务名称任务名称', progress: '0/5' },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
]

const placeholderTasks: TaskItem[] = [
  { title: '任务名称任务名称任务名称', progress: '2/5' },
  { title: '任务名称任务名称任务名称', progress: '0/5' },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
  { title: '任务名称任务名称任务名称', progress: '5/5', disabled: true },
]

const currentTasks = computed(() => {
  if (activeTab.value === 'newbie') return newbieTasks
  if (activeTab.value === 'daily') return dailyTasks
  return placeholderTasks
})
</script>

<style scoped lang="scss">
:deep(.tasks-section) {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-radius: 12px;
  // padding: 16px;
}

.tasks-panel {
  display: flex;
  flex: 1;
  min-height: 0;
  border: 1px solid #d3e1f0;
  border-radius: 12px;
  background: #fff;
}

.tasks-content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  border-radius: 12px;
  padding: 32px;
  padding-top: 32px;
}
</style>
