{% extends "base.html" %}
{% block title %}Job {{ job.id[:12] }} — Fine-Tuning — ICDEV™ Dashboard{% endblock %}
{% block content %}

<div class="container">
    <nav aria-label="breadcrumb">
        <span><a href="/">Home</a></span> &gt; <span><a href="/finetune">Fine-Tuning</a></span> &gt; <span><a href="/finetune/jobs">Jobs</a></span> &gt; <span>{{ job.id[:12] }}...</span>
    </nav>

    <h1>Training Job <code>{{ job.id[:16] }}</code></h1>

    <!-- Status badge -->
    <div style="margin:1rem 0;">
        {% if job.status == 'completed' %}
        <span style="display:inline-block;padding:0.4rem 1rem;background:#e8f5e9;color:#2e7d32;border-radius:4px;font-weight:bold;">COMPLETED</span>
        {% elif job.status in ['training', 'preparing', 'exporting', 'evaluating'] %}
        <span style="display:inline-block;padding:0.4rem 1rem;background:#fff3e0;color:#e65100;border-radius:4px;font-weight:bold;">{{ job.status|upper }}</span>
        {% elif job.status == 'failed' %}
        <span style="display:inline-block;padding:0.4rem 1rem;background:#ffebee;color:#c62828;border-radius:4px;font-weight:bold;">FAILED</span>
        {% else %}
        <span style="display:inline-block;padding:0.4rem 1rem;background:#eceff1;color:#455a64;border-radius:4px;font-weight:bold;">{{ job.status|upper }}</span>
        {% endif %}
    </div>

    <!-- Info Grid -->
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0;">
        <div><strong>Provider:</strong> {{ job.provider }}</div>
        <div><strong>Base Model:</strong> {{ job.base_model }}</div>
        <div><strong>Dataset:</strong> {{ job.dataset_id[:16] }}</div>
        <div><strong>LoRA Rank:</strong> {{ job.lora_rank }}</div>
        <div><strong>Learning Rate:</strong> {{ job.learning_rate }}</div>
        <div><strong>Epochs:</strong> {{ job.epochs }}</div>
        <div><strong>Batch Size:</strong> {{ job.batch_size }}</div>
        <div><strong>Max Seq Length:</strong> {{ job.max_seq_length }}</div>
        <div><strong>GPU Count:</strong> {{ job.gpu_count }}</div>
        <div><strong>Total Steps:</strong> {{ job.total_steps|default(0) }}</div>
        <div><strong>Duration:</strong> {{ job.training_duration_seconds|default(0) }}s</div>
        <div><strong>Classification:</strong> {{ job.classification }}</div>
    </div>

    {% if job.error_message %}
    <div style="margin:1rem 0;padding:0.75rem 1rem;background:#ffebee;border:1px solid #ef9a9a;border-radius:4px;color:#c62828;">
        <strong>Error:</strong> {{ job.error_message }}
    </div>
    {% endif %}

    {% if job.ollama_model_name %}
    <div style="margin:1rem 0;padding:0.75rem 1rem;background:#e8f5e9;border:1px solid #a5d6a7;border-radius:4px;">
        <strong>Ollama Model:</strong> <code>{{ job.ollama_model_name }}</code>
    </div>
    {% endif %}

    <!-- Loss Curve SVG -->
    {% if loss_history and loss_history|length > 1 %}
    <h2>Training Loss Curve</h2>
    <div style="margin:1rem 0;">
        <svg id="loss-chart" viewBox="0 0 600 200" style="width:100%;max-width:600px;border:1px solid #ddd;border-radius:4px;background:#fafafa;">
        </svg>
    </div>
    {% endif %}

    <!-- Events -->
    <h2>Job Events</h2>
    <div class="table-container">
        <table id="tbl-events">
            <thead>
                <tr>
                    <th>Event</th>
                    <th>Details</th>
                    <th>Time</th>
                </tr>
            </thead>
            <tbody>
                {% for ev in events %}
                <tr>
                    <td><strong>{{ ev.event_type }}</strong></td>
                    <td style="max-width:400px;overflow:hidden;text-overflow:ellipsis;">{{ ev.details|default('{}') }}</td>
                    <td>{{ ev.created_at }}</td>
                </tr>
                {% endfor %}
                {% if not events %}
                <tr><td colspan="3" style="text-align:center;color:#999;">No events recorded.</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

{% if loss_history and loss_history|length > 1 %}
<script>
(function() {
    const data = {{ loss_history|tojson }};
    if (!data || data.length < 2) return;

    const svg = document.getElementById('loss-chart');
    const W = 600, H = 200, PAD = 40;
    const minY = Math.min(...data), maxY = Math.max(...data);
    const rangeY = maxY - minY || 1;

    // Axes
    let axes = '<line x1="' + PAD + '" y1="' + (H - PAD) + '" x2="' + (W - 10) + '" y2="' + (H - PAD) + '" stroke="#ccc"/>';
    axes += '<line x1="' + PAD + '" y1="10" x2="' + PAD + '" y2="' + (H - PAD) + '" stroke="#ccc"/>';
    axes += '<text x="' + (W / 2) + '" y="' + (H - 5) + '" text-anchor="middle" font-size="11" fill="#666">Step</text>';
    axes += '<text x="12" y="' + (H / 2) + '" text-anchor="middle" font-size="11" fill="#666" transform="rotate(-90,12,' + (H / 2) + ')">Loss</text>';

    // Data path
    const pts = data.map((v, i) => {
        const x = PAD + (i / (data.length - 1)) * (W - PAD - 10);
        const y = (H - PAD) - ((v - minY) / rangeY) * (H - PAD - 20);
        return x + ',' + y;
    });
    const path = '<polyline points="' + pts.join(' ') + '" fill="none" stroke="#1976d2" stroke-width="2"/>';

    // Labels
    let labels = '<text x="' + PAD + '" y="' + (H - PAD + 15) + '" font-size="10" fill="#999">0</text>';
    labels += '<text x="' + (W - 15) + '" y="' + (H - PAD + 15) + '" font-size="10" fill="#999">' + data.length + '</text>';
    labels += '<text x="' + (PAD - 5) + '" y="' + (H - PAD - 2) + '" text-anchor="end" font-size="10" fill="#999">' + minY.toFixed(3) + '</text>';
    labels += '<text x="' + (PAD - 5) + '" y="22" text-anchor="end" font-size="10" fill="#999">' + maxY.toFixed(3) + '</text>';

    svg.innerHTML = axes + path + labels;
})();
</script>
{% endif %}

{% endblock %}