/** 我的 — 1:1 复刻 uni-app pages/profile/index.vue + 真实用户数据绑定 */
import { useNavigate } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { LogOut } from "lucide-react";

export default function ProfilePage() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  // ---- 从 AuthContext 派生真实数据 ----
  const displayName = user?.display_name || user?.username || "未知用户";
  const avatarChar = displayName.charAt(0);
  const roleLabel =
    user?.role === "SUPER_ADMIN"
      ? "超级管理员"
      : user?.role || "操作员";

  function handleLogout() {
    logout();
    navigate("/admin/login", { replace: true });
  }

  return (
    <div className="flex min-h-full flex-col px-4 pt-safe pb-20">
      {/* 用户卡片 — 与 uni-app user-card 完全一致 */}
      <div className="mt-4 flex items-center gap-3 rounded-xl bg-white p-4 shadow-[0_1px_3px_rgba(0,0,0,0.06)]">
        {/* 头像 — 取真实用户名的第一个字 */}
        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-blue-100 text-xl font-bold text-blue-600">
          {avatarChar}
        </div>
        <div className="flex-1">
          <span className="block text-base font-bold text-gray-800">
            {displayName}
          </span>
          <span className="text-xs text-gray-400">{roleLabel}</span>
        </div>
        <span className="text-xl text-gray-300">›</span>
      </div>

      {/* 菜单列表 — 与 uni-app menu-card 完全一致 */}
      <div className="mt-4 overflow-hidden rounded-xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.06)]">
        {["工作统计", "设置", "帮助与反馈", "关于"].map((item, i) => (
          <div
            key={item}
            className={`flex items-center justify-between px-4 py-3.5 ${
              i < 3 ? "border-b border-gray-50" : ""
            }`}
          >
            <span className="text-sm text-gray-700">{item}</span>
            <span className="text-xl text-gray-300">›</span>
          </div>
        ))}

        {/* 退出登录 — 红色高亮 */}
        <button
          onClick={handleLogout}
          className="flex w-full items-center justify-between border-t border-gray-50 px-4 py-3.5 transition-colors hover:bg-red-50"
        >
          <span className="flex items-center gap-2 text-sm text-red-500">
            <LogOut size={16} strokeWidth={2} />
            退出登录
          </span>
          <span className="text-xl text-red-300">›</span>
        </button>
      </div>

      {/* 版本号 — 与 uni-app .version 一致 */}
      <p className="mt-8 text-center text-xs text-gray-300">生产流转 v1.0.0</p>
    </div>
  );
}