/**
 * Non-side-effect class export for `<progress-row-ui>`.
 *
 * Importing this file gives you the class(es) without auto-registering the tag.
 * Useful for test isolation, subclassing with tag-name override, or selective
 * composition.
 *
 * The auto-register path stays at `@adia-ai/web-components/components/progress-row`
 * (which imports this file + calls `defineIfFree()`).
 *
 * @see ../../USAGE.md#registration--auto-vs-explicit
 */

/**
 * <progress-row-ui label="Documents" value="42" meta="32 GB"></progress-row-ui>
 *
 * Inline labeled progress row. Used for storage quotas, capacity
 * breakdowns, budget/usage indicators.
 *
 * Layout:
 *   ┌──────────────────────────────────────┐
 *   │ Label                          Meta  │  ← flex row, space-between
 *   │ ████████░░░░░░░░░░░░░░░░             │  ← progress bar below
 *   └──────────────────────────────────────┘
 *
 * Properties:
 *   label   — left-hand label text
 *   value   — 0-100 progress value (null or -1 = indeterminate)
 *   meta    — right-hand meta text (e.g. "32 GB", "4.2k / 10k")
 *   variant — success | warning | danger (colors the fill; inherits otherwise)
 */

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

export class UIProgressRow extends UIElement {
  static properties = {
    label:   { type: String, default: '',  reflect: true },
    value:   { type: Number, default: null, reflect: true },
    meta:    { type: String, default: '',  reflect: true },
    variant: { type: String, default: 'default',  reflect: true },
  };

  static template = () => null;

  #labelEl = null;
  #metaEl = null;
  #progressEl = null;

  connected() {
    this.setAttribute('role', 'group');

    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.#metaEl = this.querySelector(':scope > [slot="meta"]');
    if (!this.#metaEl) {
      this.#metaEl = document.createElement('span');
      this.#metaEl.setAttribute('slot', 'meta');
      this.appendChild(this.#metaEl);
    }

    this.#progressEl = this.querySelector(':scope > progress-ui');
    if (!this.#progressEl) {
      this.#progressEl = document.createElement('progress-ui');
      // Pre-set value BEFORE append so progress-ui's first paint is
      // determinate at the target value — `@starting-style { width: 0 }`
      // in progress.css then transitions 0 → value on mount. Without this,
      // the bar mounts indeterminate (width: 100% from the shimmer rule),
      // and `render()` setting value: N triggers a backwards 100% → N
      // animation, which reads as the bar shrinking right-to-left.
      if (this.value != null && this.value >= 0) {
        this.#progressEl.setAttribute('value', String(this.value));
      }
      this.appendChild(this.#progressEl);
    }
  }

  disconnected() {
    this.#labelEl = null;
    this.#metaEl = null;
    this.#progressEl = null;
  }

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

    this.#labelEl.textContent = this.label;
    this.#labelEl.hidden = !this.label;

    this.#metaEl.textContent = this.meta;
    this.#metaEl.hidden = !this.meta;

    if (this.value != null && this.value >= 0) {
      this.#progressEl.setAttribute('value', String(this.value));
    } else {
      this.#progressEl.removeAttribute('value');
    }

    // ARIA: label the group so screen readers announce "Documents, 42 percent"
    if (this.label) {
      this.setAttribute('aria-label', this.meta ? `${this.label}, ${this.meta}` : this.label);
    } else {
      this.removeAttribute('aria-label');
    }
  }
}
