/* ============================================================
   VLF 2026 · NOTIFICATIONS + HELP
   Xuất: Notifications, HelpCenter, NotifBell, HelpFab
   ============================================================ */

/* ---------- MÀN THÔNG BÁO (L2) — click điều hướng ---------- */
function Notifications({ nav, seen, onSeen }) {
  const t = useT();const lang = t.lang;const E = (o, k) => window.VLF.L(lang, o, k);
  const list = window.VLF.notifs;
  React.useEffect(() => {onSeen && onSeen();}, []);
  return (
    <div className="v-screen" style={{ paddingBottom: 24 }}>
      <div className="v-pad">
        <div className="v-card" style={{ marginTop: 6 }}>
          {list.map((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">{E(n, 't')}{n.unread && <span className="dot" />}</div><span className="wh">{E(n, 'when')}</span></div>
                <div className="bd">{E(n, 's')}</div>
                <span className="v-noti-cta">{E(n, 'cta')} <Icon name="arrowR" size={13} sw={2.2} /></span>
              </div>
            </div>
          )}
        </div>
        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.5, padding: '12px 2px 0' }}>{lang === 'en' ? 'Tap a notification to jump straight to the right screen.' : 'Chạm vào thông báo để đi thẳng tới đúng màn cần xem.'}</p>
      </div>
    </div>);

}

/* ---------- TRUNG TÂM TRỢ GIÚP (L2) ---------- */
function HelpCenter({ nav, persona }) {
  const t = useT();const lang = t.lang;const E = (o, k) => window.VLF.L(lang, o, k);
  const T = (vi, en) => lang === 'en' ? en : vi;
  const c = window.VLF.helpContact[lang] || window.VLF.helpContact.vi;
  const [open, setOpen] = useState(null);
  const [q, setQ] = useState('');
  const [faqOpen, setFaqOpen] = useState(null);
  const qn = q.trim().toLowerCase();
  // ---- Sổ tay theo vai trò (auto load đúng persona) ----
  const HB = window.VLF.handbook;const hbOrder = window.VLF.handbookOrder;
  const myHb = window.VLF.personaHandbook(persona);
  const [hbRole, setHbRole] = useState(myHb);
  const [hbOpen, setHbOpen] = useState(0);
  React.useEffect(() => {setHbRole(myHb);setHbOpen(0);}, [persona]);
  const hb = HB[hbRole];
  const hbLabels = { golfer: 'Golfer', spectator: T('Khán giả', 'Spectator'), guest: T('Khách mời', 'Guest'), vip: 'VIP' };
  const hbSections = hb.sections.filter((s) => !qn || E(s, 't').toLowerCase().includes(qn) || (s.items || []).some((it) => (lang === 'en' ? it.en : it.vi).toLowerCase().includes(qn)));
  const guides = window.VLF.help.filter((h) => !qn || E(h, 't').toLowerCase().includes(qn) || E(h, 'd').toLowerCase().includes(qn));
  const faqs = (window.VLF.helpFaqTop || []).map((i) => window.VLF.faq[i]).filter(Boolean).filter((f) => !qn || f.q.toLowerCase().includes(qn) || (lang === 'en' ? f.en : f.vi).toLowerCase().includes(qn));
  return (
    <div className="v-screen" style={{ paddingBottom: 28 }}>
      <div className="v-help-hero">
        <div className="v-help-crest"><Icon name="info" size={26} sw={1.7} /></div>
        <h2>{T('Trung tâm trợ giúp', 'Help center')}</h2>
        <p>{T('Hướng dẫn từng bước, câu hỏi thường gặp và hỗ trợ trực tiếp 1-1.', 'Step-by-step guides, FAQs and 1-1 live support.')}</p>
        <div className="v-help-search"><Icon name="search" size={18} sw={2} /><input value={q} onChange={(e) => setQ(e.target.value)} placeholder={T('Tìm: vé, QR, đỗ xe, Gala…', 'Search: ticket, QR, parking, Gala…')} /></div>
      </div>
      <div className="v-pad">
        {/* hỗ trợ trực tiếp — 3 kênh nhanh */}
        <div className="v-help-3" style={{ marginTop: 6 }}>
          <a className="it" href={'tel:' + c.hotline.replace(/\s/g, '')}><Icon name="bell" size={20} sw={1.8} /><b>{T('Gọi tổng đài', 'Call')}</b><span>{c.hotline}</span></a>
          <a className="it" href={'mailto:' + c.email}><Icon name="info" size={20} sw={1.8} /><b>Email</b><span>{T('phản hồi 24h', 'in 24h')}</span></a>
          <div className="it" onClick={() => nav('map')}><Icon name="pin" size={20} sw={1.8} /><b>{T('Quầy hỗ trợ', 'Help desk')}</b><span>VLF Village</span></div>
        </div>

        {/* SỔ TAY theo vai trò — load đúng persona */}
        <div className="v-sect"><h3>{T('Sổ tay theo vai trò', 'Role handbook')}</h3></div>
        <div className="v-chips" style={{ marginBottom: 12 }}>
          {hbOrder.map((r) =>
          <button className={'v-chip' + (r === hbRole ? ' on' : '')} key={r} onClick={() => {setHbRole(r);setHbOpen(0);}}>
              <Icon name={HB[r].ic} size={15} sw={2} />{hbLabels[r]}
            </button>
          )}
        </div>
        <div className="v-hb-head">
          <div className="ic"><Icon name={hb.ic} size={24} sw={1.7} /></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="t">{E(hb, 't')}</div>
            <div className="s">{E(hb, 'tag')}</div>
          </div>
          {persona && myHb === hbRole && <span className="v-hb-badge">{T('Vai trò của bạn', 'Your role')}</span>}
        </div>
        <div className="v-card" style={{ marginTop: 10 }}>
          {hbSections.length === 0 ?
          <p className="v-muted" style={{ fontSize: 13, padding: 14 }}>{T('Không có mục phù hợp trong sổ tay này.', 'No matching section in this handbook.')}</p> :
          hbSections.map((s, i) => {
            const isOpen = qn ? true : hbOpen === i;
            return (
              <div className="v-faq" key={hbRole + '-' + i}>
                <div className="q" onClick={() => !qn && setHbOpen(hbOpen === i ? -1 : i)}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}><Icon name={s.ic} size={18} sw={1.8} style={{ flex: '0 0 auto', color: 'var(--vlf-purple-600)' }} />{E(s, 't')}</span>
                  {!qn && <Icon name="chevDown" size={18} style={{ flex: '0 0 auto', transform: isOpen ? 'rotate(180deg)' : 'none', transition: '.2s', color: 'var(--vlf-ink-500)' }} />}
                </div>
                {isOpen && <div className="a"><ul className="v-hb-list">{s.items.map((it, j) => <li key={j}>{lang === 'en' ? it.en : it.vi}</li>)}</ul></div>}
              </div>);

          })}
        </div>

        {/* hướng dẫn theo mục */}
        <div className="v-sect"><h3>{T('Hướng dẫn theo mục', 'Guides by topic')}</h3></div>
        {guides.length === 0 ? <p className="v-muted" style={{ fontSize: 13, padding: '0 2px' }}>{T('Không tìm thấy hướng dẫn phù hợp.', 'No matching guide.')}</p> :
        <div className="v-help-grid">
          {guides.map((h, i) =>
          <div className="v-help-tile" key={i} onClick={() => setOpen(h)}>
              <div className="ic"><Icon name={h.ic} size={22} sw={1.7} /></div>
              <div className="tt">{E(h, 't')}</div>
              <div className="dd">{E(h, 'd')}</div>
              <span className="v-help-tile-cta">{T('Xem hướng dẫn', 'View guide')} ›</span>
            </div>
          )}
        </div>}

        {/* FAQ */}
        {faqs.length > 0 && <>
          <div className="v-sect"><h3>{T('Câu hỏi thường gặp', 'FAQ')}</h3></div>
          <div className="v-card">
            {faqs.map((f, i) =>
            <div className="v-faq" key={i}>
                <div className="q" onClick={() => setFaqOpen(faqOpen === i ? null : i)}>
                  <span>{f.q}</span><Icon name="chevDown" size={18} style={{ flex: '0 0 auto', transform: faqOpen === i ? 'rotate(180deg)' : 'none', transition: '.2s', color: 'var(--vlf-ink-500)' }} />
                </div>
                {faqOpen === i && <div className="a">{lang === 'en' ? f.en : f.vi}</div>}
              </div>
            )}
          </div>
        </>}

        {/* khối chat — đặt dưới cùng màn hình */}
        <div className="v-sect"><h3>{T('Hỗ trợ trực tiếp', 'Live support')}</h3></div>
        <div className="v-help-chat" onClick={() => window.open('https://zalo.me/', '_blank')}>
          <div className="ic"><Icon name="bell" size={22} sw={1.7} /></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="t">{T('Chat hỗ trợ qua Zalo OA', 'Chat support on Zalo OA')}</div>
            <div className="s">{c.oa} · {T('phản hồi nhanh trong giờ hỗ trợ', 'fast replies in support hours')}</div>
          </div>
          <span className="v-help-chip">{T('Mở chat', 'Open chat')}</span>
        </div>

        <p className="v-muted" style={{ fontSize: 11.5, lineHeight: 1.5, padding: '14px 2px 0', textAlign: 'center' }}>{c.hours}</p>
      </div>

      {open && ReactDOM.createPortal(
        <div className="v-sheet-wrap" onClick={() => setOpen(null)}>
          <div className="v-sheet" onClick={(e) => e.stopPropagation()}>
            <div className="v-sheet-grip" />
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <div style={{ width: 46, height: 46, borderRadius: 13, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--vlf-purple-50)', color: 'var(--vlf-purple-700)' }}><Icon name={open.ic} size={23} sw={1.7} /></div>
              <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 800 }}>{E(open, 't')}</div><div className="v-muted" style={{ fontSize: 12, marginTop: 2 }}>{T('Hướng dẫn từng bước', 'Step by step')}</div></div>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--vlf-ink-700)', margin: '0 0 14px' }}>{E(open, 'd')}</p>
            <div className="v-steps">
              {(E(open, 'steps') || []).map((s, i) => <div className="v-step-it" key={i}><span className="n">{i + 1}</span><span className="tx">{s}</span></div>)}
            </div>
            <button className="v-btn v-btn-primary" style={{ marginTop: 18 }} onClick={() => {const g = open.go;setOpen(null);nav(...g);}}>{T('Mở mục này', 'Go to this section')}</button>
          </div>
        </div>, document.querySelector('.za-screen') || document.body)}
    </div>);

}

/* ---------- BELL trên top bar ---------- */
function NotifBell({ 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>);

}

/* ---------- HELP icon (top bar, cạnh chuông) ---------- */
function HelpFab({ onClick }) {
  return (
    <button className="v-helpbtn" onClick={onClick} aria-label="Help">
      <Icon name="info" size={20} sw={1.8} />
    </button>);

}

Object.assign(window, { Notifications, HelpCenter, NotifBell, HelpFab });