import{i as h,b as p,a as g,n as m}from"./property-ChPqBGW_.js";import{t as u}from"./custom-element-C-crYl4r.js";import{r as n}from"./state-BnFRu-9h.js";import{L as f}from"./index-DWRYsVdq.js";import{g as d}from"./actions-YOzDHBVE.js";import{R as b,s as w,d as v,e as x,f as P,g as S}from"./selectors-Da9iPvcy.js";import{S as y}from"./store-controller-z1N-z-2D.js";import"./websocket-client-DkWX_K5z.js";var T=Object.defineProperty,k=Object.getOwnPropertyDescriptor,r=(e,t,i,a)=>{for(var s=a>1?void 0:a?k(t,i):t,l=e.length-1,c;l>=0;l--)(c=e[l])&&(s=(a?c(t,i,s):c(s))||s);return a&&s&&T(t,i,s),s};let o=class extends h{constructor(){super(...arguments),this.storeId="default",this.logger=f.create("MbModerationPanel"),this.isHost=!1,this.hostOnlyRecording=!1,this.allowParticipantsToUnmute=!0,this.allowParticipantsToShareScreen=!0,this.allowParticipantsToChat=!0}connectedCallback(){super.connectedCallback(),this.setupStoreController(),d(this.storeId).getModeration()}disconnectedCallback(){super.disconnectedCallback()}setupStoreController(){const e=b.getInstance(this.storeId);this.storeCtrl=new y(this,e),e.subscribeWithSelector(w,t=>{this.isHost=t?.role==="host"}),e.subscribeWithSelector(v,t=>{this.hostOnlyRecording=t}),e.subscribeWithSelector(x,t=>{this.allowParticipantsToUnmute=t}),e.subscribeWithSelector(P,t=>{this.allowParticipantsToShareScreen=t}),e.subscribeWithSelector(S,t=>{this.allowParticipantsToChat=t})}handleToggle(e,t){const i={};e==="hostOnlyRecording"&&(i.hostOnlyRecording=t),e==="allowParticipantsToUnmute"&&(i.allowParticipantsToUnmute=t),e==="allowParticipantsToShareScreen"&&(i.allowParticipantsToShareScreen=t),e==="allowParticipantsToChat"&&(i.allowParticipantsToChat=t),d(this.storeId).updateModeration(i),this.logger.debug("Moderation setting toggled",{setting:e,value:t})}renderSettingItem(e,t,i,a){return p`
      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-title">${e}</div>
          <div class="setting-description">${t}</div>
        </div>
        <div
          class="toggle-switch ${i?"active":""}"
          @click=${()=>this.handleToggle(a,!i)}
        >
          <div class="toggle-knob"></div>
        </div>
      </div>
    `}renderRestrictedNotice(){return p`
      <div class="restricted-notice">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
          />
        </svg>
        <p>Only the host can change permission settings</p>
      </div>
    `}render(){return this.isHost?p`
      <div class="panel-header">
        <div class="panel-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
            />
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
            />
          </svg>
          Permissions
        </div>
      </div>
      <div class="settings-list">
        ${this.renderSettingItem("Only the host can record","Only the host can start/Stop recording",this.hostOnlyRecording,"hostOnlyRecording")}
        ${this.renderSettingItem("Allow participants to unmute","Participants can unmute their microphones",this.allowParticipantsToUnmute,"allowParticipantsToUnmute")}
        ${this.renderSettingItem("Allow participants to share screen","Participants can share their screen",this.allowParticipantsToShareScreen,"allowParticipantsToShareScreen")}
        ${this.renderSettingItem("Allow participants to send messages","Participants can send messages in chat",this.allowParticipantsToChat,"allowParticipantsToChat")}
      </div>
    `:this.renderRestrictedNotice()}};o.styles=g`
    :host {
      display: block;
      padding: 16px;
      background: #1a1a1a;
      border-radius: 8px;
      color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

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

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

    .settings-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      background: #2a2a2a;
      border-radius: 6px;
    }

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

    .setting-title {
      font-weight: 500;
      font-size: 14px;
    }

    .setting-description {
      font-size: 12px;
      color: #6b7280;
    }

    .toggle-switch {
      position: relative;
      width: 48px;
      height: 24px;
      background: #4b5563;
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .toggle-switch.active {
      background: #10b981;
    }

    .toggle-switch:hover {
      opacity: 0.9;
    }

    .toggle-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      transition: transform 0.2s;
    }

    .toggle-switch.active .toggle-knob {
      transform: translateX(24px);
    }

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

    .restricted-notice svg {
      width: 48px;
      height: 48px;
      margin-bottom: 12px;
      opacity: 0.5;
    }
  `;r([m({type:String,attribute:"store-id"})],o.prototype,"storeId",2);r([n()],o.prototype,"isHost",2);r([n()],o.prototype,"hostOnlyRecording",2);r([n()],o.prototype,"allowParticipantsToUnmute",2);r([n()],o.prototype,"allowParticipantsToShareScreen",2);r([n()],o.prototype,"allowParticipantsToChat",2);o=r([u("mb-moderation-panel")],o);export{o as MbModerationPanel};
