<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]">
        <!-- Email -->
        <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.email"
            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 { useGo } from '@/hooks/useGo'
import NavHeader from '@/components/NavHeader.vue'

const go = useGo()

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

/**
 * 验证邮箱格式
 * @param {string} email - 邮箱地址
 * @returns {boolean} 是否有效
 */
const isValidEmail = (email) => {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  return emailRegex.test(email)
}

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

  if (!isValidEmail(form.email)) {
    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
  }

  // Mock login success
  Taro.showLoading({ title: '登录中...', mask: true })
  setTimeout(() => {
    Taro.hideLoading()
    Taro.showToast({ title: '登录成功', icon: 'success' })
    setTimeout(() => {
      // Redirect to home or previous page
      Taro.reLaunch({ url: '/pages/index/index' })
    }, 1500)
  }, 1000)
}
</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>