/* Starboard · Data Display Components
   Avatar, EntityHeader, Pagination, StatusPill
   Load with: <script type="text/babel" src="DataDisplay.jsx"></script> */

// ─── Avatar ───
const GRADIENTS = ['g1','g2','g3','g4','g5'];
const avatarGradient = (id) => GRADIENTS[Math.abs(String(id).split('').reduce((a,c) => a + c.charCodeAt(0), 0)) % GRADIENTS.length];

const Avatar = ({ initials, size = 'md', gradient, square, status, children }) => {
  const g = gradient || avatarGradient(initials || '?');
  const av = (
    <div className={`ad-av ad-av--${size} ad-av--${g}`} style={square ? {borderRadius: size === 'lg' || size === 'xl' ? 10 : 8} : {}}>
      {children || initials || '?'}
    </div>
  );
  if (!status) return av;
  const statusColors = {online:'#12B76A', away:'#FEC84B', offline:'var(--neutral-400)'};
  return (
    <span style={{position:'relative', display:'inline-flex'}}>
      {av}
      <span style={{position:'absolute', bottom:-1, right:-1, width: size === 'lg' || size === 'xl' ? 12 : 10, height: size === 'lg' || size === 'xl' ? 12 : 10, borderRadius:'50%', border:'2px solid #fff', background: statusColors[status] || statusColors.offline}} />
    </span>
  );
};

const AvatarStack = ({ items, max = 4, size = 'md' }) => {
  const shown = items.slice(0, max);
  const overflow = items.length - max;
  return (
    <div className="ad-av-stack">
      {shown.map((it, i) => (
        <Avatar key={i} initials={it.initials} size={size} gradient={it.gradient} />
      ))}
      {overflow > 0 && (
        <div className={`ad-av ad-av--${size}`} style={{background:'var(--neutral-200)', color:'var(--fg-muted)', fontFamily:'var(--font-mono)', fontWeight:600, fontSize:size === 'sm' ? 8 : 10, border:'2px solid #fff', marginLeft: size === 'sm' ? -6 : -8}}>+{overflow}</div>
      )}
    </div>
  );
};

// ─── Status Pill ───
const StatusPill = ({ status, label }) => {
  const keyMap = {live:'live', 'in transit':'progress', 'in progress':'progress', 'on schedule':'live', 'at risk':'risk', 'off course':'off', completed:'done', archived:'done'};
  const key = keyMap[(status || '').toLowerCase()] || 'done';
  return (
    <span className={`ad-pill ad-pill--${key}`}>
      <span className="ad-pill__dot"></span>
      {label || status}
    </span>
  );
};

// ─── Entity Header ───
const EntityHeader = ({ icon, iconBg, iconColor, name, status, statusKey, subtitle, tags, kpis, actions }) => (
  <div className="ad-ent">
    <div className="ad-ent__top">
      {icon && (
        <div style={{width:40, height:40, borderRadius:10, flexShrink:0, display:'grid', placeItems:'center', background: iconBg || 'var(--primary-50)', color: iconColor || 'var(--primary-700)'}}>
          {icon}
        </div>
      )}
      <div className="ad-ent__meta">
        <div className="ad-ent__name">
          {name}
          {status && <StatusPill status={status} />}
        </div>
        {subtitle && <div className="ad-ent__sub">{subtitle}</div>}
      </div>
      {actions && <div style={{display:'flex', gap:6, flex:'0 0 auto'}}>{actions}</div>}
    </div>
    {tags && tags.length > 0 && (
      <div style={{display:'flex', gap:6, marginTop:10, flexWrap:'wrap'}}>
        {tags.map((t, i) => <span key={i} style={{fontSize:11, fontWeight:500, padding:'3px 8px', borderRadius:6, background:'var(--neutral-100)', color:'var(--fg-muted)'}}>{t}</span>)}
      </div>
    )}
    {kpis && kpis.length > 0 && (
      <div className="ad-ent__kpis">
        {kpis.map((k, i) => (
          <div key={i}>
            <div className="ad-ent__kpi-label">{k.label}</div>
            <div className="ad-ent__kpi-val" style={k.color ? {color: k.color} : {}}>
              {k.value}{k.unit && <span className="unit">{k.unit}</span>}
            </div>
          </div>
        ))}
      </div>
    )}
  </div>
);

// ─── Pagination ───
const Pagination = ({ page, totalPages, onPageChange, summary }) => {
  const pages = [];
  for (let i = 1; i <= totalPages; i++) {
    if (i === 1 || i === totalPages || (i >= page - 1 && i <= page + 1)) {
      pages.push(i);
    } else if (pages[pages.length - 1] !== '...') {
      pages.push('...');
    }
  }

  return (
    <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:10}}>
      {summary && <div style={{fontSize:13, color:'var(--fg-muted)'}} dangerouslySetInnerHTML={{__html: summary}} />}
      <div className="ad-pag">
        <button className={`ad-pag__btn${page <= 1 ? ' is-disabled' : ''}`} onClick={() => page > 1 && onPageChange(page - 1)} style={{padding:'0 8px'}}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m15 18-6-6 6-6"/></svg>
        </button>
        {pages.map((p, i) =>
          p === '...'
            ? <span key={i} style={{minWidth:32, textAlign:'center', fontSize:13, color:'var(--fg-muted)', letterSpacing:2}}>···</span>
            : <button key={i} className={`ad-pag__btn${p === page ? ' is-active' : ''}`} onClick={() => onPageChange(p)}>{p}</button>
        )}
        <button className={`ad-pag__btn${page >= totalPages ? ' is-disabled' : ''}`} onClick={() => page < totalPages && onPageChange(page + 1)} style={{padding:'0 8px'}}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m9 18 6-6-6-6"/></svg>
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { Avatar, AvatarStack, StatusPill, EntityHeader, Pagination, avatarGradient });