<script setup lang="ts">
import { ref } from 'vue'
import { Trash2, Pencil } from 'lucide-vue-next'

interface Task {
  id: string
  title: string
  completed: boolean
  description?: string
  assignee?: string
  priority?: string
  createdAt?: string
}

const props = defineProps<{
  visible: boolean
  quadrantId: string
  quadrantTitle: string
  quadrantColor: string
}>()

const emit = defineEmits<{
  close: []
}>()

const activeTab = ref<'comments' | 'history'>('comments')
const commentInput = ref('')
const isEditingTitle = ref(false)
const editingTitle = ref('')

const mockTask: Task = {
  id: '1',
  title: '将2.0的服务部署到83服务器上',
  completed: true,
  description: '',
  assignee: 'caoxiaozhu',
  priority: '重要且紧急 (P1)',
  createdAt: '2024-03-21 14:49:35',
}
const description = ref('')

const agents = [
  { id: 'planner', name: '规划师', icon: '📋' },
  { id: 'executor', name: '执行者', icon: '⚡' },
  { id: 'knowledge', name: '知识管理员', icon: '🧠' },
  { id: 'analyst', name: '分析师', icon: '🔍' },
  { id: 'coder', name: '程序员', icon: '💻' },
  { id: 'researcher', name: '研究员', icon: '🔬' },
]

const selectedAgent = ref(agents[0].id)

const priorities = [
  { id: 'urgent-important', name: '重要且紧急', color: '#f56565' },
  { id: 'not-urgent-important', name: '重要不紧急', color: '#ecc94b' },
  { id: 'urgent-not-important', name: '紧急不重要', color: '#42b9f5' },
  { id: 'not-urgent-not-important', name: '不重要不紧急', color: '#97c950' },
]

const selectedPriority = ref('urgent-important')

const taskStatuses = [
  { id: 'pending', name: '未完成' },
  { id: 'in_progress', name: '进行中' },
  { id: 'completed', name: '已完成' },
]

const selectedStatus = ref('completed')

interface SubTask {
  id: number
  title: string
  completed: boolean
  subAgent: string
}

const subtasks = ref<SubTask[]>([])
let subtaskIdCounter = 0

// Drag and drop state
const draggedIndex = ref<number | null>(null)
const dragOverIndex = ref<number | null>(null)

function onDragStart(index: number) {
  draggedIndex.value = index
}

function onDragOver(event: DragEvent, index: number) {
  event.preventDefault()
  dragOverIndex.value = index
}

function onDragLeave() {
  dragOverIndex.value = null
}

function onDrop(event: DragEvent, targetIndex: number) {
  event.preventDefault()
  if (draggedIndex.value !== null && draggedIndex.value !== targetIndex) {
    const item = subtasks.value.splice(draggedIndex.value, 1)[0]
    subtasks.value.splice(targetIndex, 0, item)
  }
  draggedIndex.value = null
  dragOverIndex.value = null
}

function onDragEnd() {
  draggedIndex.value = null
  dragOverIndex.value = null
}

function formatDate() {
  return new Date().toLocaleString('zh-CN')
}

function startEditTitle() {
  editingTitle.value = mockTask.title
  isEditingTitle.value = true
}

function saveTitle() {
  if (editingTitle.value.trim()) {
    mockTask.title = editingTitle.value.trim()
  }
  isEditingTitle.value = false
}

function addSubtask() {
  subtasks.value.push({
    id: ++subtaskIdCounter,
    title: '',
    completed: false,
    subAgent: '',
  })
}

function removeSubtask(index: number) {
  subtasks.value.splice(index, 1)
}
</script>

<template>
  <div class="kanban-detail-overlay" :class="{ visible }" @click.self="emit('close')">
    <div class="kanban-detail-panel">
      <div class="detail-header">
        <div class="task-title-section">
          <div class="task-title">
            <span class="check-icon">☑</span>
            <input
              v-if="isEditingTitle"
              v-model="editingTitle"
              class="title-input"
              maxlength="20"
              @blur="saveTitle"
              @keyup.enter="saveTitle"
              @keyup.escape="isEditingTitle = false"
              autofocus
            />
            <span v-else class="title-text">{{ mockTask.title }}</span>
            <button class="btn-edit-title" type="button" title="修改标题" @click="startEditTitle">
              <Pencil :size="14" />
            </button>
          </div>
          <div class="task-meta">
            创建于：{{ mockTask.createdAt }}
          </div>
        </div>
        <div class="header-actions">
          <button class="btn-delete-icon" type="button" title="删除任务">
            <Trash2 :size="16" />
          </button>
        </div>
      </div>

      <div class="detail-content">
        <div class="main-content">
          <div class="section">
            <div class="section-title">
              <span class="icon">☞</span>
              描述
            </div>
            <textarea
              v-model="description"
              class="description-box"
              placeholder="添加详细描述..."
            ></textarea>
          </div>

          <div class="task-info-list">
            <div class="info-item">
              <span class="icon">☰</span>
              主负责指挥官：
              <select v-model="selectedAgent" class="agent-select">
                <option v-for="agent in agents" :key="agent.id" :value="agent.id">
                  {{ agent.icon }} {{ agent.name }}
                </option>
              </select>
            </div>
            <div class="info-item">
              <span class="icon">⚑</span>
              优先级：
              <select v-model="selectedPriority" class="priority-select">
                <option v-for="p in priorities" :key="p.id" :value="p.id">
                  {{ p.name }}
                </option>
              </select>
            </div>
            <div class="info-item">
              <span class="icon">📅</span>
              任务状态：
              <select v-model="selectedStatus" class="status-select">
                <option v-for="s in taskStatuses" :key="s.id" :value="s.id">
                  {{ s.name }}
                </option>
              </select>
            </div>
          </div>

          <div class="section">
            <div class="section-title subtask-section">
              <span>
                <span class="icon">☑</span>
                子任务
              </span>
              <button class="btn-add-subtask" type="button" @click="addSubtask">添加子任务</button>
            </div>
            <div v-if="subtasks.length === 0" class="subtask-empty">暂无子任务</div>
            <div v-else class="subtask-list">
              <div
                v-for="(subtask, index) in subtasks"
                :key="subtask.id"
                class="subtask-item"
                :class="{ 'drag-over': dragOverIndex === index }"
                draggable="true"
                @dragstart="onDragStart(index)"
                @dragover="onDragOver($event, index)"
                @dragleave="onDragLeave"
                @drop="onDrop($event, index)"
                @dragend="onDragEnd"
              >
                <button class="subtask-drag" type="button" title="拖动排序">⋮⋮</button>
                <input
                  type="checkbox"
                  v-model="subtask.completed"
                  class="subtask-checkbox"
                />
                <input
                  v-model="subtask.title"
                  class="subtask-input"
                  :class="{ completed: subtask.completed }"
                  placeholder="输入子任务名称..."
                  @keyup.enter="addSubtask"
                />
                <select v-model="subtask.subAgent" class="subtask-agent">
                  <option value="">子指挥官</option>
                  <option v-for="agent in agents" :key="agent.id" :value="agent.id">
                    {{ agent.icon }} {{ agent.name }}
                  </option>
                </select>
                <button class="subtask-delete" type="button" @click="removeSubtask(index)">×</button>
              </div>
            </div>
          </div>

          <div class="section">
            <div class="section-title">
              <span class="icon">💬</span>
              <span class="tab" :class="{ active: activeTab === 'comments' }" @click="activeTab = 'comments'">评论</span>
              <span class="tab" :class="{ active: activeTab === 'history' }" @click="activeTab = 'history'">操作记录</span>
            </div>
            <div class="comment-empty">没有相关内容</div>
            <div class="comment-input-area">
              <textarea
                v-model="commentInput"
                class="comment-input"
                placeholder="输入评论，Enter发表评论，Shift+Enter换行"
              ></textarea>
              <button class="btn-comment" type="button">评论</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.kanban-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 14, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-mid), visibility var(--transition-mid);
  z-index: 9999;
  isolation: isolate;
}

.kanban-detail-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.kanban-detail-panel {
  position: relative;
  width: 90%;
  max-width: 1100px;
  max-height: 90%;
  border-radius: 16px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  background: linear-gradient(180deg, rgba(12, 20, 36, 0.98), rgba(8, 14, 28, 0.96));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(34, 211, 238, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform var(--transition-mid);
}

.kanban-detail-overlay.visible .kanban-detail-panel {
  transform: scale(1);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid rgba(0, 243, 255, 0.1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-delete-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 77, 79, 0.3);
  background: rgba(255, 77, 79, 0.08);
  color: #ff4d4f;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-delete-icon:hover {
  background: rgba(255, 77, 79, 0.2);
  border-color: #ff4d4f;
}

.btn-delete-icon :deep(svg) {
  stroke: currentColor;
}

.task-title-section {
  flex: 1;
  min-width: 0;
}

.task-title {
  font-size: 22px;
  font-weight: 600;
  color: #e0f7ff;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.check-icon {
  color: #52c41a;
  flex-shrink: 0;
}

.title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}

.title-input {
  font-size: 22px;
  font-weight: 600;
  font-family: inherit;
  color: #e0f7ff;
  background: rgba(0, 243, 255, 0.08);
  border: 1px solid rgba(0, 243, 255, 0.3);
  border-radius: 6px;
  padding: 4px 10px;
  outline: none;
  min-width: 200px;
  max-width: 400px;
}

.title-input:focus {
  border-color: rgba(0, 243, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.2);
}

.btn-edit-title {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  flex-shrink: 0;
}

.task-title:hover .btn-edit-title {
  opacity: 1;
}

.btn-edit-title:hover {
  background: rgba(0, 243, 255, 0.1);
  border-color: rgba(0, 243, 255, 0.2);
  color: var(--accent-cyan);
}

.btn-edit-title :deep(svg) {
  stroke: currentColor;
}

.task-meta {
  font-size: 14px;
  color: var(--text-dim);
}

.avatar {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00f3ff, #0891b2);
  color: #000;
  text-align: center;
  line-height: 24px;
  font-weight: 600;
  font-size: 12px;
  margin-right: 6px;
}

.detail-content {
  padding: 20px 24px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #e0f7ff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title .icon {
  font-size: 16px;
  color: var(--text-dim);
}

.section-title .tab {
  font-size: 14px;
  color: var(--text-dim);
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  margin-right: 12px;
  font-weight: normal;
}

.section-title .tab.active {
  color: #e0f7ff;
  border-bottom-color: #00f3ff;
  font-weight: 600;
}

.description-box {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 243, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  min-height: 100px;
  color: var(--text-dim);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.description-box:focus {
  border-color: rgba(0, 243, 255, 0.3);
}

.description-box::placeholder {
  color: var(--text-dim);
}

.task-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e0f7ff;
}

.info-item .icon {
  color: var(--text-dim);
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.agent-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 243, 255, 0.2);
  border-radius: 6px;
  color: #e0f7ff;
  font-size: 13px;
  font-family: inherit;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}

.agent-select:hover {
  border-color: rgba(0, 243, 255, 0.4);
}

.agent-select:focus {
  border-color: rgba(0, 243, 255, 0.5);
}

.agent-select option {
  background: #0a0f1a;
  color: #e0f7ff;
}

.priority-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 243, 255, 0.2);
  border-radius: 6px;
  color: #e0f7ff;
  font-size: 13px;
  font-family: inherit;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}

.priority-select:hover {
  border-color: rgba(0, 243, 255, 0.4);
}

.priority-select:focus {
  border-color: rgba(0, 243, 255, 0.5);
}

.priority-select option,
.status-select option {
  background: #0a0f1a;
  color: #e0f7ff;
}

.status-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 243, 255, 0.2);
  border-radius: 6px;
  color: #e0f7ff;
  font-size: 13px;
  font-family: inherit;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}

.status-select:hover {
  border-color: rgba(0, 243, 255, 0.4);
}

.status-select:focus {
  border-color: rgba(0, 243, 255, 0.5);
}

.priority-high {
  color: #ff4d4f;
  font-weight: 600;
}

.status-completed {
  color: var(--text-dim);
}

.subtask-section {
  justify-content: space-between;
  align-items: center;
}

.btn-add-subtask {
  padding: 6px 12px;
  border: 1px solid rgba(0, 243, 255, 0.3);
  border-radius: 4px;
  background: rgba(0, 243, 255, 0.06);
  color: var(--accent-cyan);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-add-subtask:hover {
  background: rgba(0, 243, 255, 0.12);
  border-color: rgba(0, 243, 255, 0.5);
}

.subtask-empty {
  color: var(--text-dim);
  font-size: 14px;
}

.subtask-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subtask-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 243, 255, 0.08);
  border-radius: 8px;
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
}

.subtask-item.drag-over {
  border-color: rgba(0, 243, 255, 0.5);
  border-style: dashed;
}

.subtask-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.subtask-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e0f7ff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.subtask-input.completed {
  text-decoration: line-through;
  color: var(--text-dim);
}

.subtask-input::placeholder {
  color: var(--text-dim);
}

.subtask-delete {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.subtask-delete:hover {
  background: rgba(255, 77, 79, 0.2);
  color: #ff4d4f;
}

.subtask-drag {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.subtask-drag:hover {
  background: rgba(0, 243, 255, 0.1);
  color: var(--accent-cyan);
}

.subtask-agent {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 243, 255, 0.15);
  border-radius: 4px;
  color: #e0f7ff;
  font-size: 11px;
  font-family: inherit;
  padding: 4px 6px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
  flex-shrink: 0;
  min-width: 80px;
}

.subtask-agent:hover {
  border-color: rgba(0, 243, 255, 0.3);
}

.subtask-agent:focus {
  border-color: rgba(0, 243, 255, 0.4);
}

.subtask-agent option {
  background: #0a0f1a;
  color: #e0f7ff;
}

.comment-empty {
  color: var(--text-dim);
  font-size: 14px;
  padding: 12px 0;
}

.comment-input-area {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  border-top: 1px solid rgba(0, 243, 255, 0.1);
  padding-top: 12px;
}

.comment-input {
  flex: 1;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 243, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #e0f7ff;
  font-size: 14px;
  resize: vertical;
  outline: none;
  transition: border-color var(--transition-fast);
}

.comment-input:focus {
  border-color: rgba(0, 243, 255, 0.5);
}

.comment-input::placeholder {
  color: var(--text-dim);
}

.btn-comment {
  padding: 10px 20px;
  background: rgba(0, 243, 255, 0.1);
  border: 1px solid rgba(0, 243, 255, 0.2);
  border-radius: 8px;
  color: var(--accent-cyan);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-comment:hover {
  background: rgba(0, 243, 255, 0.2);
}

/* Scrollbar styling */
.detail-content::-webkit-scrollbar {
  width: 8px;
}

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

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

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