{% extends 'base.html' %}
{% load static %}
{% block title %}Cluster #{{ cluster.cluster_label }} — Run #{{ run.display_id }}{% endblock %}
{% block content %}
<link rel="stylesheet" href="{% static 'tianxuan/cluster.css' %}">
<style>
.entity-card { border:1px solid #e0e0e0; border-radius:6px; padding:0.6rem; margin-bottom:0.4rem; background:#fafafa; }
.entity-card .val { font-weight:600; font-size:0.85rem; }
.entity-card .feat { font-size:0.75rem; color:#666; display:inline-block; margin-right:0.5rem; }
</style>

<div class="card">
    <a href="{% url 'analysis:cluster_overview' run.display_id %}" style="color:#4361ee;text-decoration:none;font-size:0.9rem;">← Cluster Overview</a>
    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem;margin-top:0.5rem;">
        <div>
            <h2 style="margin:0;">Cluster #{{ cluster.cluster_label }}
                {% if cluster.cluster_label == -1 %}<span class="badge badge-warning">Noise</span>{% endif %}
            </h2>
            <p style="margin:0.25rem 0 0;color:#666;font-size:0.9rem;">
                {{ cluster.size }} entities
                {% if cluster.proportion %} — {{ cluster.proportion|floatformat:1 }}% of total{% endif %}
                {% if cluster.silhouette_score is not None %} — Silhouette: {{ cluster.silhouette_score|floatformat:4 }}{% endif %}
            </p>
        </div>
    </div>
    {% if nl_summary %}
    <div style="background:#f8f9fa;border-left:3px solid #4361ee;padding:0.6rem;margin:0.75rem 0;border-radius:0 4px 4px 0;font-size:0.85rem;line-height:1.6;color:#333;">{{ nl_summary }}</div>
    {% endif %}
</div>

<!-- ── Feature Analysis ── -->
<div class="card">
    <h3>📊 Feature Analysis <span style="font-weight:400;font-size:0.8rem;color:#888;">{{ features|length }} features</span></h3>
    {% if features %}
    <table class="feat-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Feature</th>
                <th>Dist. Score</th>
                <th>Mean</th>
                <th>Std</th>
                <th>Median</th>
                <th>P25</th>
                <th>P75</th>
            </tr>
        </thead>
        <tbody>
            {% for f in features %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td><code>{{ f.feature_name }}</code></td>
                <td><span class="{% if f.distinguishing_score > 0 %}feat-positive{% else %}feat-negative{% endif %}">{{ f.distinguishing_score|floatformat:3 }}</span></td>
                <td>{{ f.mean|floatformat:3|default:"-" }}</td>
                <td>{{ f.std|floatformat:3|default:"-" }}</td>
                <td>{{ f.median|floatformat:3|default:"-" }}</td>
                <td>{{ f.p25|floatformat:3|default:"-" }}</td>
                <td>{{ f.p75|floatformat:3|default:"-" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state"><p>No feature data for this cluster.</p></div>
    {% endif %}
</div>

<!-- ── SVD Singular Values ── -->
{% if cluster.cluster_label != -1 %}
{# SVD-extracted features (from _run_clustering_pipeline cluster_svd_extract) have higher distinguishing scores #}
{% with svd_features=features|slice:":5" %}
{% if svd_features %}
<div class="card">
    <h3>🔬 SVD Key Features <span style="font-weight:400;font-size:0.8rem;color:#888;">Top 5 by distinguishing score</span></h3>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
    {% for f in svd_features %}
        <div style="background:#f8f9fa;border-radius:6px;padding:0.5rem;border:1px solid #e0e0e0;">
            <div style="font-weight:600;font-size:0.8rem;">{{ f.feature_name }}</div>
            <div style="font-size:0.75rem;color:#666;margin-top:0.2rem;">
                Score: <span class="{% if f.distinguishing_score > 0 %}feat-positive{% else %}feat-negative{% endif %}">{{ f.distinguishing_score|floatformat:2 }}</span>
                | Mean: {{ f.mean|floatformat:2 }}
                | Std: {{ f.std|floatformat:2 }}
            </div>
        </div>
    {% endfor %}
    </div>
</div>
{% endif %}
{% endwith %}
{% endif %}

<!-- ── Entity List ── -->
<div class="card">
    <h3>👤 Entities <span style="font-weight:400;font-size:0.8rem;color:#888;">{{ entities|length }} shown</span></h3>
    <div id="entityList">
    {% for e in entities %}
        <div class="entity-card">
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <span class="val">{{ e.entity_value }}</span>
                <a href="{% url 'analysis:entity_profile' e.id %}" class="btn btn-sm" style="font-size:0.75rem;padding:0.2rem 0.6rem;background:#4361ee;color:#fff;text-decoration:none;border-radius:4px;">Profile</a>
            </div>
            {% if e.feature_json %}
            <div style="margin-top:0.3rem;">
                {% for k, v in e.feature_json.items|slice:":8" %}
                <span class="feat"><strong>{{ k }}</strong>: {% if v is None %}-{% else %}{{ v|floatformat:2 }}{% endif %}</span>
                {% endfor %}
                {% if e.feature_json.items|length > 8 %}<span class="feat" style="color:#999;">+{{ e.feature_json.items|length|add:"-8" }} more</span>{% endif %}
            </div>
            {% endif %}
        </div>
    {% empty %}
        <div class="empty-state"><p>No entities in this cluster.</p></div>
    {% endfor %}
    </div>
</div>
{% endblock %}