"use client";

import Image from "next/image";

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}>
      <div className={styles.avatar} aria-hidden="true">
        {avatarUrl ? (
          <Image
            src={avatarUrl}
            alt=""
            width={56}
            height={56}
            className={styles.avatarImg}
          />
        ) : (
          <svg
            width="28"
            height="28"
            viewBox="0 0 24 24"
            fill="none"
            className={styles.avatarIcon}
          >
            <circle cx="12" cy="8" r="4" fill="currentColor" />
            <path
              d="M4 20c0-4.418 3.582-7 8-7s8 2.582 8 7"
              fill="currentColor"
            />
          </svg>
        )}
      </div>

      <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}>
            <svg
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="currentColor"
              aria-hidden="true"
              className={styles.diamondIcon}
            >
              <path d="M12 2L22 12L12 22L2 12L12 2Z" />
            </svg>
            <span>VIP Member</span>
          </span>
        )}
      </div>

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