// Mobile app — wraps variants in iOS-style device frame, exposes variant switcher

function MobileApp() {
  const variant = 'command';
  const [screen, setScreen] = React.useState('chat-empty');
  const [activePeer, setActivePeer] = React.useState(null);
  // null = closed, otherwise one of 'handle' | 'share' | 'scan'
  const [showAdd, setShowAdd] = React.useState(null);
  const [privateMode, setPrivateMode] = React.useState(false);
  const [activeGroupId, setActiveGroupId] = React.useState(null);
  // null | { caller, kind }  — active call overlay
  const [activeCall, setActiveCall] = React.useState(null);
  const [incomingCall, setIncomingCall] = React.useState(null);

  const variantProps = {
    screen, setScreen, activePeer, setActivePeer, showAdd, setShowAdd,
    privateMode, setPrivateMode, activeGroupId, setActiveGroupId,
    activeCall, setActiveCall, incomingCall, setIncomingCall,
  };

  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'radial-gradient(ellipse at 50% 40%, #1a1c22 0%, #0a0b0d 100%)',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {/* screen selector chips */}
      <div style={{ display: 'flex', gap: 6, justifyContent: 'center', padding: '20px 24px 16px', flexWrap: 'wrap', flexShrink: 0 }}>
        {[
          { id: 'setup', label: 'Setup' },
          { id: 'ntp', label: 'Home' },
          { id: 'typing', label: 'Typing' },
          { id: 'typing-results', label: 'Typing · results' },
          { id: 'tabs', label: 'Tabs' },
          { id: 'private', label: '🎭 Private' },
          { id: 'chat', label: 'Chat' },
          { id: 'chat-empty', label: 'Chat · empty' },
          { id: 'thread-empty', label: 'New chat' },
          { id: 'mesh', label: 'Mesh' },
          { id: 'calls', label: 'Calls' },
          { id: 'incoming-call', label: '☎ Incoming' },
          { id: 'in-call', label: '📞 In call' },
          { id: 'add', label: '+ Add' },
        ].map(s => (
          <button key={s.id} onClick={() => {
            if (s.id === 'add') { setScreen('chat'); setShowAdd('handle'); }
            else if (s.id === 'private') {
              setShowAdd(null); setPrivateMode(true); setScreen('private-ntp');
            }
            else if (s.id === 'incoming-call') {
              setShowAdd(null); setPrivateMode(false);
              setIncomingCall({ caller: M_CALL_LOG[0], kind: 'video' });
            }
            else if (s.id === 'in-call') {
              setShowAdd(null); setPrivateMode(false);
              setActiveCall({ caller: M_CALL_LOG[0], kind: 'video' });
            }
            else if (s.id === 'thread-empty') {
              setShowAdd(null);
              setActivePeer({ name: 'Maya Chen', initials: 'MC', bg: '#A78BFA', conn: 'ble', online: true, empty: true, connectedWhen: '2 min ago' });
              setScreen('thread-empty');
            }
            else { setShowAdd(null); setPrivateMode(false); setScreen(s.id); }
          }} style={{
            padding: '5px 11px', borderRadius: 999,
            background:
              (s.id === 'add' && showAdd) ||
              (s.id === 'private' && privateMode) ||
              screen === s.id ||
              (s.id === 'chat' && screen === 'thread' && !showAdd) ||
              (s.id === 'tabs' && screen === 'group-detail')
                ? (s.id === 'private' ? 'rgba(167,139,250,0.18)' : 'rgba(255,255,255,0.1)') : 'transparent',
            color:
              (s.id === 'add' && showAdd) ||
              (s.id === 'private' && privateMode) ||
              screen === s.id ||
              (s.id === 'chat' && screen === 'thread' && !showAdd) ||
              (s.id === 'tabs' && screen === 'group-detail')
                ? (s.id === 'private' ? '#C4B5FD' : '#ECECEE') : 'rgba(236,236,238,0.45)',
            border: '1px solid ' + ((s.id === 'private' && privateMode) ? 'rgba(167,139,250,0.4)' : 'rgba(255,255,255,0.08)'),
            cursor: 'pointer',
            fontSize: 11, fontFamily: 'Inter, sans-serif',
          }}>{s.label}</button>
        ))}
      </div>

      {/* device frame */}
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'flex-start', padding: '0 24px 24px', overflow: 'auto' }}>
        <MDevice>
          <div style={{ position: 'relative', width: '100%', height: '100%' }}>
            {screen === 'setup'
              ? <MFirstRunFlow onComplete={() => setScreen('ntp')}/>
              : <NavOptionCommand {...variantProps}/>}

            {/* Call overlays — rendered at MobileApp level so they appear over ANY screen */}
            {activeCall && (
              <MInCall caller={activeCall.caller} kind={activeCall.kind}
                onHangUp={() => setActiveCall(null)}/>
            )}
            {incomingCall && (
              <MIncomingCall caller={incomingCall.caller}
                onAccept={() => { setActiveCall({ caller: incomingCall.caller, kind: incomingCall.kind }); setIncomingCall(null); }}
                onDecline={() => setIncomingCall(null)}/>
            )}
          </div>
        </MDevice>
      </div>

      {/* bottom info strip */}
      <div style={{
        position: 'fixed', bottom: 0, left: 0, right: 0,
        padding: '10px 20px', background: 'rgba(10,11,13,0.85)',
        borderTop: '1px solid rgba(255,255,255,0.06)',
        backdropFilter: 'blur(12px)', zIndex: 100,
        display: 'flex', alignItems: 'center', gap: 16,
        fontSize: 11, fontFamily: 'JetBrains Mono, monospace', color: 'rgba(236,236,238,0.55)',
        pointerEvents: 'none',
      }}>
        <span style={{ color: '#6EE7B7' }}>●</span>
        <span style={{ flex: 1 }}>{screen === 'setup' ? 'First-run · 6 screens · Welcome → Password → Profile → Setup → Sync → Done' : 'Add connection · QR-first sheet · Share / Scan / Connect by handle'}</span>
      </div>
    </div>
  );
}

Object.assign(window, { MobileApp });