<dialog id="create-channel-dialog">
  <div class="dialog-backdrop">
    <div class="dialog-box">
      <div class="dialog-title"><h2>Create Channel</h2></div>
      <div class="dialog-content">
        <div class="dialog-form">
          <input type="text" id="channel-name-input" class="dialog-input" placeholder="Channel name" autocomplete="off">
          <input type="text" id="channel-description-input" class="dialog-input" placeholder="Description (optional)" autocomplete="off">
          <label class="dialog-checkbox-label">
            <input type="checkbox" id="channel-private-input">
            <span>Private channel</span>
          </label>
        </div>
      </div>
      <div class="dialog-actions">
        <button class="dialog-button secondary btn-cancel">Cancel</button>
        <button class="dialog-button primary btn-create">Create</button>
      </div>
    </div>
  </div>
</dialog>

<script>
class CreateChannelDialog {
  constructor() {
    this.dialog = document.getElementById('create-channel-dialog');
    this.nameInput = document.getElementById('channel-name-input');
    this.descriptionInput = document.getElementById('channel-description-input');
    this.privateInput = document.getElementById('channel-private-input');
    this.createButton = this.dialog.querySelector('.btn-create');
    this.cancelButton = this.dialog.querySelector('.btn-cancel');
    this._initEventListeners();
  }

  _initEventListeners() {
    this.cancelButton.addEventListener('click', () => this.close());
    this.createButton.addEventListener('click', () => this.create());
    this.nameInput.addEventListener('keyup', (e) => {
      if (e.key === 'Enter') this.create();
    });
  }

  show() {
    this.nameInput.value = '';
    this.descriptionInput.value = '';
    this.privateInput.checked = false;
    this.dialog.showModal();
    this.nameInput.focus();
  }

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

  async create() {
    const name = this.nameInput.value.trim();
    if (!name) {
      this.nameInput.classList.add('error');
      return;
    }
    this.nameInput.classList.remove('error');
    this.createButton.disabled = true;
    try {
      const result = await window.app.rpc.createChannel(
        name,
        this.descriptionInput.value.trim() || null,
        this.privateInput.checked
      );
      if (result && result.uid) {
        this.close();
        window.location.href = `/channel/${result.uid}.html`;
      } else if (result && result.error) {
        this.nameInput.classList.add('error');
        this.nameInput.title = result.error;
      }
    } catch (err) {
      this.nameInput.classList.add('error');
      this.nameInput.title = 'Failed to create channel';
    } finally {
      this.createButton.disabled = false;
    }
  }
}

const createChannelDialog = new CreateChannelDialog();

function showCreateChannel() {
  createChannelDialog.show();
}
</script>