/* ============================================================
   VLF 2026 · ROOT APP
   - onboarding → persona → app
   - phase pre/live · lang vi/en (demo panel + tài khoản)
   - router + footer rule (L1 có tabbar; L2/L3 ẩn, header back)
   ============================================================ */

const TAB_SCREENS = ['home', 'compete', 'ticket', 'schedule', 'account'];
const FULLSCREEN = ['map'];

function seedTickets(persona) {
  const me = window.VLF.personas[persona].me;
  if (persona === 'guest') return [{ name: 'Vé mời · Khán đài VIP', tag: 'VIP', span: 'Trọn giải · T5→CN', attendee: me.name, code: 'HCO-2048' }];
  if (persona === 'golfer') return [{ name: 'Thẻ Golfer · Legends', tag: 'Player', span: '22–27/09 · Legends', attendee: me.name, code: 'PLR-0061' }];
  if (persona === 'golfer_intl') return [{ name: 'Thẻ Golfer · Legends', tag: 'Player', span: '22–27/09 · Legends', attendee: me.name, code: 'PLR-0007' }];
  if (persona === 'vip') return [{ name: 'Vé VIP · Chính Quyền', tag: 'Hospitality', span: 'Trọn giải · làn riêng', attendee: me.name, code: 'VIP-0007' }];
  return [];
}

function App() {
  const [persona, setPersona] = useState(null); // null = onboarding
  const [phase, setPhase] = useState('live'); // 'pre' | 'live'
  const [salePhase, setSalePhase] = useState('early'); // gift | early | standard
  const [lang, setLang] = useState('vi');
  const [platform, setPlatform] = useState('zalo'); // 'zalo' | 'ios' | 'android'
  const [stack, setStack] = useState([{ s: 'home', p: {} }]);
  const screenBackRef = React.useRef(null);   // màn stepper đăng ký back nội bộ (pop step trước khi thoát) — 1 back duy nhất ở header
  const [followed, setFollowed] = useState(new Set(['Bernhard Langer']));
  const [tickets, setTickets] = useState([]);
  const [cart, setCart] = useState({});
  const [orders, setOrders] = useState([]);
  const [notifSeen, setNotifSeen] = useState(false);
  const notifUnread = notifSeen ? 0 : window.VLF.notifs.filter((n) => n.unread).length;
  function addOrder(o) {setOrders((os) => [o, ...os]);}

  // ---- Zalo OA (khung #2): hội thoại + trigger ----
  const [oaThread, setOaThread] = useState(() => window.seedOAThread('guest', 'vi'));
  const oaSeq = React.useRef(0);
  const oaPrev = React.useRef({ orders: 0, tickets: 0 });
  function oaPush(type, payload) {
    oaSeq.current += 1;
    setOaThread((t) => [...t, ...window.buildOAMessages(type, payload, { persona, lang, seq: oaSeq.current })]);
  }
  function oaReset() {
    if (!persona) return;
    oaSeq.current = 0;
    setOaThread(window.seedOAThread(persona, lang));
    oaPrev.current = { orders: orders.length, tickets: tickets.length };
  }
  // reseed hội thoại khi đổi persona (giữ nguyên khi đổi ngôn ngữ — renderer tự dịch)
  React.useEffect(() => {
    if (!persona) return;
    oaSeq.current = 0;
    setOaThread(window.seedOAThread(persona, lang));
    oaPrev.current = { orders: orders.length, tickets: tickets.length };
  }, [persona]);
  // mua vé / đặt quà / kích hoạt vé mời trong Mini App → đẩy ZNS sang OA
  React.useEffect(() => {
    if (!persona) return;
    const dO = orders.length - oaPrev.current.orders;
    const dT = tickets.length - oaPrev.current.tickets;
    if (dO > 0) {
      const o = orders[0];
      if (o.kind === 'ticket') oaPush('order_ticket', { order: o, ticket: tickets[0] });else
      oaPush('order_shop', o);
    } else if (dT > 0) {
      oaPush('invite_activated', tickets[0]);
    }
    oaPrev.current = { orders: orders.length, tickets: tickets.length };
  }, [orders, tickets]);

  const cur = stack[stack.length - 1];
  const rootTab = stack[0].s;

  function nav(s, p = {}) {
    if (s === 'back') {setStack((st) => st.length > 1 ? st.slice(0, -1) : st);return;}
    if (TAB_SCREENS.includes(s)) {setStack([{ s, p }]);return;}
    setStack((st) => [...st, { s, p }]);
  }

  function toggleFollow(name) {
    setFollowed((f) => {const n = new Set(f);n.has(name) ? n.delete(name) : n.add(name);return n;});
  }
  function addTicket(tk) {setTickets((ts) => [tk, ...ts.filter((x) => x.tag !== tk.tag)]);}

  function finishOnboard(pid) {setPersona(pid);setTickets(seedTickets(pid));setStack([{ s: 'home', p: {} }]);}
  function switchPersona(pid) {setPersona(pid);setTickets(seedTickets(pid));setStack([{ s: 'home', p: {} }]);}
  function relogin() {setPersona(null);}

  // ----- render screen -----
  function renderScreen() {
    if (!persona) return <Onboard onDone={finishOnboard} platform={platform} />;
    switch (cur.s) {
      case 'home':return <Home persona={persona} phase={phase} nav={nav} />;
      case 'compete':return <Compete initSub={cur.p.sub || (persona === 'spectator' ? 'leaderboard' : 'mine')} initDay={cur.p.teeDay} phase={phase} nav={nav} followed={followed} toggleFollow={toggleFollow} persona={persona} />;
      case 'golfer':return <GolferDetail name={cur.p.name} phase={phase} followed={followed} toggleFollow={toggleFollow} nav={nav} />;
      case 'ticket':return <MyTickets nav={nav} tickets={tickets} persona={persona} orders={orders} cart={cart} />;
      case 'buy':return <BuyTickets nav={nav} phase={salePhase} persona={persona} addTicket={addTicket} addOrder={addOrder} backRef={screenBackRef} />;
      case 'checkout':return <Checkout id={cur.p.id} nav={nav} addTicket={addTicket} persona={persona} backRef={screenBackRef} />;
      case 'activate':return <Activate nav={nav} addTicket={addTicket} persona={persona} />;
      case 'transfer':return <Transfer nav={nav} />;
      case 'attendees':return <Attendees nav={nav} tickets={tickets} />;
      case 'schedule':return <Schedule nav={nav} persona={persona} phase={phase} tickets={tickets} />;
      case 'comprule':return <DivisionRule id={cur.p.id} nav={nav} />;
      case 'sponsor':return <SponsorDetail id={cur.p.id} />;
      case 'map':return <EventMap nav={nav} focus={cur.p} persona={persona} />;
      case 'live':return <Live nav={nav} />;
      case 'news':return <News nav={nav} />;
      case 'article':return <Article id={cur.p.id} nav={nav} />;
      case 'village':return <Village nav={nav} />;
      case 'villagezone':return <VillageZone id={cur.p.id} nav={nav} />;
      case 'shop':return <Shop nav={nav} cart={cart} setCart={setCart} />;
      case 'product':return <ProductDetail id={cur.p.id} nav={nav} cart={cart} setCart={setCart} />;
      case 'shopcheckout':return <ShopCheckout nav={nav} cart={cart} setCart={setCart} persona={persona} addOrder={addOrder} backRef={screenBackRef} />;
      case 'orders':return <Orders nav={nav} orders={orders} />;
      case 'prep':return <GolferPrep nav={nav} intl={persona === 'golfer_intl'} />;
      case 'viptimeline':return <VipTimeline nav={nav} />;
      case 'rsvp':return <GalaRSVP nav={nav} />;
      case 'survey':return <Survey nav={nav} persona={persona} />;
      case 'results':return <Results nav={nav} />;
      case 'gallery':return <Gallery nav={nav} backRef={screenBackRef} />;
      case 'findphotos':return <FindPhotos nav={nav} persona={persona} />;
      case 'highlights':return <Highlights nav={nav} />;
      case 'certificate':return <Certificate nav={nav} persona={persona} />;
      case 'messages':return <Messages nav={nav} />;
      case 'message':return <MessageDetail id={cur.p.id} nav={nav} />;
      case 'faq':return <FaqDetail i={cur.p.i} />;
      case 'account':return <Account persona={persona} phase={phase} setPhase={setPhase} salePhase={salePhase} setSalePhase={setSalePhase} platform={platform} setPlatform={setPlatform} switchPersona={switchPersona} nav={nav} tickets={tickets} followed={followed} lang={lang} setLang={setLang} onSwitchPersona={relogin} orders={orders} />;
      case 'notifs':return <Notifications nav={nav} onSeen={() => setNotifSeen(true)} />;
      case 'help':return <HelpCenter nav={nav} persona={persona} />;
      default:return <Home persona={persona} phase={phase} nav={nav} />;
    }
  }

  // ----- header config -----
  const L = window.VLF.i18n[lang];
  const titles = {
    golfer: lang === 'en' ? 'Golfer profile' : 'Hồ sơ golfer', buy: L.buy, checkout: lang === 'en' ? 'Checkout' : 'Thanh toán',
    activate: L.activate, messages: L.messages, message: L.messages, faq: L.support,
    transfer: L.transferTitle, attendees: L.attendees, live: L.live, news: L.news, article: L.news,
    village: L.village, prep: L.prep, viptimeline: L.vipDay, rsvp: L.rsvp, survey: L.survey,
    results: L.results, gallery: L.gallery, findphotos: L.findMyPhotos, highlights: L.highlightsTitle, certificate: L.certificate,
    shop: lang === 'en' ? 'Official store' : 'Cửa hàng lưu niệm', shopcheckout: lang === 'en' ? 'Order' : 'Đặt hàng',
    product: lang === 'en' ? 'Product' : 'Chi tiết sản phẩm', orders: lang === 'en' ? 'My orders' : 'Đơn hàng của tôi',
    villagezone: L.village,
    notifs: lang === 'en' ? 'Notifications' : 'Thông báo', help: lang === 'en' ? 'Help center' : 'Trợ giúp',
    sponsor: L.sponsors,
    comprule: lang === 'en' ? 'Competition rules' : 'Điều lệ thi đấu'
  };
  const tabTitle = {
    home: { name: 'VLF 2026', sub: 'Vietnam Legends Festival' },
    compete: { name: window.VLF.i18n[lang].nav_compete, sub: 'VLF 2026' },
    ticket: { name: window.VLF.i18n[lang].myticket, sub: 'VLF 2026' },
    schedule: { name: window.VLF.i18n[lang].schedule, sub: 'VLF 2026' },
    account: { name: window.VLF.i18n[lang].nav_me, sub: 'VLF 2026' }
  };

  const onboarding = !persona;
  const isTab = !onboarding && TAB_SCREENS.includes(cur.s);
  const isFull = onboarding || FULLSCREEN.includes(cur.s);
  const isTask = !onboarding && cur.s === 'buy';   // L3 task: header chuẩn + 1 back duy nhất (back ở header pop theo step)
  const variant = isFull ? 'fullscreen' : isTab ? 'home' : 'page';
  const showTabbar = isTab;
  const homeDark = isFull;

  const hp = isTab ? tabTitle[cur.s] : { name: '', sub: '' };
  // native header mode: home = hero là header (bare); tab khác = tiêu đề lớn; L2 = back+title
  const nativeMode = onboarding ? 'fullscreen' : isFull ? 'fullscreen' : cur.s === 'home' ? 'bare' : isTab ? 'large' : 'page';
  // tone glyph status bar: nền tối (onboarding tím / home hero / map) = hero(sáng); nền sáng = surface(tối)
  const nativeTone = onboarding || isFull || cur.s === 'home' ? 'hero' : 'surface';
  const nativeTitle = isTab ? tabTitle[cur.s] ? tabTitle[cur.s].name : '' : titles[cur.s] || '';

  const TABS = [
  { id: 'home', ic: 'home', label: window.VLF.i18n[lang].nav_home },
  { id: 'compete', ic: 'trophy', label: window.VLF.i18n[lang].nav_compete },
  { id: 'ticket', ic: 'ticket', label: window.VLF.i18n[lang].nav_ticket },
  { id: 'schedule', ic: 'calendar', label: window.VLF.i18n[lang].schedule },
  { id: 'account', ic: 'user', label: window.VLF.i18n[lang].nav_me }];


  // back ở header: màn stepper tự pop step (đăng ký qua screenBackRef); hết step → nav('back')
  const handleBack = () => { if (screenBackRef.current && screenBackRef.current()) return; nav('back'); };

  const platLabel = platform === 'ios' ? 'iOS App' : platform === 'android' ? 'Android App' : 'Zalo Mini App';

  return (
    <LangCtx.Provider value={lang}>
      {/* ---- demo control panel (ẩn trên màn nhỏ) ---- */}
      {ReactDOM.createPortal(<DemoPanel {...{ persona, phase, setPhase, lang, setLang, platform, setPlatform, switchPersona, relogin, salePhase, setSalePhase, oaPush, oaReset }} />, document.getElementById('vlf-panel-root'))}

      <div className="vlf-duo">
      <div className="vlf-duo-col">
      <div className="za-frame" data-scheme="dark" data-variant={variant} data-home-dark={homeDark} data-platform={platform} data-navtone={nativeTone}
          style={{ position: 'relative', '--zalo-header-bg': '#31153D', '--zalo-header-fg': '#fff', '--zalo-statusbar-fg': '#fff' }}>
        <div className="za-phone">
          <div className="za-island" />
          <div className="za-screen">
            <div className="za-content" data-screen-label={(onboarding ? 'onboarding' : cur.s) + ' · ' + (persona || '')} key={cur.s + JSON.stringify(cur.p)}
                style={isFull ? { padding: 0 } : isTab ? { paddingBottom: 0 } : { paddingBottom: 0 }}>
              {renderScreen()}
            </div>

            {showTabbar &&
                <div className="v-spon-strip">
                <div className="v-spon-strip-track">
                  {window.VLF.sponsors.concat(window.VLF.sponsors).map((s, i) =>
                    <span className="v-spon-strip-item" key={i} onClick={() => nav('sponsor', { id: s.id })}>{s.name}</span>
                    )}
                </div>
              </div>
                }
            {showTabbar &&
                <div className="v-tabbar" data-platform={platform}>
                {TABS.map((tb) =>
                  <div key={tb.id} className={'v-tab' + (rootTab === tb.id ? ' on' : '')} onClick={() => nav(tb.id)}>
                    <span className="ic">
                      <Icon name={tb.ic} size={23} sw={rootTab === tb.id ? 2 : 1.6} fill={tb.id === 'home' && rootTab === 'home'} />
                      {tb.id === 'ticket' && tickets.length > 0 && <span className="badge">{tickets.length}</span>}
                    </span>
                    <span>{tb.label}</span>
                  </div>
                  )}
              </div>
                }

            {/* native tone: onboarding/home/fullscreen = hero (glyph sáng trên nền tối); còn lại = surface */}
            {platform === 'ios' ?
                <IOSChrome mode={nativeMode} tone={nativeTone} title={nativeTitle} onBack={handleBack} scheme="dark" time="06:18" battery={82} lang={lang} /> :
                platform === 'android' ?
                <AndroidChrome mode={nativeMode} tone={nativeTone} title={nativeTitle} onBack={handleBack} scheme="dark" time="06:18" battery={82} lang={lang} /> :

                <ZaloChrome
                  variant={variant}
                  appName={hp.name}
                  appSub={hp.sub}
                  title={titles[cur.s] || ''}
                  logo={<VLFLogo />}
                  onBack={handleBack}
                  scheme="dark"
                  time="06:18"
                  battery={82} />

                }
            {!onboarding && !isFull && !isTask && (platform === 'zalo' || isTab) &&
                <NotifBell count={notifUnread} onClick={() => nav('notifs')} />
                }
            {!onboarding && !isFull && !isTask && (platform === 'zalo' || isTab) &&
                <HelpFab onClick={() => nav('help')} />
                }
          </div>
        </div>
      </div>
      <div className="vlf-duo-cap">
        <span className="k">Khung 1 · thao tác</span>
        <span className="t">{platLabel} · VLF 2026</span>
        <span className="s">Mua vé · đặt quà · kích hoạt vé mời</span>
      </div>
      </div>

      <div className="vlf-duo-bridge">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
        <span className="lbl">trigger · ZNS</span>
      </div>

      <div className="vlf-duo-col">
        <OAPhone thread={oaThread} lang={lang} />
        <div className="vlf-duo-cap">
          <span className="k">Khung 2 · thông báo</span>
          <span className="t">Zalo OA · VLF 2026</span>
          <span className="s">ZNS giao dịch · chăm sóc · khuyến mãi gửi về đây</span>
        </div>
      </div>
      </div>
    </LangCtx.Provider>);

}

/* ---------- DEMO PANEL ---------- */
function DemoPanel({ persona, phase, setPhase, lang, setLang, platform, setPlatform, switchPersona, relogin, salePhase, setSalePhase, oaPush, oaReset }) {
  const platKK = platform === 'ios' ? 'iOS App' : platform === 'android' ? 'Android App' : 'Zalo Mini App';
  return (
    <div className="vlf-panel">
      <div className="kk">{platKK} · Bản demo</div>
      <h1>Vietnam <em>Legends</em> Festival 2026</h1>
      <p className="lede">App cho <b>golfer</b> và <b>khách mời / khán giả</b>. Chọn loại ứng dụng để xem cùng sản phẩm dưới vỏ <b>Zalo Mini App</b>, <b>iOS</b> hay <b>Android</b> — nội dung & dữ liệu giữ nguyên, chỉ đổi khung hệ thống.</p>

      <div className="vlf-grp"><div className="lbl">Loại ứng dụng</div>
        <div className="vlf-seg" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 3 }}>
          <button className={platform === 'zalo' ? 'on' : ''} onClick={() => setPlatform('zalo')}>Zalo Mini App<small>trong Zalo</small></button>
          <button className={platform === 'ios' ? 'on' : ''} onClick={() => setPlatform('ios')}>iOS App<small>App Store</small></button>
          <button className={platform === 'android' ? 'on' : ''} onClick={() => setPlatform('android')}>Android<small>Play Store</small></button>
        </div>
      </div>

      <div className="vlf-grp"><div className="lbl">Giai đoạn giải</div>
        <div className="vlf-seg" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 3 }}>
          <button className={phase === 'pre' ? 'on' : ''} onClick={() => setPhase('pre')}>Trước giải<small>đếm ngược · vé</small></button>
          <button className={phase === 'live' ? 'on' : ''} onClick={() => setPhase('live')}>Trong giải<small>leaderboard live</small></button>
          <button className={phase === 'post' ? 'on' : ''} onClick={() => setPhase('post')}>Sau giải<small>kết quả · ảnh</small></button>
        </div>
      </div>

      <div className="vlf-grp"><div className="lbl">Giai đoạn mở bán vé</div>
        <div className="vlf-seg">
          <button className={salePhase === 'gift' ? 'on' : ''} onClick={() => setSalePhase('gift')}>Vé tặng<small>3 ngày · đếm ngược</small></button>
          <button className={salePhase === 'early' ? 'on' : ''} onClick={() => setSalePhase('early')}>Early Bird<small>−20%</small></button>
          <button className={salePhase === 'standard' ? 'on' : ''} onClick={() => setSalePhase('standard')}>Giá chính thức<small>standard</small></button>
        </div>
      </div>

      <div className="vlf-grp"><div className="lbl">Vai trò (persona)</div>
        <select className="vlf-panel-sel" value={persona || 'golfer'} onChange={(e) => switchPersona(e.target.value)}>
          <option value="golfer">Golfer nội</option>
          <option value="golfer_intl">Golfer quốc tế</option>
          <option value="guest">Khách mời</option>
          <option value="spectator">Khán giả</option>
          <option value="vip">VIP & Chính Quyền</option>
        </select>
      </div>

      <div className="vlf-grp"><div className="lbl">Ngôn ngữ</div>
        <div className="vlf-seg">
          <button className={lang === 'vi' ? 'on' : ''} onClick={() => setLang('vi')}>Tiếng Việt</button>
          <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>English</button>
        </div>
      </div>

      <div className="vlf-grp"><div className="lbl">Luồng vào app</div>
        <div className="vlf-seg" style={{ gridTemplateColumns: '1fr' }}>
          <button onClick={relogin}>Chạy lại onboarding · "Bạn là ai?"</button>
        </div>
      </div>

      <div className="vlf-grp"><div className="lbl">Zalo OA · trigger tin nhắn (khung 2)</div>
        <p className="vlf-panel-hint" style={{ marginTop: 0, marginBottom: 7 }}>
          Mua vé · đặt quà · kích hoạt → tự gửi ZNS. Chọn tin OA chủ động gửi:
        </p>
        <div style={{ display: 'flex', gap: 6 }}>
          <select className="vlf-panel-sel" style={{ flex: 1 }} value=""
          onChange={(e) => {if (e.target.value) oaPush && oaPush(e.target.value);e.target.value = '';}}>
            <option value="">Chọn tin gửi…</option>
            {(window.VLF.oaTriggers || []).map((t) =>
            <option key={t.id} value={t.id}>{lang === 'en' ? t.en : t.vi}</option>
            )}
          </select>
          <button className="vlf-panel-sel" style={{ width: 'auto', padding: '0 14px', cursor: 'pointer' }} onClick={() => oaReset && oaReset()}>Làm mới</button>
        </div>
      </div>

      <div className="vlf-note">
        <b>Điểm khác biệt cốt lõi:</b> mọi module thi đấu lọc theo <b>8 bảng đấu</b> (Legends · Amateurs · Alliance · Pro-Am · Future Legends · Celeb · Doanh Nhân · Gia đình), tự đổi hiển thị <code>gross to-par</code> ↔ <code>Stableford</code>. Bảng phụ thi qua <b>5 trạm kỹ thuật</b> cho người mới. Không hiển thị tiền thưởng.
      </div>
    </div>);

}

ReactDOM.createRoot(document.getElementById('vlf-phone-root')).render(<App />);

/* ---------- scaler ---------- */
function vlfFit() {
  const s = document.getElementById('vlf-scaler');
  if (!s) return;
  const panelW = window.innerWidth > 920 ? 362 : 0;
  const availW = window.innerWidth - panelW - 56;
  const scale = Math.min(availW / 924, (window.innerHeight - 44) / 908, 1.0);
  s.style.transform = `scale(${Math.max(scale, 0.28)})`;
}
window.addEventListener('resize', vlfFit);vlfFit();setTimeout(vlfFit, 60);