/* ============================================================
   VLF 2026 · OPS BOOK — Sổ tay công việc & onboarding
   Onboard nhân sự mới · sổ tay SOP theo vị trí · tham chiếu khẩn cấp
   ============================================================ */
/* màu & icon theo nhóm SOP + helper tham chiếu */
const SOP_CAT_TONE = { core: '#522367', role: '#4E6CB0', guest: '#C25B7C', safety: '#C0392B' };
const SOP_ICON = { conduct: 'user', gate: 'qr', marshal: 'flag', complaint: 'survey', firstaid: 'bell', evac: 'village', lostperson: 'user' };
const SOP_RADIO = { conduct: 'CH1', gate: 'CH6', marshal: 'CH2', complaint: 'CH3', firstaid: 'CH8', evac: 'CH1', lostperson: 'CH7' };
const sopIcon = (s) => SOP_ICON[s.id] || ({ core: 'shield', role: 'flag', guest: 'user', safety: 'bell' }[s.cat]) || 'info';
const sopTone = (s) => SOP_CAT_TONE[s.cat] || '#522367';
/* các đội áp dụng SOP này (đảo từ O.sopForTeam) */
function sopTeamsFor(id) {
  const O = window.VLF.ops;
  return O.teams.filter((t) => O.sopForTeam(t.id) === id);
}

function OpsBook({ nav, store, team, role }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const [cat, setCat] = useState('all');
  const onbDone = store.onbSteps.filter(Boolean).length;
  const onbTotal = O.onboarding.steps.length;
  const mySop = O.sopForTeam(team.id);
  const myS = O.sopById(mySop);
  const sops = cat === 'all' ? O.sops : O.sops.filter((s) => s.cat === cat);
  const radioLbl = (O.radio.find((r) => r.ch === team.radio) || {}).t;

  return (
    <>
      {/* onboarding */}
      <div className="ops-onb-banner" onClick={() => nav('onboard')}>
        <div className="ops-onb-ring" style={{ '--p': Math.round((onbDone / onbTotal) * 100) + '%' }}><span>{onbDone}/{onbTotal}</span></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="ops-onb-kk">{trL(lang, { vi: 'NHÂN SỰ MỚI', en: 'NEW STAFF' })}</div>
          <div className="ops-onb-t">{onbDone === onbTotal ? trL(lang, { vi: 'Bạn đã sẵn sàng vào ca', en: 'You’re shift-ready' }) : trL(lang, { vi: 'Onboard & chuẩn bị vào ca', en: 'Onboard & get shift-ready' })}</div>
          <div className="ops-onb-s">{trL(lang, O.onboarding.intro)}</div>
        </div>
        <Icon name="chev" size={20} className="chev" />
      </div>

      {/* sổ tay vị trí — cover field-guide */}
      <SectionHead title={trL(lang, { vi: 'Sổ tay vị trí của bạn', en: 'Your position handbook' })} sub={trL(lang, { vi: 'Đọc trước khi vào ca', en: 'Read before your shift' })} />
      <div className="ops-fg-cover" style={{ '--fgc': team.color }} onClick={() => nav('sop', { id: mySop })}>
        <div className="ops-fg-top">
          <div className="ops-fg-cap">VLF 2026 · {trL(lang, { vi: 'SỔ TAY HIỆN TRƯỜNG', en: 'FIELD HANDBOOK' })}</div>
          <div className="ops-fg-hd">
            <div className="ops-fg-crest" style={{ borderColor: team.color }}><Icon name={sopIcon(myS)} size={22} sw={1.7} /></div>
            <div className="ops-fg-htxt">
              <h3>{trL(lang, myS.title)}</h3>
              <div className="sub">{trL(lang, team.name)}{team.zone ? ' · ' + trL(lang, team.zone) : ''}</div>
            </div>
          </div>
        </div>
        <div className="ops-fg-stats">
          <div className="ops-fg-stat"><b>{myS.sections.length}</b><span>{trL(lang, { vi: 'mục SOP', en: 'sections' })}</span></div>
          <div className="ops-fg-stat"><b>{myS.doList.length + myS.dontList.length}</b><span>{trL(lang, { vi: 'Nên / Không', en: 'Do / Don’t' })}</span></div>
          <div className="ops-fg-stat"><b>{myS.mins}′</b><span>{trL(lang, { vi: 'phút đọc', en: 'min read' })}</span></div>
        </div>
        <div className="ops-fg-cta">{trL(lang, { vi: 'Mở sổ tay vị trí', en: 'Open your handbook' })} <Icon name="arrowR" size={16} sw={2} /></div>
      </div>

      {/* thẻ trực — field essentials */}
      <SectionHead title={trL(lang, { vi: 'Thẻ trực hôm nay', en: 'Today’s field card' })} sub={O.today + ' · ' + trL(lang, O.dayTheme).split(' · ')[0]} />
      <div className="ops-fg-ess">
        <div className="ops-fg-tile">
          <div className="ic" style={{ background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="pin" size={18} sw={1.7} /></div>
          <div className="txt"><div className="l">{trL(lang, { vi: 'Khu trực', en: 'Zone' })}</div><div className="v">{team.zone ? trL(lang, team.zone) : trL(lang, team.name)}</div></div>
        </div>
        <div className="ops-fg-tile">
          <div className="ic" style={{ background: 'rgba(201,162,75,.16)', color: 'var(--vlf-gold-700)' }}><Icon name="bell" size={18} sw={1.7} /></div>
          <div className="txt"><div className="l">{trL(lang, { vi: 'Bộ đàm', en: 'Radio' })}</div><div className="v mono">{team.radio}{radioLbl ? ' · ' + trL(lang, radioLbl) : ''}</div></div>
        </div>
        <div className="ops-fg-tile">
          <div className="ic" style={{ background: 'rgba(78,108,176,.12)', color: '#4E6CB0' }}><Icon name="user" size={18} sw={1.7} /></div>
          <div className="txt"><div className="l">{trL(lang, { vi: 'Đội trưởng', en: 'Shift lead' })}</div><div className="v">{team.lead}</div></div>
        </div>
        <button className="ops-fg-tile" onClick={() => nav('emg')}>
          <div className="ic" style={{ background: 'rgba(192,57,43,.1)', color: '#C0392B' }}><Icon name="shield" size={18} sw={1.8} /></div>
          <div className="txt"><div className="l">{trL(lang, { vi: 'Khẩn cấp', en: 'Emergency' })}</div><div className="v mono">115 · CH8</div></div>
        </button>
      </div>

      {/* thư viện SOP — cards */}
      <SectionHead title={trL(lang, { vi: 'Thư viện sổ tay', en: 'Handbook library' })} right={<span className="ops-sop-min">{O.sops.length} {trL(lang, { vi: 'mục', en: 'SOPs' })}</span>} />
      <div className="ops-catbar">
        <button className={'ops-cat' + (cat === 'all' ? ' on' : '')} onClick={() => setCat('all')}>{trL(lang, { vi: 'Tất cả', en: 'All' })}</button>
        {O.sopCats.map((c) => <button key={c.id} className={'ops-cat' + (cat === c.id ? ' on' : '')} onClick={() => setCat(c.id)}>{trL(lang, c.t)}</button>)}
      </div>
      <div className="ops-soplib">
        {sops.map((s) => {
          const tone = sopTone(s);
          return (
            <div className="ops-sopcard" key={s.id} onClick={() => nav('sop', { id: s.id })}>
              <div className="ops-sopcard-ic" style={{ background: tone + '18', color: tone, '--sc': tone }}><Icon name={sopIcon(s)} size={22} sw={1.7} /></div>
              <div className="ops-sopcard-bd">
                <div className="t">{trL(lang, s.title)}{s.id === mySop && <span className="ops-mine-flag" style={{ marginLeft: 8 }}>{trL(lang, { vi: 'vị trí của bạn', en: 'your post' })}</span>}</div>
                <div className="s">{trL(lang, s.summary)}</div>
                <div className="ops-sopcard-tags">
                  <span className="ops-sopcard-tag"><Icon name="clock" size={11} sw={2} />{s.mins}′</span>
                  <span className="ops-sopcard-tag"><Icon name="survey" size={11} sw={2} />{s.sections.length} {trL(lang, { vi: 'mục', en: 'parts' })}</span>
                  <span className="ops-sopcard-tag"><Icon name="check" size={11} sw={2.4} />{trL(lang, { vi: 'Nên', en: 'Do' })} {s.doList.length} · {trL(lang, { vi: 'Không', en: 'Don’t' })} {s.dontList.length}</span>
                </div>
              </div>
            </div>);
        })}
      </div>

      {/* khẩn cấp + briefing */}
      <SectionHead title={trL(lang, { vi: 'Tra cứu nhanh', en: 'Quick reference' })} />
      <div className="ops-reftiles">
        <button className="ops-reftile" onClick={() => nav('emg')}><div className="ic" style={{ background: 'rgba(192,57,43,.1)', color: '#C0392B' }}><Icon name="shield" size={20} sw={1.8} /></div><span>{trL(lang, { vi: 'Khẩn cấp & sơ tán', en: 'Emergency & evac' })}</span></button>
        <button className="ops-reftile" onClick={() => nav('brief')}><div className="ic" style={{ background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name="bell" size={20} sw={1.8} /></div><span>{trL(lang, { vi: 'Briefing hôm nay', en: 'Today’s briefing' })}</span></button>
      </div>
    </>);
}

/* ---------------- ONBOARD FLOW (L2) ---------------- */
function OnboardFlow({ nav, store }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const done = store.onbSteps;
  const dn = done.filter(Boolean).length;
  const total = O.onboarding.steps.length;
  const ready = dn === total;
  return (
    <div className="ops-detail">
      <div className="ops-td-head">
        <div className="ops-td-top"><span className="kk" style={{ color: 'var(--vlf-gold-700)' }}>{trL(lang, { vi: 'ONBOARD NHÂN SỰ', en: 'STAFF ONBOARDING' })}</span></div>
        <h2>{trL(lang, { vi: 'Chuẩn bị vào ca', en: 'Get shift-ready' })}</h2>
        <div className="ops-onb-progrow"><ProgressBar value={dn} total={total} tone="var(--vlf-gold-500)" /><span>{dn}/{total}</span></div>
      </div>
      <div className="v-card ops-onb-steps">
        {O.onboarding.steps.map((s, i) => (
          <div className="ops-onbstep" key={i} onClick={() => store.toggleOnb(i)}>
            <div className={'ops-onbstep-ck' + (done[i] ? ' done' : '')}>{done[i] ? <Icon name="check" size={16} sw={2.6} /> : i + 1}</div>
            <div className="ops-onbstep-ic"><Icon name={s.ic} size={18} sw={1.7} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="t" style={{ textDecoration: done[i] ? 'line-through' : 'none', color: done[i] ? 'var(--vlf-ink-500)' : 'var(--vlf-ink-900)' }}>{trL(lang, s.t)}</div>
              <div className="s">{trL(lang, s.s)}</div>
            </div>
          </div>
        ))}
      </div>
      <button className={'v-btn ' + (ready ? 'v-ops-btn' : 'v-btn-ghost')} style={{ marginTop: 16 }} disabled={!ready} onClick={() => nav('back')}>
        {ready ? trL(lang, { vi: '✓ Sẵn sàng — vào ca', en: '✓ Ready — start shift' }) : trL(lang, { vi: 'Hoàn tất các bước để vào ca', en: 'Finish steps to start' })}
      </button>
    </div>);
}

/* ---------------- SOP DETAIL · playbook (L2) ---------------- */
function SopDetail({ id, nav, lang: _l }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const s = O.sopById(id);
  const [ack, setAck] = useState(false);
  if (!s) return null;
  const cat = O.sopCats.find((c) => c.id === s.cat);
  const tone = sopTone(s);
  const isSafety = s.cat === 'safety';
  const teams = sopTeamsFor(s.id);
  const universal = s.cat === 'core' || s.cat === 'safety';
  const radioCh = SOP_RADIO[s.id] || 'CH1';
  const radioLbl = (O.radio.find((r) => r.ch === radioCh) || {}).t;
  const related = O.sops.filter((x) => x.cat === s.cat && x.id !== s.id);

  return (
    <div className="ops-detail">
      {/* cover */}
      <div className="ops-pb-cover" style={{ '--pbc': tone }}>
        <div className="ops-pb-badges">
          <span className="ops-pb-catpill">{cat ? trL(lang, cat.t) : ''}</span>
          <span className="ops-pb-min"><Icon name="clock" size={12} sw={2} />{s.mins} {trL(lang, { vi: 'phút đọc', en: 'min' })}</span>
        </div>
        <h2>{trL(lang, s.title)}</h2>
        <p className="ops-pb-lede">{trL(lang, s.summary)}</p>
        <div className="ops-pb-applies">
          <span className="lbl">{trL(lang, { vi: 'Áp dụng cho', en: 'Applies to' })}</span>
          {universal
            ? <span className="ops-pb-team"><i style={{ background: 'var(--vlf-gold-300)' }} />{trL(lang, { vi: 'Mọi vị trí · BTC & TNV', en: 'All positions · staff & vols' })}</span>
            : teams.map((t) => <span className="ops-pb-team" key={t.id}><i style={{ background: t.color }} />{trL(lang, t.zone || t.name)}</span>)}
        </div>
      </div>

      {/* mục lục */}
      <div className="ops-pb-toc">
        <div className="ops-pb-toc-hd">{trL(lang, { vi: 'Nội dung sổ tay', en: 'In this handbook' })}</div>
        {s.sections.map((sec, i) => (
          <div className="ops-pb-toc-item" key={i}>
            <span className="ops-pb-toc-num">{i + 1}</span>
            <span>{trL(lang, sec.h)}</span>
          </div>
        ))}
      </div>

      {/* các mục — đánh số */}
      {s.sections.map((sec, i) => (
        <div className="ops-pb-sec" key={i} style={{ '--pbc': tone }}>
          <div className="ops-pb-sec-hd">
            <span className="ops-pb-sec-num">{i + 1}</span>
            <h4>{trL(lang, sec.h)}</h4>
          </div>
          <ul>{sec.points.map((p, j) => <li key={j}>{trL(lang, p)}</li>)}</ul>
        </div>
      ))}

      <div className="ops-pb-divider" />

      {/* nên / không */}
      <div className="ops-dodont">
        <div className="ops-do">
          <div className="hd"><Icon name="check" size={15} sw={2.6} />{trL(lang, { vi: 'Nên', en: 'Do' })}</div>
          <ul>{s.doList.map((d, i) => <li key={i}>{trL(lang, d)}</li>)}</ul>
        </div>
        <div className="ops-dont">
          <div className="hd"><Icon name="x" size={14} sw={2.6} />{trL(lang, { vi: 'Không', en: 'Don’t' })}</div>
          <ul>{s.dontList.map((d, i) => <li key={i}>{trL(lang, d)}</li>)}</ul>
        </div>
      </div>

      {/* leo thang / khẩn cấp theo ngữ cảnh */}
      <div className={'ops-pb-esc' + (isSafety ? ' danger' : '')}>
        <div className="ic"><Icon name={isSafety ? 'shield' : 'bell'} size={17} sw={1.9} /></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="l">{trL(lang, { vi: isSafety ? 'Khi khẩn cấp' : 'Khi vượt thẩm quyền', en: isSafety ? 'In an emergency' : 'When it exceeds you' })}</div>
          <div className="v">
            {isSafety
              ? trL(lang, { vi: 'Nguy hiểm tính mạng → gọi 115 & y tế ', en: 'Life-threatening → call 115 & medical ' })
              : trL(lang, { vi: 'Báo đội trưởng theo thang L1 → L2 → L3 trên kênh ', en: 'Escalate L1 → L2 → L3 to your lead on ' })}
            <span className="radio">{radioCh}</span>
            {radioLbl ? ' · ' + trL(lang, radioLbl) : ''}.
          </div>
        </div>
      </div>

      {/* xác nhận đã đọc */}
      <div className={'ops-pb-ack' + (ack ? ' done' : '')} onClick={() => !ack && setAck(true)}>
        <div className="ops-pb-ack-ck"><Icon name="check" size={16} sw={2.6} /></div>
        <div style={{ flex: 1 }}>
          <div className="t">{ack ? trL(lang, { vi: '✓ Đã đọc & nắm sổ tay', en: '✓ Read & understood' }) : trL(lang, { vi: 'Tôi đã đọc & nắm sổ tay này', en: 'I’ve read & understood this' })}</div>
          <div className="s">{ack ? trL(lang, { vi: 'Ghi nhận lúc 06:18 · đã đồng bộ đội trưởng', en: 'Logged 06:18 · synced to lead' }) : trL(lang, { vi: 'Đội trưởng theo dõi tỷ lệ đã đọc trước ca', en: 'Your lead tracks read rate before the shift' })}</div>
        </div>
      </div>

      {/* sổ tay liên quan */}
      {related.length > 0 && nav && <>
        <SectionHead title={trL(lang, { vi: 'Sổ tay liên quan', en: 'Related handbooks' })} />
        <div className="v-card ops-pb-related">
          {related.map((x) => {
            const xt = sopTone(x);
            return (
              <div className="ops-pb-relrow" key={x.id} onClick={() => nav('sop', { id: x.id })}>
                <div className="ops-pb-relic" style={{ background: xt + '18', color: xt }}><Icon name={sopIcon(x)} size={17} sw={1.7} /></div>
                <div style={{ flex: 1, minWidth: 0 }}><div className="t">{trL(lang, x.title)}</div><div className="s">{x.mins}′ · {trL(lang, x.summary)}</div></div>
                <Icon name="chev" size={18} className="chev" />
              </div>);
          })}
        </div>
      </>}
    </div>);
}

/* ---------------- BRIEFING DETAIL (L2) ---------------- */
function BriefingDetail() {
  const lang = useLang();
  const O = window.VLF.ops;
  const b = O.briefing;
  return (
    <div className="ops-detail">
      <div className="ops-td-head">
        <div className="ops-td-top"><span className="kk" style={{ color: 'var(--vlf-gold-700)' }}>{O.today} · {trL(lang, { vi: 'BRIEFING SÁNG', en: 'MORNING BRIEFING' })}</span></div>
        <h2>{trL(lang, O.dayTheme)}</h2>
        <div className="ops-td-facts">
          <span><Icon name="clock" size={14} sw={1.8} />{b.tm}</span>
          <span><Icon name="pin" size={14} sw={1.8} />{trL(lang, b.place)}</span>
          <span><Icon name="user" size={14} sw={1.8} />{b.ack}/{b.total} {trL(lang, { vi: 'đã đọc', en: 'ack’d' })}</span>
        </div>
      </div>
      <SectionHead title={trL(lang, { vi: 'Điểm chính', en: 'Key points' })} />
      <div className="v-card">
        {b.agenda.map((a, i) => (
          <div className="v-row" key={i} style={{ cursor: 'default', alignItems: 'flex-start' }}>
            <span className="ops-agnum">{i + 1}</span>
            <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5, lineHeight: 1.45 }}>{trL(lang, a)}</div></div>
          </div>
        ))}
      </div>
      <SectionHead title={trL(lang, { vi: 'Chủ trì', en: 'Led by' })} />
      <div className="v-card" style={{ padding: 14 }}>
        <div className="ops-people-avas">{b.leads.map((n, i) => <span key={i} className="ops-person"><OpsAva name={n} size={26} />{n}</span>)}</div>
      </div>
      <button className="v-btn v-ops-btn" style={{ marginTop: 16 }}><Icon name="check" size={18} sw={2.4} />{trL(lang, { vi: 'Tôi đã đọc briefing', en: 'I’ve read the briefing' })}</button>
    </div>);
}

/* ---------------- EMERGENCY REF (L2) ---------------- */
function EmergencyRef() {
  const lang = useLang();
  const O = window.VLF.ops;
  const e = O.emergency;
  return (
    <div className="ops-detail">
      <div className="ops-td-head">
        <div className="ops-td-top"><span className="kk" style={{ color: '#C0392B' }}>{trL(lang, { vi: 'KHẨN CẤP', en: 'EMERGENCY' })}</span></div>
        <h2>{trL(lang, { vi: 'Tham chiếu khẩn cấp', en: 'Emergency reference' })}</h2>
      </div>

      {e.rules.map((r, i) => (
        <div className="ops-emgrule" key={i}><Icon name="info" size={16} sw={2} /><span>{trL(lang, r)}</span></div>
      ))}

      <SectionHead title={trL(lang, { vi: 'Số gọi nhanh', en: 'Hotlines' })} />
      <div className="v-card">
        {e.hotlines.map((h, i) => (
          <div className="v-row" key={i} style={{ cursor: 'default' }}>
            <div className="ops-inc-ic" style={{ background: 'rgba(192,57,43,.08)', color: '#C0392B' }}><Icon name={h.ic} size={18} sw={1.8} /></div>
            <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5 }}>{trL(lang, h.t)}</div><div className="s">{trL(lang, h.who)}</div></div>
            <a className="ops-callnum" href={'tel:' + h.num.replace(/\s/g, '')}>{h.num}</a>
          </div>
        ))}
      </div>

      <SectionHead title={trL(lang, { vi: 'Thang leo thang sự cố', en: 'Escalation ladder' })} />
      <div className="v-card">
        {e.escalation.map((x, i) => (
          <div className="v-row" key={i} style={{ cursor: 'default' }}>
            <span className="ops-esclv">{x.lv}</span>
            <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5 }}>{trL(lang, x.t)}</div><div className="s">{trL(lang, x.who)}</div></div>
          </div>
        ))}
      </div>

      <SectionHead title={trL(lang, { vi: 'Kênh bộ đàm', en: 'Radio channels' })} />
      <div className="v-card ops-radiogrid">
        {O.radio.map((r, i) => (
          <div className="ops-radio" key={i}><b>{r.ch}</b><span>{trL(lang, r.t)}</span></div>
        ))}
      </div>
    </div>);
}

Object.assign(window, { OpsBook, OnboardFlow, SopDetail, BriefingDetail, EmergencyRef });