/* ════════════════════════════════════════════════════════════
   PWA install banner — iOS Safari & Android Chrome guidance
   + lightweight "installed?" detection.
   ════════════════════════════════════════════════════════════ */

const { useState: pS, useEffect: pE } = React;

function detectPlatform() {
  const ua = (navigator.userAgent || '').toLowerCase();
  if (/iphone|ipad|ipod/.test(ua)) return 'ios';
  if (/android/.test(ua)) return 'android';
  return 'desktop';
}

function InstallBanner() {
  const [show, setShow] = pS(false);
  const [dismissed, setDismissed] = pS(() => localStorage.getItem('pwa_dismissed') === '1');
  const [installed, setInstalled] = pS(() => window.matchMedia('(display-mode: standalone)').matches);
  const [deferred, setDeferred] = pS(null);
  const [platform] = pS(detectPlatform());

  pE(() => {
    if (installed || dismissed) return;
    const t = setTimeout(() => setShow(true), 1800);
    return () => clearTimeout(t);
  }, [installed, dismissed]);

  pE(() => {
    const handler = (e) => { e.preventDefault(); setDeferred(e); };
    window.addEventListener('beforeinstallprompt', handler);
    const installedHandler = () => setInstalled(true);
    window.addEventListener('appinstalled', installedHandler);
    return () => {
      window.removeEventListener('beforeinstallprompt', handler);
      window.removeEventListener('appinstalled', installedHandler);
    };
  }, []);

  const dismiss = () => {
    setShow(false);
    setDismissed(true);
    localStorage.setItem('pwa_dismissed', '1');
  };

  const handleInstall = async () => {
    if (deferred) {
      deferred.prompt();
      const choice = await deferred.userChoice;
      if (choice.outcome === 'accepted') { setInstalled(true); }
      setDeferred(null);
    }
  };

  if (!show || installed || dismissed) return null;
  const lang = window.__LANG || 'zh';

  return (
    <div className="install-veil" onClick={dismiss}>
      <div className="install-card" onClick={(e) => e.stopPropagation()} role="dialog">
        <div className="ic-mast">{lang==='zh' ? '装到主屏 · INSTALL' : 'INSTALL · ADD TO HOME'}</div>
        <div className="ic-icon">
          <img src="icon-192.svg" alt="" width="56" height="56"/>
        </div>
        <div className="ic-ttl">
          {lang==='zh' ? 'Felix · 私人 Briefing' : 'Felix · Private Briefing'}
        </div>
        <div className="ic-sub">
          {lang==='zh' ? '装到主屏后离线可用 · 推送通知 · 全屏无浏览器边框'
                       : 'Offline-ready · push notifications · fullscreen, no browser chrome'}
        </div>

        {platform === 'ios' && (
          <div className="ic-steps">
            <div className="step">
              <span className="step-n">1</span>
              <span>{lang==='zh' ? '点击底部 Safari 分享' : 'Tap the Safari Share icon'}</span>
              <span className="step-glyph" aria-hidden>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 3v12M7 8l5-5 5 5M5 15v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"/>
                </svg>
              </span>
            </div>
            <div className="step">
              <span className="step-n">2</span>
              <span>{lang==='zh' ? '选「加入主屏幕」' : 'Choose "Add to Home Screen"'}</span>
              <span className="step-glyph" aria-hidden>＋</span>
            </div>
            <div className="step">
              <span className="step-n">3</span>
              <span>{lang==='zh' ? '点右上「加入」完成' : 'Tap "Add" — done'}</span>
              <span className="step-glyph" aria-hidden>✓</span>
            </div>
          </div>
        )}

        {platform === 'android' && (
          <div className="ic-steps">
            {deferred ? (
              <button className="install-btn" onClick={handleInstall}>
                {lang==='zh' ? '一键安装' : 'Install now'}
              </button>
            ) : (
              <>
                <div className="step"><span className="step-n">1</span><span>{lang==='zh' ? '右上菜单 ⋮' : 'Tap the ⋮ menu'}</span></div>
                <div className="step"><span className="step-n">2</span><span>{lang==='zh' ? '选「添加到主屏幕」' : 'Choose "Add to Home screen"'}</span></div>
              </>
            )}
          </div>
        )}

        {platform === 'desktop' && (
          <div className="ic-steps">
            {deferred ? (
              <button className="install-btn" onClick={handleInstall}>
                {lang==='zh' ? '安装到桌面' : 'Install to desktop'}
              </button>
            ) : (
              <div className="step center">
                <span>{lang==='zh' ? '地址栏右侧「安装」图标可装到 Dock / 开始菜单' : 'Look for the install icon in your address bar'}</span>
              </div>
            )}
          </div>
        )}

        <div className="ic-actions">
          <button className="dim" onClick={dismiss}>{lang==='zh' ? '稍后' : 'Later'}</button>
          <button className="dim subtle" onClick={() => { localStorage.setItem('pwa_dismissed', '1'); setShow(false); }}>
            {lang==='zh' ? '不再提示' : "Don't show again"}
          </button>
        </div>

        <div className="ic-foot">
          <span className="d on"/><span>PWA</span>
          <span className="sep"/>
          <span className="d on"/><span>Offline</span>
          <span className="sep"/>
          <span className="d on"/><span>Push</span>
        </div>
      </div>
    </div>
  );
}

window.InstallBanner = InstallBanner;

// Register service worker if available (gracefully fail in sandbox)
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('sw.js').catch(() => { /* ignore in sandbox */ });
  });
}