"use client";

import Image from "next/image";

import { UserMessageAvatar } from "@/app/_components";

import styles from "./user-header.module.css";

export type SidebarUserState = "guest" | "member" | "vip";

export interface UserHeaderProps {
  /** 派生状态：未登录 / 已登录未 VIP / 已登录且 VIP */
  state: SidebarUserState;
  /** 用户名（无 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={styles.row} aria-hidden="true">
        <div className={styles.avatar} />
        <div className={styles.text}>
          <span className={`${styles.skeleton} ${styles.skeletonMd}`} />
          <span className={`${styles.skeleton} ${styles.skeletonSm}`} />
          <span className={`${styles.skeleton} ${styles.skeletonXs}`} />
        </div>
      </div>
    );
  }

  return (
    <div className={styles.row}>
      <UserMessageAvatar
        avatarUrl={avatarUrl}
        className={styles.avatar}
        size={56}
      />

      <div className={styles.text}>
        <p className={styles.name}>{name}</p>
        {state === "member" && (
          <p className={styles.subtitle}>VIP membership not activated</p>
        )}
        {state === "vip" && (
          <span className={styles.vipMemberPill}>
            <Image
              src="/images/sidebar/ic_user_vip.png"
              alt=""
              width={39}
              height={36}
              className={styles.diamondIcon}
            />
            <span>VIP Member</span>
          </span>
        )}
      </div>

      {state === "guest" && (
        <button
          type="button"
          className={styles.loginPill}
          onClick={onLoginClick}
          aria-label="Log in"
        >
          login
        </button>
      )}
    </div>
  );
}
