{# US3 - deep-analysis result fragment. Shows cardinality + the
   top-20 distribution as a small horizontal bar list. ECharts is
   already loaded by layout.html, but for v1 we keep the rendering
   server-side (no JS chart) - distribution is a simple list. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header">
    <p class="text-sm uppercase tracking-wider text-slate-500 dark:text-slate-400">Deep analysis result</p>
    <h1 class="ui-page-title font-mono text-xl break-all">{{ table_full_name }} &middot; {{ column_name }}</h1>
    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
      <a href="/recommendations/layout/{{ table_full_name | urlencode }}" class="underline decoration-dotted">&larr; back to layout detail</a>
    </p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-6">
    <div class="ui-pane">
      <p class="text-sm uppercase tracking-wider text-slate-500 dark:text-slate-400">Distinct values (approx.)</p>
      <p class="text-2xl font-semibold text-slate-900 dark:text-slate-100 mt-1">{{ "{:,}".format(outcome.approx_distinct_count) }}</p>
      <p class="text-sm text-slate-400 mt-1">
        {% if outcome.approx_distinct_count > 1000000 %}
          Very high cardinality &mdash; clustering may not prune scans well for this column.
        {% elif outcome.approx_distinct_count < 50 %}
          Low cardinality &mdash; check the distribution below; if values are uniformly distributed, clustering helps a lot.
        {% else %}
          Moderate cardinality &mdash; combine with the distribution below to judge clustering fit.
        {% endif %}
      </p>
    </div>
    <div class="ui-pane">
      <p class="text-sm uppercase tracking-wider text-slate-500 dark:text-slate-400">Cost charged</p>
      <p class="text-2xl font-semibold text-slate-900 dark:text-slate-100 mt-1">{{ outcome.actual_cost_usd | format_usd }}</p>
      {% if outcome.from_cache %}
        <p class="text-sm text-emerald-600 dark:text-emerald-400 mt-1">cached &mdash; no new BigQuery charge</p>
      {% else %}
        <p class="text-sm text-slate-400 mt-1">Just-ran &mdash; subsequent loads within this scan will hit cache.</p>
      {% endif %}
    </div>
    <div class="ui-pane">
      <p class="text-sm uppercase tracking-wider text-slate-500 dark:text-slate-400">Top values</p>
      <p class="text-2xl font-semibold text-slate-900 dark:text-slate-100 mt-1">{{ outcome.top_values | length }}</p>
      <p class="text-sm text-slate-400 mt-1">capped at 20 for the distribution preview</p>
    </div>
  </div>

  <div class="ui-pane mt-6">
    <p class="text-sm uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-3">Top 20 values by frequency</p>
    {% if outcome.top_values %}
      {% set max_count = outcome.top_values[0].count %}
      <ul class="space-y-1.5">
        {% for entry in outcome.top_values %}
          <li class="flex items-center gap-3 text-sm">
            <span class="font-mono text-sm text-slate-600 dark:text-slate-400 w-48 truncate">{{ entry.value }}</span>
            <div class="flex-1 h-3 bg-slate-100 dark:bg-slate-800 relative">
              <div class="h-3 bg-brand-500/70 dark:bg-brand-400/70"
                   style="width: {{ (entry.count / max_count * 100) if max_count else 0 }}%"></div>
            </div>
            <span class="font-mono text-sm text-slate-700 dark:text-slate-300 w-24 text-right">{{ "{:,}".format(entry.count) }}</span>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="text-sm text-slate-500 dark:text-slate-400">No values returned &mdash; the column may be entirely NULL on this table.</p>
    {% endif %}
  </div>
</section>
{% endblock %}