"use client";

import { useState } from "react";
import Avatar from "@/components/Avatar";
import ImageLightbox from "@/components/markdown/ImageLightbox";

/** Hero 约 120px 高时的头像边长 */
const AVATAR_SIZE = 72;

const RING_STYLE = {
  width: AVATAR_SIZE,
  height: AVATAR_SIZE,
  lineHeight: 0,
  boxShadow:
    "0 0 0 3px var(--panel), 0 0 0 4.5px color-mix(in srgb, var(--accent) 38%, transparent)",
} as const;

const RING_CLASS =
  "inline-flex items-center justify-center shrink-0 rounded-full p-0";

/** 用户主页 Hero 头像：有实图时可点击，复用正文图箱预览 */
export default function ProfileHeroAvatar({
  name,
  src,
}: {
  name: string;
  src?: string;
}) {
  const [open, setOpen] = useState(false);
  const canPreview = !!src;
  const alt = `${name} 的头像`;

  return (
    <>
      {canPreview ? (
        <button
          type="button"
          className={`${RING_CLASS} border-0 bg-transparent cursor-zoom-in outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--panel)]`}
          style={RING_STYLE}
          aria-label="查看头像"
          data-tip="查看头像"
          onClick={() => setOpen(true)}
        >
          <Avatar name={name} src={src} size={AVATAR_SIZE} />
        </button>
      ) : (
        <span className={RING_CLASS} style={RING_STYLE}>
          <Avatar name={name} src={src} size={AVATAR_SIZE} />
        </span>
      )}
      {open && src ? (
        <ImageLightbox
          items={[{ src, alt }]}
          index={0}
          onClose={() => setOpen(false)}
          onIndexChange={() => {}}
        />
      ) : null}
    </>
  );
}