<script setup lang="ts">
import { computed } from 'vue'

interface KanbanTask {
  id: string
  title: string
  completed: boolean
}

interface KanbanQuadrant {
  id: string
  title: string
  color: string
  tasks: KanbanTask[]
}

defineProps<{
  visible: boolean
}>()

const emit = defineEmits<{
  close: []
  toggleTask: [taskId: string]
  openDetail: [quadrantId: string]
}>()

const quadrants = computed<KanbanQuadrant[]>(() => [
  {
    id: 'urgent-important',
    title: '重要且紧急',
    color: '#f56565',
    tasks: [
      { id: '1', title: '将2.0的服务部署到83服务器上', completed: true },
      { id: '2', title: '将83上的遗留的ygzy, recommand和langchain部署起来', completed: true },
      { id: '3', title: '本地知识库接口开发', completed: true },
      { id: '4', title: '将"远光智言"中加入本地文档的问答功能', completed: true },
    ],
  },
  {
    id: 'not-urgent-important',
    title: '重要不紧急',
    color: '#ecc94b',
    tasks: [
      { id: '5', title: '关于X Request的集成', completed: false },
      { id: '6', title: '调研GLM Code', completed: false },
      { id: '7', title: '页面集成llamafactory功能进行开发', completed: false },
      { id: '8', title: '预训练功能开发', completed: false },
      { id: '9', title: '数据生成相关代码', completed: true },
      { id: '10', title: '调研Transformer的一些基础原理', completed: true },
      { id: '11', title: '英文分词并且找寻关键词', completed: false },
      { id: '12', title: '适配多个数据库类型', completed: false },
    ],
  },
  {
    id: 'urgent-not-important',
    title: '紧急不重要',
    color: '#42b9f5',
    tasks: [
      { id: '13', title: '文件预处理功能', completed: false },
      { id: '14', title: '机器学习 - 西瓜书', completed: false },
    ],
  },
  {
    id: 'not-urgent-not-important',
    title: '不重要不紧急',
    color: '#97c950',
    tasks: [],
  },
])
</script>

<template>
  <aside class="kanban-panel" :class="{ visible }">
    <div class="kanban-frame">
      <div class="kanban-header">
        <div class="kanban-title-row">
          <span class="kanban-cloud">☁</span>
          <span class="kanban-title">我的待办</span>
        </div>
        <div class="kanban-nav">
          <a href="#" class="nav-link">🗓 待办日程</a>
          <a href="#" class="nav-link">🗹 已完成的任务</a>
          <a href="#" class="nav-link">♡ 我关注的任务</a>
          <a href="#" class="nav-link">✉ 周报/日报</a>
        </div>
        <button class="kanban-close" type="button" aria-label="Close kanban" @click="emit('close')">
          ×
        </button>
      </div>

      <div class="kanban-quadrants">
        <div
          v-for="quadrant in quadrants"
          :key="quadrant.id"
          class="kanban-quadrant"
          :style="{ '--quadrant-color': quadrant.color }"
        >
          <div class="quadrant-header">
            <span class="quadrant-title">☛ {{ quadrant.title }}</span>
            <button class="quadrant-check" type="button" @click="emit('openDetail', quadrant.id)">☑</button>
          </div>
          <div class="quadrant-content">
            <template v-if="quadrant.tasks.length > 0">
              <div
                v-for="task in quadrant.tasks"
                :key="task.id"
                class="task-item"
                :class="{ completed: task.completed }"
                @click="emit('toggleTask', task.id)"
              >
                <input type="checkbox" :checked="task.completed" disabled />
                <span class="task-title">{{ task.title }}</span>
              </div>
            </template>
            <div v-else class="empty-state">
              恭喜你！已完成了所有待办
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
</template>

<style scoped>
.kanban-panel {
  width: 100%;
  height: 100%;
  padding: 12px 12px 12px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-mid), visibility var(--transition-mid);
}

.kanban-panel.visible {
  opacity: 1;
  visibility: visible;
}

.kanban-frame {
  height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.96), rgba(6, 10, 20, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 20px rgba(34, 211, 238, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kanban-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 243, 255, 0.1);
  flex-shrink: 0;
}

.kanban-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kanban-cloud {
  font-size: 16px;
}

.kanban-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #e0f7ff;
  letter-spacing: 0.08em;
}

.kanban-nav {
  display: flex;
  gap: 20px;
  font-size: 14px;
}

.kanban-nav .nav-link {
  color: var(--text-secondary);
  text-decoration: none;
}

.kanban-nav .nav-link:hover {
  color: var(--accent-cyan);
}

.kanban-close {
  margin-left: 12px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(8, 14, 26, 0.86);
  color: var(--text-dim);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.kanban-close:hover {
  border-color: rgba(34, 211, 238, 0.4);
  color: var(--accent-cyan);
  background: rgba(8, 20, 36, 0.96);
}

.kanban-quadrants {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
}

.kanban-quadrant {
  background: rgba(0, 20, 40, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.quadrant-header {
  padding: 8px 10px;
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--quadrant-color);
  flex-shrink: 0;
}

.quadrant-title {
  letter-spacing: 0.05em;
}

.quadrant-check {
  opacity: 0.8;
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.quadrant-check:hover {
  opacity: 1;
}

.quadrant-content {
  flex: 1;
  padding: 6px 8px;
  overflow-y: auto;
  min-height: 0;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 11px;
  color: #e0f7ff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background-color 0.2s;
}

.task-item:hover {
  background-color: rgba(0, 243, 255, 0.08);
}

.task-item input[type="checkbox"] {
  width: 12px;
  height: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

.task-item.completed {
  text-decoration: line-through;
  color: rgba(224, 247, 255, 0.5);
  background-color: rgba(0, 243, 255, 0.06);
}

.task-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: rgba(224, 247, 255, 0.4);
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

/* Scrollbar styling */
.quadrant-content::-webkit-scrollbar {
  width: 6px;
}

.quadrant-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.quadrant-content::-webkit-scrollbar-thumb {
  background: rgba(0, 243, 255, 0.2);
  border-radius: 3px;
}

.quadrant-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 243, 255, 0.4);
}
</style>