{# Audit "Storage Optimization" — surfaces every active
   storage_billing_optimization opportunity as a clickable row plus an
   inline-revealable ALTER SCHEMA snippet. Audit is read-only, so the
   "Action" button copies SQL for the user to paste into the BigQuery
   console — it never submits. Only renders when storage_panel is
   non-empty (the include guard lives in dashboard/index.html). #}
<div class="ui-pane">
  <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
      <h2 class="ui-section-title">Storage Optimization</h2>
      <p class="ui-card-meta mt-1">
        Datasets where switching from logical to physical billing would
        reduce monthly storage cost &middot; click any row for full
        evidence &middot; use the action to copy the <code class="font-mono">ALTER SCHEMA</code> SQL
      </p>
    </div>
    <p class="ui-card-meta">
      {{ storage_panel | length }} dataset{{ '' if storage_panel | length == 1 else 's' }}
    </p>
  </div>

  <div class="ui-table-wrap">
    <table class="ui-table" style="table-layout: fixed; width: 100%;">
      <colgroup>
        <col style="width: 280px;" />
        <col style="width: 90px;" />
        <col style="width: 130px;" />
        <col style="width: 130px;" />
        <col style="width: 170px;" />
        <col style="width: 120px;" />
        <col style="width: 120px;" />
      </colgroup>
      <thead>
        <tr class="ui-table-head-row">
          <th class="ui-table-th ui-table-th-left">Dataset</th>
          <th class="ui-table-th ui-table-th-right">Tables</th>
          <th class="ui-table-th ui-table-th-right">Current $/mo</th>
          <th class="ui-table-th ui-table-th-right">Projected $/mo</th>
          <th class="ui-table-th ui-table-th-right">Monthly savings</th>
          <th class="ui-table-th ui-table-th-right">Compression</th>
          <th class="ui-table-th ui-table-th-right">Action</th>
        </tr>
      </thead>
      <tbody>
        {% for row in storage_panel %}
        <tr class="ui-table-row">
          <td class="ui-table-td">
            <a href="/opportunities/{{ row.opportunity_id }}"
               class="font-mono text-slate-900 dark:text-slate-100 hover:text-brand-500 dark:hover:text-brand-300">
              {{ row.dataset_short }}
            </a>
          </td>
          <td class="ui-table-td ui-table-td-right">{{ row.table_count }}</td>
          <td class="ui-table-td ui-table-td-right">${{ "%.2f"|format(row.current_cost_monthly) }}</td>
          <td class="ui-table-td ui-table-td-right">${{ "%.2f"|format(row.proposed_cost_monthly) }}</td>
          <td class="ui-table-td ui-table-td-right">
            <span class="font-medium text-emerald-600 dark:text-emerald-400">
              ${{ "%.2f"|format(row.monthly_savings) }}
            </span>
            <span class="text-slate-400 dark:text-slate-500">
              ({{ "%.0f"|format(row.savings_pct) }}%)
            </span>
          </td>
          <td class="ui-table-td ui-table-td-right">{{ row.compression_ratio }}:1</td>
          <td class="ui-table-td ui-table-td-right">
            <button type="button"
                    onclick="window.auditStorageToggleAction('{{ row.opportunity_id }}')"
                    class="inline-flex items-center gap-1 border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-1 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800">
              Action
            </button>
          </td>
        </tr>
        <tr id="storage-action-{{ row.opportunity_id }}" hidden>
          <td colspan="7" class="ui-table-td bg-slate-50 dark:bg-slate-950">
            <div class="flex flex-col gap-2">
              <p class="text-sm text-slate-600 dark:text-slate-300">
                Run this in the BigQuery console under a principal with
                <code class="font-mono">bigquery.dataOwner</code> on
                <code class="font-mono">{{ row.dataset_full }}</code>.
                Audit is read-only and will not submit it for you.
              </p>
              <pre id="storage-sql-{{ row.opportunity_id }}"
                   class="font-mono text-sm bg-slate-900 dark:bg-slate-950 text-slate-100 px-4 py-3 overflow-x-auto whitespace-pre">{{ row.alter_sql }}</pre>
              <div class="flex items-center gap-2">
                <button type="button"
                        onclick="window.auditStorageCopyAction('{{ row.opportunity_id }}', this)"
                        class="ui-btn-secondary text-sm">
                  Copy SQL
                </button>
                <a href="/opportunities/{{ row.opportunity_id }}"
                   class="text-sm text-brand-500 dark:text-brand-300 hover:underline">
                  View full evidence &rarr;
                </a>
              </div>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>
(function () {
  if (window.auditStorageToggleAction) return;
  window.auditStorageToggleAction = function (oppId) {
    var row = document.getElementById('storage-action-' + oppId);
    if (!row) return;
    row.hidden = !row.hidden;
  };
  window.auditStorageCopyAction = function (oppId, btn) {
    var pre = document.getElementById('storage-sql-' + oppId);
    if (!pre) return;
    var text = pre.textContent || '';
    var done = function () {
      var original = btn.textContent;
      btn.textContent = 'Copied!';
      setTimeout(function () { btn.textContent = original; }, 1500);
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(done).catch(function () {
        // Fallback — select the <pre> so the user can copy manually.
        var range = document.createRange();
        range.selectNodeContents(pre);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
      });
    } else {
      var range = document.createRange();
      range.selectNodeContents(pre);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    }
  };
})();
</script>