/* ============================================================
   NATIVE CHROME — iOS & Android shells (dùng lại)
   ------------------------------------------------------------
   Cùng vùng an toàn với zalo-chrome (--zalo-status-h / action-h /
   safe-top / safe-bottom) nên NỘI DUNG APP KHÔNG đổi padding.
   KHÔNG có cụm ···|X. Header thích ứng theo NGỮ CẢNH:
     mode 'bare'  → màn gốc có hero riêng (Trang chủ): KHÔNG title,
                    hero chính là header.
     mode 'large' → tab gốc khác: tiêu đề lớn, canh TRÁI (iOS large
                    title / Android app bar).
     mode 'page'  → đi sâu (L2): iOS = back chevron + nhãn, tiêu đề
                    giữa; Android = back arrow + tiêu đề trái.
     mode 'fullscreen' → tràn viền (map/onboarding): chỉ status bar.
   ============================================================ */

function NSignal() {
  return <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor" aria-hidden="true"><rect x="0" y="8" width="3" height="4" rx="1" /><rect x="5" y="5.5" width="3" height="6.5" rx="1" /><rect x="10" y="3" width="3" height="9" rx="1" /><rect x="15" y="0" width="3" height="12" rx="1" /></svg>;
}
function NWifi() {
  return <svg width="17" height="12" viewBox="0 0 18 13" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true"><path d="M2 4.4c4-3.2 10-3.2 14 0" /><path d="M4.4 7.2c2.5-2 6.7-2 9.2 0" /><path d="M6.9 10c1.2-1 3-1 4.2 0" /><circle cx="9" cy="12" r=".6" fill="currentColor" stroke="none" /></svg>;
}

function NativeStatusBar({ platform, time = "9:41", battery = 82 }) {
  const right = platform === 'android'
    ? <><NWifi /><NSignal /></>
    : <><NSignal /><NWifi /></>;
  return (
    <div className={"za-statusbar nat-statusbar nat-" + platform}>
      <div className="za-sb-left"><span>{time}</span></div>
      <div className="za-sb-right">
        {right}
        <span className="za-battery"><b>{battery}</b></span>
      </div>
    </div>
  );
}

/* ---- iOS header ---- */
function IOSChrome({ mode = 'bare', tone, title, onBack, scheme = 'dark', time = "9:41", battery = 82, lang = 'vi' }) {
  const back = lang === 'en' ? 'Back' : 'Quay lại';
  const tn = tone || (mode === 'bare' ? 'hero' : 'surface');
  return (
    <div className={"za-chrome nat-chrome tone-" + tn} data-scheme={scheme}>
      <NativeStatusBar platform="ios" time={time} battery={battery} />
      {mode !== 'fullscreen' && <div className="nat-header-bg" />}
      {mode === 'bare' && <span className="nat-brand nat-brand-bare" aria-hidden="true"><VLFLogo /></span>}
      {mode === 'large' && (
        <div className="ios-nav mode-large">
          <span className="nat-brand" aria-hidden="true"><VLFLogo /></span>
          <div className="ios-nav-title">{title}</div>
        </div>
      )}
      {mode === 'page' && (
        <div className="ios-nav mode-page">
          <button className="ios-nav-back" onClick={onBack} aria-label={back}>
            <svg width="13" height="22" viewBox="0 0 13 22" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M11 2L2 11l9 9" /></svg>
            <span>{back}</span>
          </button>
          <div className="ios-nav-title">{title}</div>
          <div className="ios-nav-side" />
        </div>
      )}
      <div className="za-home-ind nat-ios-ind" />
    </div>
  );
}

/* ---- Android Material header ---- */
function AndroidChrome({ mode = 'bare', tone, title, onBack, scheme = 'dark', time = "9:41", battery = 82, lang = 'vi' }) {
  const showBar = mode === 'large' || mode === 'page';
  const tn = tone || (mode === 'bare' ? 'hero' : 'surface');
  return (
    <div className={"za-chrome nat-chrome tone-" + tn} data-scheme={scheme}>
      <NativeStatusBar platform="android" time={time} battery={battery} />
      {mode !== 'fullscreen' && <div className="nat-header-bg" />}
      {mode === 'bare' && <span className="nat-brand nat-brand-bare" aria-hidden="true"><VLFLogo /></span>}
      {showBar && (
        <div className={"md-appbar mode-" + mode}>
          {mode === 'page' && (
            <button className="md-back" onClick={onBack} aria-label={lang === 'en' ? 'Back' : 'Quay lại'}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round"><path d="M20 12H4M10 6l-6 6 6 6" /></svg>
            </button>
          )}
          {mode === 'large' && <span className="nat-brand" aria-hidden="true"><VLFLogo /></span>}
          <div className="md-appbar-title">{title}</div>
        </div>
      )}
      <div className="za-home-ind nat-md-gesture" />
    </div>
  );
}

Object.assign(window, { NativeStatusBar, IOSChrome, AndroidChrome });