/**
 * Non-side-effect class export for `<stepper-ui>` (+ co-located primitives).
 *
 * 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/stepper`
 * (which imports this file + calls `defineIfFree()`).
 *
 * @see ../../USAGE.md#registration--auto-vs-explicit
 */

/**
 * <stepper-ui> — Wizard / process stepper.
 *
 * Split out of the old <timeline-ui mode="steps">. Where timeline-ui is for
 * event/progress logs with per-item state, stepper-ui is a wizard: the parent
 * `step` index drives all children (numbered circles, auto-checkmark on the
 * ones before it, active ring on the current).
 *
 * Usage:
 *   <stepper-ui step="1">
 *     <stepper-item-ui text="Account"></stepper-item-ui>
 *     <stepper-item-ui text="Details"></stepper-item-ui>
 *     <stepper-item-ui text="Review"></stepper-item-ui>
 *   </stepper-ui>
 *
 *   el.next(); el.prev(); el.goTo(2);
 *
 * Attributes:
 *   step        — current step index (0-based)
 *   orientation — horizontal (default) | vertical
 */

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

export class UIStepper extends UIElement {
  static properties = {
    step:        { type: Number, default: 0,            reflect: true },
    orientation: { type: String, default: 'horizontal', reflect: true },
  };

  static template = () => null;

  render() {
    const items = [...this.querySelectorAll('stepper-item-ui')];

    // Mark last item — the connector line hides on the last one
    for (const item of items) item.removeAttribute('data-last');
    const last = items[items.length - 1];
    if (last) last.setAttribute('data-last', '');

    // Parent drives child state via step index. Canonical Phase 6
    // contract: `status` enum (`completed` / `active` / `idle`).
    // CSS only matches `[status="…"]`; the legacy `[completed]` /
    // `[active]` Booleans were removed in 0.0.20.
    items.forEach((item, i) => {
      item.setAttribute('data-index', i);
      if (i < this.step) {
        item.setAttribute('status', 'completed');
      } else if (i === this.step) {
        item.setAttribute('status', 'active');
      } else {
        item.setAttribute('status', 'idle');
      }
    });
  }

  next() {
    const count = this.querySelectorAll('stepper-item-ui').length;
    if (this.step < count - 1) this.step++;
  }

  prev() {
    if (this.step > 0) this.step--;
  }

  goTo(index) {
    const max = this.querySelectorAll('stepper-item-ui').length - 1;
    this.step = Math.max(0, Math.min(index, max));
  }
}

export class UIStepperItem extends UIElement {
  static properties = {
    text:        { type: String,  default: '', reflect: true },
    description: { type: String,  default: '', reflect: true },
    icon:        { type: String,  default: '', reflect: true },
    // `status` is the canonical stage-progress shape across timeline-item,
    // stepper-item, pipeline-status, agent-reasoning. Mutually exclusive
    // values prevent the `active && completed` footgun the prior multi-
    // Boolean shape allowed.
    status:      { type: String,  default: 'idle', reflect: true },
  };

  static template = () => null;

  connected() {
    if (!this.querySelector('[slot="label"]')) {
      this.innerHTML = `
        <span slot="label"></span>
        <span slot="description"></span>
      `;
    }
  }

  render() {
    const label = this.querySelector('[slot="label"]');
    const desc = this.querySelector('[slot="description"]');
    if (label) label.textContent = this.text;
    if (desc) desc.textContent = this.description;

    if (this.icon) {
      let iconEl = this.querySelector('[slot="icon"]');
      if (!iconEl) {
        iconEl = document.createElement('icon-ui');
        iconEl.setAttribute('slot', 'icon');
        this.prepend(iconEl);
      }
      iconEl.setAttribute('name', this.icon);
    } else {
      this.querySelector('[slot="icon"]')?.remove();
    }
  }
}
