import{b as o,a as p,n as u}from"./property-ChPqBGW_.js";import{t as g}from"./custom-element-C-crYl4r.js";import{r as d}from"./state-BnFRu-9h.js";import{B as h}from"./base-element-8qyqvBFG.js";import{g as n}from"./actions-YOzDHBVE.js";import{R as f,s as m,a as x,b as v,c as y}from"./selectors-Da9iPvcy.js";import{S as w}from"./store-controller-z1N-z-2D.js";import"./index-DWRYsVdq.js";import"./websocket-client-DkWX_K5z.js";var k=Object.defineProperty,j=Object.getOwnPropertyDescriptor,a=(t,e,i,l)=>{for(var r=l>1?void 0:l?j(e,i):e,b=t.length-1,c;b>=0;b--)(c=t[b])&&(r=(l?c(e,i,r):c(r))||r);return l&&r&&k(e,i,r),r};let s=class extends h{constructor(){super("MbLobbyPanel"),this.storeId="default",this.isHost=!1,this.lobbyEnabled=!1,this.isInLobby=!1,this.waitingUsers=[]}connectedCallback(){super.connectedCallback(),this.setupStoreController(),n(this.storeId).getLobbyStatus()}disconnectedCallback(){super.disconnectedCallback()}setupStoreController(){const t=f.getInstance(this.storeId);this.storeCtrl=new w(this,t),t.subscribeWithSelector(m,e=>{this.isHost=e?.role==="host"}),t.subscribeWithSelector(x,e=>{this.lobbyEnabled=e}),t.subscribeWithSelector(v,e=>{this.isInLobby=e}),t.subscribeWithSelector(y,e=>{this.waitingUsers=e})}formatTime(t){const e=Math.floor((Date.now()-t)/6e4);if(e<1)return"Just now";if(e<60)return`${e} minutes ago`;const i=Math.floor(e/60);return i<24?`${i} hours ago`:`${Math.floor(i/24)} days ago`}getAvatarColor(t){const e=["#667eea","#764ba2","#f093fb","#f5576c","#4facfe","#00f2fe","#43e97b","#38f9d7"],i=t.charCodeAt(0)%e.length;return e[i]}getInitials(t){return t.split(" ").map(e=>e[0]).join("").toUpperCase().slice(0,2)}handleAdmit(t){n(this.storeId).admitUser(t)}handleReject(t){n(this.storeId).rejectUser(t)}handleAdmitAll(){n(this.storeId).admitAll()}handleRejectAll(){n(this.storeId).rejectAll()}renderWaitingList(){return this.waitingUsers.length===0?o`
        <div class="empty-state">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
            />
          </svg>
          <p>No users waiting</p>
        </div>
      `:o`
      <div class="waiting-list">
        ${this.waitingUsers.map(t=>o`
            <div class="waiting-user">
              <div class="user-info">
                <div
                  class="user-avatar"
                  style="background: ${this.getAvatarColor(t.userName)}"
                >
                  ${this.getInitials(t.userName)}
                </div>
                <div class="user-details">
                  <div class="user-name">${t.userName}</div>
                  <div class="user-time">Waiting ${this.formatTime(t.joinTime)}</div>
                </div>
              </div>
              <div class="user-actions">
                <button class="action-button admit-button" @click=${()=>this.handleAdmit(t.userId)}>
                  Admit
                </button>
                <button class="action-button reject-button" @click=${()=>this.handleReject(t.userId)}>
                  Reject
                </button>
              </div>
            </div>
          `)}
      </div>
      ${this.waitingUsers.length>1?o`
            <div class="bulk-actions">
              <button class="bulk-button admit" @click=${()=>this.handleAdmitAll()}>Admit all</button>
              <button class="bulk-button reject" @click=${()=>this.handleRejectAll()}>Reject all</button>
            </div>
          `:""}
    `}renderInLobby(){return o`
      <div class="in-lobby-state">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <h3>You are in the waiting room</h3>
        <p>Please wait for the host to admit you</p>
      </div>
    `}render(){return this.isHost?o`
      <div class="lobby-header">
        <div class="lobby-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
            />
          </svg>
          Waiting room
          ${this.waitingUsers.length>0?o`<span class="waiting-badge">${this.waitingUsers.length}</span>`:""}
        </div>
        <div class="lobby-status ${this.lobbyEnabled?"enabled":"disabled"}">
          ${this.lobbyEnabled?"Enabled":"Disabled"}
        </div>
      </div>
      ${this.renderWaitingList()}
    `:this.isInLobby?this.renderInLobby():o`
        <div class="non-host-notice">
          <p>The host has disabled the waiting room</p>
        </div>
      `}};s.styles=p`
    :host {
      display: block;
      padding: 16px;
      background: #1a1a1a;
      border-radius: 8px;
      color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .lobby-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #333;
    }

    .lobby-title {
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .lobby-title svg {
      width: 20px;
      height: 20px;
    }

    .lobby-status {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 12px;
      background: #333;
    }

    .lobby-status.enabled {
      background: #10b981;
      color: #fff;
    }

    .lobby-status.disabled {
      background: #6b7280;
      color: #fff;
    }

    .waiting-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .empty-state {
      text-align: center;
      padding: 32px;
      color: #6b7280;
    }

    .empty-state svg {
      width: 48px;
      height: 48px;
      margin-bottom: 12px;
      opacity: 0.5;
    }

    .waiting-user {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      background: #2a2a2a;
      border-radius: 6px;
      transition: background 0.2s;
    }

    .waiting-user:hover {
      background: #333;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 16px;
    }

    .user-details {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .user-name {
      font-weight: 500;
      font-size: 14px;
    }

    .user-time {
      font-size: 12px;
      color: #6b7280;
    }

    .user-actions {
      display: flex;
      gap: 8px;
    }

    .action-button {
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .admit-button {
      background: #10b981;
      color: white;
    }

    .admit-button:hover {
      background: #059669;
    }

    .reject-button {
      background: #ef4444;
      color: white;
    }

    .reject-button:hover {
      background: #dc2626;
    }

    .bulk-actions {
      display: flex;
      gap: 8px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid #333;
    }

    .bulk-button {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 6px;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .bulk-button.admit {
      background: #10b981;
      color: white;
    }

    .bulk-button.admit:hover {
      background: #059669;
    }

    .bulk-button.reject {
      background: #ef4444;
      color: white;
    }

    .bulk-button.reject:hover {
      background: #dc2626;
    }

    .waiting-badge {
      background: #f59e0b;
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: 8px;
    }

    .in-lobby-state {
      text-align: center;
      padding: 32px;
    }

    .in-lobby-state svg {
      width: 64px;
      height: 64px;
      margin-bottom: 16px;
      color: #f59e0b;
    }

    .in-lobby-state h3 {
      margin: 0 0 8px 0;
      font-size: 20px;
    }

    .in-lobby-state p {
      margin: 0;
      color: #6b7280;
    }

    .non-host-notice {
      text-align: center;
      padding: 32px;
      color: #6b7280;
    }
  `;a([u({type:String,attribute:"store-id"})],s.prototype,"storeId",2);a([d()],s.prototype,"isHost",2);a([d()],s.prototype,"lobbyEnabled",2);a([d()],s.prototype,"isInLobby",2);a([d()],s.prototype,"waitingUsers",2);s=a([g("mb-lobby-panel")],s);export{s as MbLobbyPanel};
