{% extends "base.html" %}
{% from "fragments/_chips.html" import chip %}
{% block title %}Voxint — {{ speaker.display_name }}{% endblock %}

{% block cb_breadcrumb %}speakers / <strong>{{ speaker.display_name|lower|replace(" ", "-") }}</strong>{% endblock %}
{% block cb_summary %}
{%- if aggregate.verified %}{{ chip("verified by you") }}{% elif aggregate.files > 0 %}{{ chip("needs review") }}{% endif -%}
{% endblock %}
{% block cb_actions %}
{% if not archived %}
<a href="#profile-panel" class="cb-btn cb-btn-secondary">Edit profile</a>
<details class="cb-overflow">
  <summary class="cb-btn cb-btn-secondary">Merge ▾</summary>
  <div class="cb-overflow-menu">
    <p class="oc-muted" style="padding: var(--space-2) var(--space-3); font-size: var(--t-xs);">
      Merge this speaker into another from their profile page.
    </p>
  </div>
</details>
{% endif %}
{% endblock %}

{% block body %}
<style>
  .insight-card { padding: var(--space-3); margin-bottom: var(--space-3); }
  .insight-card-title {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em;
    color: var(--ink-2); margin: 0 0 var(--space-2);
  }
  .term-bars { display: flex; flex-direction: column; gap: 2px; }
  .term-bar-row {
    display: grid; grid-template-columns: 7em 1fr 3em;
    align-items: center; gap: var(--space-2);
    padding: 2px var(--space-2); border-radius: 3px;
    text-decoration: none; color: inherit;
    font-size: var(--t-sm);
  }
  .term-bar-row:hover { background: var(--surface-2); }
  .term-bar-label { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .term-bar-fill {
    height: 1rem; border-radius: 2px; min-width: 2px;
    background: var(--accent-soft);
  }
  .term-bar-row:hover .term-bar-fill { background: var(--accent); }
  .term-bar-count { text-align: right; color: var(--ink-3); font-size: var(--t-xs); }
  .ego-transitions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  @media (max-width: 36rem) { .ego-transitions { grid-template-columns: 1fr; } }
  .ego-col-title {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em;
    color: var(--ink-3); margin: 0 0 var(--space-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ego-edge {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px var(--space-2); font-size: var(--t-sm);
  }
  .ego-edge:hover { background: var(--surface-2); border-radius: 3px; }
  .ego-edge-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ego-edge-count { color: var(--ink-3); font-size: var(--t-xs); flex-shrink: 0; margin-left: var(--space-2); }
  .wpm-stat { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
  .wpm-value { font-size: 2rem; font-weight: 300; color: var(--accent-ink); }
  .wpm-unit { font-size: var(--t-sm); color: var(--ink-3); }
</style>
{% if archived %}
<p class="notice error" role="alert">This speaker is archived: the profile is read-only
and web research is off. Restore the speaker from the
<a href="/speakers">speakers page</a> to edit again.</p>
{% endif %}

<div class="spk-profile-header">
  <span class="spk-avatar{% if aggregate.verified %} pd-spk-named{% endif %}">{{ (speaker.display_name or "?")[:2]|upper }}</span>
  <div>
    <h1 class="spk-profile-name">{{ speaker.display_name }}</h1>
    {% set bio = profile.get("bio") %}
    {% set affiliation = profile.get("affiliation") %}
    {% if bio or affiliation %}
    <p class="oc-muted">{% if bio %}{{ bio.value }}{% endif %}{% if bio and affiliation %}, {% endif %}{% if affiliation %}{{ affiliation.value }}{% endif %}</p>
    {% endif %}
  </div>
</div>

<div class="oc-stat-tiles">
  <div class="oc-stat-tile">
    <div class="tile-value">{{ aggregate.files }}</div>
    <div class="tile-label">RECORDINGS</div>
  </div>
  <div class="oc-stat-tile">
    <div class="tile-value">{{ format_duration(aggregate.seconds) }}</div>
    <div class="tile-label">SPEAKING TIME</div>
  </div>
  <div class="oc-stat-tile">
    <div class="tile-value">{{ aggregate.segments }}</div>
    <div class="tile-label">SEGMENTS</div>
  </div>
  <div class="oc-stat-tile">
    <div class="tile-value">
      {%- if tier.tier -%}
        {%- set best = tier.evidence|map(attribute="similarity")|select("number")|list -%}
        {%- if best -%}
          {%- set pct = (best|max * 100)|round|int -%}
          <span class="{% if pct >= 85 %}spk-match-ok{% else %}spk-match-warn{% endif %}">{{ pct }}%</span>
        {%- else -%}–{%- endif -%}
      {%- else -%}–{%- endif -%}
    </div>
    <div class="tile-label">AVG MATCH</div>
  </div>
  <div class="oc-stat-tile">
    <div class="tile-value">{% if aggregate.first_seen %}{{ aggregate.first_seen.strftime("%b %d") }}{% else %}–{% endif %}</div>
    <div class="tile-label">FIRST HEARD</div>
  </div>
  <div class="oc-stat-tile">
    <div class="tile-value">{% if aggregate.last_seen %}{{ aggregate.last_seen.strftime("%b %d") }}{% else %}–{% endif %}</div>
    <div class="tile-label">LAST HEARD</div>
  </div>
</div>

{% if not archived %}
{% set poll_remaining = 3 if (not insights and insights_eligible) else 0 %}
{% include "speakers/insights_fragment.html" %}
{% endif %}

{% include "speakers/profile_panel.html" %}

{% if not archived %}
{% include "speakers/research.html" %}
{% endif %}

<section class="oc-section">
  <h2 class="oc-section-title">HEARD IN</h2>
  {% if aggregate.appearances %}
  <div class="grid-table spk-heardin-grid" role="region" aria-label="Recordings featuring {{ speaker.display_name }}" tabindex="0"
       style="grid-template-columns: 1fr auto auto auto auto auto;">
    <div class="gt-header">
      <span>RECORDING</span>
      <span>FOLDER</span>
      <span class="num">SPOKE</span>
      <span class="num">SEGMENTS</span>
      <span class="num">MATCH</span>
      <span></span>
    </div>
    {% for a in aggregate.appearances %}
    <div class="gt-row">
      <span>
        {% if runs_by_id.get(a.run_id) %}
        <a href="/runs/{{ a.run_id }}">{{ run_source_title(runs_by_id[a.run_id]) }}</a>
        {% else %}<span class="oc-muted">recording removed</span>{% endif %}
        {% if a.human_assigned %}{{ chip("verified") }}{% endif %}
      </span>
      <span>
        {%- set run = runs_by_id.get(a.run_id) -%}
        {%- if run and run.media_item and run.media_item.media_folder -%}
          {{ run.media_item.media_folder.path }}
        {%- else -%}<span class="oc-muted">–</span>{%- endif -%}
      </span>
      <span class="num">{{ format_duration(a.seconds) }}</span>
      <span class="num">{{ a.segments }}</span>
      <span class="num">
        {%- if a.similarity is defined and a.similarity is not none -%}
          {%- set pct = (a.similarity * 100)|round|int -%}
          <span class="{% if pct >= 85 %}spk-match-ok{% else %}spk-match-warn{% endif %}">{{ pct }}%</span>
        {%- else -%}<span class="oc-muted">–</span>{%- endif -%}
      </span>
      <span class="gt-action">
        {% if runs_by_id.get(a.run_id) %}
        <a href="/runs/{{ a.run_id }}">Open →</a>
        {% endif %}
      </span>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="oc-muted">Not heard in any processed recording yet.</p>
  {% endif %}
</section>

{% if tier.has_voice_evidence %}
<details>
  <summary class="oc-muted">Voice match details</summary>
  <p class="oc-muted">
    {{ tier.strong }} strong, {{ tier.moderate }} moderate, {{ tier.weak }} weak{% if tier.unavailable %},
    {{ tier.unavailable }} without recorded numbers{% endif %} —
    graded against the current gates (strong needs cosine ≥ {{ "%.2f"|format(gates.grounded_min_cosine) }},
    margin ≥ {{ "%.2f"|format(gates.grounded_min_margin) }},
    vote agreement ≥ {{ "%.2f"|format(gates.grounded_min_vote_agreement) }};
    moderate needs cosine ≥ {{ "%.2f"|format(gates.min_cosine) }},
    margin ≥ {{ "%.2f"|format(gates.min_margin) }},
    vote agreement ≥ {{ "%.2f"|format(gates.min_vote_agreement) }}).
  </p>
</details>
{% endif %}
{% endblock %}