import {
  customElement,
  DeesElement,
  type TemplateResult,
  html,
  property,
  css,
  cssManager,
} from '@design.estate/dees-element';
import { DeesIcon } from '@design.estate/dees-catalog';
import { demo } from './eco-applauncher-batterymenu.demo.js';

// Ensure dees-icon is registered
DeesIcon;

declare global {
  interface HTMLElementTagNameMap {
    'eco-applauncher-batterymenu': EcoApplauncherBatterymenu;
  }
}

@customElement('eco-applauncher-batterymenu')
export class EcoApplauncherBatterymenu extends DeesElement {
  public static demo = demo;
  public static demoGroup = 'App Launcher';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        position: relative;
        pointer-events: none;
      }

      :host([open]) {
        pointer-events: auto;
      }

      .menu-container {
        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 10%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 20%)')};
        border-radius: 12px;
        box-shadow: ${cssManager.bdTheme(
          '0 8px 32px rgba(0, 0, 0, 0.15)',
          '0 8px 32px rgba(0, 0, 0, 0.4)'
        )};
        min-width: 280px;
        overflow: hidden;
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
        transition: all 0.2s ease-out;
        pointer-events: none;
      }

      :host([open]) .menu-container {
        opacity: 1;
        transform: scale(1) translateY(0);
        pointer-events: auto;
      }

      .battery-display {
        padding: 24px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .battery-visual {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .battery-icon {
        position: relative;
        width: 80px;
        height: 36px;
        border: 2px solid ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 70%)')};
        border-radius: 6px;
        overflow: hidden;
      }

      .battery-icon::after {
        content: '';
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 14px;
        background: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 70%)')};
        border-radius: 0 2px 2px 0;
      }

      .battery-fill {
        height: 100%;
        transition: width 0.3s ease, background 0.3s ease;
      }

      .battery-fill.good {
        background: hsl(142 71% 45%);
      }

      .battery-fill.medium {
        background: hsl(47 100% 50%);
      }

      .battery-fill.low {
        background: hsl(0 72% 51%);
      }

      .battery-fill.charging {
        background: linear-gradient(
          90deg,
          hsl(142 71% 45%) 0%,
          hsl(142 71% 55%) 50%,
          hsl(142 71% 45%) 100%
        );
        background-size: 200% 100%;
        animation: charging-pulse 1.5s ease-in-out infinite;
      }

      @keyframes charging-pulse {
        0% { background-position: 100% 0; }
        100% { background-position: -100% 0; }
      }

      .charging-icon {
        color: hsl(47 100% 50%);
      }

      .battery-percentage {
        font-size: 32px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
      }

      .battery-status {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .menu-divider {
        height: 1px;
        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 15%)')};
      }

      .menu-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        cursor: pointer;
        transition: background 0.15s ease;
      }

      .menu-option:hover {
        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(240 5% 15%)')};
      }

      .option-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
      }

      .option-description {
        font-size: 12px;
        color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
        margin-top: 2px;
      }

      .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.2s ease;
        flex-shrink: 0;
      }

      .toggle-switch.active {
        background: hsl(217 91% 60%);
      }

      .toggle-switch::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: transform 0.2s ease;
        box-shadow: ${cssManager.bdTheme('0 1px 3px rgba(0,0,0,0.2)', 'none')};
      }

      .toggle-switch.active::after {
        transform: translateX(20px);
      }

      .menu-footer {
        padding: 12px 16px;
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 15%)')};
      }

      .settings-link {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: hsl(217 91% 60%);
        cursor: pointer;
        transition: color 0.15s ease;
      }

      .settings-link:hover {
        color: hsl(217 91% 50%);
      }
    `,
  ];

  @property({ type: Boolean, reflect: true })
  accessor open = false;

  @property({ type: Number })
  accessor batteryLevel = 100;

  @property({ type: Boolean })
  accessor isCharging = false;

  @property({ type: Boolean })
  accessor batterySaverEnabled = false;

  @property({ type: String })
  accessor timeRemaining: string | null = null;

  private boundHandleClickOutside = this.handleClickOutside.bind(this);
  private inactivityTimeout: ReturnType<typeof setTimeout> | null = null;
  private readonly INACTIVITY_TIMEOUT = 60000; // 1 minute
  private lastActivityTime = 0;

  public render(): TemplateResult {
    const fillClass = this.getFillClass();

    return html`
      <div class="menu-container"
        @click=${(e: MouseEvent) => e.stopPropagation()}
        @mousedown=${this.resetInactivityTimer}
      >
        <div class="battery-display">
          <div class="battery-visual">
            <div class="battery-icon">
              <div
                class="battery-fill ${fillClass} ${this.isCharging ? 'charging' : ''}"
                style="width: ${this.batteryLevel}%"
              ></div>
            </div>
            ${this.isCharging ? html`
              <dees-icon class="charging-icon" .icon=${'lucide:zap'} .iconSize=${24}></dees-icon>
            ` : ''}
          </div>
          <div class="battery-percentage">${this.batteryLevel}%</div>
          <div class="battery-status">
            ${this.isCharging ? html`
              <dees-icon .icon=${'lucide:plug'} .iconSize=${14}></dees-icon>
              Charging
            ` : this.timeRemaining ? html`
              <dees-icon .icon=${'lucide:clock'} .iconSize=${14}></dees-icon>
              ${this.timeRemaining}
            ` : html`
              <dees-icon .icon=${'lucide:battery'} .iconSize=${14}></dees-icon>
              On Battery
            `}
          </div>
        </div>

        <div class="menu-divider"></div>

        <div class="menu-option" @click=${this.handleBatterySaverToggle}>
          <div class="option-label">
            <dees-icon .icon=${'lucide:leaf'} .iconSize=${18}></dees-icon>
            <div>
              <div>Battery Saver</div>
              <div class="option-description">Extends battery life</div>
            </div>
          </div>
          <div
            class="toggle-switch ${this.batterySaverEnabled ? 'active' : ''}"
            @click=${(e: Event) => e.stopPropagation()}
          ></div>
        </div>

        <div class="menu-footer">
          <div class="settings-link" @click=${this.handleSettingsClick}>
            <dees-icon .icon=${'lucide:settings'} .iconSize=${14}></dees-icon>
            Power Settings...
          </div>
        </div>
      </div>
    `;
  }

  private getFillClass(): string {
    if (this.batteryLevel > 50) return 'good';
    if (this.batteryLevel > 20) return 'medium';
    return 'low';
  }

  private handleBatterySaverToggle(): void {
    this.batterySaverEnabled = !this.batterySaverEnabled;
    this.dispatchEvent(new CustomEvent('battery-saver-toggle', {
      detail: { enabled: this.batterySaverEnabled },
      bubbles: true,
      composed: true,
    }));
  }

  private handleSettingsClick(): void {
    this.dispatchEvent(new CustomEvent('settings-click', {
      bubbles: true,
      composed: true,
    }));
  }

  private handleClickOutside(e: MouseEvent): void {
    if (this.open && !this.contains(e.target as Node)) {
      this.closeMenu();
    }
  }

  private resetInactivityTimer(): void {
    const now = Date.now();
    // Throttle: only reset if 5+ seconds since last reset
    if (now - this.lastActivityTime < 5000) {
      return;
    }
    this.lastActivityTime = now;
    this.clearInactivityTimer();
    if (this.open) {
      this.inactivityTimeout = setTimeout(() => {
        this.closeMenu();
      }, this.INACTIVITY_TIMEOUT);
    }
  }

  private clearInactivityTimer(): void {
    if (this.inactivityTimeout) {
      clearTimeout(this.inactivityTimeout);
      this.inactivityTimeout = null;
    }
  }

  private closeMenu(): void {
    this.open = false;
    this.dispatchEvent(new CustomEvent('menu-close', {
      bubbles: true,
      composed: true,
    }));
  }

  protected updated(changedProperties: Map<string, unknown>): void {
    if (changedProperties.has('open')) {
      if (this.open) {
        this.resetInactivityTimer();
      } else {
        this.clearInactivityTimer();
      }
    }
  }

  async connectedCallback(): Promise<void> {
    await super.connectedCallback();
    setTimeout(() => {
      document.addEventListener('click', this.boundHandleClickOutside);
    }, 0);
  }

  async disconnectedCallback(): Promise<void> {
    await super.disconnectedCallback();
    document.removeEventListener('click', this.boundHandleClickOutside);
    this.clearInactivityTimer();
  }
}
