{% extends "base.html" %}
{% block title %}Combination #{{ combo.id }} — PhysCom{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Combination #{{ combo.id }}</h1>
  <a href="{{ url_for('results.results_domain', domain_name=domain.name) }}" class="btn">Back to list</a>
</div>

<div class="card">
  <dl>
    <dt>Domain</dt><dd>{{ domain.name }}</dd>
    <dt>Status</dt>
    <dd>
      {% if result and result.domain_block_reason %}
        <span class="badge badge-p1_fail">domain_blocked</span>
      {% else %}
        <span class="badge badge-{{ combo.status }}">{{ combo.status }}</span>
      {% endif %}
    </dd>
    {% if result and result.domain_block_reason %}
    <dt>Domain Block Reason</dt><dd>{{ result.domain_block_reason }}</dd>
    {% endif %}
    {% if combo.block_reason %}
    <dt>Block Reason</dt><dd>{{ combo.block_reason }}</dd>
    {% endif %}
    {% if result %}
    <dt>Composite Score</dt><dd class="score-cell">{{ "%.4f"|format(result.composite_score) }}</dd>
    <dt>Pass Reached</dt><dd>{{ result.pass_reached }}</dd>
    {% if result.qualitative_rating %}
    <dt>Rating</dt><dd><span class="badge badge-rating-{{ result.qualitative_rating|lower }}">{{ result.qualitative_rating }}</span></dd>
    {% endif %}
    {% if result.novelty_flag %}
    <dt>Novelty</dt><dd>{{ result.novelty_flag }}</dd>
    {% endif %}
    {% if result.llm_review %}
    <dt>LLM Review</dt><dd>{{ result.llm_review }}</dd>
    {% endif %}
    {% if result.human_notes %}
    <dt>Human Notes</dt><dd>{{ result.human_notes }}</dd>
    {% endif %}
    {% endif %}
  </dl>
</div>

<h2>Entities</h2>
<div class="card-grid">
  {% for e in combo.entities %}
  <div class="card">
    <h3><a href="{{ url_for('entities.entity_detail', entity_id=e.id) }}">{{ e.name }}</a></h3>
    <p class="subtitle">{{ e.dimension }}</p>
    <p>{{ e.description }}</p>
    <table class="compact">
      <thead><tr><th>Key</th><th>Value</th><th>Type</th></tr></thead>
      <tbody>
        {% for dep in e.dependencies %}
        <tr>
          <td>{{ dep.key }}</td>
          <td>{{ dep.value|qty(dep.unit) }}</td>
          <td><span class="badge badge-{{ dep.constraint_type }}">{{ dep.constraint_type }}</span></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
</div>

{% if scores %}
<h2>Per-Metric Scores</h2>
{% set bounds = {} %}
{% for mb in domain.metric_bounds %}
  {% set _ = bounds.update({mb.metric_name: mb}) %}
{% endfor %}
<div class="card">
  <table>
    <thead>
      <tr>
        <th>Metric</th>
        <th>Raw Value</th>
        <th>Domain Range</th>
        <th>Position</th>
        <th>Normalized</th>
        <th>Weight</th>
      </tr>
    </thead>
    <tbody>
      {% for s in scores %}
      {% set mb = bounds.get(s.metric_name) %}
      <tr>
        <td>{{ s.metric_name }}</td>
        {% set unit = s.metric_unit or '' %}
        <td class="score-cell">{{ s.raw_value|qty(unit) if s.raw_value is not none else '—' }}</td>
        <td>
          {%- if mb -%}
            {{ mb.norm_min|qty(unit) }} — {{ mb.norm_max|qty(unit) }}
          {%- else -%}
            —
          {%- endif -%}
        </td>
        <td>
          {%- if mb and s.raw_value is not none -%}
            {%- if s.raw_value <= mb.norm_min -%}
              <span class="badge badge-{{ 'valid' if mb.lower_is_better else 'p1_fail' }}">at/below min{{ ' (best)' if mb.lower_is_better else '' }}</span>
            {%- elif s.raw_value >= mb.norm_max -%}
              <span class="badge badge-{{ 'p1_fail' if mb.lower_is_better else 'valid' }}">at/above max{{ ' (worst)' if mb.lower_is_better else '' }}</span>
            {%- else -%}
              {% set raw_pct = (s.raw_value - mb.norm_min) / (mb.norm_max - mb.norm_min) * 100 %}
              {# For lower_is_better metrics, raw_pct alone measures distance from norm_min,
                 not quality -- a value near norm_min (excellent, cost near its floor) would
                 otherwise render as a near-empty bar. Invert so the bar and percentage always
                 mean "how good", matching the normalized score's own higher-is-better convention. #}
              {% set pct = ((100 - raw_pct) if mb.lower_is_better else raw_pct) | int %}
              <div class="metric-bar-container">
                <div class="metric-bar" style="width: {{ pct }}%"></div>
              </div>
              <span class="metric-bar-label">~{{ pct }}%{{ ' (lower is better)' if mb.lower_is_better else '' }}</span>
            {%- endif -%}
          {%- else -%}
            —
          {%- endif -%}
        </td>
        <td class="score-cell">{{ "%.4f"|format(s.normalized_score) if s.normalized_score is not none else '—' }}</td>
        <td>{{ "%.0f%%"|format(mb.weight * 100) if mb else '—' }}{{ ' ↓' if mb and mb.lower_is_better else '' }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{% if scores %}
<h2>Explore: Scale the Build</h2>
<p class="subtitle">
  Purely exploratory — nothing here is saved. Drag a slider to pick a
  platform weight class, motor size, or battery size directly, and see how
  power density, range, and the resulting score respond. Sliders open on
  the saved build above, which is already the score-optimized allocation
  for this domain (subject to the platform's physical performance floor),
  so the starting point is the best build already found, not an arbitrary
  or merely functional one.
</p>
<div class="card">
  {% if explore_result is not none %}
  {% set r = explore_result %}
  <form id="explore-form"
        hx-post="{{ url_for('results.explore', domain_name=domain.name, combo_id=combo.id) }}"
        hx-trigger="input changed delay:200ms"
        hx-target="#explore-result" hx-swap="innerHTML">
    <div class="weight-slider-row">
      <label for="platform_mass">platform (weight class)</label>
      <input type="range" min="{{ r.platform_min }}" max="{{ r.platform_max }}" step="0.1"
             id="platform_mass" name="platform_mass" value="{{ r.platform_mass }}"
             oninput="document.getElementById('out_platform_mass').textContent = (+this.value).toFixed(1) + 'kg'">
      <output id="out_platform_mass">{{ "%.1f"|format(r.platform_mass) }}kg</output>
    </div>
    <div class="weight-slider-row">
      <label for="actuator_mass">actuator (motor/collector size, or operator count/size for muscle power)</label>
      <input type="range" min="{{ r.actuator_min }}" max="{{ r.actuator_slider_max }}" step="0.1"
             id="actuator_mass" name="actuator_mass" value="{{ r.actuator_mass }}"
             oninput="document.getElementById('out_actuator_mass').textContent = (+this.value).toFixed(1) + 'kg'">
      <output id="out_actuator_mass">{{ "%.1f"|format(r.actuator_mass) }}kg</output>
    </div>
    <div class="weight-slider-row">
      <label for="storage_mass">storage (battery/tank size)</label>
      <input type="range" min="{{ r.storage_min }}" max="{{ r.storage_slider_max }}" step="0.1"
             id="storage_mass" name="storage_mass" value="{{ r.storage_mass }}"
             oninput="document.getElementById('out_storage_mass').textContent = (+this.value).toFixed(1) + 'kg'">
      <output id="out_storage_mass">{{ "%.1f"|format(r.storage_mass) }}kg</output>
    </div>
  </form>
  {% endif %}
  <div id="explore-result">
    {% include "results/_explore_result.html" %}
  </div>
</div>
{% endif %}

<h2>Human Review</h2>
<div id="review-section">
  {% include "results/_review_form.html" %}
</div>
{% endblock %}