/* ============================================================
   VLF 2026 · OPS COORD — Điều phối trực tiếp
   Sự cố live · báo sự cố · hỗ trợ khách · phê duyệt · bàn giao ca
   ============================================================ */
function allIncidents(store) {
  const O = window.VLF.ops;
  return [...store.extraInc, ...O.incidents]
    .filter((i) => (i.ph || 'live') === O.phase)
    .map((i) => ({ ...i, status: store.incStatus[i.id] || i.status }));
}

function OpsCoord({ nav, store, team, isBtc, reportOpen }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const [report, setReport] = useState(!!reportOpen);
  const [reply, setReply] = useState(null);
  const incs = allIncidents(store);
  const open = incs.filter((i) => i.status !== 'resolved');

  const queue = [
    { q: { vi: 'QR lỗi tại cổng A', en: 'QR fails at gate A' }, ch: 'WhatsApp', hot: true, i: 0 },
    { q: { vi: 'Hỏi giờ Gala tối nay', en: 'Tonight’s gala time' }, ch: 'Zalo', i: 3 },
    { q: { vi: 'Đổi tên người tham dự', en: 'Change attendee name' }, ch: 'Email', i: 1 },
    { q: { vi: 'Hỗ trợ xe điện tiếp cận', en: 'Accessible cart help' }, ch: 'Webchat', i: 7 },
  ];

  return (
    <>
      <button className="v-btn ops-report-btn" onClick={() => setReport(true)}><Icon name="bell" size={19} sw={1.9} />{trL(lang, { vi: 'Báo sự cố mới', en: 'Report an incident' })}</button>

      <SectionHead title={trL(lang, { vi: 'Sự cố vận hành', en: 'Operational incidents' })} right={<span className="v-pill" style={{ background: 'rgba(192,57,43,.1)', color: 'var(--vlf-under)' }}>{open.length} {trL(lang, { vi: 'đang mở', en: 'open' })}</span>} />
      <div className="v-card">
        {incs.length === 0 && <div className="v-row" style={{ cursor: 'default' }}><div className="v-muted" style={{ fontSize: 13 }}>{trL(lang, { vi: 'Không có sự cố ở giai đoạn này.', en: 'No incidents in this phase.' })}</div></div>}
        {incs.map((inc) => (
          <div className="v-row ops-incrow" key={inc.id} onClick={() => nav('incident', { id: inc.id })}>
            <div className="ops-inc-ic" style={{ background: O.sevMeta[inc.sev].bg, color: O.sevMeta[inc.sev].c }}><Icon name={inc.status === 'resolved' ? 'check' : 'bell'} size={18} sw={1.8} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="ops-tr-top"><SevChip sev={inc.sev} lang={lang} />{inc.sla && inc.status !== 'resolved' && <span className="ops-sla">SLA {inc.sla}</span>}</div>
              <div className="t" style={{ fontSize: 13.5 }}>{trL(lang, inc.title)}</div>
              <div className="s">{trL(lang, inc.zone)} · {inc.at} · <span style={{ color: O.incStatus2color(inc.status) }}>{trL(lang, O.incStatus[inc.status])}</span></div>
            </div>
            <Icon name="chev" size={18} className="chev" />
          </div>
        ))}
      </div>

      {O.phase === 'live' && (isBtc || team.id === 'cskh') && (
        <>
          <SectionHead title={trL(lang, { vi: 'Hàng đợi hỗ trợ khách', en: 'Guest support queue' })} sub={trL(lang, { vi: 'Đa kênh · CSKH', en: 'Omni-channel · CSKH' })} />
          <div className="v-card">
            {queue.map((s, i) => (
              <div className="v-row" key={i} onClick={() => setReply(window.VLF.faq[s.i])}>
                <div className="ops-inc-ic" style={{ background: s.hot ? 'rgba(192,57,43,.1)' : 'var(--vlf-purple-50)', color: s.hot ? 'var(--vlf-under)' : 'var(--vlf-purple-700)' }}><Icon name={s.hot ? 'bell' : 'info'} size={18} sw={1.7} /></div>
                <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5 }}>{trL(lang, s.q)}</div><div className="s">{s.ch} · {trL(lang, { vi: 'chờ phản hồi', en: 'awaiting reply' })}</div></div>
                <Icon name="chev" size={18} className="chev" />
              </div>
            ))}
          </div>
        </>
      )}

      {O.phase === 'live' && <>
      <SectionHead title={trL(lang, { vi: 'Phê duyệt khẩn (2 chữ ký)', en: 'Urgent approval (dual sign-off)' })} />
      <ApprovalCard O={O} lang={lang} />
      </>}

      {O.phase === 'live' && (isBtc || team.id === 'comp') && <>
      <SectionHead title={trL(lang, { vi: 'Tạm dừng / nối lại thi đấu', en: 'Suspend / resume play' })} sub={trL(lang, { vi: 'Khi dông · quy tắc 30-30', en: 'On storms · 30-30 rule' })} />
      <SuspendCommand O={O} lang={lang} nav={nav} />
      </>}

      {O.phase === 'live' && isBtc && <>
      <SectionHead title={trL(lang, { vi: 'TNV cơ động (standby)', en: 'Floating volunteers' })} sub={trL(lang, { vi: 'Điều tới điểm nóng', en: 'Deploy to hotspots' })} />
      <FloatingPool O={O} lang={lang} />
      </>}

      {(() => {
        const pending = opsPendingReqs(store, team, isBtc);
        const me = window.VLF.staffRoleById(store.meRole).me;
        const mentions = O.allComments().filter((c) => (c.to || []).includes(me)).length;
        return (
          <>
            <SectionHead title={trL(lang, { vi: 'Đơn từ chờ duyệt', en: 'Requests to approve' })} right={<a onClick={() => nav('requests')}>{trL(lang, { vi: 'Tất cả', en: 'All' })} ›</a>} />
            <div className="v-card">
              {pending.slice(0, 3).map((r) => {
                const ty = O.reqTypeById(r.type);
                return (
                  <div className="v-row" key={r.id} onClick={() => nav('requests')}>
                    <div className="ops-inc-ic" style={{ background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name={ty.ic} size={18} sw={1.7} /></div>
                    <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5 }}>{trL(lang, ty.t)} · {r.by}</div><div className="s">{trL(lang, r.when)} · {trL(lang, O.reqStatusMeta[r.status])}</div></div>
                    <Icon name="chev" size={18} className="chev" />
                  </div>);
              })}
              {pending.length === 0 && <div className="v-row" style={{ cursor: 'default' }}><div className="v-muted" style={{ fontSize: 13 }}>{trL(lang, { vi: 'Không có đơn nào chờ duyệt.', en: 'No requests pending.' })}</div></div>}
            </div>

            <SectionHead title={trL(lang, { vi: 'Trao đổi & nhắc tên', en: 'Comments & mentions' })} />
            <div className="v-card ops-feed-entry" onClick={() => nav('comments')}>
              <div className="ops-inc-ic" style={{ background: 'rgba(201,162,75,.16)', color: 'var(--vlf-gold-700)' }}><Icon name="survey" size={18} sw={1.8} /></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t">{trL(lang, { vi: 'Bình luận theo nhiệm vụ', en: 'Task comments' })}</div>
                <div className="s">{mentions > 0 ? (mentions + ' ' + trL(lang, { vi: 'lần nhắc tên bạn · chạm để xem', en: 'mentions of you · tap to view' })) : trL(lang, { vi: 'Xem trao đổi phối hợp liên đội', en: 'View cross-team coordination' })}</div>
              </div>
              {mentions > 0 && <span className="v-bell-badge v-num" style={{ position: 'static' }}>{mentions}</span>}
              <Icon name="chev" size={18} className="chev" />
            </div>
          </>);
      })()}

      <SectionHead title={trL(lang, { vi: 'Bàn giao ca', en: 'Shift handover' })} />
      <div className="v-card">
        {O.handover.map((h, i) => (
          <div className="ops-hov" key={i}>
            <div className="ops-hov-head"><b>{h.from}</b><span>{h.at}</span></div>
            <div className="ops-hov-note">{trL(lang, h.note)}</div>
          </div>
        ))}
        <div className="ops-hov ops-hov-next">
          <Icon name="clock" size={15} sw={1.9} />
          <span>{trL(lang, { vi: 'Bàn giao ca sáng → chiều lúc 12:00', en: 'AM → PM handover at 12:00' })}</span>
        </div>
      </div>

      <ReportSheet open={report} onClose={() => setReport(false)} store={store} team={team} lang={lang} />
      <OpsSheet open={!!reply} onClose={() => setReply(null)} title={reply ? reply.q : ''}>
        {reply && (
          <>
            <div className="v-card" style={{ padding: 14, marginBottom: 10 }}><div className="v-tag" style={{ marginBottom: 7 }}>Tiếng Việt</div><div style={{ fontSize: 14.5, lineHeight: 1.55 }}>{reply.vi}</div></div>
            <div className="v-card" style={{ padding: 14 }}><div className="v-tag" style={{ marginBottom: 7 }}>English</div><div style={{ fontSize: 14.5, lineHeight: 1.55 }}>{reply.en}</div></div>
            <button className="v-btn v-ops-btn" style={{ marginTop: 16 }} onClick={() => setReply(null)}>{trL(lang, { vi: 'Gửi cho khách', en: 'Send to guest' })}</button>
          </>
        )}
      </OpsSheet>
    </>);
}

function ReportSheet({ open, onClose, store, team, lang }) {
  const O = window.VLF.ops;
  const [sev, setSev] = useState('med');
  const [zone, setZone] = useState(team.zone ? trL(lang, team.zone) : trL(lang, { vi: 'Khu thi đấu', en: 'Course' }));
  const [note, setNote] = useState('');
  const [sent, setSent] = useState(false);
  const canned = [
    { vi: 'Khách cần hỗ trợ y tế', en: 'Guest needs medical help' },
    { vi: 'Ùn tắc / quá tải khu vực', en: 'Crowding / overcapacity' },
    { vi: 'An ninh / ẩu đả', en: 'Security / altercation' },
    { vi: 'Vé giả / tranh chấp cổng', en: 'Fake ticket / gate dispute' },
    { vi: 'Trẻ lạc / người lạc', en: 'Lost child / person' },
    { vi: 'Hỏng thiết bị / mất điện', en: 'Equipment fault / power' },
    { vi: 'Thời tiết / sét', en: 'Weather / lightning' },
    { vi: 'Mất đồ', en: 'Lost item' },
  ];
  function submit() {
    const id = 'IX' + Date.now().toString().slice(-4);
    store.addInc({ id, ph: O.phase, sev, status: 'open', at: OPS_NOW, team: team.id, owner: trL(lang, team.name), zone: { vi: zone, en: zone }, sla: sev === 'high' ? '5ph' : '15ph',
      title: { vi: note || 'Sự cố mới', en: note || 'New incident' },
      log: [{ by: window.VLF.staffRoleById(store.meRole).me, at: OPS_NOW, msg: { vi: note || 'Đã báo sự cố.', en: note || 'Incident reported.' } }] });
    setSent(true); setTimeout(() => { setSent(false); setNote(''); onClose(); }, 1100);
  }
  return (
    <OpsSheet open={open} onClose={onClose} title={trL(lang, { vi: 'Báo sự cố', en: 'Report incident' })}>
      {sent ? (
        <div style={{ textAlign: 'center', padding: '14px 0 6px' }}>
          <div className="ops-sent-ic"><Icon name="check" size={28} sw={2.6} /></div>
          <div style={{ fontWeight: 700, fontSize: 16, marginTop: 12 }}>{trL(lang, { vi: 'Đã gửi tới điều phối', en: 'Sent to command' })}</div>
          <div className="v-muted" style={{ fontSize: 12.5, marginTop: 4 }}>{trL(lang, { vi: 'Đội liên quan sẽ được thông báo qua bộ đàm.', en: 'Relevant team alerted by radio.' })}</div>
        </div>
      ) : (
        <>
          <div className="ops-field-lbl">{trL(lang, { vi: 'Mức độ', en: 'Severity' })}</div>
          <div className="ops-sevseg">
            {['low', 'med', 'high'].map((s) => <button key={s} className={'ops-sevb' + (sev === s ? ' on' : '')} style={sev === s ? { background: O.sevMeta[s].bg, color: O.sevMeta[s].c, borderColor: O.sevMeta[s].c } : null} onClick={() => setSev(s)}>{trL(lang, O.sevMeta[s])}</button>)}
          </div>
          <div className="ops-field-lbl">{trL(lang, { vi: 'Loại sự cố', en: 'Type' })}</div>
          <div className="ops-canned">
            {canned.map((c, i) => <button key={i} className={'ops-cannedb' + (note === trL(lang, c) ? ' on' : '')} onClick={() => setNote(trL(lang, c))}>{trL(lang, c)}</button>)}
          </div>
          <div className="ops-field-lbl">{trL(lang, { vi: 'Mô tả ngắn', en: 'Short note' })}</div>
          <input className="ops-input" value={note} onChange={(e) => setNote(e.target.value)} placeholder={trL(lang, { vi: 'Vị trí, tình trạng…', en: 'Location, situation…' })} />
          <div className="ops-field-lbl">{trL(lang, { vi: 'Khu vực', en: 'Zone' })}</div>
          <input className="ops-input" value={zone} onChange={(e) => setZone(e.target.value)} />
          <button className="v-btn ops-report-btn" style={{ marginTop: 16 }} onClick={submit}><Icon name="bell" size={18} sw={1.9} />{trL(lang, { vi: 'Gửi báo cáo', en: 'Submit report' })}</button>
        </>
      )}
    </OpsSheet>);
}

/* ---------------- CHI TIẾT SỰ CỐ (L2) ---------------- */
function IncidentDetail({ id, nav, store }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const base = allIncidents(store).find((i) => i.id === id);
  if (!base) return null;
  const team = O.teamById(base.team);
  const [log, setLog] = useState(base.log || []);
  const st = store.incStatus[id] || base.status;
  const quicks = [
    { vi: 'Đã tới hiện trường', en: 'On scene' },
    { vi: 'Cần thêm hỗ trợ', en: 'Need backup' },
    { vi: 'Đã kiểm soát', en: 'Under control' },
  ];
  function send(m) { setLog((s) => [...s, { by: window.VLF.staffRoleById(store.meRole).me, at: OPS_NOW, msg: m, mine: true }]); }

  return (
    <div className="ops-detail">
      <div className="ops-td-head">
        <div className="ops-td-top"><SevChip sev={base.sev} lang={lang} /><TeamChip id={base.team} lang={lang} />{base.sla && st !== 'resolved' && <span className="ops-sla">SLA {base.sla}</span>}</div>
        <h2>{trL(lang, base.title)}</h2>
        <div className="ops-td-facts">
          <span><Icon name="pin" size={14} sw={1.8} />{trL(lang, base.zone)}</span>
          <span><Icon name="clock" size={14} sw={1.8} />{base.at}</span>
          <span><Icon name="user" size={14} sw={1.8} />{base.owner}</span>
          <span><Icon name="bell" size={14} sw={1.8} />{team.radio}</span>
        </div>
      </div>

      <div className="ops-td-status">
        {['open', 'ack', 'contained', 'resolved'].map((s) => (
          <button key={s} className={'ops-stbtn' + (st === s ? ' on' : '')} onClick={() => store.setIncStatus(id, s)}>{trL(lang, O.incStatus[s])}</button>
        ))}
      </div>

      {base.sla && st !== 'resolved' && O.slaMeta[base.sev] && (
        <div className="ops-sla-strip">
          <span><b>{trL(lang, { vi: 'Phản hồi', en: 'Respond' })}</b> ≤ {O.slaMeta[base.sev].respond}</span>
          <span><b>{trL(lang, { vi: 'Tới hiện trường', en: 'On scene' })}</b> ≤ {trL(lang, O.slaMeta[base.sev].onsite)}</span>
          <span className="note">{trL(lang, O.slaMeta[base.sev].note)}</span>
        </div>
      )}

      <SectionHead title={trL(lang, { vi: 'Nhật ký xử lý', en: 'Action log' })} right={<span className="v-muted" style={{ fontSize: 12 }}>{log.length}</span>} />
      <div className="v-card ops-log">
        {log.map((m, i) => (
          <div className="ops-logitem" key={i}>
            <OpsAva name={m.by} size={30} />
            <div className="ops-log-b">
              <div className="ops-log-head"><b>{m.by}</b>{m.mine && <span className="ops-log-you">{trL(lang, { vi: 'bạn', en: 'you' })}</span>}<span className="at">{m.at}</span></div>
              <div className="ops-log-tx">{trL(lang, m.msg)}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="ops-quickmsg">
        {quicks.map((q, i) => <button key={i} onClick={() => { send(q); if (i === 2 && st !== 'resolved') store.setIncStatus(id, 'contained'); }}>{trL(lang, q)}</button>)}
      </div>

      <div className="ops-callrow">
        <button className="v-btn v-ops-btn"><Icon name="bell" size={18} sw={1.9} />{trL(lang, { vi: 'Gọi đội trưởng', en: 'Call lead' })}</button>
        <button className="v-btn v-btn-ghost" onClick={() => store.setIncStatus(id, 'resolved')}><Icon name="check" size={18} sw={2.2} />{trL(lang, { vi: 'Đánh dấu xử lý', en: 'Mark resolved' })}</button>
      </div>
    </div>);
}

/* ---------------- TẠM DỪNG / NỐI LẠI THI ĐẤU (2 chữ ký) ---------------- */
function SuspendCommand({ O, lang, nav }) {
  const sp = O.suspendPlay;
  const [stage, setStage] = useState(0); // 0 idle · 1 signed1 · 2 suspended · 3 resumed
  return (
    <div className="v-card ops-suspend">
      <div className="ops-suspend-hd">
        <span className="ops-suspend-kk">{trL(lang, { vi: 'TẠM DỪNG & NỐI LẠI THI ĐẤU', en: 'SUSPEND / RESUME PLAY' })}</span>
        <span className="v-pill" style={{ background: 'rgba(192,57,43,.12)', color: 'var(--vlf-under)' }}>{trL(lang, { vi: '2 chữ ký', en: 'dual sign-off' })}</span>
      </div>
      <div className="ops-suspend-sigs">
        {sp.signals.map((s, i) => (
          <div className="ops-sig" key={i}><span className="ops-sig-dot" style={{ background: s.tone }} /><b>{trL(lang, s.sig)}</b><span>{trL(lang, s.mean)}</span></div>
        ))}
      </div>
      {stage < 2 && (
        <div className="ops-suspend-act">
          {stage === 0
            ? <button className="v-btn ops-report-btn" onClick={() => setStage(1)}><Icon name="bell" size={18} sw={1.9} />{trL(lang, { vi: 'Phát lệnh tạm dừng · Ký 1/2', en: 'Order suspension · Sign 1/2' })}</button>
            : <>
                <div className="ops-suspend-s1"><Icon name="check" size={14} sw={2.6} />{trL(lang, { vi: 'Ký 1/2 · ' + sp.sign1, en: 'Sign 1/2 · ' + sp.sign1 })}</div>
                <button className="v-btn ops-report-btn" onClick={() => setStage(2)}><Icon name="shield" size={18} sw={1.9} />{trL(lang, { vi: 'Duyệt 2/2 · ' + sp.sign2 + ' → 1 hồi còi dài', en: 'Approve 2/2 → 1 long blast' })}</button>
              </>}
        </div>
      )}
      {stage >= 2 && (
        <div className="ops-suspend-live">
          <div className="ops-suspend-banner" style={stage === 3 ? { background: 'rgba(31,138,91,.12)', color: '#1F8A5B' } : null}>
            <Icon name={stage === 3 ? 'check' : 'bell'} size={16} sw={2.2} />
            {stage === 3 ? trL(lang, { vi: 'ĐÃ NỐI LẠI · Resumed ' + OPS_NOW, en: 'RESUMED ' + OPS_NOW }) : trL(lang, { vi: 'ĐÃ TẠM DỪNG · Suspended ' + OPS_NOW, en: 'SUSPENDED ' + OPS_NOW })}
          </div>
          <ol className="ops-suspend-seq">
            {sp.onSuspend.map((a, i) => <li key={i}>{trL(lang, a)}</li>)}
          </ol>
          {stage === 2
            ? <button className="v-btn v-btn-ghost" onClick={() => setStage(3)}>{trL(lang, { vi: 'Nối lại (2 hồi ngắn)', en: 'Resume (2 short)' })}</button>
            : <div className="ops-suspend-note">{trL(lang, sp.resumeNote)}</div>}
        </div>
      )}
      <div className="ops-suspend-foot" onClick={() => nav('sop', { id: 'evac' })}>
        <Icon name="info" size={13} sw={1.9} />{trL(lang, { vi: 'Quy tắc 30-30 & điểm trú ẩn — SOP thời tiết', en: '30-30 rule & shelters — weather SOP' })}<Icon name="chev" size={15} className="chev" />
      </div>
    </div>);
}

/* ---------------- TNV CƠ ĐỘNG (floating pool) ---------------- */
function FloatingPool({ O, lang }) {
  const [sent, setSent] = useState({});
  return (
    <div className="v-card">
      {O.floating.map((f, i) => (
        <div className="v-row" key={i} style={{ cursor: 'default' }}>
          <OpsAva name={f.me} size={32} />
          <div style={{ flex: 1, minWidth: 0 }}><div className="t" style={{ fontSize: 13.5 }}>{f.me}</div><div className="s">{trL(lang, f.skill)} · {trL(lang, f.at)}</div></div>
          <button className={'v-btn ' + (sent[i] ? 'v-btn-ghost' : 'v-btn-primary')} style={{ width: 'auto', height: 32, padding: '0 13px', fontSize: 12.5 }} onClick={() => setSent((s) => ({ ...s, [i]: !s[i] }))}>{sent[i] ? trL(lang, { vi: 'Đã điều', en: 'Sent' }) : trL(lang, { vi: 'Điều tới', en: 'Deploy' })}</button>
        </div>
      ))}
    </div>);
}

Object.assign(window, { OpsCoord, IncidentDetail, SuspendCommand, FloatingPool });