<template>
  <div class="login-container" :style="loginBgStyle">
    <div class="login-window-controls">
      <div class="login-drag-area"></div>
      <div class="login-control-buttons">
        <div class="ctrl-btn" @click="windowMin">&#x2500;</div>
        <div class="ctrl-btn ctrl-close" @click="windowClose">&#x2715;</div>
      </div>
    </div>
    <div class="login-card-wrapper">
    <div class="login-card">
      <div class="login-header">
        <h1>欢迎回来</h1>
        <p>请输入您的手机号和密码登录</p>
      </div>

      <a-alert
        v-if="error"
        type="error"
        :title="error"
        closable
        @close="authStore.clearError"
        style="margin-bottom: 16px"
      />

      <a-form layout="vertical" @submit="handleLogin" :model="formData">
        <a-form-item field="email" label="手机号" :rules="[
          { required: true, message: '手机号不能为空' },
          { match: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
        ]">
          <a-input
            v-model="formData.email"
            placeholder="请输入手机号"
            allow-clear
            :max-length="11"
          />
        </a-form-item>

        <a-form-item field="password" label="密码" :rules="[
          { required: true, message: '密码不能为空' }
        ]">
          <a-input-password
            v-model="formData.password"
            placeholder="请输入密码"
            allow-clear
          />
        </a-form-item>

        <a-checkbox v-model="formData.rememberMe">记住我</a-checkbox>

        <a-button
          type="primary"
          long
          html-type="submit"
          :loading="authStore.isLoading"
          :disabled="authStore.isLoading"
          style="margin-top: 16px"
        >
          登录
        </a-button>
      </a-form>

      <div class="login-footer">
        <p>
          还没有账户？
          <router-link to="/register">立即注册</router-link>
        </p>
      </div>

      <div class="login-features">
      </div>
    </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/modules/auth'

const router = useRouter()
const authStore = useAuthStore()

const hasLoginBg = ref(false)
try {
  const img = new Image()
  img.src = './login-bg.png'
  img.onload = () => { hasLoginBg.value = true }
} catch(e) {}

const loginBgStyle = computed(() => {
  if (hasLoginBg.value) {
    return {
      backgroundImage: 'url(./login-bg.png)',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
    }
  }
  return {}
})

const formData = reactive({
  email: '',
  password: '',
  rememberMe: true
})

const previousBodyTheme = ref<string | null>(null)
const previousHtmlTheme = ref<string | null>(null)
const previousArcoTheme = ref<string | null>(null)

onMounted(() => {
  previousBodyTheme.value = document.body.getAttribute('data-theme')
  previousHtmlTheme.value = document.documentElement.getAttribute('data-theme')
  previousArcoTheme.value = document.body.getAttribute('arco-theme')

  document.body.removeAttribute('data-theme')
  document.documentElement.removeAttribute('data-theme')
  document.body.removeAttribute('arco-theme')

  const rememberMeFlag = localStorage.getItem('auth_remember_me')
  formData.rememberMe = rememberMeFlag === 'true'
  if (formData.rememberMe) {
    const savedEmail = localStorage.getItem('auth_saved_email')
    const savedPassword = localStorage.getItem('auth_saved_password')
    if (savedEmail) formData.email = savedEmail
    if (savedPassword) formData.password = savedPassword
  }
})

onBeforeUnmount(() => {
  if (previousBodyTheme.value) {
    document.body.setAttribute('data-theme', previousBodyTheme.value)
  } else {
    document.body.removeAttribute('data-theme')
  }

  if (previousHtmlTheme.value) {
    document.documentElement.setAttribute('data-theme', previousHtmlTheme.value)
  } else {
    document.documentElement.removeAttribute('data-theme')
  }

  if (previousArcoTheme.value) {
    document.body.setAttribute('arco-theme', previousArcoTheme.value)
  } else {
    document.body.removeAttribute('arco-theme')
  }
})

const error = computed(() => authStore.error)

const windowMin = () => {
  window.$mapi?.app?.windowMin?.()
}

const windowClose = () => {
  window.$mapi?.app?.windowClose?.('main')
}

const handleLogin = async () => {
  console.log('[Login] window.$mapi exists:', !!window['$mapi'], 'auth exists:', !!window['$mapi']?.['auth'])
  try {
    authStore.clearError()

    if (!formData.email || !/^1[3-9]\d{9}$/.test(formData.email)) {
      authStore.error = '请输入有效的手机号'
      return
    }

    if (!formData.password) {
      authStore.error = '密码不能为空'
      return
    }

    const result = await authStore.login(formData.email, formData.password, formData.rememberMe)


    if (result.success) {
      router.push('/')
    }
  } catch (error: any) {
    authStore.error = error.message || '登录失败'
  }
}
</script>

<style scoped lang="less">
.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;

  .login-window-controls {
    display: flex;
    align-items: center;
    height: 36px;
    flex-shrink: 0;

    .login-drag-area {
      flex: 1;
      height: 100%;
      -webkit-app-region: drag;
    }

    .login-control-buttons {
      display: flex;
      -webkit-app-region: no-drag;

      .ctrl-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        transition: all 0.15s;

        &:hover {
          background: rgba(255, 255, 255, 0.15);
          color: #fff;
        }

        &.ctrl-close:hover {
          background: #e81123;
          color: #fff;
        }
      }
    }
  }

  .login-card-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

  .login-card {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 32px;

    .login-header {
      text-align: center;
      margin-bottom: 24px;

      h1 {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin: 0;
      }

      p {
        color: #666;
        margin-top: 8px;
      }
    }
  }

  .login-footer {
    text-align: center;
    margin-top: 16px;

    p {
      color: #666;
    }

    a {
      color: #667eea;
      text-decoration: none;
      font-weight: 600;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .login-features {
    margin-top: 16px;
  }

  :deep(.arco-form-item-label),
  :deep(.arco-form-item-label-col),
  :deep(.arco-form-item-label-col > label),
  :deep(.arco-form-item-label-col label),
  :deep(.arco-form-item-label-col label span) {
    color: #2d3748 !important;
    font-weight: 600 !important;
  }

  :deep(.arco-form-item-label-col > label::before) {
    color: #f53f3f !important;
  }

  :deep(.arco-input-wrapper),
  :deep(.arco-input-wrapper .arco-input),
  :deep(.arco-input-wrapper input) {
    color: #1f2937 !important;
  }

  :deep(.arco-input::placeholder),
  :deep(.arco-input-wrapper input::placeholder) {
    color: #718096 !important;
    opacity: 1 !important;
  }

  :deep(.arco-form-item-message) {
    color: #c53030 !important;
  }
}
</style>
