class WallPanelPanel extends HTMLElement {
  constructor() {
    super();
    this._hass = null;
    this._panel = null;
    this._narrow = false;
    this.attachShadow({ mode: 'open' });
  }

  set hass(hass) {
    this._hass = hass;
    this._render();
  }

  set panel(panel) {
    this._panel = panel;
    this._render();
  }

  set narrow(narrow) {
    this._narrow = Boolean(narrow);
    this._render();
  }

  connectedCallback() {
    this._render();
  }

  _resolveUrl(rawUrl) {
    const value = String(rawUrl || '').trim();
    if (!value) {
      return '';
    }

    try {
      const url = new URL(value, window.location.href);
      if (!url.searchParams.has('embed')) {
        url.searchParams.set('embed', '1');
      }
      if (!url.searchParams.has('mode')) {
        url.searchParams.set('mode', 'ha');
      }
      return url.toString();
    } catch (error) {
      return value;
    }
  }

  _render() {
    if (!this.shadowRoot) {
      return;
    }

    const config = this._panel?.config || {};
    const customConfig = config._panel_custom || {};
    const payload = customConfig.config || customConfig || config;
    const panelUrl = this._resolveUrl(
      payload.panel_url || config.panel_url || customConfig.panel_url || ''
    );

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          height: 100%;
          min-height: 100vh;
          background: var(--primary-background-color, #0d0f14);
          color: var(--primary-text-color, #fff);
        }
        .wrap {
          position: relative;
          width: 100%;
          height: 100vh;
          overflow: hidden;
          background: var(--primary-background-color, #0d0f14);
        }
        iframe {
          width: 100%;
          height: 100%;
          border: 0;
          display: block;
          background: transparent;
        }
        .empty {
          display: grid;
          place-items: center;
          height: 100%;
          padding: 24px;
          box-sizing: border-box;
          text-align: center;
          font-family: var(--primary-font-family, sans-serif);
          color: var(--secondary-text-color, #b3b8c2);
        }
        .empty strong {
          display: block;
          color: var(--primary-text-color, #fff);
          margin-bottom: 8px;
          font-size: 1.1rem;
        }
      </style>
      <div class="wrap"></div>
    `;

    const wrap = this.shadowRoot.querySelector('.wrap');
    if (!wrap) {
      return;
    }

    if (!panelUrl) {
      wrap.innerHTML = `
        <div class="empty">
          <div>
            <strong>Wall Panel is not configured</strong>
            <div>Set the PHP panel URL in the integration options.</div>
          </div>
        </div>
      `;
      return;
    }

    const iframe = document.createElement('iframe');
    iframe.src = panelUrl;
    iframe.loading = 'eager';
    iframe.referrerPolicy = 'no-referrer';
    iframe.allow = 'autoplay; fullscreen; picture-in-picture';
    wrap.replaceChildren(iframe);
  }
}

if (!customElements.get('wall-panel-panel')) {
  customElements.define('wall-panel-panel', WallPanelPanel);
}