{# Storage Billing recommendations — dataset-level LOGICAL→PHYSICAL
   switches surfaced from the ``storage_billing_optimization`` rule.
   Each card shows the savings, current vs. proposed cost, a per-table
   breakdown, and a copyable ALTER SCHEMA snippet. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header">
    <h1 class="ui-page-title">Storage Billing</h1>
    <p class="text-base text-slate-500 dark:text-slate-400 mt-2">
      Datasets currently on LOGICAL billing where switching to PHYSICAL would reduce monthly storage cost. Each card shows the dataset-level savings and a ready-to-run <code class="font-mono text-sm">ALTER SCHEMA</code> statement.
    </p>
  </div>

  {% if not recommendations %}
    <div class="mt-6 ui-pane text-center py-10">
      <svg class="w-12 h-12 mx-auto text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      <h2 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">No storage billing recommendations</h2>
      <p class="mt-2 max-w-md mx-auto text-sm text-slate-600 dark:text-slate-400">
        Either every dataset is already on PHYSICAL billing, or the projected savings sit below the materiality threshold (~$10/month). Re-run a scan after data growth to re-check.
      </p>
    </div>
  {% else %}
    {# Roll-up strip — total opportunity across all flagged datasets. #}
    <div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div class="ui-pane">
        <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Datasets flagged</p>
        <p class="mt-1 text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ recommendations | length }}</p>
      </div>
      <div class="ui-pane">
        <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Total monthly savings</p>
        <p class="mt-1 text-2xl font-semibold text-emerald-700 dark:text-emerald-400">${{ '%.2f' | format(total_monthly_savings) }}</p>
      </div>
      <div class="ui-pane">
        <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Total annual savings</p>
        <p class="mt-1 text-2xl font-semibold text-emerald-700 dark:text-emerald-400">${{ '%.2f' | format(total_annual_savings) }}</p>
      </div>
    </div>

    <div class="mt-6 space-y-4">
      {% for rec in recommendations %}
        <article class="ui-pane">
          {# Header row: dataset + savings pill. #}
          <div class="flex flex-wrap items-start justify-between gap-3">
            <div class="min-w-0">
              <h2 class="text-base font-semibold text-slate-900 dark:text-slate-100 font-mono">{{ rec.affected_table }}</h2>
              <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
                {{ rec.table_count }} table{{ '' if rec.table_count == 1 else 's' }}
                · {{ '%.1f' | format(rec.compression_ratio) }}:1 compression
              </p>
            </div>
            <div class="text-right">
              <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Monthly saving</p>
              <p class="text-2xl font-semibold text-emerald-700 dark:text-emerald-400">${{ '%.2f' | format(rec.monthly_savings) }}</p>
              <p class="text-xs text-amber-700 dark:text-amber-400 font-medium">{{ '%.1f' | format(rec.savings_percentage) }}% reduction</p>
            </div>
          </div>

          {# Cost comparison strip. #}
          <div class="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
            <div>
              <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Current (logical)</p>
              <p class="mt-0.5 font-medium text-slate-900 dark:text-slate-100">${{ '%.2f' | format(rec.logical_cost_monthly) }}/mo</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">After switch (physical)</p>
              <p class="mt-0.5 font-medium text-slate-900 dark:text-slate-100">${{ '%.2f' | format(rec.physical_cost_monthly) }}/mo</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Logical bytes</p>
              <p class="mt-0.5 font-medium text-slate-900 dark:text-slate-100">{{ '%.2f' | format(rec.total_logical_gb) }} GB</p>
            </div>
            <div>
              <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">Physical bytes</p>
              <p class="mt-0.5 font-medium text-slate-900 dark:text-slate-100">{{ '%.2f' | format(rec.total_physical_gb) }} GB</p>
            </div>
          </div>

          {# ALTER SCHEMA snippet — the actionable bit. #}
          <div class="mt-4">
            <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">Apply</p>
            <pre class="font-mono text-sm bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 p-3 overflow-x-auto whitespace-pre"><code>ALTER SCHEMA `{{ rec.affected_table }}` SET OPTIONS (storage_billing_model = 'PHYSICAL');</code></pre>
          </div>

          {# Per-table breakdown — collapsed by default to keep the
             card scannable. Tables with no savings still show so the
             user can see the full dataset shape. #}
          {% if rec.tables %}
            <details class="mt-4">
              <summary class="cursor-pointer text-sm text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-100">
                Show per-table breakdown ({{ rec.tables | length }} table{{ '' if rec.tables|length == 1 else 's' }})
              </summary>
              <div class="mt-3 border border-slate-200 dark:border-slate-800 overflow-x-auto">
                <table class="min-w-full text-sm">
                  <thead class="bg-slate-50 dark:bg-slate-900/40 text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400">
                    <tr>
                      <th class="text-left px-3 py-2 font-medium">Table</th>
                      <th class="text-right px-3 py-2 font-medium">Logical GB</th>
                      <th class="text-right px-3 py-2 font-medium">Physical GB</th>
                      <th class="text-right px-3 py-2 font-medium">Compression</th>
                      <th class="text-right px-3 py-2 font-medium">Monthly saving</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                    {% for t in rec.tables %}
                      <tr>
                        <td class="px-3 py-2 font-mono text-slate-900 dark:text-slate-100">{{ t.table_name }}</td>
                        <td class="px-3 py-2 text-right text-slate-700 dark:text-slate-300">{{ '%.2f' | format(t.total_logical_gb) }}</td>
                        <td class="px-3 py-2 text-right text-slate-700 dark:text-slate-300">{{ '%.2f' | format(t.total_physical_gb) }}</td>
                        <td class="px-3 py-2 text-right text-slate-700 dark:text-slate-300">{{ '%.1f' | format(t.compression_ratio) }}:1</td>
                        <td class="px-3 py-2 text-right {% if t.monthly_savings > 0 %}text-emerald-700 dark:text-emerald-400 font-medium{% else %}text-slate-500 dark:text-slate-400{% endif %}">${{ '%.2f' | format(t.monthly_savings) }}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </details>
          {% endif %}
        </article>
      {% endfor %}
    </div>
  {% endif %}
</section>
{% endblock %}