import{i as p,b as l,a as h,n as g}from"./property-ChPqBGW_.js";import{t as f}from"./custom-element-C-crYl4r.js";import{r as u}from"./state-BnFRu-9h.js";import{L as b}from"./index-DWRYsVdq.js";import{g as c}from"./actions-YOzDHBVE.js";import{R as v,h as m,i as x}from"./selectors-Da9iPvcy.js";import{S as C}from"./store-controller-z1N-z-2D.js";import"./websocket-client-DkWX_K5z.js";var k=Object.defineProperty,S=Object.getOwnPropertyDescriptor,i=(o,t,s,r)=>{for(var e=r>1?void 0:r?S(t,s):t,n=o.length-1,d;n>=0;n--)(d=o[n])&&(e=(r?d(t,s,e):d(e))||e);return r&&e&&k(t,s,e),e};let a=class extends p{constructor(){super(...arguments),this.storeId="default",this.logger=b.create("MbRoomStats"),this.stats={userCount:0,audioCount:0,videoCount:0,screenShareCount:0,lobbyCount:0},this.loading=!0}connectedCallback(){super.connectedCallback(),this.setupStoreController(),c().getRoomStats()}disconnectedCallback(){super.disconnectedCallback()}setupStoreController(){const o=v.getInstance(this.storeId);this.storeCtrl=new C(this,o),o.subscribeWithSelector(m,t=>{t&&(this.stats={userCount:t.userCount,audioCount:t.audioCount,videoCount:t.videoCount,screenShareCount:t.screenShareCount,lobbyCount:t.lobbyCount},this.loading=!1)}),o.subscribeWithSelector(x,t=>{this.stats.lobbyCount=t})}handleRefresh(){this.loading=!0,c().getRoomStats()}renderStatCard(o,t,s,r){return l`
      <div class="stat-card">
        <div class="stat-icon ${o}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            ${r}
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-value">${t}</div>
          <div class="stat-label">${s}</div>
        </div>
      </div>
    `}render(){return this.loading?l`
        <div class="loading-state">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
            />
          </svg>
          <p>Loading...</p>
        </div>
      `:l`
      <div class="stats-header">
        <div class="stats-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
            />
          </svg>
          Room stats
        </div>
        <button class="refresh-button" @click=${()=>this.handleRefresh()}>Refresh</button>
      </div>
      <div class="stats-grid">
        ${this.renderStatCard("users",this.stats.userCount,"Participants",`<path
            stroke-linecap="round"
            stroke-linejoin="round"
            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"
          />`)}
        ${this.renderStatCard("audio",this.stats.audioCount,"Audio active",`<path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
          />`)}
        ${this.renderStatCard("video",this.stats.videoCount,"Video active",`<path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
          />`)}
        ${this.renderStatCard("screen",this.stats.screenShareCount,"Share screen",`<path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
          />`)}
        ${this.renderStatCard("lobby",this.stats.lobbyCount,"Waiting room",`<path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
          />`)}
      </div>
    `}};a.styles=h`
    :host {
      display: block;
      padding: 16px;
      background: #1a1a1a;
      border-radius: 8px;
      color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .stats-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #333;
    }

    .stats-title {
      font-size: 18px;
      font-weight: 600;
    }

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

    .refresh-button {
      margin-left: auto;
      padding: 6px 12px;
      background: #2a2a2a;
      border: none;
      border-radius: 6px;
      color: #9ca3af;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .refresh-button:hover {
      background: #333;
      color: #ffffff;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .stat-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: #2a2a2a;
      border-radius: 6px;
      transition: background 0.2s;
    }

    .stat-card:hover {
      background: #333;
    }

    .stat-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      font-size: 20px;
    }

    .stat-icon.users {
      background: rgba(99, 102, 241, 0.2);
      color: #6366f1;
    }

    .stat-icon.audio {
      background: rgba(16, 185, 129, 0.2);
      color: #10b981;
    }

    .stat-icon.video {
      background: rgba(244, 63, 94, 0.2);
      color: #f43f5e;
    }

    .stat-icon.screen {
      background: rgba(245, 158, 11, 0.2);
      color: #f59e0b;
    }

    .stat-icon.lobby {
      background: rgba(168, 85, 247, 0.2);
      color: #a855f7;
    }

    .stat-icon svg {
      width: 20px;
      height: 20px;
    }

    .stat-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .stat-value {
      font-size: 24px;
      font-weight: 700;
    }

    .stat-label {
      font-size: 12px;
      color: #6b7280;
    }

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

    .loading-state svg {
      width: 32px;
      height: 32px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  `;i([g({type:String,attribute:"store-id"})],a.prototype,"storeId",2);i([u()],a.prototype,"stats",2);i([u()],a.prototype,"loading",2);a=i([f("mb-room-stats")],a);export{a as MbRoomStats};
