<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

import TaskQuadrantCard from '@/components/dashboard/TaskQuadrantCard.vue'
import TodayTimeline from '@/components/dashboard/TodayTimeline.vue'
import { completeTask, createTask, getTasks, undoCompleteTask, updateTask, deleteTask } from '@/api/task'
import { getTodaySchedule } from '@/api/schedule'
import { useAuthStore } from '@/stores/auth'
import type { TaskItem, TodayEvent } from '@/types/dashboard'
import { formatHeaderDate } from '@/utils/date'

const router = useRouter()
const authStore = useAuthStore()

const pageLoading = ref(true)
const taskLoading = ref(true)
const scheduleLoading = ref(true)
const saveTaskLoading = ref(false)
const logoutLoading = ref(false)
const taskDialogVisible = ref(false)
const isEditMode = ref(false)
const editingTaskId = ref<number | null>(null)

const dashboardMainRef = ref<HTMLElement | null>(null)
const dashboardMainInnerRef = ref<HTMLElement | null>(null)
const dashboardTopbarRef = ref<HTMLElement | null>(null)
const dashboardContentRef = ref<HTMLElement | null>(null)
const dashboardMainScale = ref(1)

const tasks = ref<TaskItem[]>([])
const todayEvents = ref<TodayEvent[]>([])

const taskForm = reactive<{
  title: string
  priority_group: number
  deadline_at: Date | null
  urgency_threshold_at: Date | null
}>({
  title: '',
  priority_group: 2,
  deadline_at: null,
  urgency_threshold_at: null,
})

const quadrantOrder = [1, 2, 3, 4] as const

const quadrantMeta: Record<
  (typeof quadrantOrder)[number],
  { title: string; caption: string; tone: 'danger' | 'primary' | 'warning' | 'slate'; emptyText: string }
> = {
  1: {
    title: '重要且紧急',
    caption: '优先处理',
    tone: 'danger',
    emptyText: '暂无关键紧急任务',
  },
  2: {
    title: '重要不紧急',
    caption: '持续推进',
    tone: 'primary',
    emptyText: '这里放长期核心任务',
  },
  3: {
    title: '简单不重要',
    caption: '顺手完成',
    tone: 'warning',
    emptyText: '暂无琐碎低价值任务',
  },
  4: {
    title: '不简单不重要',
    caption: '谨慎投入',
    tone: 'slate',
    emptyText: '这里放辅助或暂缓任务',
  },
}

const pageTitleDate = computed(() => formatHeaderDate(new Date()))
const greetingName = computed(() => authStore.lastUsername || 'SmartMate 用户')

const groupedTasks = computed(() => {
  const groups: Record<number, TaskItem[]> = { 1: [], 2: [], 3: [], 4: [] }
  for (const task of tasks.value) {
    if (groups[task.priority_group]) groups[task.priority_group].push(task)
  }
  for (const key of Object.keys(groups)) {
    groups[Number(key)].sort((left, right) => {
      if (left.is_completed !== right.is_completed) return left.is_completed ? 1 : -1
      return left.id - right.id
    })
  }
  return groups
})

async function loadTasksData() {
  taskLoading.value = true
  try { tasks.value = await getTasks() }
  catch (error) { ElMessage.warning(error instanceof Error ? error.message : '任务加载失败') }
  finally { taskLoading.value = false }
}

async function loadScheduleData() {
  scheduleLoading.value = true
  try {
    const schedules = await getTodaySchedule()
    todayEvents.value = schedules.flatMap((item) => item.events).sort((left, right) => left.order - right.order)
  } catch (error) { ElMessage.warning(error instanceof Error ? error.message : '今日日程加载失败') }
  finally { scheduleLoading.value = false }
}

async function loadDashboardData() {
  pageLoading.value = true
  const minLoadingTimer = new Promise((resolve) => setTimeout(resolve, 800))
  await Promise.allSettled([loadTasksData(), loadScheduleData(), minLoadingTimer])
  pageLoading.value = false
}

async function handleTaskToggle(task: TaskItem) {
  try {
    if (task.is_completed) {
      const result = await undoCompleteTask(task.id)
      task.is_completed = result.is_completed
      task.status = result.status
      ElMessage.success('任务已恢复为未完成')
      return
    }
    const result = await completeTask(task.id)
    task.is_completed = result.is_completed
    task.status = result.status
    ElMessage.success(result.already_completed ? '任务已经是完成状态' : '任务已标记为完成')
  } catch (error) { ElMessage.error(error instanceof Error ? error.message : '任务更新失败') }
}

function openCreateTaskDialog() {
  isEditMode.value = false
  editingTaskId.value = null
  taskForm.title = ''
  taskForm.priority_group = 2
  taskForm.deadline_at = null
  taskForm.urgency_threshold_at = null
  taskDialogVisible.value = true
}

function handleTaskEdit(task: TaskItem) {
  isEditMode.value = true
  editingTaskId.value = task.id
  taskForm.title = task.title
  taskForm.priority_group = task.priority_group
  taskForm.deadline_at = task.deadline ? new Date(task.deadline) : null
  taskForm.urgency_threshold_at = task.urgency_threshold_at ? new Date(task.urgency_threshold_at) : null
  taskDialogVisible.value = true
}

async function handleTaskDelete(task: TaskItem) {
  try {
    await ElMessageBox.confirm('确定要删除该任务吗？操作不可撤销。', '确认删除', {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
      roundButton: true
    })
    
    await deleteTask(task.id)
    tasks.value = tasks.value.filter(t => t.id !== task.id)
    ElMessage.success('任务已成功删除')
  } catch (error) {
    if (error === 'cancel') return
    ElMessage.error(error instanceof Error ? error.message : '任务删除失败')
  }
}

async function handleSaveTask() {
  if (!taskForm.title.trim()) { ElMessage.warning('请先填写任务标题'); return }
  saveTaskLoading.value = true
  try {
    if (isEditMode.value && editingTaskId.value) {
      // 执行更新交互
      const updated = await updateTask({
        task_id: editingTaskId.value,
        title: taskForm.title.trim(),
        priority_group: taskForm.priority_group,
        deadline_at: taskForm.deadline_at ? taskForm.deadline_at.toISOString() : null,
        urgency_threshold_at: taskForm.urgency_threshold_at ? taskForm.urgency_threshold_at.toISOString() : null,
      })
      const idx = tasks.value.findIndex(t => t.id === updated.id)
      if (idx !== -1) tasks.value[idx] = updated
      ElMessage.success('任务已更新')
    } else {
      // 执行创建交互
      const created = await createTask({
        title: taskForm.title.trim(),
        priority_group: taskForm.priority_group,
        deadline_at: taskForm.deadline_at ? taskForm.deadline_at.toISOString() : null,
        urgency_threshold_at: taskForm.urgency_threshold_at ? taskForm.urgency_threshold_at.toISOString() : null,
      })
      tasks.value.unshift({ 
        id: created.id, 
        user_id: 0, 
        title: created.title, 
        priority_group: created.priority_group, 
        status: created.status, 
        deadline: created.deadline_at ?? '', 
        is_completed: false,
        urgency_threshold_at: created.urgency_threshold_at
      })
      ElMessage.success('任务已添加')
    }
    taskDialogVisible.value = false
  } catch (error) { ElMessage.error(error instanceof Error ? error.message : '保存任务失败') }
  finally { saveTaskLoading.value = false }
}

async function handleLogout() {
  logoutLoading.value = true
  try { await authStore.logout(); ElMessage.success('已安全退出登录') }
  catch (error) { ElMessage.warning(error instanceof Error ? `${error.message}，本地登录态已清除` : '退出接口异常，本地登录态已清除') }
  finally { logoutLoading.value = false; await router.push('/auth') }
}

function handleCourseImportEntry() {
  void router.push('/schedule')
}

function syncDashboardMainScale() {
  const main = dashboardMainRef.value
  const inner = dashboardMainInnerRef.value
  const topbar = dashboardTopbarRef.value
  const content = dashboardContentRef.value
  if (!main || !inner || !topbar || !content || window.innerWidth <= 980) { dashboardMainScale.value = 1; return }
  dashboardMainScale.value = 1
  window.requestAnimationFrame(() => {
    const availableHeight = main.clientHeight
    const gridGap = 10
    const naturalHeight = topbar.getBoundingClientRect().height + content.scrollHeight + gridGap
    if (!availableHeight || !naturalHeight) { dashboardMainScale.value = 1; return }
    const nextScale = Math.min(1, (availableHeight / naturalHeight) * 0.96)
    dashboardMainScale.value = Number(nextScale.toFixed(4))
  })
}

onMounted(async () => {
  await loadDashboardData()
  await nextTick()
  syncDashboardMainScale()
  window.addEventListener('resize', syncDashboardMainScale)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', syncDashboardMainScale)
})

watch([() => tasks.value.length, () => todayEvents.value.length, pageLoading], async () => {
  await nextTick()
  syncDashboardMainScale()
}, { flush: 'post' })
</script>

<template>
  <section ref="dashboardMainRef" class="dashboard-main">
    <div ref="dashboardMainInnerRef" class="dashboard-main__scaled" :style="{ '--dashboard-main-scale': dashboardMainScale }">
          <header ref="dashboardTopbarRef" class="dashboard-topbar glass-panel dashboard-item-pop" :style="{ '--anim-delay': '0s' }">
            <div>
              <div class="dashboard-topbar__brandline">
                <strong>AI 智慧日程系统</strong>
                <span>{{ pageTitleDate }}</span>
              </div>
            </div>

            <div class="dashboard-topbar__actions">
              <button type="button" class="dashboard-topbar__logout" :disabled="logoutLoading" @click="handleLogout">{{ logoutLoading ? '退出中...' : '登出' }}</button>
              <div class="dashboard-topbar__profile">
                <strong>{{ greetingName }}</strong>
                <span>{{ greetingName.slice(0, 1).toUpperCase() }}</span>
              </div>
            </div>
          </header>

          <div ref="dashboardContentRef" class="dashboard-content page-shell">
            <TodayTimeline class="dashboard-item-pop" :style="{ '--anim-delay': '0.04s' }" :events="todayEvents" :loading="scheduleLoading || pageLoading" />

            <div class="dashboard-actions dashboard-item-pop" :style="{ '--anim-delay': '0.08s' }">
              <button type="button" class="dashboard-actions__primary" @click="openCreateTaskDialog">添加任务</button>
            </div>

            <section class="dashboard-quadrants">
              <TaskQuadrantCard
                v-for="(group, index) in quadrantOrder"
                :key="group"
                class="dashboard-item-pop"
                :style="{ '--anim-delay': (0.12 + index * 0.04) + 's' }"
                :title="quadrantMeta[group].title"
                :caption="quadrantMeta[group].caption"
                :tone="quadrantMeta[group].tone"
                :empty-text="quadrantMeta[group].emptyText"
                :count="groupedTasks[group].length"
                :tasks="groupedTasks[group]"
                :loading="taskLoading || pageLoading"
                @toggle="handleTaskToggle"
                @edit="handleTaskEdit"
                @delete="handleTaskDelete"
              />
            </section>

            <section class="dashboard-import glass-panel dashboard-item-pop" :style="{ '--anim-delay': '0.28s' }">
              <div class="dashboard-import__content">
                <p class="dashboard-import__eyebrow">课程导入</p>
                <h2>导入课表</h2>
                <p>导入课表后，可以在安排日程时避开上课时间。</p>
                <button type="button" class="dashboard-import__button" @click="handleCourseImportEntry">开始导入</button>
              </div>
              <div class="dashboard-import__shape">
                <span class="dashboard-import__shape-ring" />
                <span class="dashboard-import__shape-core" />
              </div>
            </section>
          </div>
        </div>
      </section>

    <el-dialog
      v-model="taskDialogVisible"
      :title="isEditMode ? '编辑任务详情' : '添加新任务'"
      width="440px"
      align-center
      class="dashboard-dialog premium-dialog"
    >
      <el-form label-position="top">
        <el-form-item label="任务标题">
          <el-input v-model="taskForm.title" maxlength="255" placeholder="例如：完成数据库复习" />
        </el-form-item>
        <el-form-item label="优先级象限">
          <el-select v-model="taskForm.priority_group" class="dashboard-dialog__select" popper-class="premium-select-popper" placement="bottom-start">
            <el-option :value="1" label="1 - 重要且紧急" />
            <el-option :value="2" label="2 - 重要不紧急" />
            <el-option :value="3" label="3 - 简单不重要" />
            <el-option :value="4" label="4 - 不简单不重要" />
          </el-select>
        </el-form-item>
        <div class="dialog-double-row">
          <el-form-item label="截止时间" class="half">
            <el-date-picker
              v-model="taskForm.deadline_at"
              type="datetime"
              placeholder="截止时间"
              class="dashboard-dialog__select"
              popper-class="premium-select-popper"
            />
          </el-form-item>
          <el-form-item label="紧急阈值" class="half">
            <el-date-picker
              v-model="taskForm.urgency_threshold_at"
              type="datetime"
              placeholder="进入紧急的时间点"
              class="dashboard-dialog__select"
              popper-class="premium-select-popper"
            />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="premium-dialog__footer">
          <button class="premium-btn premium-btn--ghost" @click="taskDialogVisible = false">取消</button>
          <button class="premium-btn premium-btn--primary" :disabled="saveTaskLoading" @click="handleSaveTask">
            {{ saveTaskLoading ? '保存中...' : (isEditMode ? '保存修改' : '确认添加') }}
          </button>
        </div>
      </template>
    </el-dialog>
</template>

<style scoped>
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.08); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.15); }

@keyframes dashboard-item-spring {
  0% { opacity: 0; transform: scale(0.9) translateY(20px); }
  60% { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.dashboard-item-pop {
  animation: dashboard-item-spring 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--anim-delay, 0s);
  transform-origin: center center;
}

.dashboard-main { min-width: 0; min-height: 0; overflow: hidden; height: 100%; }

.dashboard-main__scaled {
  --dashboard-main-scale: 1;
  width: calc(100% / var(--dashboard-main-scale));
  height: calc(100% / var(--dashboard-main-scale));
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 10px;
  transform: scale(var(--dashboard-main-scale));
  transform-origin: top left;
}

.dashboard-topbar {
  border-radius: 20px;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
  flex-shrink: 0;
  max-height: 72px; /* 锁定高度，防止在布局缩放时发生形变 */
}

.dashboard-topbar__brandline { display: flex; align-items: center; gap: 14px; }
.dashboard-topbar__brandline strong { font-size: 18px; color: #14233a; }
.dashboard-topbar__brandline span { color: #677588; font-size: 13px; }

.dashboard-topbar__actions { display: flex; align-items: center; gap: 14px; }
.dashboard-topbar__logout { min-width: 88px; height: 38px; border-radius: 13px; border: 1px solid rgba(28, 98, 205, 0.22); background: #f9fbff; color: #1d63cf; cursor: pointer; }
.dashboard-topbar__profile { display: flex; align-items: center; gap: 10px; }
.dashboard-topbar__profile strong { font-size: 13px; }
.dashboard-topbar__profile span { width: 38px; height: 38px; border-radius: 999px; background: #eef3fb; color: #314156; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }

.dashboard-content { width: 100%; display: grid; gap: 14px; align-content: start; }
.dashboard-actions { display: flex; justify-content: flex-end; }
.dashboard-actions__primary { height: 42px; padding: 0 20px; border: none; border-radius: 15px; background: #3b82f6; color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }

.dashboard-quadrants { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }

.dashboard-import {
  border-radius: 20px;
  padding: 24px 32px;
  min-height: 180px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.dashboard-import__content { position: relative; z-index: 1; max-width: 460px; }
.dashboard-import__eyebrow { margin: 0 0 10px; color: #3b82f6; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.dashboard-import h2 { margin: 0; font-size: 24px; color: #0f172a; font-weight: 800; }
.dashboard-import p { margin: 8px 0 16px; color: #64748b; font-size: 13px; line-height: 1.5; }
.dashboard-import__button { height: 44px; padding: 0 24px; border: none; border-radius: 12px; background: #3b82f6; color: #ffffff; font-weight: 700; cursor: pointer; }

.dashboard-import__shape { position: absolute; right: -50px; bottom: -50px; width: 220px; height: 220px; opacity: 0.1; pointer-events: none; }
.dashboard-import__shape-ring { position: absolute; inset: 0; border: 40px solid #3b82f6; border-radius: 50%; }
.dashboard-import__shape-core { position: absolute; inset: 80px; background: #3b82f6; border-radius: 50%; }

/* --- Premium Dialog Styles --- */
:global(.premium-dialog) {
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden;
}

:global(.premium-dialog .el-dialog__header) {
  padding: 24px 28px 12px !important;
  margin-right: 0 !important;
  text-align: left;
}

:global(.premium-dialog .el-dialog__title) {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em;
}

:global(.premium-dialog .el-dialog__body) {
  padding: 12px 28px 20px !important;
}

:global(.premium-dialog .el-dialog__footer) {
  padding: 0 !important;
}

.premium-dialog__footer {
  padding: 16px 28px 24px;
  background: #f8fafc;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #f1f5f9;
}

.dialog-double-row {
  display: flex;
  gap: 12px;
  width: 100%;
  overflow: hidden;
}
.dialog-double-row .half {
  flex: 1;
  min-width: 0; /* 关键：强制子项可收缩 */
}

.premium-btn {
  height: 40px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.premium-btn--primary {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.premium-btn--primary:hover:not(:disabled) {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

.premium-btn--ghost {
  background: #ffffff;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.premium-btn--ghost:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 弹出动画覆写 */
:global(.dialog-fade-enter-active .premium-dialog) {
  animation: premium-dialog-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes premium-dialog-pop {
  0% { opacity: 0; transform: scale(0.92) translateY(20px); }
  60% { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

:global(.el-overlay) {
  backdrop-filter: blur(6px);
  background: rgba(15, 23, 42, 0.35) !important;
}

/* 表单美化 */
:global(.premium-dialog .el-form-item__label) {
  font-weight: 700 !important;
  color: #475569 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
}

:global(.premium-dialog .el-input__wrapper),
:global(.premium-dialog .el-select__wrapper),
:global(.premium-dialog .el-date-editor.el-input__wrapper) {
  background-color: #f8fafc !important;
  box-shadow: 0 0 0 1px #e2e8f0 inset !important;
  border-radius: 10px !important;
  padding: 4px 12px !important;
  width: 100% !important;
}

:global(.premium-dialog .el-input__wrapper.is-focus),
:global(.premium-dialog .el-select__wrapper.is-focused) {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) inset !important;
  background-color: #ffffff !important;
}
:global(.premium-dialog .el-dialog__headerbtn) {
  top: 20px !important;
  right: 20px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:global(.premium-dialog .el-dialog__headerbtn:hover) {
  background: #e2e8f0 !important;
  transform: rotate(90deg);
}

:global(.premium-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: #64748b !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* 统一输入框高度与背景 */
:global(.premium-dialog .el-input__inner),
:global(.premium-dialog .el-select .el-input__inner) {
  height: 38px !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* --- 下拉菜单扁平化 --- */
:global(.premium-select-popper) {
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.12) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  margin-top: 8px !important;
}

:global(.premium-select-popper .el-select-dropdown__list) {
  padding: 6px !important;
}

:global(.premium-select-popper .el-select-dropdown__item) {
  border-radius: 10px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin-bottom: 2px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  padding: 0 12px !important;
}

:global(.premium-select-popper .el-select-dropdown__item.is-selected) {
  background: #eff6ff !important;
  color: #3b82f6 !important;
}

:global(.premium-select-popper .el-select-dropdown__item:hover) {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

:global(.premium-select-popper .el-popper__arrow) {
  display: none !important;
}

/* 时间选择器特定深度覆盖 */
:global(.premium-select-popper.el-picker-popper) {
  padding: 0 !important;
}

:global(.premium-select-popper .el-picker-panel) {
  background: transparent !important;
}
</style>
