// Common.jsx — shared small components for ticketing system

function StatusChip({ status, size = 'md' }) {
  const s = STATUSES.find(x => x.id === status);
  if (!s) return null;
  const isShipped = status === 'shipped';
  return (
    <span className={`status-chip ${size === 'sm' ? 'sm' : ''}${isShipped ? ' shipped-shimmer' : ''}`} style={{ color: s.color, background: s.color + '14', borderColor: s.color + '30' }}>
      <Icon name={s.icon} size={size === 'sm' ? 10 : 12} weight="fill" />
      {s.short}
    </span>
  );
}

function PriorityChip({ priority }) {
  const p = PRIORITIES[priority];
  if (!p) return null;
  return (
    <span className="prio-chip" style={{ color: p.color }}>
      <Icon name={p.icon} size={11} weight="fill" />
      {p.label}
    </span>
  );
}

function LabelChip({ id }) {
  const l = LABELS[id];
  if (!l) return null;
  return (
    <span className="label-chip" style={{ color: l.color, background: l.color + '14' }}>
      <span className="d" style={{ background: l.color }} />
      {l.label}
    </span>
  );
}

function TeamChip({ id }) {
  const t = TEAMS.find(x => x.id === id);
  if (!t) return null;
  return (
    <span className="team-chip">
      <span className="d" style={{ background: t.color }} />
      {t.label}
    </span>
  );
}

function PhaseDots({ phase, small }) {
  const idx = PHASES.findIndex(p => p.id === phase);
  return (
    <div className={`phase-dots ${small ? 'sm' : ''}`}>
      {PHASES.map((p, i) => (
        <span key={p.id} className={`pd ${i < idx ? 'done' : i === idx ? 'current' : ''}`} title={p.label} />
      ))}
    </div>
  );
}

function ProgressBar({ pct, color = 'var(--brand-500)' }) {
  return (
    <div className="pbar"><i style={{ width: `${pct}%`, background: color }} /></div>
  );
}

function Person({ id, size = 22, showName }) {
  const p = PEOPLE[id];
  if (!p) return null;
  const initials = p.id.length <= 2 ? p.id : p.name.split(' ').map(n => n[0]).slice(0,2).join('');
  return (
    <span className="person">
      <span className={`avatar n${p.n} ${p.bot ? 'bot' : ''}`} style={{ width: size, height: size, fontSize: size * 0.42 }} title={p.name}>
        {p.bot ? <Icon name="SparkleIcon" size={size * 0.5} weight="fill" /> : initials}
      </span>
      {showName && <span className="person-name">{p.name}</span>}
    </span>
  );
}

function AvatarStack({ ids, size = 22 }) {
  return (
    <span className="avatar-stack">
      {ids.map(id => <Person key={id} id={id} size={size} />)}
    </span>
  );
}

function SectionHeader({ title, desc, right }) {
  return (
    <div className="section-head">
      <div>
        <div className="t">{title}</div>
        {desc && <div className="d">{desc}</div>}
      </div>
      {right}
    </div>
  );
}

// Tiny markdown-ish renderer: **bold**, backticks, line breaks
function MD({ text }) {
  if (!text) return null;
  const parts = [];
  let rest = text;
  let i = 0;
  while (rest.length) {
    const b = rest.match(/\*\*([^*]+)\*\*/);
    const c = rest.match(/`([^`]+)`/);
    let match = null, which = null, idx = Infinity;
    if (b && b.index < idx) { match = b; which = 'b'; idx = b.index; }
    if (c && c.index < idx) { match = c; which = 'c'; idx = c.index; }
    if (!match) { parts.push(<span key={i++}>{rest}</span>); break; }
    if (idx > 0) parts.push(<span key={i++}>{rest.slice(0, idx)}</span>);
    if (which === 'b') parts.push(<strong key={i++}>{match[1]}</strong>);
    else parts.push(<code key={i++}>{match[1]}</code>);
    rest = rest.slice(idx + match[0].length);
  }
  return <>{parts}</>;
}

Object.assign(window, { StatusChip, PriorityChip, LabelChip, TeamChip, PhaseDots, ProgressBar, Person, AvatarStack, SectionHeader, MD });