import React from 'react';
import { inject } from '../lib/inject';

const css = `
.nbl-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--font-sans);font-weight:var(--weight-semibold);line-height:1;flex-shrink:0;user-select:none;overflow:hidden;}
.nbl-avatar--xs{width:24px;height:24px;font-size:var(--text-xs);}
.nbl-avatar--sm{width:32px;height:32px;font-size:var(--text-sm);}
.nbl-avatar--md{width:40px;height:40px;font-size:var(--text-base);}
.nbl-avatar--lg{width:56px;height:56px;font-size:var(--text-xl);}
.nbl-avatar img{width:100%;height:100%;object-fit:cover;}
`;

inject('nbl-avatar-css', css);

const PALETTE = [
  { bg: '#C5D6F0', fg: '#1C447F' },
  { bg: '#DDF2E7', fg: '#166541' },
  { bg: '#FDF0D6', fg: '#A8650C' },
  { bg: '#EAE5FB', fg: '#5A47B8' },
  { bg: '#FBE3E0', fg: '#9E2D20' },
  { bg: '#E6EEF9', fg: '#21539B' },
  { bg: '#D6DBE2', fg: '#2E3742' },
];

function getColor(name: string): { bg: string; fg: string } {
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = (hash << 5) - hash + name.charCodeAt(i);
    hash |= 0;
  }
  return PALETTE[Math.abs(hash) % PALETTE.length];
}

function initials(name: string): string {
  const parts = name.trim().split(/\s+/);
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}

export interface AvatarProps {
  name: string;
  src?: string;
  size?: 'xs' | 'sm' | 'md' | 'lg';
  className?: string;
  style?: React.CSSProperties;
}

export function Avatar({ name, src, size = 'md', className = '', style }: AvatarProps) {
  inject('nbl-avatar-css', css);
  const color = getColor(name);
  const cls = ['nbl-avatar', `nbl-avatar--${size}`, className].filter(Boolean).join(' ');

  return (
    <span
      className={cls}
      style={{ background: src ? undefined : color.bg, color: src ? undefined : color.fg, ...style }}
      title={name}
      aria-label={name}
    >
      {src ? <img src={src} alt={name} /> : initials(name)}
    </span>
  );
}