import { useState } from 'react';

interface Props {
  name: string;
  src?: string;
  size?: 'sm' | 'md' | 'lg';
  status?: 'online' | 'busy' | 'offline';
  className?: string;
}

const SIZE = {
  sm: 'size-6 text-[length:var(--text-2xs)]',
  md: 'size-8 text-[length:var(--text-xs)]',
  lg: 'size-11 text-sm',
};

const STATUS = {
  online: 'bg-[var(--color-success-fg)]',
  busy: 'bg-[var(--color-warning-fg)]',
  offline: 'bg-[var(--color-text-subtle)]',
};

const STATUS_LABEL = {
  online: '在线',
  busy: '忙碌',
  offline: '离线',
};

/** 中文在小尺寸只留姓，lg 才放两个字；西文取首字母缩写 */
function initials(name: string, size: 'sm' | 'md' | 'lg') {
  const parts = name.trim().split(/\s+/);
  if (parts.length > 1) return (parts[0][0] + parts[1][0]).toUpperCase();
  if (/[\u4e00-\u9fa5]/.test(name)) return size === 'lg' ? name.slice(0, 2) : name.slice(0, 1);
  return name.slice(0, 2).toUpperCase();
}

export function MinimalAvatar({ name, src, size = 'md', status, className = '' }: Props) {
  const [broken, setBroken] = useState(false);
  const showImage = src && !broken;

  return (
    <span className={`relative inline-flex shrink-0 ${className}`}>
      <span
        className={`
          ${SIZE[size]} rounded-full overflow-hidden relative
          inline-flex items-center justify-center
          bg-[var(--color-surface)] border border-[var(--color-divider)]
          text-[var(--color-text-muted)] font-medium
        `}
      >
        <span aria-hidden="true" className="absolute inset-0 grid place-items-center">
          {initials(name, size)}
        </span>
        {showImage && (
          <img
            src={src}
            alt=""
            className="absolute inset-0 size-full object-cover"
            onError={() => setBroken(true)}
          />
        )}
        <span className="sr-only">{name}</span>
      </span>

      {status && (
        <>
          <span
            className={`
              absolute -bottom-0 -right-0 size-2 rounded-full
              ring-2 ring-[var(--color-surface)]
              ${STATUS[status]}
            `}
            aria-hidden="true"
          />
          <span className="sr-only">{STATUS_LABEL[status]}</span>
        </>
      )}
    </span>
  );
}