xiaoxia-saas/apps/web/src/pages/auth/WechatOnboarding.tsx

/**
 * 微信新用户昵称引导页
 * 新微信用户首次登录后强制填写昵称，完成后才进入主界面
 */
import React from "react"
import { Form, Input, message } from "antd"
import { Navigate, useNavigate } from "react-router-dom"
import { useMutation } from "@tanstack/react-query"
import { updateProfile } from "@/api/auth"
import { useAuthStore } from "@/store/authStore"
import Button from "@/components/ui/Button"
import "./Login.css"

interface OnboardingFormValues {
  display_name: string
}

const WechatOnboarding: React.FC = () => {
  const navigate = useNavigate()
  const setUser = useAuthStore((state) => state.setUser)
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
  const user = useAuthStore((state) => state.user)
  const hasAccessToken = Boolean(localStorage.getItem("access_token"))
  const [form] = Form.useForm<OnboardingFormValues>()

  const saveMutation = useMutation({
    mutationFn: (displayName: string) => updateProfile({ display_name: displayName }),
  })

  // 已登录且资料已完善的用户不该停留在引导页
  if (isAuthenticated && hasAccessToken && user?.profile_completed === true) {
    return <Navigate to="/app/dashboard" replace />
  }
  // 未登录（如手动输入 URL）回登录页
  if (!isAuthenticated || !hasAccessToken) {
    return <Navigate to="/login" replace />
  }

  const onFinish = async (values: OnboardingFormValues) => {
    try {
      const updated = await saveMutation.mutateAsync(values.display_name.trim())
      // 后端返回的 profile_completed 以最新资料为准，前端同步标记完善
      setUser({ ...updated, profile_completed: true })
      message.success("欢迎加入小虾智剪！")
      const redirect = localStorage.getItem("login_redirect") || "/app/dashboard"
      localStorage.removeItem("login_redirect")
      navigate(redirect, { replace: true })
    } catch {
      message.error("保存失败，请重试")
    }
  }

  return (
    <div className="xx-auth-page">
      <div className="xx-auth-card">
        <div className="xx-auth-header">
          <div className="xx-auth-brand">
            <span className="xx-auth-logo">🦐</span>
            <span className="xx-auth-brand-name">小虾智剪</span>
          </div>
          <p>欢迎使用微信登录，请先设置您的昵称</p>
        </div>

        <Form
          form={form}
          name="wechat-onboarding"
          onFinish={onFinish}
          autoComplete="off"
          layout="vertical"
          // 不预填：新微信用户必须自己输入昵称（user.display_name 可能是微信昵称/系统占位）
          initialValues={{ display_name: "" }}
        >
          <Form.Item
            name="display_name"
            label="昵称"
            rules={[
              { required: true, message: "请输入昵称" },
              { whitespace: true, message: "昵称不能为空白" },
              { min: 1, max: 20, message: "昵称长度需在 1-20 个字符之间" },
            ]}
            extra="昵称将展示在您的作品和账户中，之后可在个人设置中修改"
          >
            <Input placeholder="请输入您的昵称" size="large" maxLength={20} showCount />
          </Form.Item>

          <Form.Item>
            <Button
              buttonType="primary"
              buttonSize="lg"
              htmlType="submit"
              loading={saveMutation.isPending}
              style={{ width: "100%" }}
            >
              {saveMutation.isPending ? "保存中..." : "进入小虾智剪"}
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default WechatOnboarding