import { html } from "../util.js";
import buttonCSS from "../buttonStyles.js";

const VERSION_ORDER = [
  "pixme",
  "bff",
  "api",
  "gateway",
  "users",
  "static",
  "facerecognition",
  "acceptance",
  "deepface",
];

class PxmeFooter extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = html`
      <style>
        ${buttonCSS}
        :host {
          display: block;
        }

        .pxme-footer {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 100;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: var(--pxme-space-sm, 12px);
          text-align: center;
          border-top: 1px solid var(--pxme-color-border, #6b7b8d);
          padding: var(--pxme-space-2xs, 4px) var(--pxme-space-md, 16px);
          background-color: var(--pxme-color-footer-bg, #2c3e50);
          color: var(--pxme-color-footer-text, #f5f0eb);
          font-size: 0.8rem;
          line-height: 1.4;
          font-family: inherit;
        }

        .pxme-footer__versions {
          font-size: 0.8rem;
          color: var(--pxme-color-secondary, #6b7b8d);
        }
      </style>
      <footer class="pxme-footer">
        <span>&copy; 2026 Wattu Development - Pixme</span>
        <span class="pxme-footer__versions" id="pxme-versions"></span>
      </footer>
    `;

    this._fetchVersions();
  }

  async _fetchVersions() {
    try {
      const res = await fetch("/version");
      const versions = await res.json();
      const el = this.shadowRoot.getElementById("pxme-versions");
      if (el) {
        el.textContent = VERSION_ORDER.filter((k) => versions[k])
          .map((k) => `${k} ${versions[k]}`)
          .join(" | ");
      }
    } catch {
      // silently ignore version fetch errors
    }
  }
}

customElements.define("pxme-footer", PxmeFooter);