{% extends "base.html" %}
{% block title %}Query Runner — {{ project.name }} — Fossilrepo{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-gray-100 mb-2">{{ project.name }}</h1>
{% include "fossil/_project_nav.html" %}

<div class="mb-4">
  <a href="{% url 'fossil:explorer' slug=project.slug %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to Explorer</a>
</div>

<div class="flex items-center justify-between mb-4">
  <div>
    <h2 class="text-xl font-bold text-gray-100">SQL Query Runner</h2>
    <p class="text-sm text-gray-500 mt-1">
      Execute read-only SELECT queries against the Fossil SQLite database. Results capped at 500 rows.
    </p>
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
  <!-- Query input + results (3/4 width) -->
  <div class="lg:col-span-3">
    <form method="get" action="{% url 'fossil:explorer_query' slug=project.slug %}">
      <div class="rounded-lg bg-gray-800 border border-gray-700 overflow-hidden mb-4">
        <div class="px-4 py-2 border-b border-gray-700">
          <label for="sql-input" class="text-xs font-medium text-gray-400 uppercase">SQL Query</label>
        </div>
        <textarea
          id="sql-input"
          name="sql"
          rows="5"
          class="w-full bg-gray-900 text-gray-100 font-mono text-sm p-4 border-0 focus:ring-0 resize-y"
          placeholder="SELECT * FROM blob LIMIT 10"
          spellcheck="false">{{ sql }}</textarea>
        <div class="px-4 py-2 border-t border-gray-700 flex items-center justify-between">
          <span class="text-xs text-gray-600">Only SELECT queries are allowed. No INSERT, UPDATE, DELETE, DROP, etc.</span>
          <button type="submit" class="inline-flex items-center px-4 py-1.5 text-sm font-medium rounded-md bg-brand text-white hover:bg-brand-hover">
            Run
          </button>
        </div>
      </div>
    </form>

    {% if error %}
    <div class="rounded-lg bg-red-900/30 border border-red-700 p-4 mb-4">
      <p class="text-sm text-red-300 font-mono">{{ error }}</p>
    </div>
    {% endif %}

    {% if columns %}
    <div class="rounded-lg bg-gray-800 border border-gray-700 overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-700">
        <thead>
          <tr>
            {% for col in columns %}
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider whitespace-nowrap">{{ col }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-700 font-mono text-xs">
          {% for row in results %}
          <tr class="hover:bg-gray-700/50">
            {% for cell in row %}
            <td class="px-4 py-2 text-gray-300 whitespace-nowrap max-w-xs truncate">{{ cell|default:"NULL" }}</td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="mt-2 text-xs text-gray-500">
      {{ results|length }} row{{ results|length|pluralize }} returned{% if results|length >= 500 %} (limited to 500){% endif %}
    </div>
    {% elif sql and not error %}
    <div class="rounded-lg bg-gray-800 border border-gray-700 p-8 text-center">
      <p class="text-sm text-gray-500">No results.</p>
    </div>
    {% endif %}
  </div>

  <!-- Table list sidebar (1/4 width) -->
  <div class="lg:col-span-1">
    <div class="rounded-lg bg-gray-800 border border-gray-700 p-3 sticky top-6">
      <h3 class="text-xs font-medium text-gray-400 uppercase mb-2">Available Tables</h3>
      {% if table_names %}
      <div class="space-y-0.5 max-h-96 overflow-y-auto">
        {% for name in table_names %}
        <button
          type="button"
          onclick="document.getElementById('sql-input').value = 'SELECT * FROM {{ name }} LIMIT 25'; document.getElementById('sql-input').focus();"
          class="block w-full text-left px-2 py-1 text-xs font-mono text-gray-400 hover:text-gray-200 hover:bg-gray-700 rounded">
          {{ name }}
        </button>
        {% endfor %}
      </div>
      {% else %}
      <p class="text-xs text-gray-600">Run a query to see tables, or go to the <a href="{% url 'fossil:explorer' slug=project.slug %}" class="text-brand-light hover:text-brand">Explorer</a>.</p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}