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

class FluentTooltipInternal extends FluentComponent {
  static tag = 'fluent-tooltip'

  static override get observedAttributes() {
    return ['text', 'position']
  }

  override connectedCallback() {
    super.connectedCallback()
    this.setup()
  }

  render() {
    const text = this.getAttribute('text') || ''
    const pos = this.getAttribute('position') || 'top'
    const baseStyle = `
      position: absolute; z-index: 9999; background: var(--fluent-color-neutral-900);
      color: var(--fluent-color-neutral-50); border-radius: 0.5rem; padding: 0.375rem 0.5rem;
      box-shadow: 0 8px 24px oklch(0% 0 0 / 0.25); display: none;
    `
    const positionStyles: Record<string, string> = {
      top: 'transform: translate(-50%, -100%); left: 50%; bottom: 100%;',
      bottom: 'transform: translate(-50%, 0); left: 50%; top: 100%;',
      left: 'transform: translate(-100%, -50%); right: 100%; top: 50%;',
      right: 'transform: translate(0, -50%); left: 100%; top: 50%;'
    }
    const currentPos = positionStyles[pos] || positionStyles.top
    
    this.shadowRootRef.innerHTML = `
      <style>
        :host { position: relative; display: inline-block; }
        .fluent-tooltip { ${baseStyle} ${currentPos} }
        :host([data-show]) .fluent-tooltip { display: block; }
      </style>
      <div class="fluent-tooltip" role="tooltip" part="tooltip">${text}<slot></slot></div>
    `
  }

  private setup() {
    this.addEventListener('mouseenter', () => this.setAttribute('data-show', ''))
    this.addEventListener('mouseleave', () => this.removeAttribute('data-show'))
  }
}

export const FluentTooltip = createUniversalComponent({
  tag: 'fluent-tooltip',
  class: FluentTooltipInternal
})

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