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

class FluentCheckboxInternal extends FluentComponent {
  static tag = 'fluent-checkbox'

  static override get observedAttributes() {
    return ['checked', 'disabled', 'name']
  }

  override connectedCallback() {
    super.connectedCallback()
    this.shadowRootRef.addEventListener('click', () => {
      if (this.hasAttribute('disabled')) return
      this.toggleAttribute('checked')
      const input = this.shadowRootRef.querySelector('input') as HTMLInputElement | null
      if (input) input.checked = this.hasAttribute('checked')
      
      // Emit internal change event for groups
      this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { checked: this.hasAttribute('checked') } }))
    })
  }

  render() {
    const name = this.getAttribute('name') || ''
    const checked = this.hasAttribute('checked')
    const disabled = this.hasAttribute('disabled')
    this.shadowRootRef.innerHTML = `
      <label class="root" part="checkbox">
        <input type="checkbox" id="cb" name="${name}" ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''} />
        <span class="box" part="box"></span>
        <span class="text" part="text"><slot></slot></span>
      </label>
    `
  }

  constructor() {
    super()
    this.recipe = {
      base: { display: 'inline-block' },
      selectors: {
        '.root': { display: 'inline-flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' },
        'input': { position: 'absolute', opacity: '0' },
        '.box': { width: '18px', height: '18px', border: '1px solid var(--fluent-color-neutral-400)', 'border-radius': '4px', background: 'light-dark(white, var(--fluent-color-neutral-900))' },
        ':host([checked]) .box': { background: 'var(--fluent-color-primary-500)' }
      }
    }
  }

  override attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
    super.attributeChangedCallback(name, oldValue, newValue)
    const input = this.shadowRootRef.querySelector('input') as HTMLInputElement | null
    if (input) input.checked = this.hasAttribute('checked')
  }
}

export const FluentCheckbox = createUniversalComponent({
  tag: 'fluent-checkbox',
  class: FluentCheckboxInternal,
  events: ['change']
})

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