<template>
  <div class="music-layout">
    <div class="section-header">
      <h3>今日练习</h3>
      <span class="date-label">{{ today }}</span>
    </div>
    <div class="checkin-grid">
      <div
        v-for="item in todayPlanItems"
        :key="item.id"
        class="checkin-item"
        :class="{ checked: isChecked(item.id) }"
        @click="toggleCheck(item.id)"
      >
        <span class="checkin-check">{{ isChecked(item.id) ? '✅' : '⬜' }}</span>
        <span>{{ item.name }}</span>
      </div>
      <div v-if="todayPlanItems.length === 0" class="empty-hint">
        还没有设定本月计划，从下方选择项目添加
      </div>
    </div>

    <div class="section-header">
      <h3>练习项目</h3>
    </div>
    <div class="pool-items">
      <div v-for="item in store.musicItems" :key="item.id" class="pool-item">
        <span @click="togglePlanItem(item.id)">
          {{ isPlanItem(item.id) ? '✓' : '+' }} {{ item.name }}
        </span>
        <button class="remove-btn" @click="store.deleteHealthItem(item.id)">✕</button>
      </div>
    </div>
    <div class="add-row">
      <input v-model="newItem" placeholder="添加新项目，如：尤克里里" @keydown.enter.prevent="addItem">
      <button class="btn btn-accent" @click="addItem">+</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { usePlannerStore } from '../stores/planner'

const store = usePlannerStore()
const newItem = ref('')

const today = computed(() => {
  const d = new Date()
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
})
const currentMonth = computed(() => today.value.slice(0, 7))

function uid() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 7) }

const todayPlanItems = computed(() => {
  const plan = store.musicPlans.find(p => p.month === currentMonth.value && p.type === 'music')
  if (!plan) return []
  const ids = JSON.parse(plan.item_ids || '[]')
  return store.musicItems.filter(i => ids.includes(i.id))
})

function isChecked(itemId) {
  return store.musicChecks.some(c => c.date === today.value && c.type === 'music' && c.item_id === itemId)
}

async function toggleCheck(itemId) {
  const checked = isChecked(itemId)
  await store.toggleHealthCheck({ date: today.value, type: 'music', item_id: itemId, checked: checked ? 0 : 1 })
}

function isPlanItem(itemId) {
  const plan = store.musicPlans.find(p => p.month === currentMonth.value && p.type === 'music')
  if (!plan) return false
  return JSON.parse(plan.item_ids || '[]').includes(itemId)
}

async function togglePlanItem(itemId) {
  const plan = store.musicPlans.find(p => p.month === currentMonth.value && p.type === 'music') || {
    month: currentMonth.value, type: 'music', item_ids: '[]'
  }
  const ids = JSON.parse(plan.item_ids || '[]')
  const idx = ids.indexOf(itemId)
  if (idx >= 0) ids.splice(idx, 1)
  else ids.push(itemId)
  await store.saveHealthPlan({ month: currentMonth.value, type: 'music', item_ids: JSON.stringify(ids) })
}

async function addItem() {
  if (!newItem.value.trim()) return
  await store.addHealthItem({ id: uid(), name: newItem.value.trim(), type: 'music' })
  newItem.value = ''
}
</script>
