<template>
  <div class="public-auth-page">
    <div class="auth-card">
      <img src="@/assets/images/logo-icon.png" alt="乐绘世界" class="auth-logo" />
      <h2 class="auth-title">{{ isRegister ? "创建账号" : "登录" }}</h2>
      <p class="auth-subtitle">
        {{ isRegister ? "加入乐绘世界，开启创作之旅" : "欢迎回来，继续你的创作" }}
      </p>

      <a-form
        :model="form"
        :rules="rules"
        @finish="handleSubmit"
        layout="vertical"
        class="auth-form"
      >
        <a-form-item v-if="isRegister" name="nickname" label="昵称">
          <a-input
            v-model:value="form.nickname"
            placeholder="给自己取个名字吧"
            size="large"
          />
        </a-form-item>

        <a-form-item name="username" label="用户名">
          <a-input
            v-model:value="form.username"
            placeholder="请输入用户名"
            size="large"
          />
        </a-form-item>

        <a-form-item name="password" label="密码">
          <a-input-password
            v-model:value="form.password"
            placeholder="请输入密码"
            size="large"
          />
        </a-form-item>

        <a-form-item v-if="isRegister" name="confirmPassword" label="确认密码">
          <a-input-password
            v-model:value="form.confirmPassword"
            placeholder="再次输入密码"
            size="large"
          />
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            :loading="loading"
            block
            class="auth-btn"
          >
            {{ isRegister ? "注册并登录" : "登录" }}
          </a-button>
        </a-form-item>
      </a-form>

      <div class="auth-switch">
        <template v-if="isRegister">
          已有账号？
          <a @click="isRegister = false">去登录</a>
        </template>
        <template v-else>
          还没有账号？
          <a @click="isRegister = true">立即注册</a>
        </template>
      </div>

      <div class="admin-entry">
        <span>管理端入口：</span>
        <a @click="$router.push('/super/login')">平台超管</a>
        <a-divider type="vertical" />
        <a @click="$router.push('/gdlib/login')">广东省图</a>
        <a-divider type="vertical" />
        <a @click="$router.push('/judge/login')">评委端</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue"
import { useRouter, useRoute } from "vue-router"
import { message } from "ant-design-vue"
import { publicAuthApi } from "@/api/public"
import type { Rule } from "ant-design-vue/es/form"

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const isRegister = ref(false)

const form = reactive({
  username: "demo",
  password: "demo123456",
  confirmPassword: "",
  nickname: "",
})

const rules: Record<string, Rule[]> = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 4, message: "用户名至少4个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码至少6个字符", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    {
      validator: (_: any, value: string) => {
        if (value !== form.password) {
          return Promise.reject("两次输入的密码不一致")
        }
        return Promise.resolve()
      },
      trigger: "blur",
    },
  ],
  nickname: [
    { required: true, message: "请输入昵称", trigger: "blur" },
    { min: 2, message: "昵称至少2个字符", trigger: "blur" },
  ],
}

const handleSubmit = async () => {
  loading.value = true
  try {
    let result
    if (isRegister.value) {
      result = await publicAuthApi.register({
        username: form.username,
        password: form.password,
        nickname: form.nickname,
      })
      message.success("注册成功")
    } else {
      result = await publicAuthApi.login({
        username: form.username,
        password: form.password,
      })
      message.success("登录成功")
    }

    // 保存 token 和用户信息
    localStorage.setItem("public_token", result.token)
    localStorage.setItem("public_user", JSON.stringify(result.user))

    // 跳转
    const redirect = (route.query.redirect as string) || "/p/activities"
    router.push(redirect)
  } catch (error: any) {
    const msg =
      error?.response?.data?.message ||
      (isRegister.value ? "注册失败" : "登录失败")
    message.error(msg)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
$primary: #6366f1;

.public-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 50%, #ecfdf5 100%);
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 40px 32px;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
  text-align: center;
}

.auth-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.15));
}

.auth-title {
  font-size: 22px;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0 0 6px;
}

.auth-subtitle {
  font-size: 14px;
  color: #9ca3af;
  margin: 0 0 28px;
}

.auth-form {
  text-align: left;

  :deep(.ant-input-affix-wrapper) {
    border-radius: 12px !important;
    border-color: #e5e1f5 !important;
    height: 44px;
    padding: 4px 11px;

    &:focus,
    &:hover,
    &.ant-input-affix-wrapper-focused {
      border-color: $primary !important;
    }

    .ant-input {
      height: auto;
    }
  }

  :deep(.ant-input:not(.ant-input-affix-wrapper .ant-input)) {
    border-radius: 12px !important;
    border-color: #e5e1f5 !important;
    height: 44px;

    &:focus,
    &:hover {
      border-color: $primary !important;
    }
  }

  :deep(.ant-form-item-label > label) {
    font-weight: 600;
    font-size: 13px;
    color: #374151;
  }
}

.auth-btn {
  height: 46px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, $primary 0%, #ec4899 100%) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
  letter-spacing: 1px;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  }
}

.auth-switch {
  margin-top: 20px;
  font-size: 13px;
  color: #9ca3af;

  a {
    color: $primary;
    font-weight: 600;
    cursor: pointer;

    &:hover {
      color: #ec4899;
    }
  }
}

.admin-entry {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: #d1d5db;

  a {
    color: #9ca3af;
    cursor: pointer;

    &:hover {
      color: $primary;
    }
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: 32px 24px;
    border-radius: 20px;
  }
}
</style>
