import{i as u,a as h,b as l,n as a}from"./property-ChPqBGW_.js";import{r as m}from"./state-BnFRu-9h.js";var v=Object.defineProperty,o=(p,e,s,t)=>{for(var i=void 0,d=p.length-1,c;d>=0;d--)(c=p[d])&&(i=c(e,s,i)||i);return i&&v(e,s,i),i};const n=class n extends u{constructor(){super(...arguments),this.users=[],this.localUserId="",this.sortBy="joinTime",this.groupByRole=!1,this.showAvatar=!0,this.showRole=!0,this.showJoinTime=!1,this.selectable=!1,this.selectedUserIds=[],this.maxHeight=400,this.searchEnabled=!1,this.emptyText="No users",this.title="Online users",this._searchKeyword="",this._filteredUsers=[]}willUpdate(e){(e.has("users")||e.has("_searchKeyword"))&&(this._filteredUsers=this.filterAndSortUsers())}filterAndSortUsers(){let e=[...this.users];if(this.searchEnabled&&this._searchKeyword){const s=this._searchKeyword.toLowerCase();e=e.filter(t=>t.userName?.toLowerCase().includes(s)||t.userId.toLowerCase().includes(s))}return e.sort((s,t)=>{switch(this.sortBy){case"name":return(s.userName||s.userId).localeCompare(t.userName||t.userId);case"joinTime":return(s.joinTime||0)-(t.joinTime||0);case"role":return(s.role||"").localeCompare(t.role||"");default:return 0}}),e}groupUsersByRole(e){const s=new Map;return e.forEach(t=>{const i=t.role||"unknown";s.has(i)||s.set(i,[]),s.get(i).push(t)}),s}handleSearch(e){const s=e.target;this._searchKeyword=s.value,this.emitEvent("search",{keyword:this._searchKeyword})}handleUserClick(e){this.emitEvent("user-click",e.detail)}handleUserSelect(e){const{userId:s,selected:t}=e.detail;t?this.selectedUserIds.includes(s)||(this.selectedUserIds=[...this.selectedUserIds,s]):this.selectedUserIds=this.selectedUserIds.filter(i=>i!==s),this.emitEvent("user-select",{userId:s,selected:t})}emitEvent(e,s){this.dispatchEvent(new CustomEvent(e,{detail:s,bubbles:!0,composed:!0}))}getRoleGroupTitle(e){return{host:"Host",cohost:"Co-host",participant:"Participants",audience:"Audience",admin:"Admin"}[e]||"Other"}render(){const e=this._filteredUsers,s=e.length;return l`
      <div class="user-list">
        <div class="list-header">
          <span class="list-title">${this.title}</span>
          <span class="user-count">${s}</span>
        </div>

        ${this.searchEnabled?l`
          <div class="search-box">
            <input
              class="search-input"
              type="text"
              placeholder="Search users..."
              .value=${this._searchKeyword}
              @input=${this.handleSearch}
            />
          </div>
        `:""}

        <div class="users-container" style="--max-height: ${this.maxHeight}px">
          ${s===0?l`
            <div class="empty-state">
              <div class="empty-icon">👥</div>
              <div class="empty-text">${this.emptyText}</div>
            </div>
          `:this.groupByRole?this.renderGroupedUsers(e):this.renderUserList(e)}
        </div>
      </div>
    `}renderUserList(e){return l`
      <div class="users">
        ${e.map(s=>l`
          <m7s-user-item
            .user=${s}
            .isLocal=${s.userId===this.localUserId}
            .showAvatar=${this.showAvatar}
            .showRole=${this.showRole}
            .showJoinTime=${this.showJoinTime}
            .selected=${this.selectedUserIds.includes(s.userId)}
            .selectable=${this.selectable}
            @user-click=${this.handleUserClick}
            @user-select=${this.handleUserSelect}
          ></m7s-user-item>
        `)}
      </div>
    `}renderGroupedUsers(e){const s=this.groupUsersByRole(e),t=Array.from(s.keys()).sort();return l`
      ${t.map(i=>l`
        <div class="user-group">
          <div class="group-header">
            <span>${this.getRoleGroupTitle(i)}</span>
            <span class="group-count">(${s.get(i).length})</span>
          </div>
          <div class="users">
            ${s.get(i).map(d=>l`
              <m7s-user-item
                .user=${d}
                .isLocal=${d.userId===this.localUserId}
                .showAvatar=${this.showAvatar}
                .showRole=${!1}
                .showJoinTime=${this.showJoinTime}
                .selected=${this.selectedUserIds.includes(d.userId)}
                .selectable=${this.selectable}
                @user-click=${this.handleUserClick}
                @user-select=${this.handleUserSelect}
              ></m7s-user-item>
            `)}
          </div>
        </div>
      `)}
    `}};n.styles=h`
    :host {
      display: block;
      width: 100%;
    }

    .user-list {
      display: flex;
      flex-direction: column;
      background: var(--m7s-userlist-bg, var(--m7s-bg-primary, white));
      border-radius: var(--m7s-userlist-radius, var(--m7s-radius-md, 8px));
      overflow: hidden;
    }

    .list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--m7s-userlist-header-padding-y, var(--m7s-spacing-md, 12px)) var(--m7s-userlist-header-padding-x, var(--m7s-spacing-lg, 16px));
      border-bottom: var(--m7s-border-width, 1px) solid var(--m7s-userlist-border-color, var(--m7s-border-color, #f0f0f0));
      min-height: var(--m7s-userlist-item-height, 48px);
    }

    .list-title {
      font-size: var(--m7s-userlist-title-font-size, var(--m7s-font-size-md, 14px));
      font-weight: var(--m7s-font-weight-semibold, 600);
      color: var(--m7s-userlist-title-color, var(--m7s-text-primary, #333));
    }

    .user-count {
      font-size: var(--m7s-userlist-count-font-size, var(--m7s-font-size-xs, 12px));
      color: var(--m7s-userlist-count-color, var(--m7s-text-tertiary, #999));
      background: var(--m7s-userlist-count-bg, var(--m7s-bg-tertiary, #f5f5f5));
      padding: var(--m7s-spacing-xs, 2px) var(--m7s-spacing-sm, 8px);
      border-radius: var(--m7s-userlist-count-radius, 10px);
    }

    /* Search box */
    .search-box {
      padding: var(--m7s-userlist-search-padding-y, var(--m7s-spacing-sm, 8px)) var(--m7s-userlist-search-padding-x, var(--m7s-spacing-lg, 16px));
      border-bottom: var(--m7s-border-width, 1px) solid var(--m7s-userlist-border-color, var(--m7s-border-color, #f0f0f0));
    }

    .search-input {
      width: 100%;
      padding: var(--m7s-userlist-search-input-padding-y, var(--m7s-spacing-sm, 8px)) var(--m7s-userlist-search-input-padding-x, var(--m7s-spacing-md, 12px));
      border: var(--m7s-border-width, 1px) solid var(--m7s-userlist-search-border-color, var(--m7s-border-color, #d9d9d9));
      border-radius: var(--m7s-userlist-search-radius, var(--m7s-radius-sm, 4px));
      font-size: var(--m7s-userlist-search-font-size, var(--m7s-font-size-md, 14px));
      outline: none;
      transition: border-color var(--m7s-transition-fast, 0.2s);
      background: var(--m7s-userlist-search-bg, var(--m7s-bg-primary, white));
      color: var(--m7s-userlist-search-color, var(--m7s-text-primary, #333));
    }

    .search-input:focus {
      border-color: var(--m7s-userlist-search-focus-border-color, var(--m7s-primary, #1890ff));
    }

    .search-input::placeholder {
      color: var(--m7s-userlist-search-placeholder-color, var(--m7s-text-quaternary, #bfbfbf));
    }

    /* User list */
    .users-container {
      overflow-y: auto;
      max-height: var(--m7s-userlist-max-height, var(--max-height, 400px));
    }

    .user-group {
      border-bottom: var(--m7s-border-width, 1px) solid var(--m7s-userlist-border-color, var(--m7s-border-color, #f0f0f0));
    }

    .user-group:last-child {
      border-bottom: none;
    }

    .group-header {
      display: flex;
      align-items: center;
      gap: var(--m7s-userlist-group-gap, var(--m7s-spacing-sm, 8px));
      padding: var(--m7s-userlist-group-padding-y, var(--m7s-spacing-sm, 8px)) var(--m7s-userlist-group-padding-x, var(--m7s-spacing-lg, 16px));
      background: var(--m7s-userlist-group-bg, var(--m7s-bg-secondary, #fafafa));
      font-size: var(--m7s-userlist-group-font-size, var(--m7s-font-size-xs, 12px));
      color: var(--m7s-userlist-group-color, var(--m7s-text-secondary, #666));
      font-weight: var(--m7s-font-weight-medium, 500);
    }

    .group-count {
      color: var(--m7s-userlist-group-count-color, var(--m7s-text-tertiary, #999));
    }

    .users {
      padding: var(--m7s-userlist-users-padding, var(--m7s-spacing-xs, 4px));
    }

    /* Empty state */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--m7s-userlist-empty-padding-y, 40px) var(--m7s-userlist-empty-padding-x, var(--m7s-spacing-lg, 20px));
      color: var(--m7s-userlist-empty-color, var(--m7s-text-tertiary, #999));
      text-align: center;
    }

    .empty-icon {
      font-size: var(--m7s-userlist-empty-icon-size, 48px);
      margin-bottom: var(--m7s-userlist-empty-icon-gap, var(--m7s-spacing-md, 12px));
      opacity: 0.5;
    }

    .empty-text {
      font-size: var(--m7s-userlist-empty-font-size, var(--m7s-font-size-md, 14px));
    }

    /* Footer */
    .list-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--m7s-userlist-footer-padding-y, var(--m7s-spacing-sm, 8px)) var(--m7s-userlist-footer-padding-x, var(--m7s-spacing-lg, 16px));
      border-top: var(--m7s-border-width, 1px) solid var(--m7s-userlist-border-color, var(--m7s-border-color, #f0f0f0));
      font-size: var(--m7s-userlist-footer-font-size, var(--m7s-font-size-xs, 12px));
      color: var(--m7s-userlist-footer-color, var(--m7s-text-tertiary, #999));
    }
  `;let r=n;o([a({type:Array})],r.prototype,"users");o([a({type:String,attribute:"local-user-id"})],r.prototype,"localUserId");o([a({type:String,attribute:"sort-by"})],r.prototype,"sortBy");o([a({type:Boolean,attribute:"group-by-role"})],r.prototype,"groupByRole");o([a({type:Boolean,attribute:"show-avatar"})],r.prototype,"showAvatar");o([a({type:Boolean,attribute:"show-role"})],r.prototype,"showRole");o([a({type:Boolean,attribute:"show-join-time"})],r.prototype,"showJoinTime");o([a({type:Boolean})],r.prototype,"selectable");o([a({type:Array,attribute:"selected-user-ids"})],r.prototype,"selectedUserIds");o([a({type:Number,attribute:"max-height"})],r.prototype,"maxHeight");o([a({type:Boolean,attribute:"search-enabled"})],r.prototype,"searchEnabled");o([a({type:String,attribute:"empty-text"})],r.prototype,"emptyText");o([a({type:String})],r.prototype,"title");o([m()],r.prototype,"_searchKeyword");o([m()],r.prototype,"_filteredUsers");customElements.get("m7s-user-list")||customElements.define("m7s-user-list",r);export{r as UserList};
