{% extends 'base.html' %}
{% block title %}Entity: {{ entity.entity_value }} - TLS Analyzer{% endblock %}
{% block content %}
<div class="card">
    <a href="javascript:history.back()" style="color:#4361ee;text-decoration:none;font-size:0.9rem;">← Back</a>
    <h2 style="margin-top:0.5rem;">Entity: <code>{{ entity.entity_value }}</code></h2>
    <p>Run #{{ run.display_id }} | Cluster: <span class="badge badge-info">#{{ entity.cluster_label|default:"unassigned" }}</span></p>
</div>

<div class="card">
    <h2>Aggregated Features</h2>
    <table>
        <thead>
            <tr>
                <th>Feature</th>
                <th>Value</th>
                <th>Cluster Mean</th>
                <th>Deviation (Z-score)</th>
            </tr>
        </thead>
        <tbody>
            {% for col, dev in deviations.items %}
            <tr>
                <td><code>{{ col }}</code></td>
                <td>{{ dev.value|floatformat:3 }}</td>
                <td>{{ dev.cluster_mean|floatformat:3 }}</td>
                <td style="color:{% if dev.zscore > 2 %}#f72585{% elif dev.zscore < -2 %}#4361ee{% else %}#666{% endif %};">
                    {{ dev.zscore|floatformat:2 }}
                </td>
            </tr>
            {% empty %}
            <tr><td colspan="4">No feature data available.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if entity.embedding_x is not None and entity.embedding_y is not None %}
<div class="card">
    <h2>UMAP Position</h2>
    <p>X: {{ entity.embedding_x|floatformat:3 }}, Y: {{ entity.embedding_y|floatformat:3 }}</p>
    <canvas id="entityScatter" class="scatter-canvas" height="300"></canvas>
</div>

<script>
const canvas = document.getElementById('entityScatter');
if (canvas) {
    const ctx = canvas.getContext('2d');
    const W = canvas.parentElement.clientWidth || 400, H = 300;
    canvas.width = W; canvas.height = H;
    const pad = { top: 30, bottom: 40, left: 50, right: 20 };
    const x = {{ entity.embedding_x }}, y = {{ entity.embedding_y }};
    const margin = 0.2;  // 20% padding around the point
    const xRange = Math.abs(x) * margin * 2 || 1;
    const yRange = Math.abs(y) * margin * 2 || 1;
    const xMin = x - xRange, xMax = x + xRange;
    const yMin = y - yRange, yMax = y + yRange;

    const toX = v => pad.left + (v - xMin) / (xMax - xMin) * (W - pad.left - pad.right);
    const toY = v => pad.top + H - pad.bottom - (v - yMin) / (yMax - yMin) * (H - pad.top - pad.bottom);

    ctx.clearRect(0, 0, W, H);
    ctx.strokeStyle = '#ddd'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(pad.left, toY(0)); ctx.lineTo(W - pad.right, toY(0)); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(toX(0), pad.top); ctx.lineTo(toX(0), H - pad.bottom); ctx.stroke();

    ctx.fillStyle = '#f72585';
    ctx.beginPath(); ctx.arc(toX(x), toY(y), 8, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = '#fff'; ctx.font = 'bold 10px sans-serif'; ctx.textAlign = 'center';
    ctx.fillText('●', toX(x), toY(y) + 3);
}
</script>
{% endif %}
{% endblock %}