<template>
  <view>
    <view class="page-card">
      <view class="section-card">
        <view class="section-title">修改密码</view>
        <view class="form-grid">
          <view class="form-row">
            <text class="form-label">当前密码</text>
            <input class="form-input" v-model="passwordForm.old_password" type="password" placeholder="请输入当前密码" />
          </view>
          <view class="form-row">
            <text class="form-label">新密码</text>
            <input class="form-input" v-model="passwordForm.new_password" type="password" placeholder="请输入新密码（≥6位）" />
          </view>
          <view class="form-row">
            <text class="form-label">确认新密码</text>
            <input class="form-input" v-model="passwordForm.confirm_password" type="password" placeholder="请再次输入新密码" />
          </view>
          <view class="form-row">
            <text class="form-label"></text>
            <button class="btn-primary btn-sm" @click="onChangePassword">修改密码</button>
          </view>
        </view>
      </view>

      <view class="section-card">
        <view class="section-title">基础配置</view>
        <view class="form-grid">
          <view class="form-row">
            <text class="form-label">系统名称</text>
            <input class="form-input" v-model="settings.system_name" placeholder="系统名称" />
          </view>
          <view class="form-row">
            <text class="form-label">管理员邮箱</text>
            <input class="form-input" v-model="settings.admin_email" placeholder="管理员邮箱" />
          </view>
          <view class="form-row">
            <text class="form-label">系统时区</text>
            <view class="select-wrap">
              <picker :range="timezoneOptions" @change="onTimezoneChange">
                <view class="form-input picker-input">
                  <text>{{ settings.timezone || '请选择' }}</text>
                  <text class="picker-arrow">›</text>
                </view>
              </picker>
            </view>
          </view>
        </view>
      </view>

      <view class="section-card">
        <view class="section-title">订阅配置</view>
        <view class="form-grid">
          <view class="form-row">
            <text class="form-label">月卡价格</text>
            <view class="input-suffix">
              <input class="form-input" v-model="settings.monthly_price" type="number" />
              <text class="suffix">元/月</text>
            </view>
          </view>
          <view class="form-row">
            <text class="form-label">年卡价格</text>
            <view class="input-suffix">
              <input class="form-input" v-model="settings.yearly_price" type="number" />
              <text class="suffix">元/年</text>
            </view>
          </view>
          <view class="form-row">
            <text class="form-label">试用时长</text>
            <view class="input-suffix">
              <input class="form-input" v-model="settings.trial_days" type="number" />
              <text class="suffix">天</text>
            </view>
          </view>
        </view>
      </view>

      <view class="section-card">
        <view class="section-title">功能开关</view>
        <view class="toggle-list">
          <view class="toggle-item">
            <view class="toggle-info">
              <text class="toggle-label">新用户注册</text>
              <text class="toggle-desc">允许新用户注册账号</text>
            </view>
            <view class="toggle-switch" :class="{ on: settings.enable_register }" @click="settings.enable_register = !settings.enable_register">
              <view class="toggle-dot"></view>
            </view>
          </view>
          <view class="toggle-item">
            <view class="toggle-info">
              <text class="toggle-label">设备绑定</text>
              <text class="toggle-desc">允许用户绑定设备</text>
            </view>
            <view class="toggle-switch" :class="{ on: settings.enable_binding }" @click="settings.enable_binding = !settings.enable_binding">
              <view class="toggle-dot"></view>
            </view>
          </view>
          <view class="toggle-item">
            <view class="toggle-info">
              <text class="toggle-label">免费普通模式</text>
              <text class="toggle-desc">未订阅用户可使用普通模式</text>
            </view>
            <view class="toggle-switch" :class="{ on: settings.enable_free_mode }" @click="settings.enable_free_mode = !settings.enable_free_mode">
              <view class="toggle-dot"></view>
            </view>
          </view>
          <view class="toggle-item">
            <view class="toggle-info">
              <text class="toggle-label">维护模式</text>
              <text class="toggle-desc">开启后系统进入维护状态</text>
            </view>
            <view class="toggle-switch" :class="{ on: settings.maintenance_mode }" @click="settings.maintenance_mode = !settings.maintenance_mode">
              <view class="toggle-dot"></view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="save-bar">
      <button class="btn-primary" @click="onSave">保存设置</button>
      <button class="btn-default" @click="onReset">重置</button>
    </view>
  </view>
</template>

<script>
import { get, post } from '../utils/request'

export default {
  name: 'SettingsView',
  data() {
    return {
      settings: {
        system_name: '',
        admin_email: '',
        timezone: 'Asia/Shanghai',
        monthly_price: '99',
        yearly_price: '899',
        trial_days: '7',
        enable_register: true,
        enable_binding: true,
        enable_free_mode: true,
        maintenance_mode: false
      },
      timezoneOptions: ['Asia/Shanghai', 'Asia/Tokyo', 'America/New_York', 'Europe/London'],
      passwordForm: { old_password: '', new_password: '', confirm_password: '' }
    }
  },
  mounted() {
    this.loadSettings()
  },
  methods: {
    async loadSettings() {
      try {
        const data = await get('/api/v1/admin/settings')
        if (data) {
          Object.assign(this.settings, data)
        }
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      }
    },
    async onSave() {
      try {
        await post('/api/v1/admin/settings', this.settings)
        uni.showToast({ title: '保存成功', icon: 'success' })
      } catch (e) {
        uni.showToast({ title: '保存失败', icon: 'none' })
      }
    },
    onReset() {
      this.loadSettings()
    },
    onTimezoneChange(e) {
      this.settings.timezone = this.timezoneOptions[e.detail.value]
    },
    async onChangePassword() {
      if (!this.passwordForm.old_password || !this.passwordForm.new_password) {
        uni.showToast({ title: '请填写完整', icon: 'none' })
        return
      }
      if (this.passwordForm.new_password.length < 6) {
        uni.showToast({ title: '新密码至少6位', icon: 'none' })
        return
      }
      if (this.passwordForm.new_password !== this.passwordForm.confirm_password) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' })
        return
      }
      try {
        await post('/api/v1/admin/password', {
          old_password: this.passwordForm.old_password,
          new_password: this.passwordForm.new_password
        })
        uni.showToast({ title: '密码修改成功', icon: 'success' })
        this.passwordForm = { old_password: '', new_password: '', confirm_password: '' }
      } catch (e) {
        uni.showToast({ title: e.message || '修改失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.page-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.section-card {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.section-card:last-of-type {
  border-bottom: none;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 14px;
  color: #333;
  text-align: right;
}

.form-input {
  height: 36px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
  box-sizing: border-box;
  color: #333;
  flex: 1;
}

.input-suffix {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.input-suffix .form-input {
  flex: 1;
}

.suffix {
  font-size: 14px;
  color: #999;
  white-space: nowrap;
}

.select-wrap {
  position: relative;
  flex: 1;
}

.picker-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 36px;
}

.picker-arrow {
  color: #999;
  font-size: 16px;
}

.toggle-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.toggle-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.toggle-desc {
  font-size: 12px;
  color: #999;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #d9d9d9;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-switch.on {
  background: #52c41a;
}

.toggle-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
}

.toggle-switch.on .toggle-dot {
  left: 22px;
}

.save-bar {
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-primary {
  background: #E6508C;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 24px;
  height: 36px;
  font-size: 14px;
  line-height: 36px;
  cursor: pointer;
}

.btn-default {
  background: #fff;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 0 24px;
  height: 36px;
  font-size: 14px;
  line-height: 36px;
  cursor: pointer;
}

.btn-sm {
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 32px;
}
</style>
