import * as plugins from '../plugins.js';
import { apiService, type IMongoCollection } from '../services/index.js';

const { html, css, cssManager, customElement, property, state, DeesElement } = plugins;

@customElement('tsview-mongo-collections')
export class TsviewMongoCollections extends DeesElement {
  @property({ type: String })
  public accessor databaseName: string = '';

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

  @state()
  private accessor collections: IMongoCollection[] = [];

  @state()
  private accessor loading: boolean = false;

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

      .collections-list {
        padding-left: 12px;
      }

      .collection-item {
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: background 0.1s;
      }

      .collection-item:hover {
        background: rgba(255, 255, 255, 0.05);
      }

      .collection-item.selected {
        background: rgba(99, 102, 241, 0.15);
        color: #818cf8;
      }

      .collection-name {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .collection-icon {
        width: 14px;
        height: 14px;
        color: #888;
      }

      .collection-count {
        font-size: 11px;
        color: #666;
        background: rgba(255, 255, 255, 0.1);
        padding: 2px 6px;
        border-radius: 10px;
      }

      .loading-state {
        padding: 8px 12px;
        color: #666;
        font-size: 12px;
      }

      .empty-state {
        padding: 8px 12px;
        color: #666;
        font-size: 12px;
        font-style: italic;
      }
    `,
  ];

  async connectedCallback() {
    super.connectedCallback();
    await this.loadCollections();
  }

  updated(changedProperties: Map<string, unknown>) {
    if (changedProperties.has('databaseName')) {
      this.loadCollections();
    }
  }

  private async loadCollections() {
    if (!this.databaseName) return;

    this.loading = true;
    try {
      this.collections = await apiService.listCollections(this.databaseName);
    } catch (err) {
      console.error('Error loading collections:', err);
      this.collections = [];
    }
    this.loading = false;
  }

  private selectCollection(name: string) {
    this.dispatchEvent(
      new CustomEvent('collection-selected', {
        detail: name,
        bubbles: true,
        composed: true,
      })
    );
  }

  private formatCount(count?: number): string {
    if (count === undefined) return '';
    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
    if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
    return count.toString();
  }

  render() {
    if (this.loading) {
      return html`<div class="loading-state">Loading collections...</div>`;
    }

    if (this.collections.length === 0) {
      return html`<div class="empty-state">No collections</div>`;
    }

    return html`
      <div class="collections-list">
        ${this.collections.map(
          (coll) => html`
            <div
              class="collection-item ${this.selectedCollection === coll.name ? 'selected' : ''}"
              @click=${() => this.selectCollection(coll.name)}
            >
              <span class="collection-name">
                <svg class="collection-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
                </svg>
                ${coll.name}
              </span>
              ${coll.count !== undefined
                ? html`<span class="collection-count">${this.formatCount(coll.count)}</span>`
                : ''}
            </div>
          `
        )}
      </div>
    `;
  }
}