{% extends "base.html" %}
{% block title %}Translation {{ job.id[:8] }}… — ICDEV™ Dashboard{% endblock %}

{% block content %}
<div class="breadcrumb" role="navigation" aria-label="Breadcrumb">
    <a href="/">Home</a> &gt; <a href="/translations">Translations</a> &gt; <span>{{ job.id[:8] }}…</span>
</div>

<h1>Translation Job: {{ job.source_language }} → {{ job.target_language }}
    {% if job.status == 'completed' %}
    <span class="badge badge-success">Completed</span>
    {% elif job.status == 'failed' %}
    <span class="badge badge-danger">Failed</span>
    {% elif job.status == 'partial' %}
    <span class="badge badge-warning">Partial</span>
    {% else %}
    <span class="badge badge-info">{{ job.status|capitalize }}</span>
    {% endif %}
</h1>

<!-- Summary Stats -->
<div class="stat-grid">
    <div class="stat-card">
        <div class="stat-value">{{ job.total_units or 0 }}</div>
        <div class="stat-label">Total Units</div>
    </div>
    <div class="stat-card stat-card--success">
        <div class="stat-value">{{ job.translated_units or 0 }}</div>
        <div class="stat-label">Translated</div>
    </div>
    <div class="stat-card stat-card--warning">
        <div class="stat-value">{{ job.mocked_units or 0 }}</div>
        <div class="stat-label">Mocked</div>
    </div>
    <div class="stat-card stat-card--danger">
        <div class="stat-value">{{ job.failed_units or 0 }}</div>
        <div class="stat-label">Failed</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">
            {% if job.elapsed_seconds %}{{ "%.1f"|format(job.elapsed_seconds) }}s{% else %}—{% endif %}
        </div>
        <div class="stat-label">Duration</div>
    </div>
</div>

<!-- Job Metadata -->
<div class="card" style="margin-bottom: 1.5rem;">
    <h3>Job Details</h3>
    <table class="data-table" aria-label="Job metadata">
        <tbody>
            <tr><td><strong>Job ID</strong></td><td><code>{{ job.id }}</code></td></tr>
            <tr><td><strong>Project ID</strong></td><td>{{ job.project_id or '—' }}</td></tr>
            <tr><td><strong>Source</strong></td><td>{{ job.source_language }} — <code>{{ job.source_path or '—' }}</code></td></tr>
            <tr><td><strong>Target</strong></td><td>{{ job.target_language }} — <code>{{ job.output_path or '—' }}</code></td></tr>
            <tr><td><strong>LLM Model</strong></td><td>{{ job.llm_model or '—' }}</td></tr>
            <tr><td><strong>Tokens</strong></td><td>Input: {{ job.llm_tokens_input or 0 }} / Output: {{ job.llm_tokens_output or 0 }}</td></tr>
            <tr><td><strong>Gate Result</strong></td><td>
                {% if job.gate_result == 'pass' %}
                <span class="badge badge-success">Pass</span>
                {% elif job.gate_result == 'warn' %}
                <span class="badge badge-warning">Warn</span>
                {% elif job.gate_result == 'fail' %}
                <span class="badge badge-danger">Fail</span>
                {% else %}—{% endif %}
            </td></tr>
            <tr><td><strong>Created</strong></td><td class="friendly-timestamp">{{ job.created_at or '—' }}</td></tr>
        </tbody>
    </table>
</div>

<!-- Validation Results -->
{% if validations %}
<div class="table-container" style="margin-bottom: 1.5rem;">
    <h3>Validation Results</h3>
    <table class="data-table" aria-label="Validation checks">
        <thead>
            <tr>
                <th>Check</th>
                <th>Status</th>
                <th>Score</th>
                <th>Findings</th>
            </tr>
        </thead>
        <tbody>
            {% for v in validations %}
            <tr>
                <td><strong>{{ v.check_type|replace('_', ' ')|title }}</strong></td>
                <td>
                    {% if v.passed %}
                    <span class="badge badge-success">Pass</span>
                    {% else %}
                    <span class="badge badge-danger">Fail</span>
                    {% endif %}
                </td>
                <td>{{ "%.1f"|format((v.score or 0) * 100) }}%</td>
                <td>
                    {% if v.findings %}
                    <details>
                        <summary>{{ (v.findings|from_json|length if v.findings else 0) }} findings</summary>
                        <ul class="text-muted" style="font-size: 0.85rem;">
                            {% for f in (v.findings|from_json)[:5] %}
                            <li>{{ f }}</li>
                            {% endfor %}
                        </ul>
                    </details>
                    {% else %}—{% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Translation Units -->
{% if units %}
<div class="table-container" style="margin-bottom: 1.5rem;">
    <h3>Translation Units ({{ units|length }})</h3>
    <table class="data-table" aria-label="Translation units">
        <thead>
            <tr>
                <th>Name</th>
                <th>Kind</th>
                <th>Source File</th>
                <th>Status</th>
                <th>Complexity</th>
                <th>Repairs</th>
            </tr>
        </thead>
        <tbody>
            {% for u in units %}
            <tr>
                <td><strong>{{ u.unit_name }}</strong></td>
                <td>{{ u.unit_kind }}</td>
                <td><code>{{ u.source_file or '—' }}</code></td>
                <td>
                    {% if u.status == 'translated' %}
                    <span class="badge badge-success">Translated</span>
                    {% elif u.status == 'mocked' %}
                    <span class="badge badge-warning">Mocked</span>
                    {% elif u.status == 'failed' %}
                    <span class="badge badge-danger">Failed</span>
                    {% else %}
                    <span class="badge badge-info">{{ u.status|capitalize }}</span>
                    {% endif %}
                </td>
                <td>
                    {{ u.source_complexity or '—' }}
                    {% if u.target_complexity %} → {{ u.target_complexity }}{% endif %}
                </td>
                <td>{{ u.repair_count or 0 }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Dependency Mappings -->
{% if deps %}
<div class="table-container" style="margin-bottom: 1.5rem;">
    <h3>Dependency Mappings ({{ deps|length }})</h3>
    <table class="data-table" aria-label="Dependency mappings">
        <thead>
            <tr>
                <th>Source Import</th>
                <th>Target Import</th>
                <th>Source</th>
                <th>Confidence</th>
                <th>Domain</th>
            </tr>
        </thead>
        <tbody>
            {% for d in deps %}
            <tr>
                <td><code>{{ d.source_import }}</code></td>
                <td><code>{{ d.target_import or '—' }}</code></td>
                <td>
                    {% if d.mapping_source == 'table' %}
                    <span class="badge badge-success">Table</span>
                    {% elif d.mapping_source == 'llm_suggested' %}
                    <span class="badge badge-info">LLM</span>
                    {% elif d.mapping_source == 'unmapped' %}
                    <span class="badge badge-danger">Unmapped</span>
                    {% else %}
                    <span class="badge">{{ d.mapping_source }}</span>
                    {% endif %}
                </td>
                <td>{{ ((d.confidence or 0) * 100)|round(0)|int }}%</td>
                <td>{{ d.domain or '—' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% endblock %}