/**
   * Copyright Aquera Inc 2026
   *
   * This source code is licensed under the BSD-3-Clause license found in the
   * LICENSE file in the root directory of this source tree.
   */

  import { html, TemplateResult } from 'lit';
  import { styles } from './nile-status-light.css';
  import { classMap } from 'lit/directives/class-map.js';
  import { customElement, property } from 'lit/decorators.js';
  import NileElement, { setupA11yMetadata } from '../internal/nile-element';
  import type { CSSResultGroup } from 'lit';
  import { A11yProperty } from '../internal/accessibility/a11y.property.enum';
  import { A11yRole } from '../internal/accessibility/a11y.role.enum';
  import { Role } from '../internal/accessibility/role.enum';

  /**
   * Nile status light component.
   *
   * @tag nile-status-light
   *
   * @summary Status lights describe the status of an object, using a colored dot
   * alongside a text label (e.g. "Active", "Error", "Pending").
   * @status experimental
   *
   * @slot - The status light's text label.
   *
   * @attr {boolean} pulse - Optional pulse animation for active statuses.
   *
   * @csspart base - The component's base wrapper.
   * @csspart indicator - The colored status dot.
   * @csspart label - The status light's text label.
   *
   * @example
   * <!-- Pulse animation for an active status -->
   * <nile-status-light variant="positive" pulse>Active</nile-status-light>
   *
   * @example
   * <!-- Disabled status light with muted colors -->
   * <nile-status-light variant="positive" disabled>Inactive</nile-status-light>
   */
  @customElement('nile-status-light')
  export class NileStatusLight extends NileElement {
    static styles: CSSResultGroup = styles;

    connectedCallback(): void {
      super.connectedCallback();
      setupA11yMetadata(this, {
        [Role.Role]: A11yRole.Text,
        [A11yProperty.AriaLabel]: this.textContent?.trim() || '',
      });
    }

    /** The status light's color variant. */
    @property({ reflect: true }) variant:
      | 'positive'
      | 'negative'
      | 'notice'
      | 'informative'
      | 'neutral'
      | 'inactive' = 'neutral';

    /** The status light's size. */
    @property({ reflect: true, attribute: true }) size: 'small' | 'medium' | 'large' | 'x-large' =
      'medium';

    /** Disables the status light, muting its colors. */
    @property({ type: Boolean, reflect: true }) disabled = false;

    /** Draws attention to an active status with a pulsing animation around the dot. */
    @property({ type: Boolean, reflect: true }) pulse = false;

    render(): TemplateResult {
      return html`
        <span
          part="base"
          class=${classMap({
            'status-light': true,
            'status-light--positive': this.variant === 'positive',
            'status-light--negative': this.variant === 'negative',
            'status-light--notice': this.variant === 'notice',
            'status-light--informative': this.variant === 'informative',
            'status-light--neutral': this.variant === 'neutral',
            'status-light--inactive': this.variant === 'inactive',
            'status-light--small': this.size === 'small',
            'status-light--medium': this.size === 'medium',
            'status-light--large': this.size === 'large',
            'status-light--x-large': this.size === 'x-large',
            'status-light--disabled': this.disabled,
            'status-light--pulse': this.pulse && !this.disabled,
          })}
      >
          <span
            part="indicator"
            class="status-light__dot"
            aria-hidden="true"
          ></span>
          <slot part="label" class="status-light__label"></slot>
        </span>
      `;
    }
  }

  export default NileStatusLight;

  declare global {
    interface HTMLElementTagNameMap {
      'nile-status-light': NileStatusLight;
    }
  }