<script setup lang="ts">
import { ChevronLeft, ChevronRight, Clock3, Plus } from 'lucide-vue-next'
import { useScheduleCenterPage } from './composables/useScheduleCenterPage'

const {
  weekdayLabels,
  currentMonth,
  panelOpen,
  loadingMonth,
  loadingDetail,
  newTodoTitle,
  newTaskTitle,
  newTaskPriority,
  newReminderTitle,
  newReminderTime,
  newGoalTitle,
  panelMode,
  panelFrameRef,
  calendarDays,
  panelRings,
  timelineItems,
  monthOverview,
  getMonthKey,
  openDate,
  shiftMonth,
  addTodo,
  addTask,
  addReminder,
  addGoal,
  toggleTimelineItem,
  removeTimelineItem,
  animatePanelEnter,
  animatePanelLeave,
} = useScheduleCenterPage()
</script>

<template>
  <div class="schedule-center scanlines" :class="{ 'panel-active': panelOpen }">
    <div class="bg-grid"></div>
    <div class="bg-scan"></div>
    <div class="bg-orbit"></div>

    <div class="schedule-shell">
      <section class="frame board">
        <div class="topbar">
          <div class="hero-label">SCHEDULE CENTER / TACTICAL CALENDAR MATRIX</div>
        </div>

        <div class="metrics">
          <div class="metric">
            <div class="small-label">Pending Queue</div>
            <strong>{{ monthOverview.todo_total }}</strong>
          </div>
          <div class="metric">
            <div class="small-label">Task Pressure</div>
            <strong>{{ monthOverview.task_due_total }}</strong>
          </div>
          <div class="metric warn">
            <div class="small-label">Reminder Burst</div>
            <strong>{{ monthOverview.reminder_total }}</strong>
          </div>
          <div class="metric alert">
            <div class="small-label">Critical Focus</div>
            <strong>{{ monthOverview.high_priority_total }}</strong>
          </div>
        </div>

        <div class="grid-head">
          <div>
            <div class="eyebrow">Calendar Matrix</div>
            <div class="month">{{ getMonthKey(currentMonth) }}</div>
          </div>
          <div class="toolbar">
            <button class="ghost-btn" type="button" @click="shiftMonth(-1)">
              <ChevronLeft :size="16" />
            </button>
            <button class="ghost-btn" type="button" @click="shiftMonth(1)">
              <ChevronRight :size="16" />
            </button>
          </div>
        </div>

        <div class="weekday">
          <div v-for="label in weekdayLabels" :key="label">{{ label }}</div>
        </div>

        <div class="days" :class="{ loading: loadingMonth }">
          <template v-for="day in calendarDays" :key="day.dateKey">
            <div v-if="day.isPlaceholder" class="day muted" aria-hidden="true"></div>
            <button
              v-else
              class="day calendar-cell"
              :class="{
                active: day.isSelected,
                today: day.isToday,
              }"
              @click="openDate(day.dateKey)"
            >
              <div class="day-top">
                <span class="day-num">{{ day.dayNumber }}</span>
                <span class="risk">{{ day.risk }}</span>
              </div>
              <div class="state">{{ day.state }}</div>
              <div class="bars">
                <div v-for="bar in day.bars" :key="bar.key" class="bar">
                  <span>{{ bar.key }}</span>
                  <div class="bar-track">
                    <div class="bar-fill" :style="{ '--value': bar.value }"></div>
                  </div>
                  <span>{{ bar.count }}</span>
                </div>
              </div>
            </button>
          </template>
        </div>
      </section>

      <Transition :css="false" @enter="animatePanelEnter" @leave="animatePanelLeave">
        <aside v-if="panelOpen" ref="panelFrameRef" class="frame side date-panel">
          <div class="panel-header">
            <div class="panel-title-line">DAY DIAGNOSTICS / ACTIVE FEED</div>
          </div>

          <div class="panel-switcher">
            <button class="panel-tab" :class="{ active: panelMode === 'detail' }" @click="panelMode = 'detail'">查看当前设置</button>
            <button class="panel-tab" :class="{ active: panelMode === 'create' }" @click="panelMode = 'create'">新增安排</button>
          </div>

          <div class="ring-strip">
            <div v-for="ring in panelRings" :key="ring.label" class="ring-card">
              <div class="ring" :class="ring.tone" :style="{ '--pct': ring.value }">{{ ring.value }}%</div>
              <div class="micro">{{ ring.label }}</div>
            </div>
          </div>

          <div v-if="loadingDetail" class="panel-loading">SYNCING DAY DATA...</div>

          <div v-else class="panel-content">
            <template v-if="panelMode === 'detail'">
              <div class="timeline">
                <article v-for="item in timelineItems" :key="item.id" class="event" :class="item.tone">
                  <div class="event-top">
                    <span class="event-time">{{ item.time }}</span>
                    <span class="event-type">{{ item.label }}</span>
                  </div>
                  <div class="event-title">{{ item.title }}</div>
                  <div class="event-meta">{{ item.meta }}</div>
                  <div class="event-actions">
                    <button class="mini-btn" type="button" @click="toggleTimelineItem(item)">{{ item.done ? '恢复' : '完成' }}</button>
                    <button class="mini-btn danger" type="button" @click="removeTimelineItem(item)">删除</button>
                  </div>
                </article>

                <div v-if="!timelineItems.length" class="empty-state">当前日期还没有安排</div>
              </div>
            </template>

            <template v-else>
              <div class="create-stack">
                <section class="create-card">
                  <div class="create-head">
                    <span>新增 TODO</span>
                    <span>QUEUE</span>
                  </div>
                  <div class="create-row">
                    <input v-model="newTodoTitle" placeholder="新增当天待办..." @keyup.enter="addTodo" />
                    <button type="button" @click="addTodo">
                      <Plus :size="14" />
                    </button>
                  </div>
                </section>

                <section class="create-card">
                  <div class="create-head">
                    <span>新增任务</span>
                    <span>TASK</span>
                  </div>
                  <div class="create-row split">
                    <input v-model="newTaskTitle" placeholder="新增计划任务..." @keyup.enter="addTask" />
                    <select v-model="newTaskPriority">
                      <option value="low">LOW</option>
                      <option value="medium">MEDIUM</option>
                      <option value="high">HIGH</option>
                      <option value="urgent">CRITICAL</option>
                    </select>
                    <button type="button" @click="addTask">
                      <Plus :size="14" />
                    </button>
                  </div>
                </section>

                <section class="create-card">
                  <div class="create-head">
                    <span>新增提醒</span>
                    <span>REMINDER</span>
                  </div>
                  <div class="create-row split">
                    <input v-model="newReminderTitle" placeholder="新增提醒..." @keyup.enter="addReminder" />
                    <label class="time-field"><span class="time-field-icon"><Clock3 :size="14" /></span><input v-model="newReminderTime" type="time" aria-label="提醒时间" /></label>
                    <button type="button" @click="addReminder">
                      <Plus :size="14" />
                    </button>
                  </div>
                </section>

                <section class="create-card">
                  <div class="create-head">
                    <span>新增目标</span>
                    <span>GOAL</span>
                  </div>
                  <div class="create-row">
                    <input v-model="newGoalTitle" placeholder="新增当天目标..." @keyup.enter="addGoal" />
                    <button type="button" @click="addGoal">
                      <Plus :size="14" />
                    </button>
                  </div>
                </section>
              </div>
            </template>
          </div>
        </aside>
      </Transition>
    </div>
  </div>
</template>

<style scoped src="./scheduleCenterPage.css"></style>

