// PhoneFrame — a 390×844 device bezel with status bar, a scrollable screen
// area, and an optional bottom nav (Discover / Profile) + Host FAB.

function StatusBar() {
  return (
    <div style={{
      height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 24px', fontSize: 14, fontWeight: 700, color: 'var(--text-primary)',
      flex: '0 0 auto',
    }}>
      <span>9:41</span>
      <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
        <span className="material-symbols-rounded" style={{ fontSize: 17 }}>signal_cellular_alt</span>
        <span className="material-symbols-rounded" style={{ fontSize: 17 }}>wifi</span>
        <span className="material-symbols-rounded" style={{ fontSize: 19 }}>battery_full</span>
      </span>
    </div>
  );
}

function BottomNav({ tab, onTab, onHost }) {
  const { IconButton } = window.PraigoDesignSystem_290071;
  return (
    <div style={{ position: 'relative', flex: '0 0 auto' }}>
      <div style={{
        height: 78, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-around',
        padding: '10px 40px 0', borderTop: '1px solid var(--border)', background: 'var(--surface)',
      }}>
        <NavItem icon="explore" label="Discover" active={tab === 'discover'} onClick={() => onTab('discover')} />
        <NavItem icon="person" label="Profile" active={tab === 'profile'} onClick={() => onTab('profile')} />
      </div>
      <button onClick={onHost} aria-label="Host a Social" style={{
        position: 'absolute', top: -28, left: '50%', transform: 'translateX(-50%)',
        width: 60, height: 60, borderRadius: '50%', border: '4px solid var(--bg)',
        background: 'var(--primary)', color: 'var(--on-primary)', cursor: 'pointer',
        boxShadow: 'var(--shadow-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <span className="material-symbols-rounded" style={{ fontSize: 30 }}>add</span>
      </button>
    </div>
  );
}

function NavItem({ icon, label, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, width: 88,
      border: 'none', background: 'transparent', cursor: 'pointer',
      color: active ? 'var(--primary)' : 'var(--text-secondary)',
    }}>
      <span className="material-symbols-rounded" style={{ fontSize: 26, fontVariationSettings: active ? "'FILL' 1" : "'FILL' 0" }}>{icon}</span>
      <span style={{ fontSize: 11, fontWeight: 700 }}>{label}</span>
    </button>
  );
}

function PhoneFrame({ children, nav, tab, onTab, onHost, dark, onToggleDark }) {
  return (
    <div data-theme={dark ? 'dark' : undefined} style={{
      width: 390, height: 844, borderRadius: 44, background: 'var(--bg)',
      boxShadow: '0 40px 90px rgba(74,48,30,0.32), 0 0 0 11px #1c1714, 0 0 0 13px #2c2520',
      overflow: 'hidden', display: 'flex', flexDirection: 'column', position: 'relative',
    }}>
      <StatusBar />
      <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>{children}</div>
      {nav && <BottomNav tab={tab} onTab={onTab} onHost={onHost} />}
      {onToggleDark && (
        <button onClick={onToggleDark} aria-label="Toggle theme" style={{
          position: 'absolute', top: 50, right: 16, width: 34, height: 34, borderRadius: '50%',
          border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text-secondary)',
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 5,
        }}>
          <span className="material-symbols-rounded" style={{ fontSize: 18 }}>{dark ? 'light_mode' : 'dark_mode'}</span>
        </button>
      )}
    </div>
  );
}

Object.assign(window, { PhoneFrame });