<template>
  <view class="login-container">
    <!-- 背景装饰圆球 -->
    <view class="bg-ball ball-1"></view>
    <view class="bg-ball ball-2"></view>
    <view class="bg-ball ball-3"></view>
    <view class="bg-ball ball-4"></view>

    <!-- Logo区域 -->
    <view class="login-header fade-in">
      <image class="app-logo" src="/static/images/logo.png" mode="aspectFit"></image>
      <view class="title-decoration">
        <view class="deco-line left"></view>
        <text class="app-title">强宝爱记账</text>
        <view class="deco-line right"></view>
      </view>
      <text class="app-subtitle">智能记账，轻松管理</text>
    </view>

    <!-- 登录表单卡片 -->
    <view class="login-form glass-card">
      <!-- 用户名输入框 -->
      <view class="form-item">
        <view :class="['input-wrapper', focusField === 'username' ? 'focused' : '']">
          <text class="input-icon">👤</text>
          <input
            v-model="form.username"
            placeholder="请输入用户名"
            class="input"
            maxlength="20"
            @focus="focusField = 'username'"
            @blur="focusField = ''"
          />
        </view>
      </view>

      <!-- 密码输入框 -->
      <view class="form-item">
        <view :class="['input-wrapper', focusField === 'password' ? 'focused' : '']">
          <text class="input-icon">🔒</text>
          <input
            v-model="form.password"
            placeholder="请输入密码"
            :type="showPassword ? 'text' : 'password'"
            class="input"
            maxlength="20"
            @focus="focusField = 'password'"
            @blur="focusField = ''"
          />
          <text class="eye-icon" @click="togglePassword">
            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
          </text>
        </view>
      </view>

      <!-- 昵称输入框（注册时） -->
      <view v-if="isRegister" class="form-item">
        <view :class="['input-wrapper', focusField === 'nickname' ? 'focused' : '']">
          <text class="input-icon">✨</text>
          <input
            v-model="form.nickname"
            placeholder="请输入昵称（可选）"
            class="input"
            maxlength="20"
            @focus="focusField = 'nickname'"
            @blur="focusField = ''"
          />
        </view>
      </view>

      <!-- 记住密码和忘记密码 -->
      <view v-if="!isRegister" class="options-row">
        <view class="checkbox-wrapper" @click="rememberMe = !rememberMe">
          <view :class="['checkbox', rememberMe ? 'checked' : '']">
            <text v-if="rememberMe" class="check-icon">✓</text>
          </view>
          <text class="checkbox-label">记住密码</text>
        </view>
      </view>

      <!-- 协议勾选（注册时） -->
      <view v-if="isRegister" class="options-row">
        <view class="checkbox-wrapper" @click="agreeProtocol = !agreeProtocol">
          <view :class="['checkbox', agreeProtocol ? 'checked' : '']">
            <text v-if="agreeProtocol" class="check-icon">✓</text>
          </view>
          <text class="checkbox-label">我已阅读并同意用户协议和隐私政策</text>
        </view>
      </view>

      <!-- 登录/注册按钮 -->
      <button class="login-btn gradient-btn" @click="handleSubmit" :loading="loading" :disabled="loading">
        <view v-if="!loading" class="btn-content">
          {{ isRegister ? '🎉 立即注册' : '🚀 立即登录' }}
        </view>
        <view v-else class="btn-loading">
          <view class="loading-spinner"></view>
          <text>{{ isRegister ? '注册中...' : '登录中...' }}</text>
        </view>
      </button>

      <!-- 切换模式 -->
      <view class="switch-mode" @click="switchMode">
        <text>{{ isRegister ? '已有账号？去登录 →' : '没有账号？去注册 →' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { register, login } from '../../api/auth'
import { useUserStore } from '../../store/user'
import { encryptPassword, decryptPassword } from '../../utils/crypto'

const userStore = useUserStore()

const isRegister = ref(false)
const loading = ref(false)
const showPassword = ref(false)
const focusField = ref('')
const rememberMe = ref(false)
const agreeProtocol = ref(false)

const form = ref({
  username: '',
  password: '',
  nickname: ''
})

// 从本地存储加载记住的密码
onMounted(() => {
  try {
    const savedUsername = uni.getStorageSync('saved_username')
    const encryptedPassword = uni.getStorageSync('saved_password')

    if (savedUsername && encryptedPassword) {
      form.value.username = savedUsername
      // 解密密码
      form.value.password = decryptPassword(encryptedPassword)
      rememberMe.value = true
    }
  } catch (error) {
    console.error('加载保存的密码失败:', error)
    // 清除可能损坏的数据
    uni.removeStorageSync('saved_username')
    uni.removeStorageSync('saved_password')
  }
})

// 切换密码显示/隐藏
const togglePassword = () => {
  showPassword.value = !showPassword.value
}

// 切换登录/注册模式
const switchMode = () => {
  isRegister.value = !isRegister.value
  form.value = {
    username: '',
    password: '',
    nickname: ''
  }
  agreeProtocol.value = false
}

// 提交表单
const handleSubmit = async () => {
  if (!form.value.username || !form.value.password) {
    uni.showToast({
      title: '请输入用户名和密码',
      icon: 'none'
    })
    return
  }

  if (isRegister.value && form.value.password.length < 6) {
    uni.showToast({
      title: '密码长度至少6位',
      icon: 'none'
    })
    return
  }

  // 注册时检查协议
  if (isRegister.value && !agreeProtocol.value) {
    uni.showToast({
      title: '请先阅读并同意用户协议',
      icon: 'none'
    })
    return
  }

  loading.value = true

  try {
    let response
    if (isRegister.value) {
      response = await register({
        username: form.value.username,
        password: form.value.password,
        nickname: form.value.nickname || form.value.username
      })
    } else {
      response = await login({
        username: form.value.username,
        password: form.value.password
      })
    }

    // 保存token和用户信息
    userStore.login(response.token, {
      username: response.username,
      nickname: response.nickname
    })

    // 记住密码
    if (!isRegister.value && rememberMe.value) {
      uni.setStorageSync('saved_username', form.value.username)
      // 加密密码后保存
      uni.setStorageSync('saved_password', encryptPassword(form.value.password))
    } else if (!rememberMe.value) {
      uni.removeStorageSync('saved_username')
      uni.removeStorageSync('saved_password')
    }

    uni.showToast({
      title: isRegister.value ? '🎉 注册成功' : '🚀 登录成功',
      icon: 'success'
    })

    // 跳转到首页
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }, 1500)

  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({
      title: error.message || '操作失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* 主容器 - 卡通背景 */
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE5CC 0%, #FFD4A8 50%, #FFC08A 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  position: relative;
  overflow: hidden;
}

/* 背景装饰圆球 */
.bg-ball {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(80rpx);
  animation: float 6s ease-in-out infinite;
}

.ball-1 {
  width: 400rpx;
  height: 400rpx;
  background: linear-gradient(135deg, #C8956E, #FFB6C1);
  top: -100rpx;
  left: -100rpx;
  animation-delay: 0s;
}

.ball-2 {
  width: 300rpx;
  height: 300rpx;
  background: linear-gradient(135deg, #F5D59E, #FFD700);
  top: 200rpx;
  right: -50rpx;
  animation-delay: 1s;
}

.ball-3 {
  width: 350rpx;
  height: 350rpx;
  background: linear-gradient(135deg, #FFB6C1, #C8956E);
  bottom: 100rpx;
  left: 50rpx;
  animation-delay: 2s;
}

.ball-4 {
  width: 250rpx;
  height: 250rpx;
  background: linear-gradient(135deg, #FFD700, #F5D59E);
  bottom: -50rpx;
  right: 100rpx;
  animation-delay: 3s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(20rpx, -30rpx) scale(1.1);
  }
  50% {
    transform: translate(-20rpx, 20rpx) scale(0.9);
  }
  75% {
    transform: translate(30rpx, 10rpx) scale(1.05);
  }
}

/* Logo区域 */
.login-header {
  text-align: center;
  margin-bottom: 60rpx;
  position: relative;
  z-index: 10;
}

/* 入场动画 */
.fade-in {
  animation: fadeInDown 0.8s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-50rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo图片 */
.app-logo {
  width: 280rpx;
  height: 280rpx;
  margin-bottom: 30rpx;
  filter: drop-shadow(0 8rpx 20rpx rgba(93, 64, 55, 0.3));
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20rpx);
  }
}

/* 标题装饰容器 */
.title-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

/* 装饰线条 */
.deco-line {
  width: 60rpx;
  height: 6rpx;
  background: linear-gradient(90deg, #C8956E, #FFD700);
  border-radius: 10rpx;
  position: relative;
}

.deco-line::after {
  content: '';
  position: absolute;
  width: 12rpx;
  height: 12rpx;
  background: #FFD700;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 10rpx #FFD700;
}

.deco-line.left::after {
  left: -6rpx;
}

.deco-line.right::after {
  right: -6rpx;
}

/* 标题文字 */
.app-title {
  display: block;
  font-size: 56rpx;
  font-weight: bold;
  color: #5D4037;
  text-shadow:
    3rpx 3rpx 0 #FFD700,
    -1rpx -1rpx 0 #FFD700,
    1rpx -1rpx 0 #FFD700,
    -1rpx 1rpx 0 #FFD700,
    0 8rpx 20rpx rgba(255, 215, 0, 0.4);
  letter-spacing: 4rpx;
}

/* 副标题 */
.app-subtitle {
  display: block;
  font-size: 28rpx;
  color: #8D6E63;
  font-weight: 500;
}

/* 表单卡片 - 毛玻璃效果 */
.login-form {
  width: 100%;
  max-width: 600rpx;
  position: relative;
  z-index: 10;
}

.glass-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20rpx);
  border-radius: 40rpx;
  padding: 60rpx 50rpx;
  box-shadow:
    0 20rpx 60rpx rgba(93, 64, 55, 0.15),
    0 0 0 2rpx rgba(255, 255, 255, 0.5),
    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8);
  border: 3rpx solid #5D4037;
  animation: slideUp 0.8s ease-out 0.3s both;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表单项 */
.form-item {
  margin-bottom: 30rpx;
}

/* 输入框容器 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 0 30rpx;
  height: 96rpx;
  border: 3rpx solid #C8956E;
  box-shadow: 0 4rpx 15rpx rgba(200, 149, 110, 0.2);
  transition: all 0.3s ease;
}

.input-wrapper.focused {
  border-color: #FFD700;
  box-shadow:
    0 0 0 4rpx rgba(255, 215, 0, 0.3),
    0 8rpx 25rpx rgba(255, 215, 0, 0.4);
  transform: translateY(-2rpx);
}

/* 输入框图标 */
.input-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

/* 输入框 */
.input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: #5D4037;
  background: transparent;
  border: none;
}

.input::placeholder {
  color: #BCAAA4;
}

/* 眼睛图标 */
.eye-icon {
  font-size: 36rpx;
  padding: 10rpx;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s;
}

.eye-icon:active {
  transform: scale(0.9);
}

/* 选项行 */
.options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

/* 复选框容器 */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* 复选框 */
.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 3rpx solid #C8956E;
  border-radius: 10rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15rpx;
  transition: all 0.3s ease;
}

.checkbox.checked {
  background: linear-gradient(135deg, #FFD700, #F5D59E);
  border-color: #FFD700;
  box-shadow: 0 0 10rpx rgba(255, 215, 0, 0.5);
}

.check-icon {
  color: #5D4037;
  font-size: 28rpx;
  font-weight: bold;
}

/* 复选框标签 */
.checkbox-label {
  font-size: 26rpx;
  color: #6D4C41;
}

/* 渐变按钮 */
.login-btn {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(135deg, #C8956E 0%, #F5D59E 50%, #FFD700 100%);
  background-size: 200% 200%;
  color: #5D4037;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  border: 4rpx solid #5D4037;
  box-shadow:
    0 10rpx 30rpx rgba(200, 149, 110, 0.4),
    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s;
}

.login-btn:active::before {
  left: 100%;
}

.login-btn:active {
  transform: scale(0.98);
  box-shadow:
    0 5rpx 15rpx rgba(200, 149, 110, 0.3),
    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.6);
}

.login-btn[disabled] {
  opacity: 0.7;
}

/* 按钮内容 */
.btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

/* 加载动画 */
.btn-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid rgba(93, 64, 55, 0.2);
  border-top-color: #5D4037;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 切换模式 */
.switch-mode {
  text-align: center;
  margin-top: 40rpx;
  padding: 20rpx;
}

.switch-mode text {
  color: #6D4C41;
  font-size: 28rpx;
  font-weight: 500;
  position: relative;
  cursor: pointer;
  transition: color 0.3s;
}

.switch-mode text::after {
  content: '';
  position: absolute;
  bottom: -5rpx;
  left: 0;
  width: 0;
  height: 3rpx;
  background: linear-gradient(90deg, #C8956E, #FFD700);
  transition: width 0.3s;
}

.switch-mode:active text {
  color: #FFD700;
}

.switch-mode:active text::after {
  width: 100%;
}
</style>
