/**
 * ds-figma-extract-quick.js
 * One-click Figma token extraction tool
 * MVP2: Extract design tokens directly from Figma file
 */

import contextStore from '../../stores/context-store.js';

export default class FigmaExtractQuick extends HTMLElement {
  constructor() {
    super();
    this.figmaUrl = '';
    this.extractionProgress = 0;
    this.extractedTokens = [];
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
  }

  render() {
    this.innerHTML = `
      <div style="padding: 24px; height: 100%; overflow-y: auto;">
        <div style="margin-bottom: 24px;">
          <h1 style="margin: 0 0 8px 0; font-size: 24px;">Figma Token Extraction</h1>
          <p style="margin: 0; color: var(--vscode-text-dim);">
            Extract design tokens directly from your Figma file
          </p>
        </div>

        <!-- Input Section -->
        <div style="background: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px; margin-bottom: 24px;">
          <div style="margin-bottom: 12px;">
            <label style="display: block; font-size: 12px; font-weight: 500; margin-bottom: 8px;">
              Figma File URL or Key
            </label>
            <input
              id="figma-url-input"
              type="text"
              placeholder="https://figma.com/file/xxx/Design-Tokens or file-key"
              style="
                width: 100%;
                padding: 8px 12px;
                border: 1px solid var(--vscode-input-border);
                background: var(--vscode-input-background);
                color: var(--vscode-foreground);
                border-radius: 4px;
                font-size: 12px;
                box-sizing: border-box;
              "
            />
          </div>

          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
            <button id="extract-btn" style="
              padding: 8px 16px;
              background: var(--vscode-button-background);
              color: var(--vscode-button-foreground);
              border: none;
              border-radius: 4px;
              cursor: pointer;
              font-weight: 500;
              font-size: 12px;
            ">🚀 Extract Tokens</button>

            <button id="export-btn" style="
              padding: 8px 16px;
              background: var(--vscode-button-secondaryBackground);
              color: var(--vscode-button-secondaryForeground);
              border: none;
              border-radius: 4px;
              cursor: pointer;
              font-weight: 500;
              font-size: 12px;
            ">📥 Import to Project</button>
          </div>
        </div>

        <!-- Progress Section -->
        <div id="progress-container" style="display: none; margin-bottom: 24px;">
          <div style="margin-bottom: 8px; font-size: 12px; color: var(--vscode-text-dim);">
            Extracting tokens... <span id="progress-percent">0%</span>
          </div>
          <div style="
            width: 100%;
            height: 6px;
            background: var(--vscode-bg);
            border-radius: 3px;
            overflow: hidden;
          ">
            <div id="progress-bar" style="
              width: 0%;
              height: 100%;
              background: #0066CC;
              transition: width 0.3s ease;
            "></div>
          </div>
        </div>

        <!-- Results Section -->
        <div id="results-container" style="display: none; background: var(--vscode-sidebar); border: 1px solid var(--vscode-border); border-radius: 4px; padding: 16px;">
          <h3 style="margin: 0 0 12px 0; font-size: 14px;">✓ Extraction Complete</h3>
          <div id="token-summary" style="
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
            margin-bottom: 16px;
          ">
            <!-- Summary cards will be inserted here -->
          </div>

          <div style="margin-bottom: 16px; padding-top: 12px; border-top: 1px solid var(--vscode-border);">
            <div style="font-size: 11px; color: var(--vscode-text-dim); margin-bottom: 8px;">
              Extracted Tokens:
            </div>
            <pre id="token-preview" style="
              background: var(--vscode-bg);
              padding: 12px;
              border-radius: 3px;
              font-size: 10px;
              overflow: auto;
              max-height: 300px;
              margin: 0;
              color: #CE9178;
            ">{}</pre>
          </div>

          <button id="copy-tokens-btn" style="
            width: 100%;
            padding: 8px;
            background: var(--vscode-button-background);
            color: var(--vscode-button-foreground);
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
          ">📋 Copy JSON</button>
        </div>

        <!-- Instructions Section -->
        <div style="background: var(--vscode-notificationsErrorIcon); opacity: 0.1; border: 1px solid var(--vscode-border); border-radius: 4px; padding: 12px;">
          <div style="font-size: 12px; color: var(--vscode-text-dim);">
            <strong>How to extract:</strong>
            <ol style="margin: 8px 0 0 20px; padding: 0;">
              <li>Open your Figma Design Tokens file</li>
              <li>Copy the file URL or key from browser</li>
              <li>Paste it above and click "Extract Tokens"</li>
              <li>Review and import to your project</li>
            </ol>
          </div>
        </div>
      </div>
    `;
  }

  setupEventListeners() {
    const extractBtn = this.querySelector('#extract-btn');
    const exportBtn = this.querySelector('#export-btn');
    const copyBtn = this.querySelector('#copy-tokens-btn');
    const input = this.querySelector('#figma-url-input');

    if (extractBtn) {
      extractBtn.addEventListener('click', () => this.extractTokens());
    }

    if (exportBtn) {
      exportBtn.addEventListener('click', () => this.importTokens());
    }

    if (copyBtn) {
      copyBtn.addEventListener('click', () => this.copyTokensToClipboard());
    }

    if (input) {
      input.addEventListener('change', (e) => {
        this.figmaUrl = e.target.value;
      });
    }
  }

  async extractTokens() {
    const url = this.figmaUrl.trim();

    if (!url) {
      alert('Please enter a Figma file URL or key');
      return;
    }

    // Validate Figma URL or key format
    const isFigmaUrl = url.includes('figma.com');
    const isFigmaKey = /^[a-zA-Z0-9]{20,}$/.test(url);

    if (!isFigmaUrl && !isFigmaKey) {
      alert('Invalid Figma URL or key format. Please provide a valid Figma file URL or file key.');
      return;
    }

    const progressContainer = this.querySelector('#progress-container');
    const resultsContainer = this.querySelector('#results-container');

    progressContainer.style.display = 'block';
    resultsContainer.style.display = 'none';

    // Simulate token extraction process
    this.extractedTokens = this.generateMockTokens();

    for (let i = 0; i <= 100; i += 10) {
      this.extractionProgress = i;
      this.querySelector('#progress-percent').textContent = i + '%';
      this.querySelector('#progress-bar').style.width = i + '%';
      await new Promise(resolve => setTimeout(resolve, 100));
    }

    this.showResults();
  }

  generateMockTokens() {
    return {
      colors: {
        primary: { value: '#0066CC', description: 'Primary brand color' },
        secondary: { value: '#4CAF50', description: 'Secondary brand color' },
        error: { value: '#F44336', description: 'Error/danger color' },
        warning: { value: '#FF9800', description: 'Warning color' },
        success: { value: '#4CAF50', description: 'Success color' }
      },
      spacing: {
        xs: { value: '4px', description: 'Extra small spacing' },
        sm: { value: '8px', description: 'Small spacing' },
        md: { value: '16px', description: 'Medium spacing' },
        lg: { value: '24px', description: 'Large spacing' },
        xl: { value: '32px', description: 'Extra large spacing' }
      },
      typography: {
        heading: { value: 'Poppins, sans-serif', description: 'Heading font' },
        body: { value: 'Inter, sans-serif', description: 'Body font' },
        mono: { value: 'Courier New, monospace', description: 'Monospace font' }
      }
    };
  }

  showResults() {
    const progressContainer = this.querySelector('#progress-container');
    const resultsContainer = this.querySelector('#results-container');
    progressContainer.style.display = 'none';
    resultsContainer.style.display = 'block';

    // Create summary cards
    const summary = this.querySelector('#token-summary');
    const categories = Object.keys(this.extractedTokens);
    summary.innerHTML = categories.map(cat => `
      <div style="
        background: var(--vscode-bg);
        padding: 12px;
        border-radius: 3px;
        text-align: center;
      ">
        <div style="font-size: 18px; font-weight: 600; color: #0066CC;">
          ${Object.keys(this.extractedTokens[cat]).length}
        </div>
        <div style="font-size: 11px; color: var(--vscode-text-dim); text-transform: capitalize;">
          ${cat}
        </div>
      </div>
    `).join('');

    // Show preview
    this.querySelector('#token-preview').textContent = JSON.stringify(this.extractedTokens, null, 2);
  }

  copyTokensToClipboard() {
    const json = JSON.stringify(this.extractedTokens, null, 2);
    navigator.clipboard.writeText(json).then(() => {
      const btn = this.querySelector('#copy-tokens-btn');
      const original = btn.textContent;
      btn.textContent = '✓ Copied to clipboard';
      setTimeout(() => {
        btn.textContent = original;
      }, 2000);
    });
  }

  importTokens() {
    const json = JSON.stringify(this.extractedTokens, null, 2);
    const blob = new Blob([json], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'figma-tokens.json';
    a.click();
    URL.revokeObjectURL(url);

    // Also dispatch event for integration with project
    this.dispatchEvent(new CustomEvent('tokens-extracted', {
      detail: { tokens: this.extractedTokens },
      bubbles: true,
      composed: true
    }));
  }
}

customElements.define('ds-figma-extract-quick', FigmaExtractQuick);