import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

@customElement('arx-tooltip')
export class Tooltip extends LitElement {
  @property() content = '';
  @property() position = 'top';
  @property() delay = 100; // Delay before showing tooltip (ms)
  @property() offset = 8; // Distance from target element
  @property() variant = 'default'; // default, primary, secondary, accent, error, warning, success
  @property({ type: Boolean }) arrow = true;
  @property({ type: Boolean }) allowHtml = false;
  @property({ type: Boolean }) interactive = false;
  @property({ type: Boolean }) disabled = false;

  @state() private isVisible = false;
  @state() private timer: ReturnType<typeof setTimeout> | null = null;

  static override styles = css`
    :host {
      display: inline-block;
      position: relative;
    }

    .tooltip-container {
      position: relative;
      display: inline-block;
    }

    .tooltip {
      position: absolute;
      z-index: 999;
      max-width: 300px;
      width: 100%;
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-field);
      font-size: 0.875rem;
      line-height: 1.4;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
        calc(var(--depth) * 4px)
        oklch(from var(--color-base-content) l c h / 0.2);
      transform: scale(0.95);
      transform-origin: center;
    }

    .tooltip.interactive {
      pointer-events: auto;
    }

    .tooltip.visible {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
    }

    /* Default variant */
    .tooltip.default {
      background-color: var(--color-base-content);
      color: var(--color-base-100);
    }

    /* Primary variant */
    .tooltip.primary {
      background-color: var(--color-primary);
      color: var(--color-primary-content);
    }

    /* Secondary variant */
    .tooltip.secondary {
      background-color: var(--color-secondary);
      color: var(--color-secondary-content);
    }

    /* Accent variant */
    .tooltip.accent {
      background-color: var(--color-accent);
      color: var(--color-accent-content);
    }

    /* Error variant */
    .tooltip.error {
      background-color: var(--color-error);
      color: var(--color-error-content);
    }

    /* Warning variant */
    .tooltip.warning {
      background-color: var(--color-warning);
      color: var(--color-warning-content);
    }

    /* Success variant */
    .tooltip.success {
      background-color: var(--color-success);
      color: var(--color-success-content);
    }

    /* Positions */
    .tooltip.top {
      bottom: calc(100% + var(--offset, 8px));
      left: 50%;
      transform: translateX(-50%) scale(0.95);
    }

    .tooltip.top.visible {
      transform: translateX(-50%) scale(1);
    }

    .tooltip.right {
      left: calc(100% + var(--offset, 8px));
      top: 50%;
      transform: translateY(-50%) scale(0.95);
    }

    .tooltip.right.visible {
      transform: translateY(-50%) scale(1);
    }

    .tooltip.bottom {
      top: calc(100% + var(--offset, 8px));
      left: 50%;
      transform: translateX(-50%) scale(0.95);
    }

    .tooltip.bottom.visible {
      transform: translateX(-50%) scale(1);
    }

    .tooltip.left {
      right: calc(100% + var(--offset, 8px));
      top: 50%;
      transform: translateY(-50%) scale(0.95);
    }

    .tooltip.left.visible {
      transform: translateY(-50%) scale(1);
    }

    /* Arrow */
    .tooltip::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      background: inherit;
      transform: rotate(45deg);
    }

    .tooltip.top::after {
      bottom: -4px;
      left: 50%;
      margin-left: -4px;
    }

    .tooltip.right::after {
      left: -4px;
      top: 50%;
      margin-top: -4px;
    }

    .tooltip.bottom::after {
      top: -4px;
      left: 50%;
      margin-left: -4px;
    }

    .tooltip.left::after {
      right: -4px;
      top: 50%;
      margin-top: -4px;
    }

    .tooltip.no-arrow::after {
      display: none;
    }

    @media (max-width: 640px) {
      .tooltip {
        max-width: 200px;
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
      }
    }
  `;

  override render() {
    return html`
      <div
        class="tooltip-container"
        @mouseenter=${!this.disabled ? this._onMouseEnter : null}
        @mouseleave=${!this.disabled ? this._onMouseLeave : null}
        @focus=${!this.disabled ? this._onMouseEnter : null}
        @blur=${!this.disabled ? this._onMouseLeave : null}
      >
        <slot></slot>
        <div
          class="tooltip ${this.position} ${this.variant} ${
            this.isVisible ? 'visible' : ''
          } ${!this.arrow ? 'no-arrow' : ''} ${this.interactive ? 'interactive' : ''}"
          style="--offset: ${this.offset}px;"
          role="tooltip"
          aria-hidden=${!this.isVisible}
        >
          ${this.allowHtml ? html`<div .innerHTML=${this.content}></div>` : this.content}
        </div>
      </div>
    `;
  }

  private _onMouseEnter() {
    if (this.timer) {
      clearTimeout(this.timer);
    }

    this.timer = setTimeout(() => {
      this.isVisible = true;
    }, this.delay);
  }

  private _onMouseLeave() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }

    this.isVisible = false;
  }

  override disconnectedCallback() {
    super.disconnectedCallback();
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  }
}
