/**
 * <stat-ui value="1,234" label="Total Users" change="+12%" trend="up"></stat-ui>
 * <stat-ui value="$42.5k" label="Revenue" change="-3%" trend="down"></stat-ui>
 * <stat-ui value="99.9%" label="Uptime" icon="check-circle"></stat-ui>
 *
 * Metric/KPI display — value + label + optional change indicator.
 *
 * Trend: up, down, neutral (colors the change badge accordingly)
 */

import { UIElement } from '../../core/element.js';

class UIStat extends UIElement {
  static properties = {
    value:   { type: String,  default: '',    reflect: true },
    label:   { type: String,  default: '',    reflect: true },
    change:  { type: String,  default: '',    reflect: true },
    trend:   { type: String,  default: '',    reflect: true },
    icon:    { type: String,  default: '',    reflect: true },
    loading: { type: Boolean, default: false, reflect: true },
    // Horizontal-bleed KPI layout: value/label/change stack on the left, the
    // slot="chart" child fills the right column and bleeds to the card edges.
    // Reflected so the [bleed] CSS selector gates the layout.
    bleed:   { type: Boolean, default: false, reflect: true },
  };

  static template = () => null;

  #valueEl = null;
  #labelEl = null;
  #changeEl = null;
  #iconEl = null;

  connected() {
    this.#valueEl = this.querySelector(':scope > [slot="value"]');
    if (!this.#valueEl) {
      this.#valueEl = document.createElement('span');
      this.#valueEl.setAttribute('slot', 'value');
      this.appendChild(this.#valueEl);
    }

    this.#labelEl = this.querySelector(':scope > [slot="label"]');
    if (!this.#labelEl) {
      this.#labelEl = document.createElement('span');
      this.#labelEl.setAttribute('slot', 'label');
      this.appendChild(this.#labelEl);
    }

    this.#changeEl = this.querySelector(':scope > [slot="change"]');
    if (!this.#changeEl) {
      this.#changeEl = document.createElement('span');
      this.#changeEl.setAttribute('slot', 'change');
      this.appendChild(this.#changeEl);
    }

    this.#iconEl = this.querySelector(':scope > [slot="icon"]');
    if (!this.#iconEl) {
      this.#iconEl = document.createElement('icon-ui');
      this.#iconEl.setAttribute('slot', 'icon');
      this.appendChild(this.#iconEl);
    }
  }

  render() {
    if (!this.#valueEl) return;

    // ── Loading state ──
    // When [loading], render skeleton-ui into the value + change slots and set
    // aria-busy on the host. Label is preserved (it's static metadata, not
    // fetched data). Icon is preserved too. When loading flips to false on
    // first non-empty value write, slots restore to text content automatically.
    if (this.loading) {
      this.setAttribute('aria-busy', 'true');
      // Use innerHTML so skeleton-ui auto-registers via the barrel; consumers
      // who tree-shake skeleton-ui out will see plain shimmer-less placeholders.
      // Width 60% / 40% / 2em / 1em chosen to roughly mirror the rendered
      // value+change visual mass without being so wide as to look like text.
      this.#valueEl.textContent = '';
      this.#valueEl.innerHTML = '<skeleton-ui width="60%" height="2em" radius="sm"></skeleton-ui>';
      this.#changeEl.textContent = '';
      this.#changeEl.innerHTML = '<skeleton-ui width="40%" height="1em" radius="sm"></skeleton-ui>';
      this.#changeEl.hidden = false;
      // Icon stays as-is (metadata, not data).
      if (this.icon) {
        this.#iconEl.setAttribute('name', this.icon);
        this.#iconEl.hidden = false;
      } else {
        this.#iconEl.hidden = true;
      }
      this.#labelEl.textContent = this.label;
      return;
    }

    this.removeAttribute('aria-busy');
    this.#valueEl.textContent = this.value;
    this.#labelEl.textContent = this.label;

    // Change badge
    if (this.change) {
      this.#changeEl.textContent = this.change;
      this.#changeEl.hidden = false;
    } else {
      this.#changeEl.hidden = true;
    }

    // Icon
    if (this.icon) {
      this.#iconEl.setAttribute('name', this.icon);
      this.#iconEl.hidden = false;
    } else {
      this.#iconEl.hidden = true;
    }
  }

  disconnected() {
    this.#valueEl = null;
    this.#labelEl = null;
    this.#changeEl = null;
    this.#iconEl = null;
  }
}
customElements.define('stat-ui', UIStat);

export { UIStat };
