<template>
  <view class="reminder-time-select-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="nav-btn" @click="handleCancel">‹</text>
        <text class="nav-title">日程提醒</text>
        <text class="nav-btn" style="opacity: 0; min-width: 44px;"></text>
      </view>
    </view>

    <!-- 时间选项列表 -->
    <scroll-view class="content-scroll" scroll-y>
      <view class="time-options">
        <view 
          v-for="option in timeOptions" 
          :key="option.value"
          class="time-option"
          :class="{ active: selectedValue === option.value && !isCustom }"
          @click="selectTime(option.value)"
        >
          <text class="time-label">{{ option.label }}</text>
          <text v-if="selectedValue === option.value && !isCustom" class="check">✓</text>
        </view>

        <!-- 自定义时间 -->
        <view 
          class="time-option custom-option"
          :class="{ active: isCustom }"
          @click="openCustomTime"
        >
          <text class="time-label">自定义时间</text>
          <text class="arrow">›</text>
        </view>
      </view>
    </scroll-view>

    <!-- 自定义时间弹窗 -->
    <view v-if="showCustomModal" class="modal-mask" @click="showCustomModal = false">
      <view class="modal-content" @click.stop>
        <view class="modal-title">自定义时间</view>
        <view class="custom-time-content">
          <view class="custom-input-group">
            <text class="input-label">提前时间（分钟）</text>
            <input 
              v-model="customMinutes" 
              type="number" 
              class="custom-input"
              placeholder="请输入分钟数"
            />
          </view>
          <view class="custom-input-group">
            <text class="input-label">显示文本</text>
            <input 
              v-model="customText" 
              class="custom-input"
              placeholder="例如：开始前2小时"
            />
          </view>
        </view>
        <view class="modal-buttons">
          <button class="modal-btn" @click="showCustomModal = false">取消</button>
          <button class="modal-btn primary" @click="confirmCustomTime">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 时间选项
const timeOptions = [
  { label: '开始时', value: 0 },
  { label: '开始前5分钟', value: 5 },
  { label: '开始前15分钟', value: 15 },
  { label: '开始前30分钟', value: 30 },
  { label: '开始前1小时', value: 60 },
  { label: '开始前2小时', value: 120 },
  { label: '开始前1天', value: 1440 },
  { label: '开始前2天', value: 2880 },
  { label: '开始前3天', value: 4320 }
];

const selectedValue = ref(15);
const isCustom = ref(false);
const showCustomModal = ref(false);
const customMinutes = ref('');
const customText = ref('');
const action = ref('add'); // add 或 edit
const reminderIndex = ref(0);

// 选择时间
const selectTime = (value) => {
  selectedValue.value = value;
  isCustom.value = false;
  // 立即保存并返回
  saveAndReturn();
};

// 打开自定义时间
const openCustomTime = () => {
  showCustomModal.value = true;
  // 如果已经是自定义，填充现有值（从 onLoad 中已设置）
};

// 确认自定义时间
const confirmCustomTime = () => {
  if (!customMinutes.value || !customText.value.trim()) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    });
    return;
  }
  
  isCustom.value = true;
  selectedValue.value = parseInt(customMinutes.value);
  showCustomModal.value = false;
  // 保存并返回
  saveAndReturn();
};

// 保存并返回
const saveAndReturn = () => {
  const reminder = {
    type: isCustom.value ? 'custom' : 'preset',
    minutes: selectedValue.value
  };
  
  if (isCustom.value) {
    reminder.customText = customText.value;
    reminder.customMinutes = parseInt(customMinutes.value);
  }
  
  // 通过存储传递数据
  uni.setStorageSync('updatedReminder', {
    action: action.value,
    index: reminderIndex.value,
    reminder: reminder
  });
  
  uni.navigateBack();
};

// 取消
const handleCancel = () => {
  uni.navigateBack();
};

// 页面加载
onLoad((options) => {
  action.value = options.action || 'add';
  reminderIndex.value = parseInt(options.index || 0);
  
  if (options.type === 'custom') {
    isCustom.value = true;
    customMinutes.value = options.customMinutes || '';
    customText.value = options.customText || '';
    selectedValue.value = parseInt(options.customMinutes || 0);
  } else {
    selectedValue.value = parseInt(options.minutes || 15);
    isCustom.value = false;
  }
});
</script>

<style lang="scss" scoped>
.reminder-time-select-page {
  min-height: 100vh;
  background: #fff;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  padding-top: var(--status-bar-height, 0);
}

.navbar-content {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.nav-btn {
  font-size: 20px;
  color: #333;
  padding: 8px;
  min-width: 44px;
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #333;
}

.content-scroll {
  margin-top: calc(var(--status-bar-height, 0) + 45px);
  height: calc(100vh - var(--status-bar-height, 0) - 45px);
}

.time-options {
  padding: 0;
}

.time-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.time-option.active {
  color: #2885ff;
}

.time-label {
  font-size: 16px;
  color: #333;
}

.time-option.active .time-label {
  color: #2885ff;
}

.check {
  color: #2885ff;
  font-size: 18px;
  font-weight: 600;
}

.arrow {
  font-size: 20px;
  color: #ccc;
}

.custom-option.active .arrow {
  color: #2885ff;
}

/* 弹窗样式 */
.modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 80%;
  max-width: 500px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.custom-time-content {
  margin-bottom: 20px;
}

.custom-input-group {
  margin-bottom: 16px;
}

.input-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.custom-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 16px;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 20px;
}

.modal-btn {
  padding: 10px 24px;
  border: none;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
}

.modal-btn.primary {
  background: #2885ff;
  color: #fff;
}
</style>

