<template>
  <view class="min-h-screen bg-white flex flex-col">
    <!-- Header -->
    <NavHeader title="" :show-back="true" />

    <view class="flex-1 flex flex-col px-[48rpx] pt-[120rpx]">
      <!-- Logo/Title -->
      <view class="mb-[100rpx]">
        <!-- Logo Icon -->
        <view class="flex justify-center mb-[40rpx]">
          <view class="w-[160rpx] h-[160rpx] rounded-[32rpx] bg-gradient-to-br from-[#007AFF] to-[#0051D5] flex items-center justify-center shadow-lg">
            <text class="text-white text-[80rpx] font-bold">M</text>
          </view>
        </view>

        <!-- Title -->
        <view class="text-center">
          <view class="text-[52rpx] font-bold text-gray-900 mb-[16rpx]">欢迎登录</view>
          <view class="text-[28rpx] text-gray-500">Manulife 臻奇荟</view>
        </view>
      </view>

      <!-- Form -->
      <view class="space-y-[48rpx]">
        <!-- Account -->
        <view class="border-b border-gray-200 pb-[16rpx]">
          <view class="text-[28rpx] text-gray-900 font-medium mb-[16rpx]">账号</view>
          <input
            v-model="form.uuid"
            type="text"
            placeholder="请输入账号"
            placeholder-class="text-gray-300"
            class="w-full text-[32rpx] text-gray-900 h-[80rpx]"
          />
        </view>

        <!-- Password -->
        <view class="border-b border-gray-200 pb-[16rpx]">
          <view class="text-[28rpx] text-gray-900 font-medium mb-[16rpx]">密码</view>
          <input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            placeholder-class="text-gray-300"
            class="w-full text-[32rpx] text-gray-900 h-[80rpx]"
          />
        </view>

        <!-- Hint -->
        <view class="text-[24rpx] text-gray-400 mt-[24rpx]">
          账号由后台系统统一配置，请联系管理员获取
        </view>
      </view>

      <!-- Actions -->
      <view class="mt-[80rpx]">
        <button
          class="w-full h-[96rpx] bg-gradient-to-r from-[#007AFF] to-[#0051D5] rounded-[48rpx] flex items-center justify-center text-white text-[32rpx] font-bold shadow-lg active:scale-[0.98] transition-transform after:border-none"
          @tap="handleLogin"
        >
          登录
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'
import Taro from '@tarojs/taro'
import { useUserStore } from '@/stores/user'
import { routerStore } from '@/stores/router'
import NavHeader from '@/components/navigation/NavHeader.vue'

const userStore = useUserStore()

const form = reactive({
  uuid: '',
  password: ''
})

/**
 * Handle login action
 */
const handleLogin = async () => {
  // 验证账号
  if (!form.uuid) {
    Taro.showToast({ title: '请输入账号', icon: 'none' })
    return
  }

  // 验证密码
  if (!form.password) {
    Taro.showToast({ title: '请输入密码', icon: 'none' })
    return
  }

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

  // 调用登录接口
  Taro.showLoading({ title: '登录中...', mask: true })

  try {
    const result = await userStore.login({
      uuid: form.uuid,
      password: form.password
    })

    if (result.success) {
      Taro.hideLoading()
      Taro.showToast({ title: '登录成功', icon: 'success' })

      // 延迟后跳转回原页面或首页
      setTimeout(() => {
        // 获取 router store 实例
        const store = routerStore()

        // 从 router store 获取之前保存的路径
        const redirectUrl = store.url

        if (redirectUrl) {
          // 清空保存的路径
          store.remove()
          console.log('登录成功，跳转回原页面:', redirectUrl)

          // 跳转回原页面
          Taro.redirectTo({
            url: redirectUrl
          }).catch(() => {
            // 如果跳转失败，则跳转到首页
            console.warn('跳转回原页面失败，跳转到首页')
            Taro.reLaunch({ url: '/pages/index/index' })
          })
        } else {
          // 没有保存的路径，跳转到首页
          console.log('登录成功，跳转到首页')
          Taro.reLaunch({ url: '/pages/index/index' })
        }
      }, 1500)
    } else {
      Taro.hideLoading()
      Taro.showToast({
        title: result.message || '登录失败',
        icon: 'none'
      })
    }
  } catch (error) {
    Taro.hideLoading()
    Taro.showToast({
      title: error.message || '登录失败，请重试',
      icon: 'none'
    })
  }
}
</script>

<style lang="less">
/* Reset button default styles */
button::after {
  border: none;
}

/* Enhance gradient effect for button */
button {
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
  }
}

/* Logo icon enhancement */
.shadow-lg {
  box-shadow: 0 16rpx 32rpx rgba(0, 122, 255, 0.25);
}
</style>