/**
 * tool-templates.js
 * Reusable template functions for building team-specific tool components
 * Follows DRY principles to avoid code duplication across 14 team tools
 */

import { ComponentHelpers } from './component-helpers.js';
import toolBridge from '../services/tool-bridge.js';

/**
 * Create a side-by-side comparison view
 * Used for: Storybook/Figma, Storybook/Live, Figma/Live comparisons
 *
 * @param {Object} config
 * @param {string} config.leftTitle - Title for left panel
 * @param {string} config.rightTitle - Title for right panel
 * @param {string} config.leftSrc - URL or content for left panel
 * @param {string} config.rightSrc - URL or content for right panel
 * @param {Function} config.onSync - Optional sync scroll callback
 * @returns {string} HTML template
 */
export function createComparisonView(config) {
  const {
    leftTitle = 'Left',
    rightTitle = 'Right',
    leftSrc = '',
    rightSrc = '',
    onSync = null
  } = config;

  return `
    <div style="display: flex; flex-direction: column; height: 100%;">
      <!-- Toolbar -->
      <div style="padding: 12px 16px; border-bottom: 1px solid var(--vscode-border); display: flex; justify-content: space-between; align-items: center;">
        <div style="display: flex; gap: 12px; align-items: center;">
          <button id="sync-scroll-btn" class="button" style="font-size: 11px; padding: 4px 12px;">
            🔗 Sync Scroll
          </button>
          <button id="reset-zoom-btn" class="button" style="font-size: 11px; padding: 4px 12px;">
            🔍 Reset Zoom
          </button>
        </div>
        <div style="font-size: 11px; color: var(--vscode-text-dim);">
          Use mouse wheel to zoom, drag to pan
        </div>
      </div>

      <!-- Comparison Panels -->
      <div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--vscode-border); overflow: hidden;">
        <!-- Left Panel -->
        <div style="background: var(--vscode-bg); display: flex; flex-direction: column;">
          <div style="padding: 8px 12px; background: var(--vscode-sidebar); border-bottom: 1px solid var(--vscode-border); font-size: 12px; font-weight: 600;">
            ${ComponentHelpers.escapeHtml(leftTitle)}
          </div>
          <div id="left-panel-content" style="flex: 1; overflow: auto; position: relative;">
            ${leftSrc ? `<iframe src="${ComponentHelpers.escapeHtml(leftSrc)}" style="width: 100%; height: 100%; border: none;"></iframe>` : ComponentHelpers.renderEmpty('Select content to display', '📄')}
          </div>
        </div>

        <!-- Right Panel -->
        <div style="background: var(--vscode-bg); display: flex; flex-direction: column;">
          <div style="padding: 8px 12px; background: var(--vscode-sidebar); border-bottom: 1px solid var(--vscode-border); font-size: 12px; font-weight: 600;">
            ${ComponentHelpers.escapeHtml(rightTitle)}
          </div>
          <div id="right-panel-content" style="flex: 1; overflow: auto; position: relative;">
            ${rightSrc ? `<iframe src="${ComponentHelpers.escapeHtml(rightSrc)}" style="width: 100%; height: 100%; border: none;"></iframe>` : ComponentHelpers.renderEmpty('Select content to display', '📄')}
          </div>
        </div>
      </div>
    </div>
  `;
}

/**
 * Create a list view with search, filter, and actions
 * Used for: Token list, Asset list, Component list
 *
 * @param {Object} config
 * @param {string} config.title - List title
 * @param {Array} config.items - Array of items to display
 * @param {Array} config.columns - Column definitions [{ key, label, render }]
 * @param {Array} config.actions - Action buttons [{ label, icon, onClick }]
 * @param {Function} config.onSearch - Search callback
 * @param {Function} config.onFilter - Filter callback
 * @returns {string} HTML template
 */
export function createListView(config) {
  const {
    title = 'Items',
    items = [],
    columns = [],
    actions = [],
    onSearch = null,
    onFilter = null
  } = config;

  return `
    <div style="display: flex; flex-direction: column; height: 100%;">
      <!-- Header -->
      <div style="padding: 16px; border-bottom: 1px solid var(--vscode-border);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
          <h2 style="font-size: 16px; font-weight: 600;">${ComponentHelpers.escapeHtml(title)}</h2>
          <div style="display: flex; gap: 8px;">
            ${actions.map((action, idx) => `
              <button class="action-btn button" data-action-idx="${idx}" style="font-size: 11px; padding: 4px 12px;">
                ${action.icon || ''} ${ComponentHelpers.escapeHtml(action.label)}
              </button>
            `).join('')}
          </div>
        </div>

        <!-- Search Bar -->
        <div style="display: flex; gap: 8px;">
          <input
            type="text"
            id="search-input"
            placeholder="Search..."
            class="input"
            style="flex: 1; font-size: 12px;"
          />
          <select id="filter-select" class="input" style="font-size: 12px; width: 150px;">
            <option value="">All Types</option>
          </select>
        </div>
      </div>

      <!-- Table -->
      <div style="flex: 1; overflow: auto;">
        ${items.length === 0 ? ComponentHelpers.renderEmpty(`No ${title.toLowerCase()} found`, '📦') : `
          <table style="width: 100%; border-collapse: collapse; font-size: 12px;">
            <thead style="position: sticky; top: 0; background: var(--vscode-sidebar); z-index: 1;">
              <tr>
                ${columns.map(col => `
                  <th style="padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--vscode-border); font-weight: 600;">
                    ${ComponentHelpers.escapeHtml(col.label)}
                  </th>
                `).join('')}
              </tr>
            </thead>
            <tbody>
              ${items.map((item, itemIdx) => `
                <tr style="border-bottom: 1px solid var(--vscode-border);" onmouseover="this.style.background='var(--vscode-list-hoverBackground)'" onmouseout="this.style.background='transparent'">
                  ${columns.map(col => `
                    <td style="padding: 8px 12px;">
                      ${col.render ? col.render(item) : ComponentHelpers.escapeHtml(String(item[col.key] || ''))}
                    </td>
                  `).join('')}
                </tr>
              `).join('')}
            </tbody>
          </table>
        `}
      </div>

      <!-- Footer -->
      <div style="padding: 12px 16px; border-top: 1px solid var(--vscode-border); font-size: 11px; color: var(--vscode-text-dim);">
        Showing ${items.length} ${title.toLowerCase()}
      </div>
    </div>
  `;
}

/**
 * Create an editor view with save/export functionality
 * Used for: ESRE editor, configuration editors
 *
 * @param {Object} config
 * @param {string} config.title - Editor title
 * @param {string} config.content - Initial content
 * @param {string} config.language - Syntax highlighting language (text, json, yaml, etc.)
 * @param {Function} config.onSave - Save callback
 * @param {Function} config.onExport - Export callback
 * @returns {string} HTML template
 */
export function createEditorView(config) {
  const {
    title = 'Editor',
    content = '',
    language = 'text',
    onSave = null,
    onExport = null
  } = config;

  return `
    <div style="display: flex; flex-direction: column; height: 100%;">
      <!-- Header -->
      <div style="padding: 12px 16px; border-bottom: 1px solid var(--vscode-border); display: flex; justify-content: space-between; align-items: center;">
        <h2 style="font-size: 14px; font-weight: 600;">${ComponentHelpers.escapeHtml(title)}</h2>
        <div style="display: flex; gap: 8px;">
          <button id="editor-save-btn" class="button" style="font-size: 11px; padding: 4px 12px;">
            💾 Save
          </button>
          <button id="editor-export-btn" class="button" style="font-size: 11px; padding: 4px 12px;">
            📥 Export
          </button>
          <button id="editor-clear-btn" class="button" style="font-size: 11px; padding: 4px 12px;">
            🗑️ Clear
          </button>
        </div>
      </div>

      <!-- Editor -->
      <div style="flex: 1; overflow: hidden; position: relative;">
        <textarea
          id="editor-content"
          class="input"
          style="width: 100%; height: 100%; resize: none; font-family: 'Courier New', monospace; font-size: 12px; padding: 16px; border: none;"
          placeholder="Enter content here..."
        >${ComponentHelpers.escapeHtml(content)}</textarea>
      </div>

      <!-- Footer Stats -->
      <div style="padding: 8px 16px; border-top: 1px solid var(--vscode-border); display: flex; justify-content: space-between; font-size: 10px; color: var(--vscode-text-dim);">
        <span id="editor-stats">0 lines, 0 characters</span>
        <span>Language: ${language}</span>
      </div>
    </div>
  `;
}

/**
 * Create a gallery/grid view for visual content
 * Used for: Screenshot gallery, navigation demos
 *
 * @param {Object} config
 * @param {string} config.title - Gallery title
 * @param {Array} config.items - Array of items with { id, src, title, subtitle }
 * @param {Function} config.onItemClick - Item click callback
 * @param {Function} config.onDelete - Delete callback
 * @returns {string} HTML template
 */
export function createGalleryView(config) {
  const {
    title = 'Gallery',
    items = [],
    onItemClick = null,
    onDelete = null
  } = config;

  return `
    <div style="display: flex; flex-direction: column; height: 100%;">
      <!-- Header -->
      <div style="padding: 16px; border-bottom: 1px solid var(--vscode-border);">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <h2 style="font-size: 16px; font-weight: 600;">${ComponentHelpers.escapeHtml(title)}</h2>
          <div style="font-size: 11px; color: var(--vscode-text-dim);">
            ${items.length} ${items.length === 1 ? 'item' : 'items'}
          </div>
        </div>
      </div>

      <!-- Gallery Grid -->
      <div style="flex: 1; overflow: auto; padding: 16px;">
        ${items.length === 0 ? ComponentHelpers.renderEmpty(`No ${title.toLowerCase()} available`, '🖼️') : `
          <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;">
            ${items.map((item, idx) => `
              <div class="gallery-item" data-item-idx="${idx}" style="
                background: var(--vscode-sidebar);
                border: 1px solid var(--vscode-border);
                border-radius: 4px;
                overflow: hidden;
                cursor: pointer;
                transition: transform 0.2s, box-shadow 0.2s;
              " onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
                <!-- Image/Preview -->
                <div style="aspect-ratio: 16/9; background: var(--vscode-bg); display: flex; align-items: center; justify-content: center; overflow: hidden;">
                  ${item.src ? `<img src="${ComponentHelpers.escapeHtml(item.src)}" style="width: 100%; height: 100%; object-fit: cover;" />` : '<div style="font-size: 48px;">📄</div>'}
                </div>

                <!-- Info -->
                <div style="padding: 12px;">
                  <div style="font-size: 12px; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                    ${ComponentHelpers.escapeHtml(item.title || 'Untitled')}
                  </div>
                  ${item.subtitle ? `<div style="font-size: 10px; color: var(--vscode-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${ComponentHelpers.escapeHtml(item.subtitle)}</div>` : ''}
                </div>

                <!-- Actions -->
                ${onDelete ? `
                  <div style="padding: 0 12px 12px;">
                    <button class="gallery-delete-btn button" data-item-idx="${idx}" style="width: 100%; font-size: 10px; padding: 4px;">
                      🗑️ Delete
                    </button>
                  </div>
                ` : ''}
              </div>
            `).join('')}
          </div>
        `}
      </div>
    </div>
  `;
}

/**
 * Create a form view with validation
 * Used for: Project analysis configuration, quick wins settings
 *
 * @param {Object} config
 * @param {string} config.title - Form title
 * @param {Array} config.fields - Field definitions [{ name, label, type, placeholder, required }]
 * @param {Function} config.onSubmit - Submit callback
 * @returns {string} HTML template
 */
export function createFormView(config) {
  const {
    title = 'Configuration',
    fields = [],
    onSubmit = null
  } = config;

  return `
    <div style="padding: 24px; max-width: 600px; margin: 0 auto;">
      <h2 style="font-size: 16px; font-weight: 600; margin-bottom: 24px;">${ComponentHelpers.escapeHtml(title)}</h2>

      <form id="config-form" style="display: flex; flex-direction: column; gap: 16px;">
        ${fields.map(field => `
          <div>
            <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px;">
              ${ComponentHelpers.escapeHtml(field.label)}
              ${field.required ? '<span style="color: #f48771;">*</span>' : ''}
            </label>
            ${field.type === 'textarea' ? `
              <textarea
                name="${field.name}"
                class="input"
                placeholder="${ComponentHelpers.escapeHtml(field.placeholder || '')}"
                style="width: 100%; min-height: 80px; font-size: 12px;"
                ${field.required ? 'required' : ''}
              ></textarea>
            ` : field.type === 'select' ? `
              <select
                name="${field.name}"
                class="input"
                style="width: 100%; font-size: 12px;"
                ${field.required ? 'required' : ''}
              >
                <option value="">Select...</option>
                ${(field.options || []).map(opt => `
                  <option value="${ComponentHelpers.escapeHtml(opt.value)}">${ComponentHelpers.escapeHtml(opt.label)}</option>
                `).join('')}
              </select>
            ` : `
              <input
                type="${field.type || 'text'}"
                name="${field.name}"
                class="input"
                placeholder="${ComponentHelpers.escapeHtml(field.placeholder || '')}"
                style="width: 100%; font-size: 12px;"
                ${field.required ? 'required' : ''}
              />
            `}
            ${field.description ? `<div style="font-size: 10px; color: var(--vscode-text-dim); margin-top: 4px;">${ComponentHelpers.escapeHtml(field.description)}</div>` : ''}
          </div>
        `).join('')}

        <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px;">
          <button type="button" id="form-cancel-btn" class="button" style="font-size: 12px;">
            Cancel
          </button>
          <button type="submit" class="button" style="font-size: 12px;">
            Submit
          </button>
        </div>
      </form>
    </div>
  `;
}

/**
 * Setup event handlers for comparison view
 */
export function setupComparisonHandlers(container, config) {
  const syncBtn = container.querySelector('#sync-scroll-btn');
  const resetBtn = container.querySelector('#reset-zoom-btn');
  const leftPanel = container.querySelector('#left-panel-content');
  const rightPanel = container.querySelector('#right-panel-content');

  let syncEnabled = false;

  if (syncBtn && leftPanel && rightPanel) {
    syncBtn.addEventListener('click', () => {
      syncEnabled = !syncEnabled;
      syncBtn.textContent = syncEnabled ? '🔗 Synced' : '🔗 Sync Scroll';

      if (syncEnabled) {
        leftPanel.addEventListener('scroll', syncScroll);
        rightPanel.addEventListener('scroll', syncScroll);
      } else {
        leftPanel.removeEventListener('scroll', syncScroll);
        rightPanel.removeEventListener('scroll', syncScroll);
      }
    });

    function syncScroll(e) {
      if (!syncEnabled) return;
      const source = e.target;
      const target = source === leftPanel ? rightPanel : leftPanel;
      target.scrollTop = source.scrollTop;
      target.scrollLeft = source.scrollLeft;
    }
  }

  if (resetBtn) {
    resetBtn.addEventListener('click', () => {
      const iframes = container.querySelectorAll('iframe');
      iframes.forEach(iframe => {
        iframe.style.transform = 'scale(1)';
      });
    });
  }
}

/**
 * Setup event handlers for list view
 */
export function setupListHandlers(container, config) {
  const searchInput = container.querySelector('#search-input');
  const filterSelect = container.querySelector('#filter-select');
  const actionBtns = container.querySelectorAll('.action-btn');

  if (searchInput && config.onSearch) {
    searchInput.addEventListener('input', (e) => {
      config.onSearch(e.target.value);
    });
  }

  if (filterSelect && config.onFilter) {
    filterSelect.addEventListener('change', (e) => {
      config.onFilter(e.target.value);
    });
  }

  if (actionBtns && config.actions) {
    actionBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.dataset.actionIdx);
        if (config.actions[idx] && config.actions[idx].onClick) {
          config.actions[idx].onClick();
        }
      });
    });
  }
}

/**
 * Setup event handlers for editor view
 */
export function setupEditorHandlers(container, config) {
  const saveBtn = container.querySelector('#editor-save-btn');
  const exportBtn = container.querySelector('#editor-export-btn');
  const clearBtn = container.querySelector('#editor-clear-btn');
  const textarea = container.querySelector('#editor-content');
  const stats = container.querySelector('#editor-stats');

  function updateStats() {
    if (textarea && stats) {
      const lines = textarea.value.split('\n').length;
      const chars = textarea.value.length;
      stats.textContent = `${lines} lines, ${chars} characters`;
    }
  }

  if (textarea) {
    textarea.addEventListener('input', updateStats);
    updateStats();
  }

  if (saveBtn && config.onSave) {
    saveBtn.addEventListener('click', () => {
      config.onSave(textarea.value);
    });
  }

  if (exportBtn && config.onExport) {
    exportBtn.addEventListener('click', () => {
      config.onExport(textarea.value);
    });
  }

  if (clearBtn && textarea) {
    clearBtn.addEventListener('click', () => {
      if (confirm('Clear all content?')) {
        textarea.value = '';
        updateStats();
      }
    });
  }
}

/**
 * Setup event handlers for gallery view
 */
export function setupGalleryHandlers(container, config) {
  const items = container.querySelectorAll('.gallery-item');
  const deleteBtns = container.querySelectorAll('.gallery-delete-btn');

  if (items && config.onItemClick) {
    items.forEach(item => {
      item.addEventListener('click', (e) => {
        // Don't trigger if delete button was clicked
        if (e.target.classList.contains('gallery-delete-btn')) return;

        const idx = parseInt(item.dataset.itemIdx);
        config.onItemClick(config.items[idx], idx);
      });
    });
  }

  if (deleteBtns && config.onDelete) {
    deleteBtns.forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        const idx = parseInt(btn.dataset.itemIdx);
        if (confirm('Delete this item?')) {
          config.onDelete(config.items[idx], idx);
        }
      });
    });
  }
}

/**
 * Setup event handlers for form view
 */
export function setupFormHandlers(container, config) {
  const form = container.querySelector('#config-form');
  const cancelBtn = container.querySelector('#form-cancel-btn');

  if (form && config.onSubmit) {
    form.addEventListener('submit', (e) => {
      e.preventDefault();

      const formData = new FormData(form);
      const data = Object.fromEntries(formData.entries());

      config.onSubmit(data);
    });
  }

  if (cancelBtn) {
    cancelBtn.addEventListener('click', () => {
      form.reset();
    });
  }
}
