kevisual-home/src/apps/config/firstLogin.tsx

import { useEffect, useState } from "react";
import { AuthProvider } from "../auth";
import { useFirstStore } from "./store";
// @ts-ignore
import UserNameBg from '../../assets/user-name-bg.jpg'
import { ToastContainer } from "react-toastify";
console.log(UserNameBg);
const src = UserNameBg.src;

// 炫光边框卡片组件 - 黑白色系
const GlowingCard = ({ children, className = "" }: { children: React.ReactNode; className?: string }) => {
  return (
    <div className={`relative ${className}`}>
      {/* 炫光边框 - 外层发光（黑白色系） */}
      <div className="absolute -inset-[2px] rounded-2xl opacity-50 blur-xl">
        <div className="absolute inset-0 rounded-2xl bg-linear-to-r from-gray-100 via-white to-gray-200 animate-gradient-xy" />
      </div>

      {/* 边框渐变层（半透明白色） */}
      <div className="absolute -inset-[1px] rounded-2xl bg-linear-to-r from-white/60 via-white/80 to-white/60 opacity-90" />

      {/* 内容层 - 更透明 */}
      <div className="relative backdrop-blur-xl bg-black/30 rounded-2xl p-8">
        {children}
      </div>
    </div>
  );
};
export const App = () => {
  const firstStore = useFirstStore();
  const [username, setUsername] = useState<string>("");
  const [nickname, setNickname] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    firstStore.getMe().finally(() => setIsLoading(false));
  }, []);

  useEffect(() => {
    if (firstStore.userInfo) {
      setUsername(firstStore.userInfo.username);
      setNickname(firstStore.userInfo.nickname);
    }
  }, [firstStore.userInfo]);

  const canChange = firstStore.userInfo?.canChangeUsername ?? false;

  const handleSubmit = async () => {
    // TODO: 实现更新用户名和昵称的逻辑
    // console.log("Update username to:", username, "nickname to:", nickname);
    const res = await firstStore.updateUserInfo({
      username,
      nickname,
      password,
    });

  };

  if (isLoading) {
    return (
      <div className="relative min-h-screen">
        {/* 背景图层 */}
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: `url(${src})` }}
        />
        {/* 模糊和遮罩层 */}
        <div className="absolute inset-0 backdrop-blur-sm bg-black/30" />
        {/* 内容层 */}
        <div className="relative min-h-screen flex items-center justify-center">
          <div className="text-white text-lg font-medium">加载中...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="relative min-h-screen">
      {/* 背景图层 */}
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{ backgroundImage: `url(${src})` }}
      />
      {/* 模糊和遮罩层 */}
      <div className="absolute inset-0 backdrop-blur-md bg-black/40" />

      {/* 内容层 */}
      <div className="relative min-h-screen flex items-center justify-center p-6">
        <div className="w-full max-w-md">
          {/* 头像 */}
          <div className="flex justify-center mb-8">
            <div className="relative">
              <div className="absolute inset-0 bg-white/30 blur-2xl rounded-full" />
              <img
                src={firstStore.getAvatar()}
                alt={firstStore.userInfo?.nickname || firstStore.userInfo?.username || "avatar"}
                className="relative w-28 h-28 rounded-full border-4 border-white/60 shadow-2xl"
              />
            </div>
          </div>

          {/* 用户信息卡片 - 炫光边框效果 */}
          <GlowingCard>
            <h1 className="text-3xl font-bold text-white text-center mb-3 drop-shadow-lg">
              {nickname || firstStore.userInfo?.username}
            </h1>
            <p className="text-white/80 text-center mb-8 text-sm" title="只有第一次可以修改用户名哦~，其他联系管理员修改。">
              {'只有第一次可以修改用户名哦~'}
            </p>


            {/* 用户名输入表单 */}
            <div className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-white/90 mb-3">
                  昵称
                </label>
                <input
                  type="text"
                  value={nickname ?? ""}
                  onChange={(e) => setNickname(e.target.value)}
                  disabled={!canChange}
                  className="w-full px-5 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-white/50 backdrop-blur-sm bg-white/5 text-white placeholder-white/40 border-white/20 disabled:bg-white/5 disabled:cursor-not-allowed disabled:border-white/10 disabled:text-white/40 transition-all duration-200"
                  placeholder="输入昵称"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-white/90 mb-3">
                  用户名
                </label>
                <input
                  type="text"
                  value={username ?? ""}
                  onChange={(e) => setUsername(e.target.value)}
                  disabled={!canChange}
                  className="w-full px-5 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-white/50 backdrop-blur-sm bg-white/5 text-white placeholder-white/40 border-white/20 disabled:bg-white/5 disabled:cursor-not-allowed disabled:border-white/10 disabled:text-white/40 transition-all duration-200"
                  placeholder="输入用户名"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-white/90 mb-3">
                  密码
                </label>
                <input
                  type="password"
                  value={password ?? ""}
                  onChange={(e) => setPassword(e.target.value)}
                  disabled={!canChange}
                  className="w-full px-5 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-white/50 backdrop-blur-sm bg-white/5 text-white placeholder-white/40 border-white/20 disabled:bg-white/5 disabled:cursor-not-allowed disabled:border-white/10 disabled:text-white/40 transition-all duration-200"
                  placeholder="输入密码"
                />
              </div>

              <button
                onClick={handleSubmit}
                disabled={!canChange}
                className={`w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 ${canChange
                  ? "bg-linear-to-r from-white/90 to-gray-200 text-black hover:from-white hover:to-gray-100 hover:shadow-white/30 hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]"
                  : "bg-white/10 text-white/30 cursor-not-allowed"
                  }`}
              >
                {canChange ? "保存修改" : "不可修改"}
              </button>
            </div>
          </GlowingCard>
        </div>
      </div>
    </div>
  );
};

export const AppProvider = () => {
  return <AuthProvider>
    <App />
    <ToastContainer />
  </AuthProvider>;
}