{% load intelligence_extras %}
{% with channel=result.channel niche=result.niche %}
<div>
    {% comment %} Hero, channel identity only. The niche match strength
       moved next to the niche name + percentage below so it's visually
       attached to the thing it qualifies. {% endcomment %}
    <div class="mb-4">
        <div class="text-base font-semibold text-stone-900 truncate">{{ channel.title }}</div>
        <div class="mt-1 text-xs text-stone-500">
            {{ channel.subscriber_count|humanize_count }} subscribers
            · {{ channel.video_count|humanize_count }} videos
            {% if channel.sample_window_days %}
            · {{ channel.sample_window_days }}-day sample
            {% endif %}
        </div>
    </div>

    {% comment %} Overall percentile + niche identity {% endcomment %}
    <div class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-1 items-start mt-2 pt-4 border-t border-stone-100">
        <div>
            <div class="flex items-center">
                <div class="text-xs uppercase tracking-wide text-stone-500">Overall percentile</div>
                <span class="intel-tooltip-trigger" tabindex="0" aria-describedby="bc-overall-tooltip">
                    <span class="intel-tooltip-icon" aria-hidden="true">?</span>
                    <span id="bc-overall-tooltip" role="tooltip" class="intel-tooltip" data-align="left">
                        Composite rank vs other channels in the same niche.
                        <strong>50</strong> is the median; <strong>80+</strong>
                        is top-tier engagement; below 30 means most niche peers
                        outperform this channel on the engagement metrics below.
                    </span>
                </span>
            </div>
            <div class="mt-1 text-6xl font-bold tabular-nums leading-none" style="color: var(--primary);">
                {{ channel.engagement_percentiles.overall }}
            </div>
        </div>
        <div class="text-right">
            <div class="text-xs uppercase tracking-wide text-stone-500">Niche</div>
            <div class="mt-1 text-sm font-medium text-stone-900">{{ niche.name }}</div>
            <div class="mt-1 flex items-center gap-2 justify-end flex-wrap">
                <span class="text-[11px] font-mono px-1.5 py-0.5 rounded bg-stone-100 text-stone-500">{{ niche.slug }}</span>
                {% comment %}
                  Single pill combining the match-strength label and the
                  raw match-score percentage. Co-locating the two makes
                  it clear that "Strong" is a discrete label for the
                  same underlying confidence number ("76%"), they were
                  visually disconnected when the strength pill lived in
                  the channel-identity row at the top of the card.
                {% endcomment %}
                {% if niche.match_strength or niche.match_score %}
                <span class="inline-flex items-center gap-1.5 text-[11px] px-2 py-0.5 rounded-full tabular-nums
                             {% if niche.match_strength == 'strong' %}bg-green-50 text-green-700
                             {% elif niche.match_strength == 'moderate' %}bg-amber-50 text-amber-700
                             {% else %}bg-stone-100 text-stone-600{% endif %}">
                    {% if niche.match_strength %}
                    <span class="uppercase tracking-wide font-semibold">{{ niche.match_strength }}</span>
                    {% endif %}
                    {% if niche.match_strength and niche.match_score %}<span class="opacity-50">·</span>{% endif %}
                    {% if niche.match_score %}{{ niche.match_score|pretty_percent:0 }}{% endif %}
                </span>
                {% endif %}
            </div>
        </div>
    </div>

    {% comment %}
      Engagement breakdown, 3 rows showing channel value, percentile
      rank (as a horizontal progress bar with brand fill), and niche
      median for context. Each row reuses the same grid template so
      labels and bars line up vertically.
    {% endcomment %}
    {% if channel.engagement_percentiles %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="flex items-center mb-3">
            <div class="text-xs uppercase tracking-wide text-stone-500">Engagement vs niche distribution</div>
            <span class="intel-tooltip-trigger" tabindex="0" aria-describedby="bc-engagement-tooltip">
                <span class="intel-tooltip-icon" aria-hidden="true">?</span>
                <span id="bc-engagement-tooltip" role="tooltip" class="intel-tooltip" data-align="left">
                    Each row compares one engagement ratio against the niche's
                    distribution. <strong>Views / sub</strong> is recent views
                    divided by subscriber count; <strong>Likes / view</strong>
                    and <strong>Comments / view</strong> are the equivalent
                    per-video ratios.
                    <br><br>
                    <strong>Niche p50</strong> is the median niche channel on
                    that ratio, half of the niche scores below it, half
                    above. The <strong>pNN</strong> readout on the right is
                    your channel's percentile rank: <strong>p50</strong> means
                    you sit exactly at the niche median, <strong>p80</strong>
                    means you outperform 80% of niche peers, <strong>p20</strong>
                    means 80% of peers outperform you.
                </span>
            </span>
        </div>
        <div class="space-y-3">
            {% with eng=channel.engagement engp=channel.engagement_percentiles nichep=niche.engagement %}

            <div class="grid grid-cols-[120px_1fr_60px] items-center gap-3">
                <div class="text-xs font-medium text-stone-700">Views / sub</div>
                <div>
                    <div class="h-1.5 rounded-full bg-stone-100 overflow-hidden">
                        <div class="h-full rounded-full" style="width: {{ engp.view_to_sub_ratio|default:0 }}%; background: var(--primary);"></div>
                    </div>
                    <div class="flex justify-between mt-1 text-[11px] text-stone-500 tabular-nums">
                        <span>You: <span class="text-stone-900 font-medium">{{ eng.view_to_sub_ratio|pretty_percent }}</span></span>
                        <span>Niche p50: {{ nichep.view_to_sub_ratio.p50|pretty_percent }}</span>
                    </div>
                </div>
                <div class="text-xs font-mono tabular-nums text-stone-900 text-right">p{{ engp.view_to_sub_ratio }}</div>
            </div>

            <div class="grid grid-cols-[120px_1fr_60px] items-center gap-3">
                <div class="text-xs font-medium text-stone-700">Likes / view</div>
                <div>
                    <div class="h-1.5 rounded-full bg-stone-100 overflow-hidden">
                        <div class="h-full rounded-full" style="width: {{ engp.like_to_view_ratio|default:0 }}%; background: var(--primary);"></div>
                    </div>
                    <div class="flex justify-between mt-1 text-[11px] text-stone-500 tabular-nums">
                        <span>You: <span class="text-stone-900 font-medium">{{ eng.like_to_view_ratio|pretty_percent:2 }}</span></span>
                        <span>Niche p50: {{ nichep.like_to_view_ratio.p50|pretty_percent:2 }}</span>
                    </div>
                </div>
                <div class="text-xs font-mono tabular-nums text-stone-900 text-right">p{{ engp.like_to_view_ratio }}</div>
            </div>

            <div class="grid grid-cols-[120px_1fr_60px] items-center gap-3">
                <div class="text-xs font-medium text-stone-700">Comments / view</div>
                <div>
                    <div class="h-1.5 rounded-full bg-stone-100 overflow-hidden">
                        <div class="h-full rounded-full" style="width: {{ engp.comment_to_view_ratio|default:0 }}%; background: var(--primary);"></div>
                    </div>
                    <div class="flex justify-between mt-1 text-[11px] text-stone-500 tabular-nums">
                        <span>You: <span class="text-stone-900 font-medium">{{ eng.comment_to_view_ratio|pretty_percent:2 }}</span></span>
                        <span>Niche p50: {{ nichep.comment_to_view_ratio.p50|pretty_percent:2 }}</span>
                    </div>
                </div>
                <div class="text-xs font-mono tabular-nums text-stone-900 text-right">p{{ engp.comment_to_view_ratio }}</div>
            </div>

            {% endwith %}
        </div>
    </div>
    {% endif %}

    {% comment %}
      Title-pattern comparison: channel vs niche aggregate. Two-column
      table so the user can read each row as "is my channel above or
      below the typical niche channel on this dimension?"
    {% endcomment %}
    {% if channel.title_patterns and niche.title_patterns %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="text-xs uppercase tracking-wide text-stone-500 mb-3">Title patterns</div>
        <div class="grid grid-cols-[1fr_auto_auto] gap-x-6 gap-y-2 text-xs">
            <div></div>
            <div class="text-stone-500 font-medium uppercase tracking-wide text-right">You</div>
            <div class="text-stone-500 font-medium uppercase tracking-wide text-right">Niche</div>

            {% with ch=channel.title_patterns nc=niche.title_patterns %}
            <div class="text-stone-700">Avg title length</div>
            <div class="text-right text-stone-900 font-medium tabular-nums">{{ ch.mean_length_chars|floatformat:0 }} characters</div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.mean_length_chars|floatformat:0 }} characters</div>

            <div class="text-stone-700">Avg word count</div>
            <div class="text-right text-stone-900 font-medium tabular-nums">{{ ch.mean_length_words|floatformat:1 }}</div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.mean_length_words|floatformat:1 }}</div>

            <div class="text-stone-700">Has a question mark</div>
            <div class="text-right text-stone-900 font-medium tabular-nums">{{ ch.share_with_question_mark|pretty_percent:0 }}</div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.share_with_question_mark|pretty_percent:0 }}</div>

            <div class="text-stone-700">Has a number</div>
            <div class="text-right text-stone-900 font-medium tabular-nums">{{ ch.share_with_number|pretty_percent:0 }}</div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.share_with_number|pretty_percent:0 }}</div>

            <div class="text-stone-700">Median uppercase ratio</div>
            <div class="text-right text-stone-900 font-medium tabular-nums">{{ ch.median_uppercase_ratio|pretty_percent:0 }}</div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.median_uppercase_ratio|pretty_percent:0 }}</div>

            <div class="text-stone-700">Has an emoji</div>
            <div class="text-right text-stone-900 font-medium tabular-nums">{{ ch.share_with_emoji|pretty_percent:0 }}</div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.share_with_emoji|pretty_percent:0 }}</div>
            {% endwith %}
        </div>
    </div>
    {% endif %}

    {% comment %}
      Common niche phrases. Tag-cloud-ish layout, each pill carries
      the phrase + its frequency. Phrases the channel ALSO uses get
      an orange tint so they pop out ("you're already on these
      trends"). Capped to the top ~12 server-side ordering.
    {% endcomment %}
    {% if niche.title_patterns.common_niche_phrases %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="text-xs uppercase tracking-wide text-stone-500 mb-3">Common phrases in niche</div>
        <div class="flex flex-wrap gap-1.5">
            {% for ph in niche.title_patterns.common_niche_phrases|slice:":12" %}
            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-[11px]
                         {% if ph.used_by_channel %}font-medium{% else %}text-stone-700{% endif %}"
                  style="{% if ph.used_by_channel %}background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-muted);{% else %}background: var(--color-stone-100); border: 1px solid var(--color-stone-200);{% endif %}">
                {% if ph.used_by_channel %}
                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                {% endif %}
                <span>{{ ph.phrase }}</span>
                <span class="opacity-60 tabular-nums">{{ ph.frequency|pretty_percent:0 }}</span>
            </span>
            {% endfor %}
        </div>
        {% if niche.title_patterns.common_niche_phrases|length > 12 %}
        <div class="mt-2 text-[11px] text-stone-400">
            + {{ niche.title_patterns.common_niche_phrases|length|add:"-12" }} more
        </div>
        {% endif %}
    </div>
    {% endif %}

    {% comment %} Exemplar channels, peers in the niche {% endcomment %}
    {% if niche.exemplar_channels %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="text-xs uppercase tracking-wide text-stone-500 mb-3">Exemplar channels in this niche</div>
        <ul class="space-y-1.5">
            {% for ec in niche.exemplar_channels %}
            <li class="flex items-center justify-between gap-3 text-xs">
                <span class="text-stone-900 font-medium truncate">{{ ec.title }}</span>
                <span class="text-stone-500 tabular-nums flex-shrink-0">{{ ec.subscriber_count|humanize_count }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>
{% endwith %}