import { FluentComponent } from '../core/fluent-component'
import { createUniversalComponent } from '../core/component-factory'

class FluentProgressInternal extends FluentComponent {
  static tag = 'fluent-progress'

  static override get observedAttributes() {
    return ['value', 'max']
  }

  render() {
    const value = Number(this.getAttribute('value') || '0')
    const max = Number(this.getAttribute('max') || '100')
    const pct = Math.max(0, Math.min(100, Math.round((value / max) * 100)))
    this.shadowRootRef.innerHTML = `
      <style>
        :host { display: block; width: 100%; }
        .fluent-progress { height: 0.5rem; background: var(--fluent-color-neutral-200); border-radius: 9999px; }
        .bar { height: 100%; background: var(--fluent-color-primary-500); border-radius: 9999px; }
      </style>
      <div class="fluent-progress" part="progress"><div class="bar" part="bar" style="width:${pct}%"></div></div>
    `
  }
}

export const FluentProgress = createUniversalComponent({
  tag: 'fluent-progress',
  class: FluentProgressInternal
})

if (typeof window !== 'undefined') {
  if (!customElements.get(FluentProgressInternal.tag)) {
    customElements.define(FluentProgressInternal.tag, FluentProgressInternal)
  }
}