<script setup>
import { computed, reactive, ref, watch, nextTick } from 'vue'
import MiniCalendar from './components/MiniCalendar.vue'
import PlannerPage from './components/PlannerPage.vue'
import StatsDashboard from './components/StatsDashboard.vue'
import {
  createInitialPlannerRecords,
  persistPlannerState,
  restorePlannerUiState,
} from './lib/plannerStorage'

const screenMode = ref('planner')
const viewMode = ref('focus')
const printLayout = ref('single')
const selectedDate = ref(new Date())
const calendarViewDate = ref(new Date(selectedDate.value))
const statsRangeStart = ref(toKey(new Date(new Date().setDate(new Date().getDate() - 6))))
const statsRangeEnd = ref(toKey(new Date()))

const hours = [
  '6', '7', '8', '9', '10', '11', '12',
  '1', '2', '3', '4', '5',
  '6', '7', '8', '9', '10', '11', '12',
  '1', '2', '3', '4', '5',
]

const timetableCellCount = hours.length * 6
let printPageStyleElement = null

function createEmptyTimetable() {
  return Array.from({ length: timetableCellCount }, () => false)
}

function createTaskLabel(index) {
  return `${index + 1}`.padStart(2, '0')
}

function createTimetableFromRanges(ranges) {
  const timetable = createEmptyTimetable()

  ranges.forEach(([start, end]) => {
    for (let index = start; index <= end; index += 1) {
      timetable[index] = true
    }
  })

  return timetable
}

const plannerSeed = {
  '2026-04-21': {
    dday: 'D-12 LAUNCH',
    comment: '집중 작업 3개만 남기고, 10분 단위로 흐름을 끊지 않기.',
    tasks: [
      { label: '', title: '홈 화면 정보 구조 정리', checked: true },
      { label: '', title: '플래너 페이지 헤더 상태 연결', checked: true },
      { label: '', title: '타임테이블 액티브 블록 설계' },
      { label: '', title: '우측 캘린더 빠른 이동 구현' },
      { label: '', title: '전날 요약 영역 문구 다듬기' },
      { label: '', title: '다음날 할 일 자동 제안 시나리오' },
      { label: '', title: '통계 카드 레이아웃 정리' },
      { label: '', title: '모바일 스택 레이아웃 점검' },
      { label: '', title: '체크박스 인터랙션 연결' },
      { label: '', title: '페이지 넘김 애니메이션 방향 검토' },
      { label: '', title: 'Tailwind 토큰 정리' },
      { label: '', title: 'Vue 컴포넌트 분리 기준 정하기' },
      { label: '', title: '빈 상태 문구 작성' },
      { label: '', title: '주간 리듬 회고 메모 추가' },
      { label: '', title: '디자인 QA 체크리스트 정리' },
    ],
    memo: [
      { label: '', text: '오른쪽 패널은 정보 확인과 이동이 한 번에 되도록 유지.' },
      { label: '', text: '2페이지 보기는 비교용으로 남기고 기본값은 집중 보기로 사용.' },
      { label: '', text: '작업 흐름이 끊기지 않도록 클릭 포인트를 줄이기.' },
    ],
    prevSummary: [
      '어제 완료한 핵심 3개 보기',
      '이전 체크 누적률 78%',
      '막힌 작업 메모 바로 이어보기',
    ],
    nextFocus: [
      '내일 첫 집중 블록 예약',
      '다음날 핵심 3개 자동 복사',
      '미완료 작업만 재정렬',
    ],
    timetable: createTimetableFromRanges([
      [6, 13],
      [24, 32],
      [42, 47],
    ]),
  },
  '2026-04-22': {
    dday: 'D-11 LAUNCH',
    comment: '초반 90분은 구현, 후반은 문장과 사용성 정리에 사용.',
    tasks: [
      { label: '', title: '통계 섹션 수치 실제 계산 연결', checked: true },
      { label: '', title: '날짜 선택 시 상태 동기화' },
      { label: '', title: '다음날 할 일 템플릿 개선' },
      { label: '', title: '2페이지 보기 비교 카피 작성' },
      { label: '', title: '주간 흐름 카드 추가' },
      { label: '', title: '메모 영역 편집 UX 개선' },
      { label: '', title: '프린트 스타일 초안 점검' },
      { label: '', title: '색 대비 보정' },
      { label: '', title: '우측 패널 축약 버전 검토' },
      { label: '', title: '마감용 체크리스트 분리' },
      { label: '', title: '키보드 탐색 흐름 다듬기' },
      { label: '', title: '데이터 구조 문서화' },
      { label: '', title: '테스트 날짜 더미 세트 늘리기' },
      { label: '', title: '브랜드 푸터 위치 확정' },
      { label: '', title: '빈 상태 일러스트 여부 결정' },
    ],
    memo: [
      { label: '', text: '한 화면에 모든 정보를 모으되 시선 이동은 짧게.' },
      { label: '', text: '캘린더는 검색보다 빠른 이동 장치로 동작해야 함.' },
      { label: '', text: '실행 화면은 다이어리 같고, 인터랙션은 앱처럼.' },
    ],
    prevSummary: [
      '이전날 메모 3줄 이어보기',
      '전날 타임블록 밀도 확인',
      '완료율 기준 다음 일정 추천',
    ],
    nextFocus: [
      '다음날 오전 블록 추천',
      '오늘 미완료 작업 넘기기',
      '이번 주 누적 시간 요약',
    ],
    timetable: createTimetableFromRanges([
      [3, 8],
      [18, 23],
      [54, 62],
    ]),
  },
}

function toKey(date) {
  const year = date.getFullYear()
  const month = `${date.getMonth() + 1}`.padStart(2, '0')
  const day = `${date.getDate()}`.padStart(2, '0')
  return `${year}-${month}-${day}`
}

function toDateValue(value, fallback = new Date()) {
  const nextDate = new Date(value)
  return Number.isNaN(nextDate.getTime()) ? new Date(fallback) : nextDate
}

function startOfDay(date) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
}

function buildFallbackRecord(date) {
  return {
    dday: 'D-00 FOCUS',
    comment: '',
    tasks: Array.from({ length: 15 }, (_, index) => ({
      label: '',
      title: '',
      checked: false,
    })),
    memo: Array.from({ length: 3 }, () => ({
      label: '',
      text: '',
    })),
    prevSummary: ['이전 기록 없음', '새로운 흐름 시작', ''],
    nextFocus: ['다음 집중 블록 준비', '내일의 핵심 3개 정하기', ''],
    timetable: createEmptyTimetable(),
  }
}

function normalizeRecord(record) {
  return {
    ...record,
    tasks: record.tasks.map((task, index) => ({
      label: task.label ?? task.id ?? '',
      title: task.title ?? '',
      checked: Boolean(task.checked),
    })),
    memo: record.memo.map((item) => {
      if (typeof item === 'string') {
        return {
          label: '',
          text: item,
        }
      }

      return {
        label: item.label ?? '',
        text: item.text ?? '',
      }
    }),
    timetable: Array.isArray(record.timetable) && record.timetable.length === timetableCellCount
      ? [...record.timetable]
      : createEmptyTimetable(),
  }
}

const plannerRecords = reactive(createInitialPlannerRecords(plannerSeed, normalizeRecord))

restorePlannerUiState({
  selectedDate,
  calendarViewDate,
  statsRangeStart,
  statsRangeEnd,
  toDateValue,
})

function getPlannerRecord(date) {
  const key = toKey(date)

  if (!plannerRecords[key]) {
    plannerRecords[key] = buildFallbackRecord(date)
  }

  return plannerRecords[key]
}

const planner = computed(() => getPlannerRecord(selectedDate.value))

const secondaryDate = computed(() => {
  const next = new Date(selectedDate.value)
  next.setDate(next.getDate() + 1)
  return next
})

const secondaryPlanner = computed(() => getPlannerRecord(secondaryDate.value))

function getDateDisplay(date) {
  const main = `${date.getFullYear()}. ${`${date.getMonth() + 1}`.padStart(2, '0')}. ${`${date.getDate()}`.padStart(2, '0')}.`
  const weekdayMap = ['(일)', '(월)', '(화)', '(수)', '(목)', '(금)', '(토)']
  const weekday = weekdayMap[date.getDay()]
  const weekdayTone =
    date.getDay() === 0 ? 'text-red-500' : date.getDay() === 6 ? 'text-blue-500' : 'text-ink'

  return {
    main,
    weekday,
    weekdayTone,
  }
}

const selectedDateDisplay = computed(() => getDateDisplay(selectedDate.value))
const secondaryDateDisplay = computed(() => getDateDisplay(secondaryDate.value))

const monthLabel = computed(() =>
  `${calendarViewDate.value.getMonth() + 1}`.padStart(2, '0'),
)

const yearLabel = computed(() => `${calendarViewDate.value.getFullYear()}`)

const calendarDays = computed(() => {
  const base = calendarViewDate.value
  const first = new Date(base.getFullYear(), base.getMonth(), 1)
  const start = new Date(first)
  start.setDate(first.getDate() - first.getDay())

  return Array.from({ length: 35 }, (_, index) => {
    const date = new Date(start)
    date.setDate(start.getDate() + index)
    return {
      key: toKey(date),
      label: date.getDate(),
      date,
      isCurrentMonth: date.getMonth() === base.getMonth(),
    }
  })
})

const markedDateKeys = computed(() =>
  Object.entries(plannerRecords)
    .filter(([, record]) => hasPlannerContent(record))
    .map(([key]) => key),
)

const filledTasks = computed(() =>
  planner.value.tasks.filter((task) => task.title.trim()),
)
const completedTasks = computed(() =>
  filledTasks.value.filter((task) => task.checked).length,
)
const completionRate = computed(() => {
  if (filledTasks.value.length === 0) {
    return 0
  }

  return Math.round((completedTasks.value / filledTasks.value.length) * 100)
})

function formatTotalTime(record) {
  const activeCellCount = record.timetable.filter(Boolean).length
  const totalMinutes = activeCellCount * 10
  const hoursPart = `${Math.floor(totalMinutes / 60)}`.padStart(2, '0')
  const minutesPart = `${totalMinutes % 60}`.padStart(2, '0')

  return `${hoursPart}H ${minutesPart}M`
}

function getFocusedMinutes(record) {
  return record.timetable.filter(Boolean).length * 10
}

function getCompletionRate(record) {
  const activeTasks = record.tasks.filter((task) => task.title.trim())

  if (activeTasks.length === 0) {
    return 0
  }

  const doneTasks = activeTasks.filter((task) => task.checked).length
  return Math.round((doneTasks / activeTasks.length) * 100)
}

function shiftDate(amount) {
  const next = new Date(selectedDate.value)
  next.setDate(next.getDate() + amount)
  selectedDate.value = next
  calendarViewDate.value = new Date(next)
}

function shiftCalendarMonth(amount) {
  const next = new Date(calendarViewDate.value)
  next.setMonth(next.getMonth() + amount)
  calendarViewDate.value = next
}

function shiftCalendarYear(amount) {
  const next = new Date(calendarViewDate.value)
  next.setFullYear(next.getFullYear() + amount)
  calendarViewDate.value = next
}

function selectDate(date) {
  selectedDate.value = new Date(date)
  calendarViewDate.value = new Date(date)
}

function updateComment(record, value) {
  record.comment = value
}

function updateTaskLabel(record, { index, value }) {
  record.tasks[index].label = value
}

function updateTaskTitle(record, { index, value }) {
  record.tasks[index].title = value
}

function toggleTask(record, index) {
  record.tasks[index].checked = !record.tasks[index].checked
}

function updateMemo(record, { index, value }) {
  record.memo[index].text = value
}

function updateMemoLabel(record, { index, value }) {
  record.memo[index].label = value
}

function updateTimetable(record, nextTimetable) {
  record.timetable = nextTimetable
}

function hasPlannerContent(record) {
  return Boolean(
    record.comment.trim() ||
    record.tasks.some((task) => task.title.trim() || task.checked) ||
    record.memo.some((item) => item.label.trim() || item.text.trim()) ||
    record.timetable.some(Boolean),
  )
}

const plannerEntries = computed(() =>
  Object.entries(plannerRecords)
    .filter(([, record]) => hasPlannerContent(record))
    .sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)),
)

const normalizedStatsRange = computed(() => {
  const todayKey = toKey(new Date())
  const startKey = statsRangeStart.value || todayKey
  const endKey = statsRangeEnd.value || todayKey

  if (startKey <= endKey) {
    return { startKey, endKey }
  }

  return { startKey: endKey, endKey: startKey }
})

const rangeEntries = computed(() =>
  plannerEntries.value.filter(([key]) =>
    key >= normalizedStatsRange.value.startKey && key <= normalizedStatsRange.value.endKey,
  ),
)

const totalFocusedMinutes = computed(() =>
  rangeEntries.value.reduce((total, [, record]) => total + getFocusedMinutes(record), 0),
)

const totalRecordedTasks = computed(() =>
  rangeEntries.value.reduce(
    (total, [, record]) => total + record.tasks.filter((task) => task.title.trim()).length,
    0,
  ),
)

const completedRecordedTasks = computed(() =>
  rangeEntries.value.reduce(
    (total, [, record]) => total + record.tasks.filter((task) => task.title.trim() && task.checked).length,
    0,
  ),
)

const aggregateCompletionRate = computed(() => {
  if (totalRecordedTasks.value === 0) {
    return 0
  }

  return Math.round((completedRecordedTasks.value / totalRecordedTasks.value) * 100)
})

const overviewCards = computed(() => [
  {
    label: 'TOTAL FOCUSED',
    value: formatMinutes(totalFocusedMinutes.value),
    caption: '지금까지 기록된 전체 집중 시간',
  },
  {
    label: 'AVERAGE COMPLETION',
    value: `${aggregateCompletionRate.value}%`,
    caption: '입력된 할 일 기준 전체 평균 완료율',
  },
  {
    label: 'RECORDED DAYS',
    value: `${rangeEntries.value.length}일`,
    caption: '기록이 남아 있는 날짜 수',
  },
  {
    label: 'COMPLETED TASKS',
    value: `${completedRecordedTasks.value}/${totalRecordedTasks.value || 0}`,
    caption: '완료된 할 일과 전체 입력된 할 일 수',
  },
])

function formatMinutes(totalMinutes) {
  const hoursPart = Math.floor(totalMinutes / 60)
  const minutesPart = totalMinutes % 60
  return `${hoursPart}H ${`${minutesPart}`.padStart(2, '0')}M`
}

function createDateLabel(dateKey) {
  const date = toDateValue(dateKey)
  const display = getDateDisplay(date)
  return `${display.main} ${display.weekday}`
}

const weeklyRecords = computed(() => {
  const entries = rangeEntries.value.map(([key, record]) => {
    const date = toDateValue(key)
    const weekdayShort = ['일', '월', '화', '수', '목', '금', '토'][date.getDay()]
    const focusedMinutes = getFocusedMinutes(record)

    return {
      key,
      weekday: weekdayShort,
      focusedMinutes,
      focusedTime: formatMinutes(focusedMinutes),
    }
  })

  if (entries.length === 0) {
    return []
  }

  const maxMinutes = Math.max(...entries.map((entry) => entry.focusedMinutes), 60)

  return entries.map((entry) => ({
    ...entry,
    barHeight: Math.max(12, Math.round((entry.focusedMinutes / maxMinutes) * 100)),
  }))
})

const recentRecords = computed(() =>
  [...rangeEntries.value]
    .sort(([leftKey], [rightKey]) => rightKey.localeCompare(leftKey))
    .slice(0, 5)
    .map(([key, record]) => ({
      key,
      dateLabel: createDateLabel(key),
      comment: record.comment.trim(),
      focusedTime: formatTotalTime(record),
      completionRate: getCompletionRate(record),
    })),
)

const bestDay = computed(() => {
  if (rangeEntries.value.length === 0) {
    return null
  }

  const [bestKey, bestRecord] = [...rangeEntries.value].reduce((bestEntry, currentEntry) => {
    const [, bestRecordValue] = bestEntry
    const [, currentRecordValue] = currentEntry

    return getFocusedMinutes(currentRecordValue) > getFocusedMinutes(bestRecordValue) ? currentEntry : bestEntry
  })

  return {
    dateLabel: createDateLabel(bestKey),
    summary: `${formatTotalTime(bestRecord)} 집중, 완료율 ${getCompletionRate(bestRecord)}%, 코멘트 "${
      bestRecord.comment.trim() || '없음'
    }"`,
  }
})

watch(
  [plannerRecords, selectedDate, calendarViewDate, statsRangeStart, statsRangeEnd],
  () => {
    persistPlannerState({
      plannerRecords,
      selectedDate: selectedDate.value,
      calendarViewDate: calendarViewDate.value,
      statsRangeStart: normalizedStatsRange.value.startKey,
      statsRangeEnd: normalizedStatsRange.value.endKey,
    })
  },
  { deep: true },
)

function fillTaskLabelsWithNumbers(record) {
  record.tasks.forEach((task, index) => {
    task.label = createTaskLabel(index)
  })
}

function clearTaskLabels(record) {
  record.tasks.forEach((task) => {
    task.label = ''
  })
}

function applyPrintPageStyle(layout) {
  if (typeof document === 'undefined') {
    return
  }

  const pageRule =
    layout === 'double'
      ? '@page { size: A4 landscape; margin: 0; }'
      : '@page { size: A4 portrait; margin: 0; }'

  if (!printPageStyleElement) {
    printPageStyleElement = document.createElement('style')
    printPageStyleElement.setAttribute('data-print-page-style', 'true')
    document.head.appendChild(printPageStyleElement)
  }

  printPageStyleElement.textContent = pageRule
  document.body.dataset.printLayout = layout
}

async function printSelectedPlanner(layout = 'single') {
  printLayout.value = layout
  applyPrintPageStyle(layout)
  await nextTick()
  window.print()
}
</script>

<template>
  <main class="min-h-screen px-4 py-6 text-ink sm:px-6 lg:px-10">
    <div class="print-root mx-auto flex max-w-[1680px] flex-col gap-6">
      <header class="print-hidden flex flex-col gap-4 rounded-[28px] border border-white/60 bg-white/70 p-5 backdrop-blur sm:p-6">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
          <div class="space-y-2">
            <p class="text-[11px] font-bold uppercase tracking-[0.28em] text-stone-500">10 Minute Planner</p>
            <h1 class="text-2xl font-semibold tracking-[-0.04em] text-stone-900 sm:text-4xl">
              다이어리처럼 보이되, 앱답게 빠르게 이동하는 플래너
            </h1>
            <p class="max-w-3xl text-sm font-medium leading-6 text-stone-600">
              기본 모드는 Figma의 1페이지 + 보조 정보 패널 구성을 따르고, 비교용으로 2페이지 펼침 보기도 함께 제공합니다.
            </p>
          </div>
          <div class="flex flex-wrap items-center gap-3">
            <div class="inline-flex rounded-full border border-stone-200 bg-stone-100 p-1">
              <button
                type="button"
                class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
                :class="screenMode === 'planner' ? 'bg-white text-ink shadow-sm' : 'text-stone-500'"
                @click="screenMode = 'planner'"
              >
                PLANNER
              </button>
              <button
                type="button"
                class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
                :class="screenMode === 'stats' ? 'bg-white text-ink shadow-sm' : 'text-stone-500'"
                @click="screenMode = 'stats'"
              >
                STATS
              </button>
            </div>
            <div class="inline-flex rounded-full border border-stone-200 bg-stone-100 p-1">
              <button
                type="button"
                class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
                :class="viewMode === 'focus' ? 'bg-white text-ink shadow-sm' : 'text-stone-500'"
                @click="viewMode = 'focus'"
              >
                1 PAGE + INFO
              </button>
              <button
                type="button"
                class="rounded-full px-4 py-2 text-xs font-bold tracking-[0.14em] transition"
                :class="viewMode === 'spread' ? 'bg-white text-ink shadow-sm' : 'text-stone-500'"
                @click="viewMode = 'spread'"
              >
                2 PAGE SPREAD
              </button>
            </div>
            <div class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2">
              <button
                type="button"
                class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="shiftDate(-1)"
              >
                PREV DAY
              </button>
              <button
                type="button"
                class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="shiftDate(1)"
              >
                NEXT DAY
              </button>
            </div>
            <div
              v-if="screenMode === 'planner'"
              class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2"
            >
              <button
                type="button"
                class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="printSelectedPlanner('single')"
              >
                PRINT 1-UP
              </button>
              <button
                type="button"
                class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="printSelectedPlanner('double')"
              >
                PRINT 2-UP
              </button>
            </div>
          </div>
        </div>
      </header>

      <section
        v-if="screenMode === 'planner' && viewMode === 'focus'"
        class="print-hidden grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]"
      >
        <div class="print-target">
          <PlannerPage
            :date-main="selectedDateDisplay.main"
            :date-weekday="selectedDateDisplay.weekday"
            :date-weekday-tone="selectedDateDisplay.weekdayTone"
            :dday="planner.dday"
            :comment="planner.comment"
            :total-time="formatTotalTime(planner)"
            :tasks="planner.tasks"
            :memo="planner.memo"
            :hours="hours"
            :timetable="planner.timetable"
            @update:comment="updateComment(planner, $event)"
            @update:task-label="updateTaskLabel(planner, $event)"
            @update:task-title="updateTaskTitle(planner, $event)"
            @toggle:task="toggleTask(planner, $event)"
            @update:memo-label="updateMemoLabel(planner, $event)"
            @update:memo="updateMemo(planner, $event)"
            @update:timetable="updateTimetable(planner, $event)"
          />
        </div>

        <aside class="print-hidden flex flex-col gap-4">
          <section class="border border-stone-200 bg-white/80 p-5">
            <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">PREV SNAPSHOT</p>
            <div class="space-y-3">
              <p
                v-for="item in planner.prevSummary"
                :key="item"
                class="border-b border-stone-200 pb-3 text-[11px] font-semibold tracking-[0.08em] text-stone-700 last:border-b-0 last:pb-0"
              >
                {{ item || ' ' }}
              </p>
            </div>
          </section>

          <section class="border border-stone-200 bg-white/80 p-5">
            <p class="mb-3 text-[11px] font-bold tracking-[0.22em] text-ink">TASK LABELS</p>
            <p class="text-[11px] font-semibold leading-5 tracking-[0.06em] text-stone-600">
              왼쪽 라벨은 직접 입력할 수 있고, 필요하면 아래 버튼으로 순번을 한 번에 채울 수 있습니다.
            </p>
            <div class="mt-4 flex flex-wrap gap-2">
              <button
                type="button"
                class="rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="fillTaskLabelsWithNumbers(planner)"
              >
                번호 채우기
              </button>
              <button
                type="button"
                class="rounded-full border border-stone-200 px-3 py-2 text-[10px] font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
                @click="clearTaskLabels(planner)"
              >
                라벨 비우기
              </button>
            </div>
          </section>

          <section class="border border-stone-200 bg-white/80 p-5">
            <p class="mb-4 text-[11px] font-bold tracking-[0.22em] text-ink">READ NEXT</p>
            <div class="space-y-3">
              <p
                v-for="item in planner.nextFocus"
                :key="item"
                class="border-b border-stone-200 pb-3 text-[11px] font-semibold tracking-[0.08em] text-stone-700 last:border-b-0 last:pb-0"
              >
                {{ item || ' ' }}
              </p>
            </div>
          </section>

          <MiniCalendar
            :month-label="monthLabel"
            :year-label="yearLabel"
            :days="calendarDays"
            :selected-key="toKey(selectedDate)"
            :marked-keys="markedDateKeys"
            @shift-month="shiftCalendarMonth"
            @shift-year="shiftCalendarYear"
            @go-today="selectDate(new Date())"
            @select="selectDate"
          />

          <section class="grid grid-cols-2 gap-4">
            <article class="border border-stone-200 bg-white/80 p-5">
              <p class="text-[11px] font-bold tracking-[0.22em] text-ink">STATS</p>
              <div class="mt-5 space-y-4">
                <div>
                  <p class="text-[28px] font-semibold tracking-[-0.05em] text-stone-900">{{ completionRate }}%</p>
                  <p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">TASK COMPLETION</p>
                </div>
                <div>
                  <p class="text-[22px] font-semibold tracking-[-0.04em] text-stone-900">{{ formatTotalTime(planner) }}</p>
                  <p class="text-[11px] font-semibold tracking-[0.08em] text-stone-500">FOCUSED TIME</p>
                </div>
              </div>
            </article>

            <article class="border border-stone-200 bg-white/80 p-5">
              <p class="text-[11px] font-bold tracking-[0.22em] text-ink">NEXT DAY</p>
              <div class="mt-5 space-y-3">
                <p class="text-lg font-semibold tracking-[-0.04em] text-stone-900">
                  <span>{{ secondaryDateDisplay.main }}</span>
                  <span class="ml-1" :class="secondaryDateDisplay.weekdayTone">{{ secondaryDateDisplay.weekday }}</span>
                </p>
                <p class="text-[11px] font-semibold tracking-[0.08em] text-stone-600">
                  내일의 첫 작업은 "{{ secondaryPlanner.tasks[0]?.title || '새 작업 추가' }}" 로 시작합니다.
                </p>
              </div>
            </article>
          </section>
        </aside>
      </section>

      <section
        v-else-if="screenMode === 'planner'"
        class="print-hidden overflow-x-auto rounded-[32px] border border-white/60 bg-white/40 p-4 sm:p-6"
      >
        <div class="flex min-w-[1260px] gap-6">
          <div class="print-target">
            <PlannerPage
              :date-main="selectedDateDisplay.main"
              :date-weekday="selectedDateDisplay.weekday"
              :date-weekday-tone="selectedDateDisplay.weekdayTone"
              :dday="planner.dday"
              :comment="planner.comment"
              :total-time="formatTotalTime(planner)"
              :tasks="planner.tasks"
              :memo="planner.memo"
              :hours="hours"
              :timetable="planner.timetable"
              @update:comment="updateComment(planner, $event)"
              @update:task-label="updateTaskLabel(planner, $event)"
              @update:task-title="updateTaskTitle(planner, $event)"
              @toggle:task="toggleTask(planner, $event)"
              @update:memo-label="updateMemoLabel(planner, $event)"
              @update:memo="updateMemo(planner, $event)"
              @update:timetable="updateTimetable(planner, $event)"
            />
          </div>
          <div class="print-hidden">
            <PlannerPage
              :date-main="secondaryDateDisplay.main"
              :date-weekday="secondaryDateDisplay.weekday"
              :date-weekday-tone="secondaryDateDisplay.weekdayTone"
              :dday="secondaryPlanner.dday"
              :comment="secondaryPlanner.comment"
              :total-time="formatTotalTime(secondaryPlanner)"
              :tasks="secondaryPlanner.tasks"
              :memo="secondaryPlanner.memo"
              :hours="hours"
              :timetable="secondaryPlanner.timetable"
              @update:comment="updateComment(secondaryPlanner, $event)"
              @update:task-label="updateTaskLabel(secondaryPlanner, $event)"
              @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
              @toggle:task="toggleTask(secondaryPlanner, $event)"
              @update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
              @update:memo="updateMemo(secondaryPlanner, $event)"
              @update:timetable="updateTimetable(secondaryPlanner, $event)"
            />
          </div>
        </div>
      </section>

      <StatsDashboard
        v-else
        class="print-hidden"
        :overview-cards="overviewCards"
        :weekly-records="weeklyRecords"
        :recent-records="recentRecords"
        :best-day="bestDay"
        :selected-date-label="`${selectedDateDisplay.main} ${selectedDateDisplay.weekday}`"
        :range-start="normalizedStatsRange.startKey"
        :range-end="normalizedStatsRange.endKey"
        @update:range-start="statsRangeStart = $event"
        @update:range-end="statsRangeEnd = $event"
      />

      <section class="print-only">
        <div v-if="printLayout === 'single'" class="print-paper print-paper--single">
          <div class="print-sheet-frame">
            <PlannerPage
              :date-main="selectedDateDisplay.main"
              :date-weekday="selectedDateDisplay.weekday"
              :date-weekday-tone="selectedDateDisplay.weekdayTone"
              :dday="planner.dday"
              :comment="planner.comment"
              :total-time="formatTotalTime(planner)"
              :tasks="planner.tasks"
              :memo="planner.memo"
              :hours="hours"
              :timetable="planner.timetable"
              @update:comment="updateComment(planner, $event)"
              @update:task-label="updateTaskLabel(planner, $event)"
              @update:task-title="updateTaskTitle(planner, $event)"
              @toggle:task="toggleTask(planner, $event)"
              @update:memo-label="updateMemoLabel(planner, $event)"
              @update:memo="updateMemo(planner, $event)"
              @update:timetable="updateTimetable(planner, $event)"
            />
          </div>
        </div>

        <div v-else class="print-paper print-paper--double">
          <div class="print-sheet-frame">
            <PlannerPage
              :date-main="selectedDateDisplay.main"
              :date-weekday="selectedDateDisplay.weekday"
              :date-weekday-tone="selectedDateDisplay.weekdayTone"
              :dday="planner.dday"
              :comment="planner.comment"
              :total-time="formatTotalTime(planner)"
              :tasks="planner.tasks"
              :memo="planner.memo"
              :hours="hours"
              :timetable="planner.timetable"
              @update:comment="updateComment(planner, $event)"
              @update:task-label="updateTaskLabel(planner, $event)"
              @update:task-title="updateTaskTitle(planner, $event)"
              @toggle:task="toggleTask(planner, $event)"
              @update:memo-label="updateMemoLabel(planner, $event)"
              @update:memo="updateMemo(planner, $event)"
              @update:timetable="updateTimetable(planner, $event)"
            />
          </div>
          <div class="print-sheet-frame">
            <PlannerPage
              :date-main="secondaryDateDisplay.main"
              :date-weekday="secondaryDateDisplay.weekday"
              :date-weekday-tone="secondaryDateDisplay.weekdayTone"
              :dday="secondaryPlanner.dday"
              :comment="secondaryPlanner.comment"
              :total-time="formatTotalTime(secondaryPlanner)"
              :tasks="secondaryPlanner.tasks"
              :memo="secondaryPlanner.memo"
              :hours="hours"
              :timetable="secondaryPlanner.timetable"
              @update:comment="updateComment(secondaryPlanner, $event)"
              @update:task-label="updateTaskLabel(secondaryPlanner, $event)"
              @update:task-title="updateTaskTitle(secondaryPlanner, $event)"
              @toggle:task="toggleTask(secondaryPlanner, $event)"
              @update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
              @update:memo="updateMemo(secondaryPlanner, $event)"
              @update:timetable="updateTimetable(secondaryPlanner, $event)"
            />
          </div>
        </div>
      </section>
    </div>
  </main>
</template>
