"use client";

import Image from "next/image";

import { UserMessageAvatar } from "@/app/_components";
import type { ProfileUserState } from "@/app/profile/profile-view-model";

export interface UserHeaderProps {
  /** 派生状态：未登录 / 已登录未 VIP / 已登录且 VIP */
  state: ProfileUserState;
  /** 用户名（无 currentUser 时使用 fallback "User name"） */
  name: string;
  /** null → 默认头像 SVG */
  avatarUrl: string | null;
  /** 当前是否正在加载（currentUser 尚未就绪） */
  isLoading?: boolean;
  /** guest 状态下点击 "login" pill 触发 */
  onLoginClick?: () => void;
}

/**
 * 用户信息行
 *
 * - guest：仅显示 "User name" + 右侧 "login" 胶囊
 * - member：显示 "User name" + 灰色副标题 "VIP membership not activated"
 * - vip：显示 "User name" + 粉色 "VIP Member" 胶囊（带小钻石图标）
 * - isLoading：渲染 3 条骨架占位
 */
export function UserHeader({
  state,
  name,
  avatarUrl,
  isLoading = false,
  onLoginClick,
}: UserHeaderProps) {
  if (isLoading) {
    return (
      <div className="flex w-full items-center gap-(--spacing-md,12px)" aria-hidden="true">
        <div className="flex size-(--profile-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white" />
        <div className="flex min-w-0 flex-auto flex-col gap-(--profile-card-gap-y,4px)">
          <span className="block h-[clamp(16px,3.333vw,18px)] w-[60%] rounded-md bg-(--color-dark-gray,#e5e5e5)" />
          <span className="block h-[clamp(12px,2.593vw,14px)] w-[80%] rounded-md bg-(--color-dark-gray,#e5e5e5)" />
          <span className="block h-[clamp(12px,2.593vw,14px)] w-[40%] rounded-md bg-(--color-dark-gray,#e5e5e5)" />
        </div>
      </div>
    );
  }

  return (
    <div className="flex w-full items-center gap-(--spacing-md,12px)">
      <UserMessageAvatar
        avatarUrl={avatarUrl}
        className="flex size-(--profile-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white"
        size="var(--profile-avatar-size, 56px)"
      />

      <div className="flex min-w-0 flex-auto flex-col gap-(--profile-card-gap-y,4px)">
        <p className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-(length:--font-responsive-md,16px) font-semibold leading-[1.2] text-black">
          {name}
        </p>
        {state === "member" && (
          <p className="m-0 text-(length:clamp(12px,2.593vw,14px)) leading-[1.2] text-(--color-text-secondary,#9e9e9e)">
            VIP membership not activated
          </p>
        )}
        {state === "vip" && (
          <span className="inline-flex self-start items-center gap-(--spacing-xs,4px) rounded-full bg-(--color-pill-bg,rgba(248,77,150,0.10)) px-[clamp(7px,1.667vw,9px)] py-[clamp(3px,0.741vw,4px)] text-(length:--font-size-xs,10px) font-semibold leading-none text-accent">
            <Image
              src="/images/profile/ic_user_vip.png"
              alt=""
              width={39}
              height={36}
              className="block h-[clamp(11px,2.407vw,13px)] w-[clamp(12px,2.593vw,14px)] shrink-0"
            />
            <span>VIP Member</span>
          </span>
        )}
      </div>

      {state === "guest" && (
        <button
          type="button"
          data-analytics-key="profile.login"
          data-analytics-label="Open login"
          className="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-[linear-gradient(90deg,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] px-(--spacing-lg,16px) py-[clamp(5px,1.111vw,6px)] text-(length:clamp(12px,2.593vw,14px)) font-semibold text-(--color-text-primary,#ffffff) hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
          onClick={onLoginClick}
          aria-label="Log in"
        >
          login
        </button>
      )}
    </div>
  );
}
