<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,interactive-widget=resizes-content"/>
<meta name="theme-color" content="#020617"/>
<meta name="mobile-web-app-capable" content="yes"/>
<title>Spaceship</title>
<link rel="stylesheet" href="css/app.css?v=20260603e"/>
</head>
<body>

<!-- ═══ NOTIFICATION BANNER ══════════════════════════════════ -->
<div class="notif-banner" id="notif-banner">
  <div class="nb-av" id="nb-av">?</div>
  <div class="nb-body">
    <div class="nb-name" id="nb-name"></div>
    <div class="nb-txt" id="nb-txt"></div>
  </div>
</div>

<!-- ═══ AUTH SCREEN ══════════════════════════════════════════ -->
<div id="auth">
  <div class="auth-card">
    <div class="auth-logo">
      <div class="brand-mark" aria-hidden="true">🚀</div>
      <div class="brand-copy">
        <span>Spaceship</span>
        <small>Ultra-premium encrypted Gaming Platform</small>
      </div>
    </div>

    <div class="tab-row">
      <button class="tab active" onclick="switchTab('login')">Sign In</button>
      <button class="tab"        onclick="switchTab('reg')">Register</button>
    </div>

    <div id="tab-login">
      <input type="text"     id="lu" placeholder="Username"  autocomplete="username"/>
      <input type="password" id="lp" placeholder="Password"  autocomplete="current-password"/>
      <button class="btn-wa" onclick="login()">Sign In</button>
    </div>

    <div id="tab-reg" style="display:none;">
      <input type="text"     id="ru" placeholder="Choose a username" autocomplete="username"/>
      <input type="password" id="rp" placeholder="Choose a password (min 6)" autocomplete="new-password"/>
      <button class="btn-wa" onclick="register()">Create Account</button>
    </div>

    <p id="auth-err" class="auth-err"></p>
    <p class="auth-note">🔒 Games are end-to-end encrypted.<br/>Powered to you by: HyperHub.</p>
  </div>
</div>

<!-- ═══ MAIN APP ══════════════════════════════════════════════ -->
<div id="app" style="display:none;">

  <!-- SIDEBAR -->
  <aside id="sidebar">
    <div class="s-hdr">
      <div class="s-av" id="my-av" onclick="openProfileModal()" title="Open profile">?</div>
      <div class="s-title"><span>Spaceship</span><small>Encrypted command deck</small></div>
      <div class="s-acts">
        <button class="icon-btn" title="New chat" onclick="document.getElementById('srch-inp').focus()">✏️</button>
        <button class="icon-btn logout-btn" title="Log out securely" onclick="signOut()">⏻</button>
      </div>
    </div>

    <div class="s-srch">
      <div class="srch-bx">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
        <input type="text" id="srch-inp" placeholder="Search chats, names, or start a new secure chat" oninput="onSearch(this.value)"/>
      </div>
    </div>

    <div class="s-premium-cards" aria-label="Spaceship security status">
      <div class="sp-mini-card secure">
        <strong>🛡️ Secure</strong>
        <small>Password lock enabled</small>
      </div>
      <div class="sp-mini-card timezone">
        <strong>🕒 Timezone</strong>
        <small>Auto detected</small>
      </div>
    </div>

    <div class="s-tabs">
      <div class="s-tab active">CHATS</div>
      <div class="s-tab">STATUS</div>
      <div class="s-tab">CALLS</div>
    </div>

    <div id="chat-list"></div>
  </aside>

  <!-- MAIN -->
  <main id="main">

    <!-- Empty state -->
    <div id="empty-state">
      <div class="es-icon">🚀</div>
      <h2>Spaceship</h2>
      <p>Send and receive password-protected encrypted Games in a premium command-deck interface.<br/>Your last seen status uses your detected timezone for better accuracy.</p>
      <div class="e2e-note">🔒 Your personal messages are end-to-end encrypted</div>
    </div>

    <!-- Chat view -->
    <div id="chat-view">

      <!-- Chat header -->
      <div class="ch-hdr">
        <button class="icon-btn" onclick="backToList()" style="display:none;" id="back-btn">←</button>
        <div class="ch-av" id="ch-av">
          <span id="ch-av-txt">?</span>
        </div>
        <div class="ch-info" id="ch-info">
          <div class="ch-name" id="ch-name">—</div>
          <div class="ch-status" id="ch-status"></div>
        </div>
        <div class="ch-acts">
          <button class="icon-btn" title="Video call" onclick="startCall('video')">📹</button>
          <button class="icon-btn" title="Voice call" onclick="startCall('voice')">📞</button>
          <button class="icon-btn" title="Upload chat wallpaper" onclick="chooseWallpaper()">🖼️</button>
          <button class="icon-btn" title="Search">🔍</button>
          <button class="icon-btn" id="lock-btn" title="Password protect encrypted messages" onclick="toggleChatLockActive(event)">🔒</button>
          <button class="icon-btn" id="clear-chat-btn" title="Clear chat history" onclick="clearActiveChatHistory()">🧹</button>
          <button class="icon-btn logout-btn" title="Log out securely" onclick="signOut()">⏻</button>
        </div>
      </div>

      <!-- Messages -->
      <div id="msgs"></div>

      <!-- Reply bar -->
      <div id="rply-bar">
        <div class="rb-cnt">
          <div class="rb-nm" id="rb-nm"></div>
          <div class="rb-tx" id="rb-tx"></div>
        </div>
        <button onclick="clearReply()" style="background:none;border:none;cursor:pointer;font-size:20px;color:var(--wa-sub);">✕</button>
      </div>

      <!-- Input area -->
      <div id="input-area">
        <button id="emoji-btn" onclick="toggleEmoji(event)" title="Emoji">😊</button>
        <button id="gif-btn" onclick="toggleGif(event)" title="GIF">GIF</button>
        <button id="attach-btn" onclick="toggleAttach(event)" title="Attach">📎</button>
        <div class="input-box">
          <textarea id="msg-input" rows="1" placeholder="Write a secure message"></textarea>
        </div>
        <button id="send-btn" onclick="sendMessage()">&#10148;</button>

        <!-- Emoji tray -->
        <div class="emoji-tray" id="emoji-tray" onclick="event.stopPropagation()">
          <div class="emoji-grid" id="emoji-grid"></div>
        </div>

        <!-- Attach tray -->
        <div class="attach-tray" id="attach-tray" onclick="event.stopPropagation()">
          <div class="attach-grid" id="attach-grid"></div>
        </div>
      </div>
    </div>

  </main>
</div>

<!-- Context menu -->
<div class="ctx-menu" id="ctx-menu" onclick="event.stopPropagation()">
  <div class="ctx-item" onclick="ctxReply()">↩️ Reply</div>
  <div class="ctx-item" onclick="ctxForward()">↗️ Forward</div>
  <div class="ctx-item" onclick="ctxCopy()">📋 Copy</div>
  <div class="ctx-item" onclick="ctxStar()">⭐ Star</div>
  <div class="ctx-item danger" onclick="ctxDelete(false)">🗑️ Delete for me</div>
  <div class="ctx-item danger" onclick="ctxDelete(true)">🗑️ Delete for everyone</div>
</div>

<!-- Reaction quick-pick -->
<div class="rxn-picker" id="rxn-picker" onclick="event.stopPropagation()"></div>

<!-- Image/Video viewer -->
<div id="img-viewer" onclick="this.classList.remove('open')"></div>

<!-- Profile editor -->
<div id="profile-modal" onclick="closeProfileModal(event)">
  <div class="profile-card" onclick="event.stopPropagation()">
    <div class="profile-head">
      <h3>Profile</h3>
      <button onclick="closeProfileModal()" aria-label="Close">✕</button>
    </div>
    <div class="profile-avatar" id="profile-avatar">?</div>
    <label>Display name</label>
    <input type="text" id="profile-name" maxlength="80" placeholder="Name shown to other users"/>
    <div class="profile-sub">Login username: <strong id="profile-username"></strong></div>
    <label>About</label>
    <textarea id="profile-about" maxlength="255" rows="3" placeholder="About"></textarea>
    <div class="profile-sub" id="profile-locale">Timezone / country auto-detected</div>
    <button class="btn-wa" onclick="saveProfile()">Save Profile</button>
  </div>
</div>

<input type="file" id="wallpaper-input" accept="image/jpeg,image/png,image/gif,image/webp" hidden onchange="uploadWallpaper(this.files && this.files[0])"/>

<!-- GIF picker (self-contained popup; hidden via inline style so a stale or
     partial stylesheet can never let it sit in the input row and crush the
     message box). Visibility is controlled by JS. -->
<div id="gif-modal" style="display:none" onclick="gifModalBackdrop(event)">
  <div class="gif-card" onclick="event.stopPropagation()">
    <div class="profile-head">
      <h3>Send a GIF</h3>
      <button onclick="closeGif()" aria-label="Close">✕</button>
    </div>
    <div class="gif-search-bx">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
      <input type="text" id="gif-search" placeholder="Search GIFs"/>
    </div>
    <div class="gif-grid" id="gif-grid"></div>
    <div class="gif-credit">Powered by GIPHY</div>
  </div>
</div>

<!-- Unlock password modal (works in installed PWAs where prompt() is disabled) -->
<div id="unlock-modal" onclick="unlockModalBackdrop(event)">
  <div class="profile-card unlock-card" onclick="event.stopPropagation()">
    <div class="profile-head">
      <h3>🔐 Unlock chat</h3>
      <button onclick="cancelUnlock()" aria-label="Close">✕</button>
    </div>
    <p class="profile-sub" id="unlock-msg">Enter your account password to decrypt these messages.</p>
    <label>Account password</label>
    <input type="password" id="unlock-pw" autocomplete="current-password" placeholder="Account password"/>
    <p class="auth-err" id="unlock-err"></p>
    <button class="btn-wa" id="unlock-submit-btn" onclick="submitUnlock()">Unlock messages</button>
  </div>
</div>

<!-- Voice / Video call overlay -->
<div id="call-modal" class="call-modal">
  <div class="call-card">
    <div class="call-video-grid" id="call-video-grid">
      <div class="call-top-bar">
        <button type="button" class="call-top-btn" id="call-expand-btn" onclick="toggleCallFullscreen(event)" title="Full screen">↙</button>
        <div class="call-title-stack">
          <strong id="call-peer-name">—</strong>
          <span id="call-status-text">Preparing secure connection…</span>
          <span id="call-type-label" class="call-kicker">Voice call</span>
        </div>
        <button type="button" class="call-top-btn" id="call-add-btn" onclick="showAddParticipantNotice(event)" title="Add participant">👤+</button>
      </div>

      <div class="call-orbit" id="call-voice-avatar"><span id="call-peer-initial">?</span></div>

      <div class="call-video-tile remote-tile" id="remote-tile" onclick="setCallMainVideo('remote')" title="Tap to make this camera full screen">
        <video id="remote-video" autoplay playsinline muted></video>
        <span class="call-tile-label">Their camera</span>
      </div>
      <div class="call-video-tile local-tile" id="local-tile" onclick="setCallMainVideo('local')" title="Tap to make your camera full screen">
        <video id="local-video" autoplay muted playsinline></video>
        <button type="button" class="call-pip-flip" id="call-flip-btn" onclick="flipCamera(event)" title="Flip front/back camera">↻</button>
        <span class="call-tile-label">You</span>
      </div>

      <div class="call-more-panel" id="call-more-panel" onclick="event.stopPropagation()">
        <button type="button" class="call-more-item" id="call-share-btn" onclick="toggleScreenShare()">Share screen</button>
        <button type="button" class="call-more-item" onclick="toggleCallChatPanel(event)">Message / chat</button>
        <button type="button" class="call-more-item" onclick="openGifForCall(event)">GIF</button>
        <div class="call-camera-controls" id="call-camera-controls">
          <label for="call-camera-select">Camera priority</label>
          <select id="call-camera-select" onchange="changePreferredCamera(this.value)">
            <option value="user">Front / selfie camera first</option>
            <option value="environment">Back / rear camera first</option>
            <option value="auto">Browser default camera</option>
          </select>
        </div>
      </div>

      <div class="call-actions" id="call-actions">
        <button class="call-btn accept" id="call-accept-btn" onclick="acceptIncomingCall()"><span>✓</span><small>Accept</small></button>
        <button class="call-btn more" id="call-more-btn" onclick="toggleCallMore(event)"><span>•••</span><small>More</small></button>
        <button class="call-btn video" id="call-video-btn" onclick="toggleVideo()"><span>📹</span><small>Camera</small></button>
        <button class="call-btn speaker" id="call-speaker-btn" onclick="toggleSpeaker()"><span>🔊</span><small>Speaker</small></button>
        <button class="call-btn mute" id="call-mute-btn" onclick="toggleMute()"><span>🎙</span><small>Mute</small></button>
        <button class="call-btn end" onclick="endCall('end')"><span>☎</span><small>End</small></button>
      </div>
    </div>

    <audio id="remote-audio" autoplay playsinline></audio>

    <div class="call-chat-panel" id="call-chat-panel">
      <div class="call-chat-head">
        <span>In-call chat</span>
        <small>Emoji, GIF, and encrypted messages</small>
        <button type="button" class="call-chat-close" onclick="toggleCallChatPanel(event)">✕</button>
      </div>
      <div class="call-chat-log" id="call-chat-log"></div>
      <div class="call-chat-compose">
        <button type="button" class="call-chat-tool" onclick="toggleCallEmoji(event)" title="Emoji">😊</button>
        <button type="button" class="call-chat-tool" onclick="openGifForCall(event)" title="GIF">GIF</button>
        <input type="text" id="call-chat-input" placeholder="Message during the call…" onkeydown="handleCallChatKey(event)"/>
        <button type="button" onclick="sendCallChatMessage()">Send</button>
        <div class="call-emoji-tray" id="call-emoji-tray" onclick="event.stopPropagation()">
          <div class="emoji-grid" id="call-emoji-grid"></div>
        </div>
      </div>
    </div>
    <div class="call-note" id="call-note">Calls require HTTPS or localhost. Screen sharing depends on browser support; mobile browsers may not expose it.</div>
  </div>
</div>

<script src="js/crypto.js?v=20260603e"></script>
<script src="js/app.js?v=20260603e"></script>
</body>
</html>
