// Avatar.jsx —— 占位头像组件
// 因为还没有真实照片，我们用彩色背景 + 昵称首字 + 纸张质感
// 当有真实照片时，传入 src 即可替换

const Avatar = ({ student, size = "md", onClick }) => {
  const dims = {
    sm: { w: 56,  fs: 22 },
    md: { w: 120, fs: 42 },
    lg: { w: 200, fs: 64 },
    xl: { w: 280, fs: 84 },
  }[size];

  // 取昵称第一个字做占位符
  const initial = (student?.name || "?").slice(0, 1);
  const bg = student?.color || "#FFB7B2";

  return (
    <div
      className="placeholder-avatar"
      style={{
        background: bg,
        width: size === "full" ? "100%" : dims.w,
        fontSize: size === "full" ? "22vw" : dims.fs,
        cursor: onClick ? "pointer" : "default",
      }}
      onClick={onClick}
    >
      <span style={{ position: "relative", zIndex: 1, textShadow: "0 2px 8px rgba(255,255,255,0.4)" }}>
        {initial}
      </span>
      {student?.src && (
        <img
          src={student.src}
          alt={student.name || ""}
          onError={(e) => { e.currentTarget.style.display = "none"; }}
        />
      )}
    </div>
  );
};

// 照片占位：用于活动相册。根据 layout（wide/tall/square）生成不同比例
const PhotoPlaceholder = ({ photo, hue, onClick }) => {
  const aspectRatio = {
    wide:   "4 / 3",
    tall:   "3 / 4",
    square: "1 / 1",
  }[photo.layout || "square"];

  // 用 seed 生成不同的渐变占位
  const seed = photo.id.charCodeAt(0) + photo.id.charCodeAt(1 % photo.id.length);
  const h1 = (hue + (seed % 60)) % 360;
  const h2 = (hue + (seed % 60) + 40) % 360;

  return (
    <div
      onClick={onClick}
      style={{
        aspectRatio,
        borderRadius: "var(--r-md)",
        background: `linear-gradient(135deg, hsl(${h1} 55% 75%) 0%, hsl(${h2} 60% 65%) 100%)`,
        position: "relative",
        overflow: "hidden",
        cursor: onClick ? "pointer" : "default",
        boxShadow: "var(--shadow-soft)",
      }}
    >
      {/* 柔光点 */}
      <div style={{
        position: "absolute", top: "-20%", left: "-10%",
        width: "80%", height: "80%",
        background: "radial-gradient(circle, rgba(255,255,255,0.5), transparent 60%)",
      }} />
      {/* 小相机图标占位 */}
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
        opacity: 0.35,
      }}>
        <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="white" strokeWidth="1.5">
          <rect x="3" y="7" width="18" height="13" rx="2"/>
          <circle cx="12" cy="13.5" r="3.5"/>
          <path d="M8 7l1.5-2.5h5L16 7"/>
        </svg>
      </div>
      {/* 真实照片（有 src 时覆盖占位） */}
      {photo.src && (
        <img
          src={photo.src}
          alt={photo.caption || ""}
          onError={(e) => { e.currentTarget.style.display = "none"; }}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
        />
      )}
      {/* 文字 */}
      {photo.caption && (
        <div style={{
          position: "absolute", bottom: 0, left: 0, right: 0,
          padding: "20px 12px 10px",
          background: "linear-gradient(transparent, rgba(0,0,0,0.55))",
          color: "white", fontSize: 12, fontWeight: 500,
          letterSpacing: "0.02em",
        }}>
          {photo.caption}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { Avatar, PhotoPlaceholder });