<template>
  <div class="reminders-layout">
    <div class="section-header">
      <h3>提醒</h3>
      <button class="btn btn-accent" @click="showForm = true">+ 新提醒</button>
    </div>

    <div v-for="r in store.reminders" :key="r.id" class="reminder-card">
      <div class="reminder-main">
        <div class="reminder-toggle" :class="{ on: r.enabled }" @click="toggleEnabled(r)">
          {{ r.enabled ? '🔔' : '🔕' }}
        </div>
        <div class="reminder-content">
          <div class="reminder-text">{{ r.text }}</div>
          <div class="reminder-meta">
            <span v-if="r.time">{{ r.time }}</span>
            <span v-if="r.repeat !== 'none'">· {{ repeatLabel(r.repeat) }}</span>
          </div>
        </div>
        <button class="remove-btn" @click="store.deleteReminder(r.id)">✕</button>
      </div>
    </div>

    <div v-if="store.reminders.length === 0" class="empty-hint">还没有提醒</div>

    <div v-if="showForm" class="edit-form">
      <input v-model="formText" placeholder="提醒内容">
      <input v-model="formTime" type="time">
      <select v-model="formRepeat">
        <option value="none">不重复</option>
        <option value="daily">每天</option>
        <option value="weekdays">工作日</option>
        <option value="weekly">每周</option>
      </select>
      <div class="edit-actions">
        <button class="btn btn-close" @click="showForm = false">取消</button>
        <button class="btn btn-accent" @click="saveReminder">保存</button>
      </div>
    </div>
  </div>
</template>

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

const store = usePlannerStore()
const showForm = ref(false)
const formText = ref('')
const formTime = ref('')
const formRepeat = ref('none')

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

function repeatLabel(r) {
  return { daily: '每天', weekdays: '工作日', weekly: '每周', none: '' }[r] || r
}

async function toggleEnabled(r) {
  await store.updateReminder({ ...r, enabled: r.enabled ? 0 : 1 })
}

async function saveReminder() {
  if (!formText.value.trim()) return
  await store.addReminder({
    id: uid(),
    text: formText.value.trim(),
    time: formTime.value || null,
    repeat: formRepeat.value,
    enabled: 1,
  })
  showForm.value = false
  formText.value = ''
  formTime.value = ''
  formRepeat.value = 'none'
}
</script>
