/* ============================================================
   B1 — Màn "Cài đặt PWA" (install prompt)
   Banner bottom-fixed ~80px (KHÔNG full modal) + variant iOS
   Safari → modal 3 bước. Backdrop = home tối giản cho ngữ cảnh.
   ============================================================ */
const RECENT = [
  { name: 'Lễ giỗ ông nội', meta: '13.06 · 6 người', tag: 'Giỗ', emoji: '🪷' },
  { name: 'Nhà phố Thảo Điền', meta: '09.06 · khách xem', tag: 'Broker', emoji: '🪙' },
  { name: 'Sinh nhật bé Na', meta: '01.06 · 14 người', tag: 'Sinh nhật', emoji: '🎂' },
];

function InstallScreen() {
  const [platform, setPlatform] = useState('android'); // android | ios
  const [show, setShow] = useState(true);
  const [guide, setGuide] = useState(false);

  return (
    <div className="b1-screen" style={{ display: 'flex', flexDirection: 'column' }}>
      <InAppBrowserBanner />
      {/* demo platform switcher */}
      <div style={{ position: 'absolute', top: 52, left: 0, right: 0, zIndex: 30, display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
        <div style={{ display: 'flex', gap: 2, padding: 3, borderRadius: 999, background: 'rgba(21,30,48,.7)', border: '1px solid var(--ink-line)', pointerEvents: 'auto' }}>
          {[{k:'android',l:'Android · Chrome'},{k:'ios',l:'iOS · Safari'}].map(p => (
            <button key={p.k} onClick={() => { setPlatform(p.k); setShow(true); setGuide(false); }} className="b1-mono" style={{
              border: 'none', cursor: 'pointer', borderRadius: 999, padding: '5px 11px', fontSize: 9.5, letterSpacing: '.08em',
              background: platform === p.k ? 'var(--gold)' : 'transparent', color: platform === p.k ? '#1B1408' : 'var(--cream-dim)',
            }}>{p.l}</button>
          ))}
        </div>
      </div>

      {/* backdrop home (context) */}
      <div className="b1-scroll" style={{ flex: 1, overflowY: 'auto', padding: '104px 26px 120px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <B1Wordmark size={36} style={{ width: 44, textAlign: 'center' }} />
          <div>
            <div className="b1-display" style={{ fontSize: 27, color: 'var(--cream)', lineHeight: 1, whiteSpace: 'nowrap' }}>Chào Minh</div>
            <div className="b1-mono" style={{ fontSize: 10, color: 'var(--cream-dim)', marginTop: 4 }}>3 PHIÊN GẦN ĐÂY</div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 11, marginTop: 22 }}>
          {RECENT.map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 12, background: 'var(--ink-soft)', border: '1px solid var(--ink-line)', borderRadius: 'var(--r-md)' }}>
              <StripedImg style={{ width: 56, height: 56, borderRadius: 11, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ fontSize: 22 }}>{r.emoji}</span>
              </StripedImg>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--cream)' }}>{r.name}</div>
                <div className="b1-mono" style={{ fontSize: 10, color: 'var(--cream-dim)', marginTop: 3 }}>{r.meta}</div>
              </div>
              <span className="b1-mono" style={{ fontSize: 9, color: 'var(--gold)', border: '1px solid var(--ink-line)', borderRadius: 6, padding: '4px 8px' }}>{r.tag}</span>
            </div>
          ))}
        </div>
      </div>

      {/* bottom-fixed install banner (~84px) */}
      <div style={{
        position: 'absolute', left: 12, right: 12, bottom: show ? 30 : -120, zIndex: 40,
        transition: 'bottom .32s cubic-bezier(.2,.8,.2,1)',
        background: 'var(--ink-soft)', border: '1px solid var(--gold-dim)', borderRadius: 18,
        boxShadow: '0 18px 44px -18px rgba(0,0,0,.7)', padding: 14,
        display: 'flex', alignItems: 'center', gap: 13,
      }}>
        <div style={{ width: 50, height: 50, borderRadius: 13, flexShrink: 0, overflow: 'hidden', border: '1px solid var(--ink-line)' }}>
          <img src="b1-logo.png" alt="B1" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--cream)' }}>Đặt B1 lên màn hình chính</div>
          <div className="b1-mono" style={{ fontSize: 10, color: 'var(--cream-dim)', marginTop: 2 }}>Mở phiên nhanh hơn, dùng như app</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
          <button className="b1-btn b1-btn-primary" style={{ padding: '9px 16px', fontSize: 13 }}
            onClick={() => platform === 'ios' ? setGuide(true) : setShow(false)}>
            {platform === 'ios' ? 'Hướng dẫn' : 'Cài đặt'}
          </button>
          <button className="b1-btn b1-btn-ghost" style={{ padding: '7px 16px', fontSize: 12, border: 'none', color: 'var(--cream-dim)' }} onClick={() => setShow(false)}>Để sau</button>
        </div>
      </div>

      {/* re-open hint when dismissed */}
      {!show && !guide && (
        <button onClick={() => setShow(true)} style={{
          position: 'absolute', bottom: 34, left: '50%', transform: 'translateX(-50%)', zIndex: 40,
          background: 'var(--ink-glass)', backdropFilter: 'blur(8px)', border: '1px solid var(--ink-line)',
          borderRadius: 999, padding: '8px 16px', cursor: 'pointer',
          fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--cream-dim)', letterSpacing: '.08em',
        }}>HIỆN LẠI BANNER</button>
      )}

      {/* iOS instructions modal */}
      {guide && (
        <div onClick={() => setGuide(false)} style={{ position: 'absolute', inset: 0, zIndex: 70, background: 'rgba(13,19,31,.72)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'flex-end' }}>
          <div onClick={e => e.stopPropagation()} style={{
            width: '100%', background: 'var(--ink-soft)', borderTopLeftRadius: 26, borderTopRightRadius: 26,
            border: '1px solid var(--ink-line)', borderBottom: 'none', padding: '14px 24px 38px',
            animation: 'b1-rise-in .3s ease both',
          }}>
            <div style={{ width: 38, height: 4, borderRadius: 4, background: 'var(--ink-line)', margin: '0 auto 18px' }} />
            <div className="b1-eyebrow">CÀI TRÊN IPHONE · SAFARI</div>
            <h3 className="b1-display" style={{ fontSize: 26, margin: '7px 0 20px', color: 'var(--cream)' }}>Ba bước, xong ngay</h3>
            {[
              { n: 'Một', t: 'Chạm nút Chia sẻ', d: 'Ở thanh dưới cùng của Safari', ic: <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2.5v9M10 2.5L7 5.5M10 2.5l3 3" stroke="var(--gold)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><path d="M5 9H4v8.5h12V9h-1" stroke="var(--gold)" strokeWidth="1.5" strokeLinecap="round"/></svg> },
              { n: 'Hai', t: 'Chọn "Thêm vào MH chính"', d: 'Add to Home Screen', ic: <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="3" y="3" width="14" height="14" rx="3" stroke="var(--gold)" strokeWidth="1.5"/><path d="M10 6.5v7M6.5 10h7" stroke="var(--gold)" strokeWidth="1.5" strokeLinecap="round"/></svg> },
              { n: 'Ba', t: 'Chạm "Thêm" — hoàn tất', d: 'Biểu tượng B1 hiện trên màn hình', ic: <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10.5l4 4 8-9" stroke="var(--moss)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg> },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: i < 2 ? 12 : 0 }}>
                <StripedImg style={{ width: 52, height: 52, borderRadius: 12, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{s.ic}</StripedImg>
                <div style={{ flex: 1 }}>
                  <div className="b1-mono" style={{ fontSize: 9.5, color: 'var(--gold)', letterSpacing: '.14em' }}>BƯỚC {s.n.toUpperCase()}</div>
                  <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--cream)', marginTop: 2 }}>{s.t}</div>
                  <div className="b1-mono" style={{ fontSize: 10, color: 'var(--cream-dim)', marginTop: 2 }}>{s.d}</div>
                </div>
              </div>
            ))}
            <button className="b1-btn b1-btn-primary" style={{ width: '100%', marginTop: 22 }} onClick={() => { setGuide(false); setShow(false); }}>Đã hiểu</button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { InstallScreen });