{# Spec 151 - table-level layout recommendations index.

   One row per qualifying table from the latest scan. Replaces the
   spec-148 per-opportunity card surface; the opportunity detail
   page now shows a chip linking to /recommendations/layout/<table>.

   Index columns:
     - Table (clickable → detail page)
     - Current layout (chip: "partitioned" / "unpartitioned")
     - Recommended partition column (or "-")
     - Top cluster picks (chip list, up to 4)
     - Window cost (cost in scan window)
#}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header">
    <h1 class="ui-page-title">Partition &amp; Cluster</h1>
  </div>

  {% if not has_latest_scan %}
    <div class="ui-pane mt-8 text-base text-slate-700 dark:text-slate-300">
      <p>No successful scan yet. <a href="/admin/configurations" class="underline decoration-dotted text-brand-600 dark:text-brand-300">Run a scan</a> first - layout recommendations are derived from the workload the scan observes.</p>
    </div>
  {% elif not recommendations %}
    <div class="ui-pane mt-8 text-base text-slate-700 dark:text-slate-300 space-y-3">
      <p>The latest scan didn't surface any tables that meet the layout-recommendation gates. This happens when:</p>
      <ul class="list-disc pl-5 space-y-1">
        <li>No table in the scan window is large enough to justify a partition / cluster change (we use BigQuery's own ≥&nbsp;10&nbsp;GB threshold for clustering and ≥&nbsp;100&nbsp;GB for partitioning).</li>
        <li>Consumer queries don't filter / join / group on enough common columns to give a confident signal.</li>
        <li>Tables that <em>are</em> queried hard are already optimally laid out.</li>
      </ul>
      <p>Run a longer-lookback scan if you suspect there's signal we're missing.</p>
    </div>
  {% else %}
    <div class="ui-pane mt-8">
      <table class="w-full text-sm border-collapse">
        <thead class="text-sm uppercase tracking-wider text-slate-500 dark:text-slate-400">
          <tr class="border-b border-slate-200 dark:border-slate-800">
            <th class="text-left py-3 px-3 font-semibold">Table</th>
            <th class="text-left py-3 px-3 font-semibold">Current</th>
            <th class="text-left py-3 px-3 font-semibold">Recommended partition</th>
            <th class="text-left py-3 px-3 font-semibold">Recommended cluster</th>
            <th class="text-right py-3 px-3 font-semibold">Window cost</th>
            <th class="text-right py-3 px-3 font-semibold">Jobs</th>
          </tr>
        </thead>
        <tbody class="text-slate-700 dark:text-slate-300">
          {% for rec in recommendations %}
            {% set _row_href = '/recommendations/layout/' ~ (rec.table_full_name | urlencode) %}
            <tr class="border-b border-slate-100 dark:border-slate-800/60 hover:bg-slate-50 dark:hover:bg-slate-800/40 cursor-pointer"
                tabindex="0"
                role="link"
                aria-label="Open recommendation for {{ rec.table_full_name }}"
                onclick="window.location='{{ _row_href }}'"
                onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='{{ _row_href }}'; }">
              <td class="py-3 px-3">
                <span class="font-mono text-sm text-brand-600 dark:text-brand-300">{{ rec.table_full_name }}</span>
                <div class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">{{ rec.table_total_bytes | format_bytes }}</div>
              </td>
              <td class="py-3 px-3">
                {% if rec.is_currently_partitioned %}
                  <span class="inline-flex items-center gap-1.5 text-sm text-emerald-700 dark:text-emerald-300">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                    partitioned
                  </span>
                {% else %}
                  <span class="inline-flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400">
                    <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
                    unpartitioned
                  </span>
                {% endif %}
              </td>
              <td class="py-3 px-3 font-mono text-sm">
                {% if rec.recommended_partition_column %}
                  <span class="text-slate-900 dark:text-slate-100">{{ rec.recommended_partition_column }}</span>
                {% else %}
                  <span class="text-slate-400">-</span>
                {% endif %}
              </td>
              <td class="py-3 px-3">
                {% if rec.cluster_picks %}
                  <div class="flex flex-wrap gap-1.5">
                    {% for col in rec.cluster_picks %}
                      <span class="font-mono text-sm px-2 py-0.5 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-800/40">{{ col }}</span>
                    {% endfor %}
                  </div>
                {% else %}
                  <span class="text-slate-400">-</span>
                {% endif %}
              </td>
              <td class="py-3 px-3 text-right font-mono text-sm">{{ rec.table_total_cost_in_window_usd | format_usd }}</td>
              <td class="py-3 px-3 text-right text-sm text-slate-500 dark:text-slate-400">{{ rec.contributing_job_count }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
      {% include "components/_pagination.html" %}
    </div>
  {% endif %}
</section>
{% endblock %}