import * as plugins from '../plugins.js';
import { changeStreamService, type IActivityEvent, type IMongoChangeEvent, type IS3ChangeEvent } from '../services/index.js';
import { themeStyles } from '../styles/index.js';

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

type TFilterMode = 'all' | 'mongodb' | 's3';

@customElement('tsview-activity-stream')
export class TsviewActivityStream extends DeesElement {
  @state()
  private accessor events: IActivityEvent[] = [];

  @state()
  private accessor filterMode: TFilterMode = 'all';

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

  @state()
  private accessor isLoading: boolean = true;

  @state()
  private accessor autoScroll: boolean = true;

  private subscription: plugins.smartrx.rxjs.Subscription | null = null;
  private connectionSubscription: plugins.smartrx.rxjs.Subscription | null = null;

  public static styles = [
    cssManager.defaultStyles,
    themeStyles,
    css`
      :host {
        display: block;
        height: 100%;
        overflow: hidden;
      }

      .activity-container {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid #333;
      }

      .header-title {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .connection-status {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 400;
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .status-dot.connected {
        background: #22c55e;
        box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
      }

      .status-dot.disconnected {
        background: #ef4444;
      }

      .status-dot.connecting {
        background: #f59e0b;
        animation: pulse 1s infinite;
      }

      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
      }

      .header-controls {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .filter-tabs {
        display: flex;
        gap: 4px;
      }

      .filter-tab {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid #444;
        color: #888;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.2s;
      }

      .filter-tab:hover {
        border-color: #666;
        color: #aaa;
      }

      .filter-tab.active {
        background: rgba(255, 255, 255, 0.1);
        border-color: #666;
        color: #e0e0e0;
      }

      .auto-scroll-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #888;
        cursor: pointer;
      }

      .auto-scroll-toggle input {
        cursor: pointer;
      }

      .events-list {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
      }

      .event-item {
        display: flex;
        gap: 12px;
        padding: 12px;
        margin-bottom: 8px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.1s;
      }

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

      .event-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .event-icon.mongodb {
        background: rgba(16, 185, 129, 0.2);
        color: #10b981;
      }

      .event-icon.s3 {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
      }

      .event-icon svg {
        width: 18px;
        height: 18px;
      }

      .event-content {
        flex: 1;
        min-width: 0;
      }

      .event-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
      }

      .event-title {
        font-size: 13px;
        font-weight: 500;
        color: #e0e0e0;
      }

      .event-time {
        font-size: 11px;
        color: #666;
      }

      .event-details {
        font-size: 12px;
        color: #888;
        font-family: monospace;
      }

      .event-type {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 500;
        text-transform: uppercase;
        margin-right: 8px;
      }

      .event-type.insert, .event-type.add {
        background: rgba(34, 197, 94, 0.2);
        color: #4ade80;
      }

      .event-type.update, .event-type.modify {
        background: rgba(59, 130, 246, 0.2);
        color: #60a5fa;
      }

      .event-type.delete {
        background: rgba(239, 68, 68, 0.2);
        color: #f87171;
      }

      .event-type.replace {
        background: rgba(168, 85, 247, 0.2);
        color: #c084fc;
      }

      .event-type.drop, .event-type.invalidate {
        background: rgba(239, 68, 68, 0.3);
        color: #f87171;
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #666;
        gap: 16px;
      }

      .empty-state svg {
        width: 64px;
        height: 64px;
        opacity: 0.5;
      }

      .empty-state p {
        font-size: 14px;
      }

      .loading-state {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #888;
      }

      .event-path {
        color: #aaa;
        word-break: break-all;
      }
    `,
  ];

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

  disconnectedCallback() {
    super.disconnectedCallback();
    this.cleanup();
  }

  private async initializeStreaming() {
    this.isLoading = true;

    try {
      // Connect to WebSocket if not connected
      await changeStreamService.connect();

      // Subscribe to connection status
      this.connectionSubscription = changeStreamService.connectionStatus$.subscribe((status) => {
        this.isConnected = status === 'connected';
      });

      // Subscribe to activity stream
      await changeStreamService.subscribeToActivity();

      // Load recent events
      const recentEvents = await changeStreamService.getRecentActivity(100);
      this.events = recentEvents;

      // Subscribe to new events
      this.subscription = changeStreamService.getActivityStream().subscribe((event) => {
        this.events = [...this.events, event].slice(-500); // Keep last 500 events

        // Auto-scroll if enabled
        if (this.autoScroll) {
          this.scrollToBottom();
        }
      });

      this.isConnected = true;
    } catch (error) {
      console.error('Failed to initialize activity stream:', error);
      this.isConnected = false;
    }

    this.isLoading = false;
  }

  private cleanup() {
    if (this.subscription) {
      this.subscription.unsubscribe();
      this.subscription = null;
    }
    if (this.connectionSubscription) {
      this.connectionSubscription.unsubscribe();
      this.connectionSubscription = null;
    }
    changeStreamService.unsubscribeFromActivity();
  }

  private scrollToBottom() {
    requestAnimationFrame(() => {
      const list = this.shadowRoot?.querySelector('.events-list');
      if (list) {
        list.scrollTop = list.scrollHeight;
      }
    });
  }

  private setFilterMode(mode: TFilterMode) {
    this.filterMode = mode;
  }

  private toggleAutoScroll() {
    this.autoScroll = !this.autoScroll;
  }

  private get filteredEvents(): IActivityEvent[] {
    if (this.filterMode === 'all') {
      return this.events;
    }
    return this.events.filter((e) => e.source === this.filterMode);
  }

  private formatTime(timestamp: string): string {
    const date = new Date(timestamp);
    return date.toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    });
  }

  private formatRelativeTime(timestamp: string): string {
    const date = new Date(timestamp);
    const now = new Date();
    const diff = now.getTime() - date.getTime();

    if (diff < 60000) {
      return 'just now';
    } else if (diff < 3600000) {
      const mins = Math.floor(diff / 60000);
      return `${mins}m ago`;
    } else if (diff < 86400000) {
      const hours = Math.floor(diff / 3600000);
      return `${hours}h ago`;
    } else {
      return date.toLocaleDateString();
    }
  }

  private getEventTitle(event: IActivityEvent): string {
    if (event.source === 'mongodb') {
      const mongoEvent = event.event as IMongoChangeEvent;
      return `${mongoEvent.database}.${mongoEvent.collection}`;
    } else {
      const s3Event = event.event as IS3ChangeEvent;
      return s3Event.bucket;
    }
  }

  private getEventDetails(event: IActivityEvent): string {
    if (event.source === 'mongodb') {
      const mongoEvent = event.event as IMongoChangeEvent;
      if (mongoEvent.documentId) {
        return `Document: ${mongoEvent.documentId}`;
      }
      return '';
    } else {
      const s3Event = event.event as IS3ChangeEvent;
      return s3Event.key;
    }
  }

  private getEventType(event: IActivityEvent): string {
    return event.event.type;
  }

  private handleEventClick(event: IActivityEvent) {
    // Dispatch navigation event
    if (event.source === 'mongodb') {
      const mongoEvent = event.event as IMongoChangeEvent;
      this.dispatchEvent(
        new CustomEvent('navigate-to-mongo', {
          detail: {
            database: mongoEvent.database,
            collection: mongoEvent.collection,
            documentId: mongoEvent.documentId,
          },
          bubbles: true,
          composed: true,
        })
      );
    } else {
      const s3Event = event.event as IS3ChangeEvent;
      this.dispatchEvent(
        new CustomEvent('navigate-to-s3', {
          detail: {
            bucket: s3Event.bucket,
            key: s3Event.key,
          },
          bubbles: true,
          composed: true,
        })
      );
    }
  }

  private renderMongoIcon() {
    return html`
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
      </svg>
    `;
  }

  private renderS3Icon() {
    return html`
      <svg 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>
    `;
  }

  private getConnectionStatusText(): string {
    if (this.isConnected) {
      return 'Live';
    }
    return 'Disconnected';
  }

  render() {
    return html`
      <div class="activity-container">
        <div class="header">
          <div class="header-title">
            Activity Stream
            <div class="connection-status">
              <span class="status-dot ${this.isConnected ? 'connected' : 'disconnected'}"></span>
              ${this.getConnectionStatusText()}
            </div>
          </div>
          <div class="header-controls">
            <div class="filter-tabs">
              <button
                class="filter-tab ${this.filterMode === 'all' ? 'active' : ''}"
                @click=${() => this.setFilterMode('all')}
              >
                All
              </button>
              <button
                class="filter-tab ${this.filterMode === 'mongodb' ? 'active' : ''}"
                @click=${() => this.setFilterMode('mongodb')}
              >
                MongoDB
              </button>
              <button
                class="filter-tab ${this.filterMode === 's3' ? 'active' : ''}"
                @click=${() => this.setFilterMode('s3')}
              >
                S3
              </button>
            </div>
            <label class="auto-scroll-toggle">
              <input
                type="checkbox"
                .checked=${this.autoScroll}
                @change=${this.toggleAutoScroll}
              />
              Auto-scroll
            </label>
          </div>
        </div>

        <div class="events-list">
          ${this.isLoading
            ? html`<div class="loading-state">Connecting to activity stream...</div>`
            : this.filteredEvents.length === 0
              ? html`
                  <div class="empty-state">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                    </svg>
                    <p>No activity yet. Changes will appear here in real-time.</p>
                  </div>
                `
              : this.filteredEvents.map(
                  (event) => html`
                    <div class="event-item" @click=${() => this.handleEventClick(event)}>
                      <div class="event-icon ${event.source}">
                        ${event.source === 'mongodb' ? this.renderMongoIcon() : this.renderS3Icon()}
                      </div>
                      <div class="event-content">
                        <div class="event-header">
                          <div class="event-title">
                            <span class="event-type ${this.getEventType(event)}">${this.getEventType(event)}</span>
                            ${this.getEventTitle(event)}
                          </div>
                          <div class="event-time" title=${this.formatTime(event.timestamp)}>
                            ${this.formatRelativeTime(event.timestamp)}
                          </div>
                        </div>
                        <div class="event-details">
                          <span class="event-path">${this.getEventDetails(event)}</span>
                        </div>
                      </div>
                    </div>
                  `
                )}
        </div>
      </div>
    `;
  }
}