<template>
  <view class="settings-container">
    <!-- 顶部导航栏 -->
    <view class="header-bar">
      <view class="nav-left" @click="goBack">
        <text class="nav-icon">←</text>
        <text class="nav-title">设置</text>
      </view>
    </view>

    <!-- 设置列表 -->
    <scroll-view class="settings-list" scroll-y="true">
      <!-- 基础设置 -->
      <view class="setting-section">
        <text class="section-title">基础设置</text>
        
        <view class="setting-item" @click="toggleDarkMode">
          <text class="item-label">深色模式</text>
          <switch :checked="darkModeEnabled" color="#4CAF50" />
        </view>
        
        <view class="setting-item" @click="toggleAutoUpdate">
          <text class="item-label">自动更新</text>
          <switch :checked="autoUpdateEnabled" color="#4CAF50" />
        </view>
        
        <view class="setting-item" @click="openLanguagePicker">
          <text class="item-label">语言</text>
          <text class="item-value">{{ selectedLanguage }}</text>
          <text class="item-arrow">›</text>
        </view>
      </view>

      <!-- 通知设置 -->
      <view class="setting-section">
        <text class="section-title">通知设置</text>
        
        <view class="setting-item" @click="toggleOrderNotifications">
          <text class="item-label">订单通知</text>
          <switch :checked="orderNotificationsEnabled" color="#4CAF50" />
        </view>
        
        <view class="setting-item" @click="toggleSystemNotifications">
          <text class="item-label">系统通知</text>
          <switch :checked="systemNotificationsEnabled" color="#4CAF50" />
        </view>
        
        <view class="setting-item" @click="openNotificationTimeRange">
          <text class="item-label">通知时段</text>
          <text class="item-value">{{ notificationTimeRange }}</text>
          <text class="item-arrow">›</text>
        </view>
      </view>

      <!-- 隐私与安全 -->
      <view class="setting-section">
        <text class="section-title">隐私与安全</text>
        
        <view class="setting-item" @click="openPasswordChange">
          <text class="item-label">修改密码</text>
          <text class="item-arrow">›</text>
        </view>
        
        <view class="setting-item" @click="toggleLocationSharing">
          <text class="item-label">位置共享</text>
          <switch :checked="locationSharingEnabled" color="#4CAF50" />
        </view>
        
        <view class="setting-item" @click="clearCache">
          <text class="item-label">清除缓存</text>
          <text class="item-value">{{ cacheSize }}</text>
          <text class="item-arrow">›</text>
        </view>
      </view>

      <!-- 关于与帮助 -->
      <view class="setting-section">
        <text class="section-title">关于与帮助</text>
        
        <view class="setting-item" @click="openAboutPage">
          <text class="item-label">关于我们</text>
          <text class="item-value">{{ appVersion }}</text>
          <text class="item-arrow">›</text>
        </view>
        
        <view class="setting-item" @click="openHelpCenter">
          <text class="item-label">帮助中心</text>
          <text class="item-arrow">›</text>
        </view>
        
        <view class="setting-item" @click="openFeedback">
          <text class="item-label">意见反馈</text>
          <text class="item-arrow">›</text>
        </view>
      </view>

      <!-- 登出按钮 -->
      <view class="logout-section">
        <button class="logout-btn" @click="logout">退出登录</button>
      </view>
    </scroll-view>

    <!-- 语言选择弹窗 -->
    <view v-if="showLanguagePicker" class="picker-overlay" @click="closeLanguagePicker">
      <view class="picker-panel" @click.stop="noop">
        <text class="picker-title">选择语言</text>
        <scroll-view scroll-y="true" class="picker-options">
          <view v-for="(lang, index) in languageOptions" :key="index" 
                class="picker-option" 
                :class="{ 'picker-option-selected': selectedLanguage === lang.label }"
                @click="selectLanguage(lang)">
            <text>{{ lang.label }}</text>
          </view>
        </scroll-view>
        <view class="picker-actions">
          <button size="mini" @click="closeLanguagePicker">取消</button>
          <button size="mini" type="primary" @click="confirmLanguageSelection">确定</button>
        </view>
      </view>
    </view>

    <!-- 通知时段选择弹窗 -->
    <view v-if="showTimeRangePicker" class="picker-overlay" @click="closeTimeRangePicker">
      <view class="picker-panel" @click.stop="noop">
        <text class="picker-title">选择通知时段</text>
        <view class="time-range-picker">
          <text class="range-label">从</text>
          <picker mode="time" :value="startTime" @change="onStartTimeChange">
            <view class="time-input">{{ startTime }}</view>
          </picker>
          <text class="range-label">到</text>
          <picker mode="time" :value="endTime" @change="onEndTimeChange">
            <view class="time-input">{{ endTime }}</view>
          </picker>
        </view>
        <view class="picker-actions">
          <button size="mini" @click="closeTimeRangePicker">取消</button>
          <button size="mini" type="primary" @click="confirmTimeRange">确定</button>
        </view>
      </view>
    </view>

  </view>
</template>

<script lang="uts">
  type LanguageOption = {
    value: string
    label: string
  }

  export default {
    data() {
      return {
        darkModeEnabled: false,
        autoUpdateEnabled: true,
        orderNotificationsEnabled: true,
        systemNotificationsEnabled: true,
        locationSharingEnabled: true,

        selectedLanguage: '简体中文',
        languageOptions: [
          { value: 'zh-CN', label: '简体中文' },
          { value: 'en-US', label: 'English' },
          { value: 'ja-JP', label: '日本語' },
          { value: 'ko-KR', label: '한국어' }
        ] as Array<LanguageOption>,
        showLanguagePicker: false,

        notificationTimeRange: '全天接收',
        startTime: '08:00',
        endTime: '22:00',
        showTimeRangePicker: false,

        cacheSize: '15.2 MB',
        appVersion: 'v1.2.3'
      }
    },

    methods: {
      goBack() {
        uni.navigateBack()
      },

      toggleDarkMode() {
        this.darkModeEnabled = !this.darkModeEnabled
        // TODO: 保存设置到本地存储或同步到服务器
        console.log('Dark mode toggled:', this.darkModeEnabled)
      },

      toggleAutoUpdate() {
        this.autoUpdateEnabled = !this.autoUpdateEnabled
        console.log('Auto update toggled:', this.autoUpdateEnabled)
      },

      toggleOrderNotifications() {
        this.orderNotificationsEnabled = !this.orderNotificationsEnabled
        console.log('Order notifications toggled:', this.orderNotificationsEnabled)
      },

      toggleSystemNotifications() {
        this.systemNotificationsEnabled = !this.systemNotificationsEnabled
        console.log('System notifications toggled:', this.systemNotificationsEnabled)
      },

      toggleLocationSharing() {
        this.locationSharingEnabled = !this.locationSharingEnabled
        console.log('Location sharing toggled:', this.locationSharingEnabled)
      },

      openLanguagePicker() {
        this.showLanguagePicker = true
      },

      closeLanguagePicker() {
        this.showLanguagePicker = false
      },

      selectLanguage(lang: LanguageOption) {
        // 可以在这里高亮选中项，但确认还需点击确定
        this.selectedLanguage = lang.label
      },

      confirmLanguageSelection() {
        // 实际应用中，这里会保存选中的语言设置
        console.log('Language confirmed:', this.selectedLanguage)
        this.closeLanguagePicker()
        // TODO: 调用API或本地存储更新语言设置
      },

      openNotificationTimeRange() {
        this.showTimeRangePicker = true
      },

      closeTimeRangePicker() {
        this.showTimeRangePicker = false
      },

      onStartTimeChange(e: UniEvent<HTMLInputElement>) {
        this.startTime = e.detail.value
      },

      onEndTimeChange(e: UniEvent<HTMLInputElement>) {
        this.endTime = e.detail.value
      },

      confirmTimeRange() {
        this.notificationTimeRange = `${this.startTime} - ${this.endTime}`
        console.log('Time range confirmed:', this.notificationTimeRange)
        this.closeTimeRangePicker()
      },

      openPasswordChange() {
        uni.navigateTo({
          url: '/pages/mall/delivery/change-password'
        })
      },

      clearCache() {
        // TODO: 调用API或本地方法清除缓存
        uni.showModal({
          title: '清除缓存',
          content: `确定要清除 ${this.cacheSize} 的缓存吗？`,
          success: (res) => {
            if (res.confirm) {
              console.log('Cache cleared')
              this.cacheSize = '0.0 MB'
              uni.showToast({ title: '缓存已清除', icon: 'success' })
            }
          }
        })
      },

      openAboutPage() {
        uni.navigateTo({
          url: '/pages/mall/delivery/about'
        })
      },

      openHelpCenter() {
        uni.navigateTo({
          url: '/pages/mall/delivery/help-center'
        })
      },

      openFeedback() {
        uni.navigateTo({
          url: '/pages/mall/delivery/feedback'
        })
      },

      logout() {
        uni.showModal({
          title: '退出登录',
          content: '确定要退出当前账号吗？',
          success: (res) => {
            if (res.confirm) {
              // TODO: 调用登出API
              console.log('Logging out...')
              uni.reLaunch({
                url: '/pages/user/login'
              })
            }
          }
        })
      },

      noop() {
        // 阻止事件冒泡的空函数
      }
    }
  }
</script>

<style>
  .settings-container {
    background-color: #f8f9fa;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .header-bar {
    background-color: #fff;
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e9ecef;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }

  .nav-left {
    display: flex;
    align-items: center;
  }

  .nav-icon {
    font-size: 36rpx;
    margin-right: 10rpx;
    color: #333;
  }

  .nav-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .settings-list {
    flex: 1;
    padding: 20rpx 0;
  }

  .setting-section {
    background-color: #fff;
    margin: 20rpx;
    padding: 0 30rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }

  .section-title {
    font-size: 28rpx;
    color: #999;
    padding: 20rpx 0 10rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
  }

  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f8f9fa;
  }

  .setting-item:last-child {
    border-bottom: none;
  }

  .item-label {
    font-size: 28rpx;
    color: #333;
    flex: 1;
  }

  .item-value {
    font-size: 26rpx;
    color: #999;
    margin-right: 10rpx;
  }

  .item-arrow {
    font-size: 28rpx;
    color: #ccc;
  }

  .logout-section {
    margin: 40rpx 20rpx 20rpx 20rpx;
  }

  .logout-btn {
    width: 100%;
    height: 80rpx;
    background-color: #f44336;
    color: #fff;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: bold;
    border: none;
  }

  /* 弹窗遮罩 */
  .picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .picker-panel {
    background-color: #fff;
    width: 80%;
    max-width: 600rpx;
    border-radius: 16rpx;
    overflow: hidden;
  }

  .picker-title {
    display: block;
    text-align: center;
    padding: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    border-bottom: 1rpx solid #eee;
  }

  .picker-options {
    max-height: 400rpx;
  }

  .picker-option {
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    color: #333;
    border-bottom: 1rpx solid #f8f9fa;
  }

  .picker-option:last-child {
    border-bottom: none;
  }

  .picker-option-selected {
    background-color: #E8F5E8;
    color: #4CAF50;
    font-weight: bold;
  }

  .time-range-picker {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 30rpx;
  }

  .range-label {
    font-size: 28rpx;
    color: #666;
  }

  .time-input {
    font-size: 28rpx;
    padding: 10rpx 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    background-color: #f9f9f9;
    margin: 0 10rpx;
  }

  .picker-actions {
    display: flex;
    justify-content: space-around;
    padding: 20rpx;
    border-top: 1rpx solid #eee;
  }

</style>