{#
/**
 * @file
 * Cache behavior overview component.
 *
 * Available variables:
 * - health: Cache health payload.
 * - behavior: Cache behavior payload.
 */
#}

{% set page = behavior.layers.page_cache|default({}) %}
{% set dynamic = behavior.layers.dynamic_page_cache|default({}) %}
{% set overall = behavior.overall|default({}) %}
{% set details = health.advanced_details|default({}) %}

{% set page_total = page.total|default(0) %}
{% set dynamic_total = dynamic.total|default(0) %}

{% set page_hits = page.hits|default(0) %}
{% set page_misses = page.misses|default(0) %}
{% set page_uncacheable = page.uncacheable|default(0) %}

{% set dynamic_hits = dynamic.hits|default(0) %}
{% set dynamic_misses = dynamic.misses|default(0) %}
{% set dynamic_uncacheable = dynamic.uncacheable|default(0) %}

{% set page_hit_percent = page_total > 0 ? ((page_hits / page_total) * 100)|round(0, 'floor') : 0 %}
{% set page_miss_percent = page_total > 0 ? ((page_misses / page_total) * 100)|round(0, 'floor') : 0 %}
{% set page_uncacheable_percent = page_total > 0 ? (100 - page_hit_percent - page_miss_percent) : 0 %}

{% set dynamic_hit_percent = dynamic_total > 0 ? ((dynamic_hits / dynamic_total) * 100)|round(0, 'floor') : 0 %}
{% set dynamic_miss_percent = dynamic_total > 0 ? ((dynamic_misses / dynamic_total) * 100)|round(0, 'floor') : 0 %}
{% set dynamic_uncacheable_percent = dynamic_total > 0 ? (100 - dynamic_hit_percent - dynamic_miss_percent) : 0 %}

<section class="no-cache-behavior">
  <div class="no-cache-behavior__header">
    <div class="no-cache-behavior__copy">
      <h3 class="no-cache-runtime-health__section-title">{{ behavior.title|default('Cache Behavior Overview'|t) }}</h3>
      <p
        class="no-cache-behavior__description">{{ behavior.description|default('Derived hit, miss and cacheability behavior extracted from synthetic HTTP request summary spans.'|t) }}</p>
    </div>
  </div>

  {% if overall.signals_detected|default(false) %}
    <div class="no-cache-behavior__status">
      <span class="no-cache-behavior__status-icon">✓</span>
      <div class="no-cache-behavior__status-copy">
        <strong>{{ 'Cache behavior signals detected'|t }}</strong>
        <span>{{ 'Behavior metrics are derived from request summary spans captured in the selected range.'|t }}</span>
      </div>
    </div>
  {% else %}
    <div class="no-cache-behavior__status no-cache-behavior__status--warning">
      <span class="no-cache-behavior__status-icon">!</span>
      <div class="no-cache-behavior__status-copy">
        <strong>{{ 'No cache behavior signals detected'|t }}</strong>
        <span>{{ 'HTTP cache activity has not been detected in this environment for the selected range.'|t }}</span>
      </div>
    </div>
  {% endif %}

  <div class="no-cache-behavior__grid">
    <article class="no-cache-behavior__card">
      <div class="no-cache-behavior__card-head">
        <div class="no-cache-behavior__card-title">{{ page.label|default('Page Cache'|t) }}</div>
        <div class="no-cache-behavior__card-state">{{ page_total > 0 ? 'Observed'|t : 'Disabled'|t }}</div>
      </div>

      <div class="no-cache-behavior__metric">
        <div class="no-cache-behavior__metric-value">{{ page_total }}</div>
        <div class="no-cache-behavior__metric-label">{{ 'Tracked requests'|t }}</div>
      </div>

      <div class="no-cache-behavior__visual">
        <div class="no-cache-behavior__visual-chart">
          <div
            class="no-cache-behavior__ring no-cache-behavior__ring--distribution{{ page_total == 0 ? ' is-empty' : '' }}"
            style="--no-cache-hit: {{ page_hit_percent }}; --no-cache-miss: {{ page_miss_percent }}; --no-cache-uncacheable: {{ page_uncacheable_percent }};"
            tabindex="0"
            aria-describedby="no-cache-tooltip-page">
            <span>{{ page_total > 0 ? page_hit_percent ~ '%' : '0%' }}</span>

            <div id="no-cache-tooltip-page" class="no-cache-behavior__tooltip" role="tooltip">
              <div class="no-cache-behavior__tooltip-title">{{ 'Hit rate'|t }}</div>
              <div class="no-cache-behavior__tooltip-text">
                {{ 'The center value represents cache hits over total tracked requests.'|t }}
              </div>
            </div>
          </div>
        </div>

        <div class="no-cache-behavior__tooltip-card">
          <div class="no-cache-behavior__tooltip-title">{{ 'Hit rate meaning'|t }}</div>
          <div class="no-cache-behavior__tooltip-text">
            {{ 'The center percentage represents cache hits over total tracked requests. Misses and uncacheable responses are shown in the donut distribution, but they do not increase the center percentage.'|t }}
          </div>

          <ul class="no-cache-behavior__tooltip-list">
            <li><strong>{{ 'Tracked requests'|t }}:</strong> {{ page_total }}</li>
            <li><strong>{{ 'Hits'|t }}:</strong> {{ page_hits }}</li>
            <li><strong>{{ 'Misses'|t }}:</strong> {{ page_misses }}</li>
            <li><strong>{{ 'Uncacheable'|t }}:</strong> {{ page_uncacheable }}</li>
          </ul>
        </div>
      </div>

      <div class="no-cache-behavior__legend">
        <div class="no-cache-behavior__legend-item">
          <span class="no-cache-behavior__legend-dot no-cache-behavior__legend-dot--good"></span>
          <span>{{ 'Hits'|t }}: {{ page_hits }}</span>
        </div>
        <div class="no-cache-behavior__legend-item">
          <span class="no-cache-behavior__legend-dot no-cache-behavior__legend-dot--mid"></span>
          <span>{{ 'Misses'|t }}: {{ page_misses }}</span>
        </div>
        <div class="no-cache-behavior__legend-item">
          <span class="no-cache-behavior__legend-dot no-cache-behavior__legend-dot--warn"></span>
          <span>{{ 'Uncacheable'|t }}: {{ page_uncacheable }}</span>
        </div>
      </div>
    </article>

    <article class="no-cache-behavior__card">
      <div class="no-cache-behavior__card-head">
        <div class="no-cache-behavior__card-title">{{ dynamic.label|default('Dynamic Page Cache'|t) }}</div>
        <div class="no-cache-behavior__card-state">{{ dynamic_total > 0 ? 'Observed'|t : 'Disabled'|t }}</div>
      </div>

      <div class="no-cache-behavior__metric">
        <div class="no-cache-behavior__metric-value">{{ dynamic_total }}</div>
        <div class="no-cache-behavior__metric-label">{{ 'Tracked requests'|t }}</div>
      </div>

      <div class="no-cache-behavior__visual">
        <div class="no-cache-behavior__visual-chart">
          <div
            class="no-cache-behavior__ring no-cache-behavior__ring--distribution{{ dynamic_total == 0 ? ' is-empty' : '' }}"
            style="--no-cache-hit: {{ dynamic_hit_percent }}; --no-cache-miss: {{ dynamic_miss_percent }}; --no-cache-uncacheable: {{ dynamic_uncacheable_percent }};"
            tabindex="0"
            aria-describedby="no-cache-tooltip-dynamic">
            <span>{{ dynamic_total > 0 ? dynamic_hit_percent ~ '%' : '0%' }}</span>

            <div id="no-cache-tooltip-dynamic" class="no-cache-behavior__tooltip" role="tooltip">
              <div class="no-cache-behavior__tooltip-title">{{ 'Hit rate'|t }}</div>
              <div class="no-cache-behavior__tooltip-text">
                {{ 'The center value represents cache hits over total tracked requests.'|t }}
              </div>
            </div>
          </div>
        </div>

        <div class="no-cache-behavior__tooltip-card">
          <div class="no-cache-behavior__tooltip-title">{{ 'Hit rate meaning'|t }}</div>
          <div class="no-cache-behavior__tooltip-text">
            {{ 'The center percentage represents cache hits over total tracked requests. Misses and uncacheable responses are shown in the donut distribution, but they do not increase the center percentage.'|t }}
          </div>

          <ul class="no-cache-behavior__tooltip-list">
            <li><strong>{{ 'Tracked requests'|t }}:</strong> {{ dynamic_total }}</li>
            <li><strong>{{ 'Hits'|t }}:</strong> {{ dynamic_hits }}</li>
            <li><strong>{{ 'Misses'|t }}:</strong> {{ dynamic_misses }}</li>
            <li><strong>{{ 'Uncacheable'|t }}:</strong> {{ dynamic_uncacheable }}</li>
          </ul>
        </div>
      </div>

      <div class="no-cache-behavior__legend">
        <div class="no-cache-behavior__legend-item">
          <span class="no-cache-behavior__legend-dot no-cache-behavior__legend-dot--good"></span>
          <span>{{ 'Hits'|t }}: {{ dynamic_hits }}</span>
        </div>
        <div class="no-cache-behavior__legend-item">
          <span class="no-cache-behavior__legend-dot no-cache-behavior__legend-dot--mid"></span>
          <span>{{ 'Misses'|t }}: {{ dynamic_misses }}</span>
        </div>
        <div class="no-cache-behavior__legend-item">
          <span class="no-cache-behavior__legend-dot no-cache-behavior__legend-dot--warn"></span>
          <span>{{ 'Uncacheable'|t }}: {{ dynamic_uncacheable }}</span>
        </div>
      </div>
    </article>
  </div>

  {% if details.items is not empty %}
    <details class="no-cache-behavior__details" {{ details.open_by_default ? 'close' }}>
      <summary>{{ details.title|default('Advanced cache backend details'|t) }}</summary>

      <div class="no-cache-behavior__details-grid">
        {% for item in details.items %}
          <div class="no-cache-behavior__details-item">
            <span>{{ item.label }}</span>
            <strong>{{ item.value }}</strong>
          </div>
        {% endfor %}
      </div>
    </details>
  {% endif %}
</section>
