/* ============================================================
   VLF 2026 · OPS UI KIT — primitives dùng chung cho app vận hành
   tr · useLang · OpsAva · AvaStack · TeamChip · StatusChip
   PrioChip · SevChip · SectionHead · ProgressBar · OpsSheet
   Xuất ra window cho các file ops khác dùng.
   ============================================================ */
const trL = (lang, o) => o == null ? '' : (typeof o === 'string' ? o : (lang === 'en' && o.en ? o.en : (o.vi != null ? o.vi : o.en || '')));
function useLang() { return React.useContext(LangCtx) || 'vi'; }

const AVA_TONES = [
  ['#6B3486', '#EEE3F3'], ['#4E6CB0', '#E4ECF7'], ['#C25B7C', '#F8E6EC'],
  ['#3E8E7E', '#DDEEEA'], ['#C9A24B', '#F7EDCF'], ['#D08A3E', '#F7E8D6'],
];
function avaMono(name) {
  const p = String(name).replace(/·.*/, '').trim().split(/\s+/);
  if (p.length === 1) return p[0].slice(0, 2).toUpperCase();
  return (p[0][0] + p[p.length - 1][0]).toUpperCase();
}
function avaTone(name) {
  let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
  return AVA_TONES[h % AVA_TONES.length];
}
function OpsAva({ name, size = 30, ring }) {
  const [bg, fg] = avaTone(name || '?');
  return (
    <span className="ops-ava" style={{ width: size, height: size, background: bg, color: fg, fontSize: size * 0.38, boxShadow: ring ? '0 0 0 2px var(--vlf-paper)' : 'none' }}>
      {avaMono(name || '?')}
    </span>);
}
function AvaStack({ names = [], max = 4, size = 28 }) {
  const shown = names.slice(0, max);
  const extra = names.length - shown.length;
  return (
    <span className="ops-avastack">
      {shown.map((n, i) => <span key={i} style={{ marginLeft: i ? -size * 0.34 : 0, zIndex: 10 - i }}><OpsAva name={n} size={size} ring /></span>)}
      {extra > 0 && <span className="ops-ava ops-ava-more" style={{ width: size, height: size, fontSize: size * 0.34, marginLeft: -size * 0.34 }}>+{extra}</span>}
    </span>);
}
function TeamChip({ id, lang, small }) {
  const tm = window.VLF.ops.teamById(id);
  return (
    <span className="ops-teamchip" style={{ '--tc': tm.color, fontSize: small ? 10.5 : 11.5 }}>
      <i style={{ background: tm.color }} />{trL(lang, tm.name)}
    </span>);
}
function StatusChip({ st, lang }) {
  const m = window.VLF.ops.statusMeta[st]; if (!m) return null;
  return <span className="v-tag" style={{ color: m.c, background: m.bg }}>{trL(lang, m)}</span>;
}
function PrioChip({ p }) {
  const m = window.VLF.ops.prioMeta[p]; if (!m) return null;
  return <span className="ops-prio" style={{ color: m.c, background: m.bg }}>{m.l}</span>;
}
function SevChip({ sev, lang }) {
  const m = window.VLF.ops.sevMeta[sev]; if (!m) return null;
  return <span className="v-tag" style={{ color: m.c, background: m.bg }}>{trL(lang, m)}</span>;
}
function SectionHead({ title, right, sub }) {
  return (
    <div className="v-sect ops-sect">
      <div><h3>{title}</h3>{sub && <span className="ops-sect-sub">{sub}</span>}</div>
      {right}
    </div>);
}
function ProgressBar({ value, total, tone = 'var(--vlf-purple-600)' }) {
  const pct = total ? Math.round((value / total) * 100) : 0;
  return <span className="ops-prog"><i style={{ width: pct + '%', background: tone }} /></span>;
}
/* bottom sheet dùng chung (portal vào .za-screen) */
function OpsSheet({ open, onClose, children, title }) {
  if (!open) return null;
  return ReactDOM.createPortal(
    <div className="v-sheet-wrap" onClick={onClose}>
      <div className="v-sheet ops-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="v-sheet-grip" />
        {title && <div className="ops-sheet-title">{title}</div>}
        {children}
      </div>
    </div>, document.querySelector('.za-screen') || document.body);
}

Object.assign(window, { trL, useLang, OpsAva, AvaStack, TeamChip, StatusChip, PrioChip, SevChip, SectionHead, ProgressBar, OpsSheet });