<script>
class ContainerDialogComponent extends HTMLElement {
  constructor() {
    super();
    this._channelUid = null;
    this._dialog = null;
    this._closeButton = null;
    this._startButton = null;
    this._restartButton = null;
    this._stopButton = null;
    this._statusSpan = null;
    this._actions = null;
    this._containerList = null;
  }

  connectedCallback() {
    this._channelUid = this.getAttribute('channel');
    // Render template
    this.innerHTML = `
      <dialog class="container-dialog">
        <div class="dialog-backdrop">
          <div class="dialog-box">
            <div class="dialog-title"><h2>Container</h2></div>
            <div class="dialog-content">
<table class="container-properties">
  <tr>
    <th>Name</th>
    <td><span class="container-name"></span></td>
  </tr>
  <tr>
    <th>Image</th>
    <td><span class="container-image"></span></td>
  </tr>
  <tr>
    <th>CPUs</th>
    <td><span class="container-cpus"></span></td>
  </tr>
  <tr>
    <th>Memory</th>
    <td><span class="container-memory"></span></td>
  </tr>
  <tr>
    <th>Status</th>
    <td><span class="container-status"></span></td>
  </tr>
</table>
                       </div>
            <div class="dialog-actions">

              <button class="dialog-button secondary btn-container-restart">Restart</button>
              <button class="dialog-button secondary btn-container-stop">Stop</button>
              <button class="dialog-button secondary btn-container-start">Start</button>
              <button class="dialog-button primary btn-container-close">Close</button>
            </div>
          </div>
        </div>
      </dialog>
    `;

    this._dialog = this.querySelector('dialog');
    this._closeButton = this.querySelector('.btn-container-close');
    this._startButton = this.querySelector('.btn-container-start');
    this._restartButton = this.querySelector('.btn-container-restart');
    this._stopButton = this.querySelector('.btn-container-stop');
    this._statusSpan = this.querySelector('.container-status');
    this._imageSpan = this.querySelector('.container-image');
    this._memorySpan = this.querySelector('.container-memory');
    this._cpusSpan = this.querySelector('.container-cpus');
    this._nameSpan = this.querySelector('.container-name');
    this._actions = this.querySelector('.dialog-actions');

    this._initEventListeners();
  }

  set channelUid(val) {
    this._channelUid = val;
  }

  get channelUid() {
    return this._channelUid;
  }

  _initEventListeners() {
    if (this._closeButton) {
      this._closeButton.addEventListener('click', () => this.close());
    }
    if (this._startButton) {
      this._startButton.addEventListener('click', () => this.startContainer());
    }
    if (this._restartButton) {
      this._restartButton.addEventListener('click', () => this.restartContainer());
    }
    if (this._stopButton) {
      this._stopButton.addEventListener('click', () => this.stopContainer());
    }
  }

  async openWithStatus() {
    if (!this._channelUid) return;
    const container = await (window.app?.rpc?.getContainer?.(this._channelUid) ?? Promise.resolve('unknown'));
    this.updateContainerInfo(container);
  }

  updateContainerInfo(container) {
    this.updateStatus(container['status']);
    this.updateCpus(container['cpus']);
    this.updateMemory(container['memory']);
    this.updateImage(container['image']);
    this.updateName(container['name']);
    this._dialog.showModal();
    this._closeButton.focus();
  }

  updateStatus(status) {
    this._statusSpan.innerText = status;
    if (status === 'running') {
      this._stopButton.disabled = false;
      this._startButton.disabled = true;
      this._restartButton.disabled = false;
    } else {
      this._stopButton.disabled = true;
      this._startButton.disabled = false;
      this._restartButton.disabled = true;
    }
  }

  updateCpus(cpus) {
    if (this._cpusSpan) {
      this._cpusSpan.innerText = cpus;
    }
  }

  updateMemory(memory) {
    if (this._memorySpan) {
      this._memorySpan.innerText = memory;
    }
  }

  updateImage(image) {
    if (this._imageSpan) {
      this._imageSpan.innerText = image;
    }
  }

  updateName(name) {
    if (this._nameSpan) {
      this._nameSpan.innerText = name;
    }
  }

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

  // Placeholder for container operations
  async startContainer() {
    if (!this._channelUid) return;
    if (window.app?.rpc?.startContainer) {
      await window.app.rpc.startContainer(this._channelUid);
      await this.openWithStatus();
    }
  }

  async stopContainer() {
    if (!this._channelUid) return;
    if (window.app?.rpc?.stopContainer) {
      await window.app.rpc.stopContainer(this._channelUid);
      await this.openWithStatus();
    }
  }

  async restartContainer() {
    if (!this._channelUid) return;
    if (window.app?.rpc?.restartContainer) {
      await window.app.rpc.restartContainer(this._channelUid);
      await this.openWithStatus();
    }
  }
}
customElements.define('container-dialog', ContainerDialogComponent);
</script>
<container-dialog id="container-dialog" channel="{{ channel.uid.value }}"></container-dialog>
<script>
  const containerDialog = document.getElementById('container-dialog');
</script>
