{% extends "base.html" %}
{% from "components/status_badge.html" import status_badge %}

{% block title %}{{ run.run_id }} — Run Detail{% endblock %}

{% block content %}
<!-- Header: Run ID + status badge -->
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="app-hero__title">{{ run.run_id }}</h2>
    {{ status_badge(run.status) }}
</div>

{% if project_id %}
<!-- Phase 3: Retrain + Inference actions (project-scoped only) -->
<div class="d-flex gap-2 mb-3">
    <button class="btn btn-outline-primary btn-sm"
            hx-post="/projects/{{ project_id }}/runs/{{ run.run_id }}/retrain"
            hx-target="#phase3-action-result"
            hx-swap="innerHTML"
            hx-disabled-elt="this">
        Retrain
        <span class="app-spinner htmx-indicator" role="status" aria-label="Retraining"></span>
    </button>
    <button class="btn btn-outline-primary btn-sm"
            hx-get="/projects/{{ project_id }}/runs/{{ run.run_id }}/inference"
            hx-target="#phase3-action-result"
            hx-swap="innerHTML"
            hx-disabled-elt="this">
        Run inference
        <span class="app-spinner htmx-indicator" role="status" aria-label="Loading"></span>
    </button>
</div>
<div id="phase3-action-result"></div>
{% endif %}

<!-- Metadata section -->
<section class="app-card mb-4">
    <div class="app-card__header">
        <h3 class="app-card__title app-card__title--sm">📋 Metadata</h3>
    </div>
    <table class="table table-sm mb-0">
        <tr><th>Timestamp</th><td>{{ run.timestamp[:19] }} UTC</td></tr>
        <tr><th>Duration</th><td>{{ "%.1f"|format(run.duration_seconds) }}s</td></tr>
        {% if run.run_type == "training" %}
        <tr><th>Models</th><td>{{ run.model_types|join(", ") }}</td></tr>
        <tr><th>Features</th><td>{{ run.feature_count if run.feature_count else "—" }}</td></tr>
        {% endif %}
        <tr><th>Version</th><td>{{ run.energizados_version }}</td></tr>
    </table>
</section>

<!-- Metrics section (branches single vs multi) -->
<section class="app-card mb-4">
    <div class="app-card__header">
        <h3 class="app-card__title app-card__title--sm">📈 Metrics</h3>
    </div>
    {% if evaluation %}
        {% if evaluation.ranking %}
            <!-- Multi-model: ranking table -->
            <table class="table table-sm mb-0">
                <thead>
                    <tr>
                        <th>Rank</th><th>Model</th><th>AUC</th><th>F1</th><th>Precision</th><th>Recall</th>
                    </tr>
                </thead>
                <tbody>
                    {% for model in evaluation.ranking %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ model.name }}</td>
                        <td>{{ "%.3f"|format(model.metrics.auc) }}</td>
                        <td>{{ "%.3f"|format(model.metrics.f1) }}</td>
                        <td>{{ "%.3f"|format(model.metrics.precision) }}</td>
                        <td>{{ "%.3f"|format(model.metrics.recall) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <p class="text-muted mb-0 mt-2">Best model: <strong>{{ evaluation.best_model }}</strong></p>
        {% else %}
            <!-- Single-model: metrics table -->
            <table class="table table-sm mb-0">
                <tr><th>AUC</th><td>{{ "%.3f"|format(evaluation.metrics.auc) }}</td></tr>
                <tr><th>F1</th><td>{{ "%.3f"|format(evaluation.metrics.f1) }}</td></tr>
                <tr><th>Precision</th><td>{{ "%.3f"|format(evaluation.metrics.precision) }}</td></tr>
                <tr><th>Recall</th><td>{{ "%.3f"|format(evaluation.metrics.recall) }}</td></tr>
                <tr><th>Threshold</th><td>{{ evaluation.metrics.threshold }}</td></tr>
            </table>
        {% endif %}
    {% else %}
        <div class="alert alert-warning mb-0">⚠️ No evaluation report found.</div>
    {% endif %}
</section>

<!-- Threshold Exploration section -->
<section class="app-card mb-4" id="thresholds-section">
    <div class="app-card__header">
        <h3 class="app-card__title app-card__title--sm">🎯 Threshold Exploration</h3>
    </div>
    <div id="threshold-loading" class="text-muted">Loading...</div>
    <div id="threshold-charts" style="display: none;">
        <div id="pr-chart" style="height: 400px;"></div>
        <div id="gains-chart" style="height: 400px;"></div>
        <div id="threshold-controls" class="mt-3">
            <label>Threshold: <span id="threshold-value">0.50</span></label>
            <input type="range" id="threshold-slider" min="0" max="1" step="0.01" value="0.5" class="form-range">
            <div id="metrics-at-threshold" class="mt-2">
                <span>Precision: <strong id="precision-value">-</strong></span> |
                <span>Recall: <strong id="recall-value">-</strong></span> |
                <span>F1: <strong id="f1-value">-</strong></span>
            </div>
        </div>
    </div>
    <div id="threshold-unavailable" style="display: none;" class="alert alert-info mb-0">
        {% if threshold_unavailable_message %}
            {{ threshold_unavailable_message }}
        {% else %}
            Threshold data not available for this run.
        {% endif %}
    </div>
</section>

<script>
fetch('{{ api_base | default("/api/runs") }}/{{ run.run_id }}/thresholds')
  .then(r => {
    if (!r.ok) throw new Error('Not found');
    return r.json();
  })
  .then(data => {
    if (data.threshold_metrics && data.cumulative_gains) {
      // Render charts
      document.getElementById('threshold-loading').style.display = 'none';
      document.getElementById('threshold-charts').style.display = 'block';

      // Precision/Recall vs Threshold
      const prTrace = {
        x: data.threshold_metrics.thresholds,
        y: data.threshold_metrics.precisions,
        name: 'Precision',
        mode: 'lines'
      };
      const recTrace = {
        x: data.threshold_metrics.thresholds,
        y: data.threshold_metrics.recalls,
        name: 'Recall',
        mode: 'lines'
      };
      Plotly.newPlot('pr-chart', [prTrace, recTrace], {
        title: 'Precision/Recall vs Threshold',
        xaxis: { title: 'Threshold' },
        yaxis: { title: 'Score' }
      });

      // Cumulative Gains
      const gainsTrace = {
        x: data.cumulative_gains.cumulative_population,
        y: data.cumulative_gains.cumulative_gain,
        mode: 'lines+markers'
      };
      Plotly.newPlot('gains-chart', [gainsTrace], {
        title: 'Cumulative Gains',
        xaxis: { title: 'Cumulative Population' },
        yaxis: { title: 'Cumulative Gain' }
      });

      // Set current threshold value
      if (data.current_threshold) {
        document.getElementById('threshold-value').textContent = data.current_threshold.toFixed(2);
        document.getElementById('threshold-slider').value = data.current_threshold;
      }

      // Slider interaction
      const slider = document.getElementById('threshold-slider');
      slider.addEventListener('input', (e) => {
        const t = parseFloat(e.target.value);
        document.getElementById('threshold-value').textContent = t.toFixed(2);

        // Interpolate metrics at threshold
        const thresholds = data.threshold_metrics.thresholds;
        const idx = thresholds.findIndex(v => v >= t);
        if (idx >= 0) {
          document.getElementById('precision-value').textContent =
            data.threshold_metrics.precisions[idx].toFixed(3);
          document.getElementById('recall-value').textContent =
            data.threshold_metrics.recalls[idx].toFixed(3);
          document.getElementById('f1-value').textContent =
            data.threshold_metrics.f1s[idx].toFixed(3);
        }
      });
    } else {
      document.getElementById('threshold-loading').style.display = 'none';
      document.getElementById('threshold-unavailable').style.display = 'block';
    }
  })
  .catch(() => {
    document.getElementById('threshold-loading').style.display = 'none';
    document.getElementById('threshold-unavailable').style.display = 'block';
  });
</script>

<!-- Config files section -->
{% if config_files %}
<section class="app-card mb-4">
    <div class="app-card__header">
        <h3 class="app-card__title app-card__title--sm">⚙️ Config Files</h3>
    </div>
    <ul class="mb-0">
        {% for config_file in config_files %}
        <li>
            <a href="{{ runs_base | default("/runs") }}/{{ run.run_id }}/artifacts/config/{{ config_file }}"
               target="_blank">
                📄 {{ config_file }}
            </a>
        </li>
        {% endfor %}
    </ul>
</section>
{% endif %}

<!-- Log section -->
{% if has_log %}
<section class="app-card mb-4">
    <div class="app-card__header">
        <h3 class="app-card__title app-card__title--sm">📜 Run Log</h3>
    </div>
    <pre class="bg-body-tertiary p-3 font-mono mb-0" style="max-height: 400px; overflow-y: auto;">{{ log_content }}</pre>
</section>
{% endif %}

<!-- EDA embed section -->
{% if eda_relative_path %}
<section class="app-card mb-4">
    <div class="app-card__header">
        <h3 class="app-card__title app-card__title--sm">🔍 EDA Report</h3>
    </div>
    <iframe
        src="{{ runs_base | default("/runs") }}/{{ run.run_id }}/artifacts/{{ eda_relative_path }}"
        width="100%"
        height="800px"
        style="border: 1px solid var(--app-border); border-radius: var(--app-radius-sm);"
    ></iframe>
</section>
{% endif %}

<!-- Navigation -->
<div class="mt-4">
    <a href="/runs" class="btn btn-outline-secondary">← Back to Runs</a>
</div>
{% endblock %}