components/sql-lab.js

class CustomSqlLab extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        .sql-lab {
          background: rgba(31, 41, 55, 0.8);
          border-radius: 1rem;
          overflow: hidden;
          border: 1px solid rgba(55, 65, 81, 0.5);
        }
        .table-browser {
          background: rgba(17, 24, 39, 0.9);
          padding: 1.5rem;
        }
        .sql-editor {
          background: #1a202c;
          border-radius: 0.5rem;
          padding: 1rem;
          font-family: 'JetBrains Mono', monospace;
          font-size: 0.875rem;
          line-height: 1.5;
          color: #e2e8f0;
        }
        .run-button {
          background: linear-gradient(135deg, #22c55e, #22c55e/80);
          color: #111827;
          font-weight: 600;
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;
          transition: all 0.3s ease;
        }
        .run-button:hover {
          transform: scale(1.05);
          box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.4);
        }
        .results-grid {
          background: rgba(17, 24, 39, 0.9);
        }
        .reset-button {
          background: rgba(239, 68, 68, 0.1);
          color: #ef4444;
          border: 1px solid rgba(239, 68, 68, 0.3);
          padding: 0.5rem 1rem;
          border-radius: 0.375rem;
          font-size: 0.75rem;
          font-weight: 600;
        }
        .table-row:hover {
          background: rgba(55, 65, 81, 0.3);
        }
      </style>
      <div class="sql-lab">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
            <!-- Left: Table Browser -->
            <div class="table-browser rounded-xl">
              <div class="flex items-center mb-4">
                <i data-feather="database" class="w-5 h-5 text-secondary mr-3"></i>
                <h3 class="text-lg font-semibold">Employees Database</h3>
              </div>
              
              <div class="overflow-x-auto">
                <table class="w-full text-sm">
                  <thead>
                    <tr class="border-b border-gray-700">
                      <th class="pb-3 text-left">Table</th>
                      <th class="pb-3 text-left">Rows</th>
                      <th class="pb-3 text-left">Preview</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="table-row border-b border-gray-800">
                    <td class="py-3 font-medium">employees</td>
                    <td class="py-3">500</td>
                    <td class="py-3">
                      <button class="view-table-btn p-1 rounded hover:bg-gray-800">
                        <i data-feather="eye" class="w-4 h-4 text-gray-400"></i>
                    </td>
                  </tr>
                  <tr class="table-row border-b border-gray-800">
                      <td class="py-3 font-medium">departments</td>
                      <td class="py-3">10</td>
                    <td class="py-3">
                      <button class="view-table-btn p-1 rounded hover:bg-gray-800">
                        <i data-feather="eye" class="w-4 h-4 text-gray-400"></i>
                    </td>
                  </tr>
                  <tr class="table-row">
                      <td class="py-3 font-medium">salaries</td>
                      <td class="py-3">500</td>
                    <td class="py-3">
                      <button class="view-table-btn p-1 rounded hover:bg-gray-800">
                        <i data-feather="eye" class="w-4 h-4 text-gray-400"></i>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Middle: SQL Editor -->
        <div class="space-y-6">
              <div class="sql-editor">
                SELECT id, name, department<br>
                FROM employees<br>
                WHERE department = 'Engineering'<br>
                ORDER BY name ASC<br>
                LIMIT 10;
            </div>
            
            <div class="flex space-x-4">
              <button id="sql-run-btn" class="run-button flex items-center">
                <i data-feather="play" class="w-4 h-4 mr-2"></i>
              Run Query
            </button>
            <button class="reset-button flex items-center text-sm">
              <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
              Reset DB
            </button>
          </div>
        </div>

        <!-- Right: Results Grid -->
        <div class="results-grid rounded-xl p-4">
          <div class="flex items-center justify-between mb-4">
            <div class="text-gray-300">Query Results</div>
              <div class="text-xs text-gray-400">Click "Run Query" to see results</div>
          </div>
          
          <div id="sql-results" class="text-gray-400 text-sm">
            Results will appear here...
          </div>
        </div>
      </div>
    </div>
    
    <div class="p-6 bg-gray-900/50 border-t border-gray-800">
          <div class="text-sm text-gray-300 mb-2">Sample Query:</div>
          <div class="font-mono text-xs text-gray-400">
          -- Find all employees in Engineering department
        </div>
      </div>
    </div>
    `;
    
    setTimeout(() => {
      if (typeof feather !== 'undefined') {
        feather.replace();
      }
    }, 100);
  }
}

customElements.define('custom-sql-lab', CustomSqlLab);