import {
  DeesElement,
  css,
  cssManager,
  customElement,
  html,
  property,
  type TemplateResult,
} from '@design.estate/dees-element';

import { mobileComponentStyles } from '../../00componentstyles.js';
import '../../00group-ui/dees-mobile-icon/dees-mobile-icon.js';
import { demoFunc } from './dees-mobile-navigation.demo.js';

export interface INavigationTab {
  id: string;
  icon: string;
  label: string;
  badge?: number | string;
}

declare global {
  interface HTMLElementTagNameMap {
    'dees-mobile-navigation': DeesMobileNavigation;
  }
}

@customElement('dees-mobile-navigation')
export class DeesMobileNavigation extends DeesElement {
  public static demo = demoFunc;

  @property({ type: String })
  accessor activeTab: string = '';

  @property({ type: Array })
  accessor tabs: INavigationTab[] = [];

  public static styles = [
    cssManager.defaultStyles,
    mobileComponentStyles,
    css`
      :host {
        display: block;
      }

      .container {
        border-top: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        /* Mobile-first defaults */
        padding: 0.375rem 0;
        padding-bottom: calc(0.375rem + var(--safe-area-inset-bottom, 0px));
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
      }

      /* Desktop enhancements */
      @media (min-width: 641px) {
        .container {
          padding: 0.5rem 0;
          padding-bottom: 0.5rem;
        }
      }

      .tabs {
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 400px;
        margin: 0 auto;
      }

      .tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        border: none;
        background: none;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        cursor: pointer;
        transition: all 150ms ease;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        position: relative;
        /* Mobile-first: 44px touch target */
        min-height: 44px;
      }

      /* Desktop enhancements */
      @media (min-width: 641px) {
        .tab {
          min-height: auto;
        }
      }

      .tab:active {
        transform: scale(0.95);
      }

      .tab.active {
        color: #3b82f6;
      }

      .tab-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .tab-label {
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1;
        color: inherit;
      }

      .badge {
        position: absolute;
        top: -4px;
        right: -8px;
        background: #ef4444;
        color: white;
        font-size: 0.625rem;
        font-weight: 600;
        padding: 0.125rem 0.375rem;
        border-radius: 999px;
        min-width: 16px;
        text-align: center;
        line-height: 1;
      }

      /* Hover effect */
      @media (hover: hover) {
        .tab:hover:not(.active) {
          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
        }
      }
    `,
  ];

  private handleTabClick(tabId: string) {
    this.dispatchEvent(new CustomEvent('tab-change', {
      detail: { tab: tabId },
      bubbles: true,
      composed: true
    }));
  }

  public render(): TemplateResult {
    return html`
      <div class="container">
        <nav class="tabs" role="tablist">
          ${this.tabs.map(tab => html`
            <button
              class="tab ${this.activeTab === tab.id ? 'active' : ''}"
              role="tab"
              aria-selected=${this.activeTab === tab.id}
              @click=${() => this.handleTabClick(tab.id)}
            >
              <div class="tab-icon">
                <dees-mobile-icon icon=${tab.icon} size="24"></dees-mobile-icon>
                ${tab.badge !== undefined ? html`
                  <span class="badge">${tab.badge}</span>
                ` : ''}
              </div>
              <span class="tab-label">${tab.label}</span>
            </button>
          `)}
        </nav>
      </div>
    `;
  }
}