import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  cssManager,
  css,
  unsafeCSS,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import type { IServiceStatus } from '../interfaces/index.js';
import { fonts, colors, shadows, borderRadius, spacing, commonStyles, getStatusColor } from '../styles/shared.styles.js';

import './internal/uplinternal-miniheading.js';
import { demoFunc } from './upl-statuspage-assetsselector.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'upl-statuspage-assetsselector': UplStatuspageAssetsselector;
  }
}

@customElement('upl-statuspage-assetsselector')
export class UplStatuspageAssetsselector extends DeesElement {
  public static demo = demoFunc;

  @property({ type: Array })
  public services: IServiceStatus[] = [];

  @property({ type: String })
  public filterText: string = '';

  @property({ type: String })
  public filterCategory: string = 'all';

  @property({ type: Boolean })
  public showOnlySelected: boolean = false;

  @property({ type: Boolean })
  public loading: boolean = false;

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    commonStyles,
    css`
      :host {
          display: block;
          background: transparent;
          font-family: ${unsafeCSS(fonts.base)};
          color: ${colors.text.primary};
        }

        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
        }

        .controls {
          display: flex;
          gap: ${unsafeCSS(spacing.sm)};
          margin-bottom: ${unsafeCSS(spacing.lg)};
          flex-wrap: wrap;
          align-items: center;
        }

        .search-input {
          flex: 1;
          min-width: 240px;
          padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
          border: 1px solid ${colors.border.default};
          border-radius: ${unsafeCSS(borderRadius.base)};
          background: ${colors.background.primary};
          color: ${colors.text.primary};
          font-size: 14px;
          font-family: ${unsafeCSS(fonts.base)};
          transition: all 0.2s ease;
        }

        .search-input:focus {
          outline: none;
          border-color: ${colors.text.primary};
          box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
        }

        .search-input::placeholder {
          color: ${colors.text.muted};
        }

        .filter-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
          border: 1px solid ${colors.border.default};
          border-radius: ${unsafeCSS(borderRadius.base)};
          background: transparent;
          color: ${colors.text.primary};
          cursor: pointer;
          font-size: 14px;
          font-weight: 500;
          font-family: ${unsafeCSS(fonts.base)};
          transition: all 0.2s ease;
          height: 36px;
        }

        .filter-button:hover {
          background: ${colors.background.secondary};
          border-color: ${colors.border.muted};
          transform: translateY(-1px);
        }

        .filter-button:active {
          transform: translateY(0);
        }

        .filter-button.active {
          background: ${colors.text.primary};
          color: ${colors.background.primary};
          border-color: ${colors.text.primary};
        }

        .filter-button.active:hover {
          background: ${cssManager.bdTheme('#262626', '#f4f4f5')};
          border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')};
        }

        .assets-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
          gap: ${unsafeCSS(spacing.md)};
          background: ${colors.background.card};
          padding: ${unsafeCSS(spacing.lg)};
          border-radius: ${unsafeCSS(borderRadius.md)};
          border: 1px solid ${colors.border.default};
          min-height: 200px;
          box-shadow: ${unsafeCSS(shadows.sm)};
        }

        .asset-card {
          display: flex;
          align-items: center;
          padding: ${unsafeCSS(spacing.md)};
          background: ${colors.background.secondary};
          border-radius: ${unsafeCSS(borderRadius.base)};
          cursor: pointer;
          transition: all 0.2s ease;
          border: 1px solid ${colors.border.default};
          gap: ${unsafeCSS(spacing.md)};
        }

        .asset-card:hover {
          transform: translateY(-2px);
          box-shadow: ${unsafeCSS(shadows.md)};
          border-color: ${colors.border.muted};
        }

        .asset-card.selected {
          border-color: ${colors.text.primary};
          background: ${colors.background.muted};
          box-shadow: 0 0 0 1px ${colors.text.primary};
        }

        .asset-checkbox {
          width: 16px;
          height: 16px;
          cursor: pointer;
          accent-color: ${colors.text.primary};
          flex-shrink: 0;
        }

        .asset-info {
          flex: 1;
          min-width: 0;
        }

        .asset-name {
          font-weight: 600;
          font-size: 14px;
          margin-bottom: ${unsafeCSS(spacing.xs)};
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .asset-description {
          font-size: 13px;
          color: ${colors.text.secondary};
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .asset-status {
          display: flex;
          align-items: center;
          gap: ${unsafeCSS(spacing.xs)};
          flex-shrink: 0;
        }

        .status-indicator {
          width: 8px;
          height: 8px;
          border-radius: ${unsafeCSS(borderRadius.full)};
        }

        .status-indicator.operational { background: ${colors.status.operational}; }
        .status-indicator.degraded { background: ${colors.status.degraded}; }
        .status-indicator.partial_outage { background: ${colors.status.partial}; }
        .status-indicator.major_outage { background: ${colors.status.major}; }
        .status-indicator.maintenance { background: ${colors.status.maintenance}; }

        .status-text {
          font-size: 12px;
          text-transform: capitalize;
          color: ${colors.text.secondary};
        }

        .loading-message,
        .no-results {
          grid-column: 1 / -1;
          text-align: center;
          padding: ${unsafeCSS(spacing['2xl'])};
          color: ${colors.text.secondary};
        }

        .summary {
          text-align: right;
          font-size: 13px;
          margin-top: ${unsafeCSS(spacing.md)};
          color: ${colors.text.secondary};
        }

        @media (max-width: 640px) {
          .container {
            padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
          }

          .controls {
            flex-direction: column;
            align-items: stretch;
          }

          .search-input {
            width: 100%;
          }

          .assets-grid {
            grid-template-columns: 1fr;
            padding: ${unsafeCSS(spacing.md)};
          }

          .asset-card {
            padding: ${unsafeCSS(spacing.sm)};
          }
        }
    `,
  ]

  public render(): TemplateResult {
    const filteredServices = this.getFilteredServices();
    const selectedCount = this.services.filter(s => s.selected).length;
    const categories = this.getUniqueCategories();

    return html`
      <div class="container">
        <uplinternal-miniheading>Monitored Assets</uplinternal-miniheading>
        
        <div class="controls">
          <input
            type="text"
            class="search-input"
            placeholder="Search services..."
            .value=${this.filterText}
            @input=${(e: Event) => {
              this.filterText = (e.target as HTMLInputElement).value;
            }}
          />
          
          <button
            class="filter-button ${this.filterCategory === 'all' ? 'active' : ''}"
            @click=${() => { this.filterCategory = 'all'; }}
          >
            All
          </button>
          
          ${categories.map(category => html`
            <button
              class="filter-button ${this.filterCategory === category ? 'active' : ''}"
              @click=${() => { this.filterCategory = category; }}
            >
              ${category}
            </button>
          `)}
          
          <button
            class="filter-button ${this.showOnlySelected ? 'active' : ''}"
            @click=${() => { this.showOnlySelected = !this.showOnlySelected; }}
          >
            ${this.showOnlySelected ? 'Show All' : 'Selected Only'}
          </button>
          
          <button
            class="filter-button"
            @click=${() => this.selectAll()}
          >
            Select All
          </button>
          
          <button
            class="filter-button"
            @click=${() => this.selectNone()}
          >
            Select None
          </button>
        </div>
        
        <div class="assets-grid">
          ${this.loading ? html`
            <div class="loading-message">Loading services...</div>
          ` : filteredServices.length === 0 ? html`
            <div class="no-results">No services found matching your criteria</div>
          ` : filteredServices.map(service => html`
            <div 
              class="asset-card ${service.selected ? 'selected' : ''}"
              @click=${() => this.toggleService(service.id)}
            >
              <input
                type="checkbox"
                class="asset-checkbox"
                .checked=${service.selected}
                @click=${(e: Event) => e.stopPropagation()}
                @change=${(e: Event) => {
                  e.stopPropagation();
                  this.toggleService(service.id);
                }}
              />
              
              <div class="asset-info">
                <div class="asset-name">${service.displayName}</div>
                ${service.description ? html`
                  <div class="asset-description">${service.description}</div>
                ` : ''}
              </div>
              
              <div class="asset-status">
                <div class="status-indicator ${service.currentStatus}"></div>
                <div class="status-text">${service.currentStatus.replace(/_/g, ' ')}</div>
              </div>
            </div>
          `)}
        </div>
        
        <div class="summary">
          ${selectedCount} of ${this.services.length} services selected
        </div>
      </div>
    `;
  }

  private getFilteredServices(): IServiceStatus[] {
    return this.services.filter(service => {
      // Apply text filter
      if (this.filterText && !service.displayName.toLowerCase().includes(this.filterText.toLowerCase()) &&
          (!service.description || !service.description.toLowerCase().includes(this.filterText.toLowerCase()))) {
        return false;
      }

      // Apply category filter
      if (this.filterCategory !== 'all' && service.category !== this.filterCategory) {
        return false;
      }

      // Apply selected filter
      if (this.showOnlySelected && !service.selected) {
        return false;
      }

      return true;
    });
  }

  private getUniqueCategories(): string[] {
    const categories = new Set<string>();
    this.services.forEach(service => {
      if (service.category) {
        categories.add(service.category);
      }
    });
    return Array.from(categories).sort();
  }

  private toggleService(serviceId: string) {
    const service = this.services.find(s => s.id === serviceId);
    if (service) {
      service.selected = !service.selected;
      this.requestUpdate();
      
      this.dispatchEvent(new CustomEvent('selectionChanged', {
        detail: {
          serviceId,
          selected: service.selected,
          selectedServices: this.services.filter(s => s.selected).map(s => s.id)
        },
        bubbles: true,
        composed: true
      }));
    }
  }

  private selectAll() {
    const filteredServices = this.getFilteredServices();
    filteredServices.forEach(service => {
      service.selected = true;
    });
    this.requestUpdate();
    this.emitSelectionUpdate();
  }

  private selectNone() {
    const filteredServices = this.getFilteredServices();
    filteredServices.forEach(service => {
      service.selected = false;
    });
    this.requestUpdate();
    this.emitSelectionUpdate();
  }

  private emitSelectionUpdate() {
    this.dispatchEvent(new CustomEvent('selectionChanged', {
      detail: {
        selectedServices: this.services.filter(s => s.selected).map(s => s.id)
      },
      bubbles: true,
      composed: true
    }));
  }
}