/* ============================================================
   VLF 2026 · OPS NOTIFICATIONS + GUIDE
   Trung tâm thông báo (role-aware) · Hướng dẫn dùng app
   Chuông + nút trợ giúp trên top bar.
   Xuất: OpsNotifications, OpsGuide, OpsBell, OpsHelpBtn
   ============================================================ */

/* ---------- TRUNG TÂM THÔNG BÁO (L2) ---------- */
function OpsNotifications({ nav, role, onSeen }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const list = O.notifsFor(role);
  React.useEffect(() => { onSeen && onSeen(); }, []);
  const unread = list.filter((n) => n.unread);
  const earlier = list.filter((n) => !n.unread);

  const Row = (n) => (
    <div className="v-noti" key={n.id} onClick={() => nav(...n.go)}>
      <div className="ic" style={{ background: n.c }}><Icon name={n.ic} size={19} sw={1.8} /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="v-noti-top">
          <div className="ti">{trL(lang, n.t)}{n.unread && <span className="dot" />}</div>
          <span className="wh">{trL(lang, n.when)}</span>
        </div>
        <div className="bd">{trL(lang, n.s)}</div>
        <span className="v-noti-cta">{trL(lang, n.cta)} <Icon name="arrowR" size={13} sw={2.2} /></span>
      </div>
    </div>
  );

  return (
    <>
      {unread.length > 0 && (
        <>
          <SectionHead title={trL(lang, { vi: 'Mới', en: 'New' })} right={<span className="v-pill" style={{ background: 'rgba(192,57,43,.1)', color: 'var(--vlf-under)' }}>{unread.length}</span>} />
          <div className="v-card">{unread.map(Row)}</div>
        </>
      )}
      {earlier.length > 0 && (
        <>
          <SectionHead title={trL(lang, { vi: 'Trước đó', en: 'Earlier' })} />
          <div className="v-card">{earlier.map(Row)}</div>
        </>
      )}
      {list.length === 0 && (
        <div className="v-card" style={{ padding: 18 }}><div className="v-muted" style={{ fontSize: 13 }}>{trL(lang, { vi: 'Chưa có thông báo nào.', en: 'No notifications yet.' })}</div></div>
      )}
      <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.5, padding: '12px 2px 0' }}>{trL(lang, { vi: 'Chạm một thông báo để đi thẳng tới đúng màn cần xử lý.', en: 'Tap a notification to jump to the right screen.' })}</p>
    </>);
}

/* ---------- HƯỚNG DẪN DÙNG APP (L2) ---------- */
function OpsGuide({ nav }) {
  const lang = useLang();
  const O = window.VLF.ops;
  const [open, setOpen] = useState(0);
  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: 'HƯỚNG DẪN', en: 'HOW-TO' })}</span></div>
        <h2>{trL(lang, { vi: 'Dùng app đội vận hành', en: 'Using the operations app' })}</h2>
        <p className="ops-td-desc">{trL(lang, { vi: 'Hướng dẫn nhanh theo từng nhiệm vụ. Chạm một mục để xem các bước, rồi mở thẳng màn cần dùng.', en: 'Quick how-tos by task. Tap a topic to see the steps, then jump straight to the screen.' })}</p>
      </div>

      <div className="v-card">
        {O.guide.map((g, i) => (
          <div className={'ops-guide-it' + (open === i ? ' open' : '')} key={i}>
            <div className="ops-guide-head" onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="ops-guide-ic"><Icon name={g.ic} size={19} sw={1.7} /></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t">{trL(lang, g.t)}</div>
                <div className="s">{trL(lang, g.d)}</div>
              </div>
              <Icon name="chevDown" size={18} className="ops-guide-chev" />
            </div>
            {open === i && (
              <div className="ops-guide-body">
                <div className="v-steps">
                  {g.steps.map((s, j) => <div className="v-step-it" key={j}><span className="n">{j + 1}</span><span className="tx">{trL(lang, s)}</span></div>)}
                </div>
                <button className="v-btn v-btn-ghost" style={{ marginTop: 14, height: 42 }} onClick={() => nav(...g.go)}>{trL(lang, { vi: 'Mở mục này', en: 'Go to this screen' })}</button>
              </div>
            )}
          </div>
        ))}
      </div>

      <SectionHead title={trL(lang, { vi: 'Cần trợ giúp thêm?', en: 'Need more help?' })} />
      <div className="v-card">
        <a className="v-row" href="tel:19006026" style={{ textDecoration: 'none', color: 'inherit' }}>
          <div className="ops-guide-ic" style={{ background: 'rgba(201,162,75,.16)', color: 'var(--vlf-gold-700)' }}><Icon name="bell" size={18} sw={1.8} /></div>
          <div style={{ flex: 1, minWidth: 0 }}><div className="t">{trL(lang, { vi: 'Tổng đài vận hành', en: 'Ops hotline' })}</div><div className="s">1900 6026 · CH1</div></div>
          <Icon name="chev" size={18} className="chev" />
        </a>
        <div className="v-row" onClick={() => nav('emg')}>
          <div className="ops-guide-ic" style={{ background: 'rgba(192,57,43,.1)', color: '#C0392B' }}><Icon name="shield" size={18} sw={1.8} /></div>
          <div style={{ flex: 1, minWidth: 0 }}><div className="t">{trL(lang, { vi: 'Tham chiếu khẩn cấp', en: 'Emergency reference' })}</div><div className="s">{trL(lang, { vi: 'Số gọi · sơ tán · bộ đàm', en: 'Hotlines · evac · radio' })}</div></div>
          <Icon name="chev" size={18} className="chev" />
        </div>
      </div>
    </div>);
}

/* ---------- chuông + nút trợ giúp trên top bar ---------- */
function OpsBell({ count, onClick }) {
  return (
    <button className="v-bell" onClick={onClick} aria-label="Notifications">
      <Icon name="bell" size={20} sw={1.8} />
      {count > 0 && <span className="v-bell-badge v-num">{count}</span>}
    </button>);
}
function OpsHelpBtn({ onClick }) {
  return (
    <button className="v-helpbtn" onClick={onClick} aria-label="Help">
      <Icon name="info" size={20} sw={1.8} />
    </button>);
}

Object.assign(window, { OpsNotifications, OpsGuide, OpsBell, OpsHelpBtn });