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

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

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

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

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

  @state()
  private accessor document: Record<string, unknown> | null = null;

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

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

  @state()
  private accessor editContent: string = '';

  @state()
  private accessor error: string = '';

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

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

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

      .header-title {
        font-size: 14px;
        font-weight: 500;
      }

      .header-actions {
        display: flex;
        gap: 8px;
      }

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

      .action-btn:hover {
        border-color: #666;
        color: #aaa;
      }

      .action-btn.primary {
        background: rgba(99, 102, 241, 0.2);
        border-color: #6366f1;
        color: #818cf8;
      }

      .action-btn.primary:hover {
        background: rgba(99, 102, 241, 0.3);
      }

      .action-btn.danger {
        background: rgba(239, 68, 68, 0.2);
        border-color: #ef4444;
        color: #f87171;
      }

      .action-btn.danger:hover {
        background: rgba(239, 68, 68, 0.3);
      }

      .content {
        flex: 1;
        overflow: auto;
        padding: 12px;
      }

      .json-view {
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 12px;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-all;
        color: #ccc;
      }

      .json-key {
        color: #818cf8;
      }

      .json-string {
        color: #a5d6a7;
      }

      .json-number {
        color: #fbbf24;
      }

      .json-boolean {
        color: #f87171;
      }

      .json-null {
        color: #888;
      }

      .edit-area {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid #444;
        border-radius: 6px;
        color: #fff;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 12px;
        line-height: 1.6;
        padding: 12px;
        resize: none;
      }

      .edit-area:focus {
        outline: none;
        border-color: #6366f1;
      }

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

      .empty-state svg {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
      }

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

      .error-state {
        padding: 16px;
        color: #f87171;
        text-align: center;
      }
    `,
  ];

  updated(changedProperties: Map<string, unknown>) {
    if (changedProperties.has('documentId')) {
      this.editing = false;
      if (this.documentId) {
        this.loadDocument();
      } else {
        this.document = null;
      }
    }
  }

  private async loadDocument() {
    if (!this.documentId || !this.databaseName || !this.collectionName) return;

    this.loading = true;
    this.error = '';

    try {
      this.document = await apiService.getDocument(
        this.databaseName,
        this.collectionName,
        this.documentId
      );
    } catch (err) {
      console.error('Error loading document:', err);
      this.error = 'Failed to load document';
    }

    this.loading = false;
  }

  private startEditing() {
    this.editContent = JSON.stringify(this.document, null, 2);
    this.editing = true;
  }

  private cancelEditing() {
    this.editing = false;
    this.editContent = '';
  }

  private async saveDocument() {
    try {
      const updatedDoc = JSON.parse(this.editContent);

      // Remove _id from update (can't update _id)
      const { _id, ...updateFields } = updatedDoc;

      await apiService.updateDocument(
        this.databaseName,
        this.collectionName,
        this.documentId,
        updateFields
      );

      this.editing = false;
      await this.loadDocument();

      this.dispatchEvent(
        new CustomEvent('document-updated', {
          detail: { documentId: this.documentId },
          bubbles: true,
          composed: true,
        })
      );
    } catch (err) {
      console.error('Error saving document:', err);
      this.error = 'Invalid JSON or save failed';
    }
  }

  private async deleteDocument() {
    if (!confirm('Delete this document?')) return;

    try {
      await apiService.deleteDocument(
        this.databaseName,
        this.collectionName,
        this.documentId
      );

      this.dispatchEvent(
        new CustomEvent('document-deleted', {
          detail: { documentId: this.documentId },
          bubbles: true,
          composed: true,
        })
      );

      this.document = null;
    } catch (err) {
      console.error('Error deleting document:', err);
      this.error = 'Delete failed';
    }
  }

  private formatJson(obj: unknown): string {
    return JSON.stringify(obj, null, 2);
  }

  private syntaxHighlight(json: string): string {
    // Basic syntax highlighting
    return json
      .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
      .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
      .replace(/: (\d+\.?\d*)/g, ': <span class="json-number">$1</span>')
      .replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
      .replace(/: (null)/g, ': <span class="json-null">$1</span>');
  }

  render() {
    if (!this.documentId) {
      return html`
        <div class="document-container">
          <div class="empty-state">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
              <polyline points="14 2 14 8 20 8" />
            </svg>
            <p>Select a document to view</p>
          </div>
        </div>
      `;
    }

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

    if (this.error && !this.document) {
      return html`
        <div class="document-container">
          <div class="error-state">${this.error}</div>
        </div>
      `;
    }

    return html`
      <div class="document-container">
        <div class="header">
          <span class="header-title">Document</span>
          <div class="header-actions">
            ${this.editing
              ? html`
                  <button class="action-btn" @click=${this.cancelEditing}>Cancel</button>
                  <button class="action-btn primary" @click=${this.saveDocument}>Save</button>
                `
              : html`
                  <button class="action-btn" @click=${this.startEditing}>Edit</button>
                  <button class="action-btn danger" @click=${this.deleteDocument}>Delete</button>
                `}
          </div>
        </div>

        <div class="content">
          ${this.editing
            ? html`
                <textarea
                  class="edit-area"
                  .value=${this.editContent}
                  @input=${(e: Event) => (this.editContent = (e.target as HTMLTextAreaElement).value)}
                ></textarea>
              `
            : html`
                <div
                  class="json-view"
                  .innerHTML=${this.syntaxHighlight(this.formatJson(this.document))}
                ></div>
              `}
        </div>
      </div>
    `;
  }
}