{# Storage Billing Analysis — all datasets with cost comparison #}
{% if storage_billing_datasets and storage_billing_datasets | length > 0 %}
{% set savings_count = storage_billing_datasets | selectattr('monthly_savings', 'gt', 0) | list | length %}
<div class="mt-8 ui-surface overflow-hidden">
  <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
    <div>
      <h2 class="ui-section-title">Storage Billing Analysis</h2>
      <p class="ui-section-subtitle">
        Cost comparison of logical vs physical billing for each dataset
      </p>
    </div>
    <div class="flex items-center gap-2">
      {% if savings_count > 0 %}
        <span class="ui-pill ui-pill-success">
          {{ savings_count }} can save
        </span>
      {% endif %}
      <span class="ui-pill ui-pill-blue">
        {{ storage_billing_datasets | length }} dataset{{ 's' if storage_billing_datasets | length != 1 else '' }}
      </span>
    </div>
  </div>
  <div class="ui-table-wrap">
    <table class="ui-table">
      <thead>
        <tr class="ui-table-head-row">
          <th class="ui-table-th">Project</th>
          <th class="ui-table-th">Dataset</th>
          <th class="ui-table-th ui-table-th-right">Tables</th>
          <th class="ui-table-th">Billing</th>
          <th class="ui-table-th ui-table-th-right">Compression</th>
          <th class="ui-table-th ui-table-th-right">Logical Cost</th>
          <th class="ui-table-th ui-table-th-right">Physical Cost</th>
          <th class="ui-table-th ui-table-th-right">Difference</th>
          <th class="ui-table-th">Recommendation</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for ds in storage_billing_datasets %}
        <tr class="{% if ds.opp_id %}ui-table-row cursor-pointer{% else %}border-b border-slate-100 dark:border-slate-800{% endif %}"
            {% if ds.opp_id %}
            tabindex="0"
            role="link"
            aria-label="Open storage billing opportunity for dataset {{ ds.dataset }}"
            onclick="window.location='/projects/{{ ds.opp_config_id }}/opportunities/{{ ds.opp_id }}'"
            onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='/projects/{{ ds.opp_config_id }}/opportunities/{{ ds.opp_id }}'; }"
            {% endif %}>
          <td class="ui-table-td ui-table-td-primary max-w-[160px] truncate">
            {{ ds.project_name }}
          </td>
          <td class="ui-table-td font-mono text-[13px] text-slate-800 dark:text-slate-200">
            {{ ds.dataset }}
          </td>
          <td class="ui-table-td ui-table-td-right">
            {{ ds.table_count }}
          </td>
          <td class="ui-table-td">
            {% with billing_model=ds.billing_model %}
              {% include "components/storage_billing_badge.html" %}
            {% endwith %}
          </td>
          <td class="ui-table-td ui-table-td-right">
            {{ "%.1f"|format(ds.compression_ratio) }}x
          </td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap">
            ${{ "%.2f"|format(ds.logical_cost) }}/mo
          </td>
          <td class="ui-table-td ui-table-td-right whitespace-nowrap">
            ${{ "%.2f"|format(ds.physical_cost) }}/mo
          </td>
          <td class="ui-table-td ui-table-td-right font-medium whitespace-nowrap
            {% if ds.monthly_savings > 0 %}text-emerald-600 dark:text-emerald-400
            {% elif ds.monthly_savings < 0 %}text-red-500 dark:text-red-400
            {% else %}text-slate-400 dark:text-slate-500{% endif %}">
            {% if ds.monthly_savings > 0 %}
              -${{ "%.2f"|format(ds.monthly_savings) }}/mo
              <span class="ui-table-caption ml-1">({{ "%.0f"|format(ds.savings_pct) }}%)</span>
            {% elif ds.monthly_savings < 0 %}
              +${{ "%.2f"|format(ds.monthly_savings | abs) }}/mo
            {% else %}
              &mdash;
            {% endif %}
          </td>
          <td class="ui-table-td">
            {% if ds.monthly_savings > 0 %}
              <div class="flex items-center gap-2">
                <span class="ui-pill ui-pill-success whitespace-nowrap">Switch to PHYSICAL</span>
                {% if ds.has_solution %}
                  <span class="inline-block w-2 h-2 rounded-full bg-emerald-500" title="Solution ready"></span>
                {% endif %}
              </div>
            {% elif ds.billing_model == 'PHYSICAL' %}
              <span class="ui-muted-copy">Already physical</span>
            {% else %}
              <span class="ui-muted-copy">Keep logical</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {# Total savings footer #}
  {% set total_savings = storage_billing_datasets | selectattr('monthly_savings', 'gt', 0) | sum(attribute='monthly_savings') %}
  <div class="px-6 py-3 border-t border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/80 flex items-center justify-between">
    <span class="text-[14px] text-slate-600 dark:text-slate-300">
      {% if total_savings > 0 %}
        Total potential savings from switching {{ savings_count }} dataset{{ 's' if savings_count != 1 else '' }}
      {% else %}
        No datasets would benefit from switching to physical billing
      {% endif %}
    </span>
    {% if total_savings > 0 %}
    <div class="text-right">
      <span class="text-lg font-semibold text-emerald-600 dark:text-emerald-400">${{ "%.2f"|format(total_savings) }}/month</span>
      <span class="text-sm text-slate-500 dark:text-slate-400 ml-2">(${{ "%.2f"|format(total_savings * 12) }}/year)</span>
    </div>
    {% endif %}
  </div>
  {# Pricing explainer #}
  <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-800 bg-slate-50/60 dark:bg-slate-950/40">
    <p class="text-[14px] font-semibold text-slate-600 dark:text-slate-300 mb-2">Why can physical billing cost more?</p>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-[13px] text-slate-600 dark:text-slate-400">
      <div class="flex gap-2">
        <span class="text-slate-400 dark:text-slate-500 shrink-0">①</span>
        <span><span class="font-medium text-slate-700 dark:text-slate-300">2× per-GB rate.</span> Physical charges $0.04/GB active vs $0.02/GB for logical — so you need &gt;50% compression just to break even.</span>
      </div>
      <div class="flex gap-2">
        <span class="text-slate-400 dark:text-slate-500 shrink-0">②</span>
        <span><span class="font-medium text-slate-700 dark:text-slate-300">Time travel &amp; fail-safe.</span> Physical billing includes 7 days of historical snapshots and 7 days of disaster-recovery storage at $0.04/GB each — invisible on logical billing.</span>
      </div>
      <div class="flex gap-2">
        <span class="text-slate-400 dark:text-slate-500 shrink-0">③</span>
        <span><span class="font-medium text-slate-700 dark:text-slate-300">Compression ratio &lt; 1.0.</span> When shown below 1.0, physical bytes exceed logical bytes — meaning time travel/fail-safe overhead outweighs any compression gain.</span>
      </div>
    </div>
    <p class="mt-2 text-[13px] text-slate-500 dark:text-slate-400">Rates shown are US multi-region defaults. Physical billing benefits large, rarely-updated, highly-compressible datasets.</p>
  </div>
</div>
{% endif %}