<dialog id="leave-channel-dialog">
  <div class="dialog-backdrop">
    <div class="dialog-box">
      <div class="dialog-title"><h2>Leave Channel</h2></div>
      <div class="dialog-content">
        <p>Are you sure you want to leave this channel?</p>
      </div>
      <div class="dialog-actions">
        <button class="dialog-button secondary btn-cancel">Cancel</button>
        <button class="dialog-button primary btn-leave">Leave</button>
      </div>
    </div>
  </div>
</dialog>

<script>
class LeaveChannelDialog {
  constructor() {
    this.dialog = document.getElementById('leave-channel-dialog');
    this.leaveButton = this.dialog.querySelector('.btn-leave');
    this.cancelButton = this.dialog.querySelector('.btn-cancel');
    this.channelUid = null;
    this._initEventListeners();
  }

  _initEventListeners() {
    this.cancelButton.addEventListener('click', () => this.close());
    this.leaveButton.addEventListener('click', () => this.leave());
  }

  show(channelUid) {
    this.channelUid = channelUid;
    this.dialog.showModal();
    this.cancelButton.focus();
  }

  close() {
    this.dialog.close();
  }

  async leave() {
    this.leaveButton.disabled = true;
    try {
      const result = await window.app.rpc.leaveChannel(this.channelUid);
      if (result && result.success) {
        this.close();
        window.location.href = '/';
      } else if (result && result.error) {
        alert(result.error);
      }
    } catch (err) {
      alert('Failed to leave channel');
    } finally {
      this.leaveButton.disabled = false;
    }
  }
}

const leaveChannelDialog = new LeaveChannelDialog();

function showLeaveChannel() {
  leaveChannelDialog.show('{{ channel.uid.value }}');
}
</script>