class PumpCard extends HTMLElement {
  constructor() {
    super();
    this.enabled = false;
  }

  connectedCallback() {
    this.innerHTML = `
      <style>
        :host{display:block}section{height:100%;box-sizing:border-box}.pumpState{font-size:32px;font-weight:700;line-height:1.15;margin:10px 0}.stateRow{display:flex;gap:8px;align-items:center}.dot{width:10px;height:10px;border-radius:50%;background:#607d8b}.dot.on{background:#188038}.actions{display:flex;gap:8px;flex-wrap:wrap}
      </style>
      <section>
        <h3>Pump</h3>
        <div class="muted">DC pump switch</div>
        <div class="stateRow"><span id="dot" class="dot"></span><div id="state" class="pumpState">--</div></div>
        <div class="actions"><button id="toggle">Toggle</button><button id="refresh" class="secondary">Refresh</button></div>
        <pre id="out"></pre>
      </section>`;
    this.querySelector('#toggle').addEventListener('click', () => this.setPump(!this.enabled));
    this.querySelector('#refresh').addEventListener('click', () => this.loadPump());
    window.addEventListener('app:login', () => this.loadPump());
    if (window.App && window.App.token()) this.loadPump();
  }

  render(json) {
    this.enabled = !!json.enabled;
    this.querySelector('#state').textContent = this.enabled ? 'On' : 'Off';
    this.querySelector('#dot').classList.toggle('on', this.enabled);
    this.querySelector('#toggle').textContent = this.enabled ? 'Turn off' : 'Turn on';
  }

  async loadPump() {
    const text = await window.App.req('GET', '/api/pump');
    this.querySelector('#out').textContent = text;
    try {
      const json = JSON.parse(text);
      if (json.success) this.render(json);
    } catch (error) {}
  }

  async setPump(enabled) {
    const text = await window.App.req('POST', '/api/pump', {enabled});
    this.querySelector('#out').textContent = text;
    try {
      const json = JSON.parse(text);
      if (json.success) this.render(json);
    } catch (error) {}
  }
}

customElements.define('pump-card', PumpCard);