<template>
  <div class="page flex-col">
    <div class="section_1 flex-col" :style="{ backgroundImage: `url(${loginBgFull})` }">
      <div class="box_1 flex-row">
        <div class="section_2 flex-col">
          <div class="group_1 flex-col" :style="{ backgroundImage: `url(${loginBoxLeft})` }"></div>
        </div>
        <div class="section_3 flex-col">
          <img class="image_1" referrerpolicy="no-referrer" :src="loginTitleImg" />
          <n-form ref="formRef" :model="loginInfo" :rules="rules" :show-label="false">
            <n-form-item path="phone">
              <div class="block_1 flex-row">
                <div class="image-text_1 flex-row">
                  <img class="thumbnail_1" referrerpolicy="no-referrer" :src="iconUserImg" />
                  <n-input
                    v-model:value="loginInfo.phone"
                    class="input-reset text-group_1 custom-n-input"
                    placeholder="请输入账号"
                    type="text"
                    :bordered="false"
                    @keypress.enter="handleLogin"
                  />
                </div>
              </div>
            </n-form-item>
            <div class="block_2 flex-row justify-between">
              <n-form-item path="verifyCode" class="verify-code-item">
                <div class="section_4 flex-row">
                  <div class="image-text_2 flex-row">
                    <img class="thumbnail_2" referrerpolicy="no-referrer" :src="iconCodeImg" />
                    <n-input
                      v-model:value="loginInfo.verifyCode"
                      class="input-reset text-group_2 custom-n-input"
                      placeholder="请输入验证码"
                      type="text"
                      :bordered="false"
                      @keypress.enter="handleLogin"
                    />
                  </div>
                </div>
              </n-form-item>
              <div
                class="text-wrapper_1 flex-col cursor-pointer"
                @click="handleSendCode"
                :class="{ disabled: countdown > 0 }"
              >
                <span class="text_1">{{
                  countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码'
                }}</span>
              </div>
            </div>
          </n-form>
          <div class="block_3 flex-row">
            <n-checkbox v-model:checked="isAgreed" class="agreement-checkbox">
              <span class="text-group_3">阅读并同意</span>
              <span class="text_2" @click.stop="handleOpenAgreement">《用户协议》</span>
            </n-checkbox>
          </div>

          <!-- User Agreement Modal -->
          <n-modal
            v-model:show="showAgreement"
            preset="card"
            title="用户服务协议"
            style="width: 800px; max-width: 90vw"
            :bordered="false"
          >
            <div
              class="agreement-content"
              style="max-height: 60vh; overflow-y: auto; padding: 0 10px"
            >
              <h3>特别提示</h3>
              <p>
                在此特别提醒您（用户）在注册成为用户之前，请认真阅读本《用户协议》（以下简称“协议”），确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。
              </p>
              <p>
                本协议约定成都文化产权交易所有限公司（以下简称“成都文交所”）与用户之间关于“IP文产通”平台服务（以下简称“服务”）的权利义务。“用户”是指注册、登录、使用本服务的个人。本协议可由成都文交所随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不另行通知，用户可在本网站查阅最新版协议条款。在成都文交所修改协议条款后，如果用户不接受修改后的条款，请立即停止使用成都文交所提供的服务，用户继续使用成都文交所提供的服务将被视为接受修改后的协议。
              </p>

              <h3>一、服务内容</h3>
              <p>
                1.1
                本服务的具体内容由成都文交所根据实际情况提供，包括但不限于授权用户通过其账号进行相关操作。
              </p>
              <p>
                1.2
                成都文交所提供的服务仅限于平台上的相关功能，用户在使用服务时应遵守相关法律法规及本协议的规定。
              </p>

              <h3>二、用户账号</h3>
              <p>
                2.1
                用户在使用本服务前需要注册一个账号。账号注册过程中，用户应提供真实、准确、完整的个人资料。
              </p>
              <p>
                2.2
                用户有责任妥善保管注册账号信息及账号密码的安全，因用户保管不善可能导致遭受盗号或密码失窃，责任由用户自行承担。
              </p>

              <h3>三、用户个人信息保护</h3>
              <p>
                3.1
                保护用户个人信息是成都文交所的一项基本原则，成都文交所将会采取合理的措施保护用户的个人信息。除法律法规规定的情形外，未经用户许可成都文交所不会向第三方公开、透露用户个人信息。
              </p>

              <br />
              <!-- <p style="color: #999; text-align: center; font-size: 12px;">(以上内容为示例，请替换为完整版《用户服务协议（暂行）》)</p> -->
            </div>
          </n-modal>
          <div
            class="text-wrapper_2 flex-col cursor-pointer"
            @click="handleLogin"
            :style="{ backgroundImage: `url(${loginBtnBg})` }"
          >
            <span class="text_3">立即登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { setToken } from '@/utils'
import api from '@/api'

// Images
import loginTitleImg from '@/assets/img/login_title.png'
import iconUserImg from '@/assets/img/icon_user.png'
import iconCodeImg from '@/assets/img/icon_code.png'
import iconCheckboxImg from '@/assets/img/icon_checkbox.png'
import loginBgFull from '@/assets/img/login_bg_full.png'
import loginBoxLeft from '@/assets/img/login_box_left.png'
import loginBtnBg from '@/assets/img/login_btn_bg.png'

const router = useRouter()
const { query } = useRoute()

const loginInfo = ref({
  phone: '',
  verifyCode: '',
  requestId: '',
})

const isAgreed = ref(false)
const showAgreement = ref(false)
const countdown = ref(0)
let countdownTimer = null
const loading = ref(false)

// Open Agreement Modal
function handleOpenAgreement() {
  showAgreement.value = true
}

// Initialize login info
if (localStorage.getItem('phone')) {
  loginInfo.value.phone = localStorage.getItem('phone')
}

const formRef = ref(null)
const rules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: ['input', 'blur'] },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['input', 'blur'] },
  ],
  verifyCode: [{ required: true, message: '请输入验证码', trigger: ['input', 'blur'] }],
}

// Validate phone
function validatePhone(phone) {
  const phoneReg = /^1[3-9]\d{9}$/
  return phoneReg.test(phone)
}

// Send verification code
async function handleSendCode() {
  if (countdown.value > 0) return

  const { phone } = loginInfo.value

  if (!phone) {
    $message.warning('请输入手机号')
    return
  }

  if (!validatePhone(phone)) {
    $message.warning('请输入正确的手机号')
    return
  }

  try {
    const res = await api.sendVerifyCode({ phone })
    loginInfo.value.requestId = res.data.request_id
    $message.success('验证码已发送')

    // Start countdown
    countdown.value = 60
    countdownTimer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(countdownTimer)
        countdownTimer = null
      }
    }, 1000)
  } catch (error) {
    console.error(error)
  }
}

// Login
async function handleLogin() {
  const { phone, verifyCode, requestId } = loginInfo.value

  if (!isAgreed.value) {
    $message.warning('请阅读并同意用户协议')
    return
  }

  formRef.value?.validate(async (errors) => {
    if (!errors) {
      loading.value = true
      try {
        const res = await api.loginWithVerifyCode({
          phone_number: phone,
          verification_code: verifyCode,
          device_id: requestId,
        })
        if (res.data?.token?.access_token) {
          setToken(res.data.token.access_token)
          localStorage.setItem('phone', phone)
          localStorage.setItem('app_user_id', res.data.user.id)

          if (query.redirect) {
            const path = query.redirect
            Reflect.deleteProperty(query, 'redirect')
            router.push({ path, query })
          } else {
            router.push('/home')
          }
        } else {
          $message.error('登录失败：未获取到token')
        }
      } catch (error) {
        console.error(error)
      } finally {
        loading.value = false
      }
    }
  })
}

onBeforeUnmount(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }
})
</script>

<style scoped>
/* Utility Classes */
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-between {
  justify-content: space-between;
}

.cursor-pointer {
  cursor: pointer;
}

.input-reset {
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Page Styles */
.page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #f0f2f5; /* Fallback */
}

.section_1 {
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.box_1 {
  box-shadow: 0px 2px 30px 0px rgba(225, 206, 206, 0.22);
  background-color: rgba(255, 255, 255, 1);
  width: 900px;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
}

.section_2 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0px 100px 0px 0px;
  height: 500px;
  width: 400px;
  position: relative;
  overflow: hidden;
}

.group_1 {
  /* Matches reference: width 841px, margin-left -270px inside a 400px container */
  width: 841px;
  height: 500px;
  margin-left: -270px;
  background-repeat: no-repeat;
  /* Ensure the image covers this specific area if needed, or default */
}

.section_3 {
  width: 331px;
  height: 298px;
  margin: 101px 85px 0 84px;
}

.image_1 {
  width: 260px;
  height: 42px;
  margin-left: 1px;
  /* Removed object-fit: contain to match reference behavior */
}

.block_1 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  width: 330px;
  height: 42px;
  border: 1px solid rgba(229, 229, 229, 1);
  margin: 50px 0 0 1px;
  align-items: center;
}

.image-text_1 {
  width: 100%;
  height: 16px;
  margin: 0 15px;
  align-items: center;
}

.thumbnail_1 {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.text-group_1 {
  color: rgba(48, 49, 51, 1);
  font-size: 14px;
  font-family: Alibaba-PuHuiTi-R, sans-serif;
  font-weight: normal;
  line-height: 14px;
}

.text-group_1::placeholder {
  color: rgba(189, 189, 189, 1);
}

.block_2 {
  width: 330px;
  height: 42px;
  margin: 20px 0 0 1px;
  align-items: center;
}

.section_4 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  width: 191px;
  height: 42px;
  border: 1px solid rgba(229, 229, 229, 1);
  align-items: center;
}

.image-text_2 {
  width: 100%;
  height: 16px;
  margin: 0 15px;
  align-items: center;
}

.thumbnail_2 {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.text-group_2 {
  color: rgba(48, 49, 51, 1);
  font-size: 14px;
  font-family: Alibaba-PuHuiTi-R, sans-serif;
  font-weight: normal;
  line-height: 14px;
}

.text-group_2::placeholder {
  color: rgba(189, 189, 189, 1);
}

.text-wrapper_1 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  height: 42px;
  border: 1px solid rgba(229, 229, 229, 1);
  width: 131px;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.text-wrapper_1:hover:not(.disabled) {
  border-color: rgba(163, 1, 19, 1);
  background-color: rgba(163, 1, 19, 0.05);
}

.text-wrapper_1:active:not(.disabled) {
  transform: scale(0.98);
}

.text_1 {
  color: rgba(48, 49, 51, 1);
  font-size: 14px;
  font-family: Alibaba-PuHuiTi-R, sans-serif;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.text-wrapper_1:hover:not(.disabled) .text_1 {
  color: rgba(163, 1, 19, 1);
}

.block_3 {
  width: 100%;
  margin-top: 36px;
  align-items: center;
}

.text-group_3 {
  color: rgba(136, 136, 136, 1);
  font-size: 12px;
  letter-spacing: 0.32px;
  font-family: Alibaba-PuHuiTi-R, sans-serif;
  font-weight: normal;
  white-space: nowrap;
  line-height: 12px;
  margin-right: 4px;
}

.text_2 {
  color: rgba(163, 1, 19, 1);
  font-size: 12px;
  letter-spacing: 0.32px;
  font-family: Alibaba-PuHuiTi-M, sans-serif;
  font-weight: normal;
  white-space: nowrap;
  line-height: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.text_2:hover {
  text-decoration: underline;
  color: rgba(180, 1, 21, 1);
}

.text-wrapper_2 {
  height: 42px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 330px;
  margin: 10px 0 0 1px;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
}

.text-wrapper_2:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.3);
}

.text-wrapper_2:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(163, 1, 19, 0.2);
}

.text_3 {
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  font-family: Alibaba-PuHuiTi-M, sans-serif;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.text-wrapper_2:hover .text_3 {
  letter-spacing: 1px;
}

/* Custom Naive UI Overrides */
.custom-n-input {
  background-color: transparent !important;
  font-size: 14px;
  line-height: 14px;
}

.custom-n-input :deep(.n-input-wrapper) {
  padding: 0 !important;
}

.custom-n-input :deep(.n-input__input-el) {
  height: 16px !important;
  line-height: 16px !important;
  color: rgba(48, 49, 51, 1);
  font-family: Alibaba-PuHuiTi-R, sans-serif;
}

.custom-n-input :deep(.n-input__placeholder) {
  color: rgba(189, 189, 189, 1) !important;
}

.custom-n-input :deep(.n-input__state-border),
.custom-n-input :deep(.n-input__border) {
  display: none !important;
}

/* Fix Form Item Layout to prevent shifts */
:deep(.n-form-item-feedback-wrapper) {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 2px;
  line-height: 1;
}

:deep(.n-form-item) {
  display: block;
  margin-bottom: 0 !important;
}

/* Ensure the code input item doesn't break flex layout */
.verify-code-item {
  flex: 1;
  /* The section_4 inside has fixed width, so we just let it be */
  max-width: 191px;
}

/* Input Container Interactions */
.block_1,
.section_4 {
  transition: all 0.3s ease;
}

.block_1:hover,
.section_4:hover {
  border-color: rgba(163, 1, 19, 0.5);
}

.block_1:focus-within,
.section_4:focus-within {
  border-color: rgba(163, 1, 19, 1);
  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.1);
}

/* Error State Styling */
:deep(.n-form-item.n-form-item--error) .block_1,
:deep(.n-form-item.n-form-item--error) .section_4 {
  border-color: #d03050;
}

:deep(.n-form-item.n-form-item--error) .block_1:focus-within,
:deep(.n-form-item.n-form-item--error) .section_4:focus-within {
  border-color: #d03050;
  box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.1);
}

/* Checkbox Customization */
:deep(.agreement-checkbox .n-checkbox-box) {
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Checked State - Solid Red */
:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box) {
  background-color: rgba(163, 1, 19, 1) !important;
  border: 1px solid rgba(163, 1, 19, 1) !important;
}

/* Hide the separate border element when checked to prevent color overlap/double borders */
:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border) {
  display: none !important;
}

/* Hover State - Red Border */
:deep(.agreement-checkbox:hover .n-checkbox-box .n-checkbox-box__border) {
  border-color: rgba(163, 1, 19, 1) !important;
}

/* Focus State - Red Border & Shadow */
:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box .n-checkbox-box__border) {
  border-color: rgba(163, 1, 19, 1) !important;
}

:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box) {
  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.2) !important;
}

/* Ensure checkmark is white */
:deep(.agreement-checkbox .n-checkbox-icon) {
  color: #fff !important;
}

/* Agreement Modal Styles */
.agreement-content {
  font-family: Alibaba-PuHuiTi-R, sans-serif;
  line-height: 1.6;
  color: #333;
}

.agreement-content h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.agreement-content p {
  margin-bottom: 12px;
  text-align: justify;
  font-size: 14px;
}
</style>
