{% extends "base.html" %}
{% from "components.html" import data_table %}

{% block title %}DTC Codes - Yaris OBD{% endblock %}

{% block content %}
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <h3 class="text-dark fw-bold mb-0">DTC Codes</h3>
    <div class="d-flex align-items-center gap-3">
        <div id="mil-indicator" class="d-flex align-items-center gap-2 px-3 py-1 rounded-pill border small fw-semibold" style="display:none!important">
            <i class="fas fa-exclamation-circle"></i>
            <span>Check Engine</span>
        </div>
        <button id="dtc-refresh-btn" class="btn btn-sm btn-secondary">
            <i class="fas fa-sync-alt me-1"></i>Refresh
        </button>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-header d-flex align-items-center justify-content-between">
        <p class="text-primary m-0 fw-bold">Stored trouble codes</p>
        <span id="dtc-updated" class="small text-muted"></span>
    </div>
    <div class="card-body p-0">
        {{ data_table(
            "dtc-list",
            [
                {"key": "code", "label": "Code", "sortable": true},
                {"key": "description", "label": "Description", "sortable": true}
            ],
            "No trouble codes",
            "No diagnostic trouble codes are currently stored. Great news!"
        ) }}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    const milEl = document.getElementById('mil-indicator');
    const updatedEl = document.getElementById('dtc-updated');
    const refreshBtn = document.getElementById('dtc-refresh-btn');
    const body = document.querySelector('#dtc-list [data-data-list-body]');

    async function loadDtc() {
        refreshBtn.disabled = true;
        try {
            const r = await fetch('/api/dtc');
            const d = await r.json();

            // MIL indicator
            const milOn = d.mil === true;
            milEl.style.removeProperty('display');
            milEl.classList.toggle('text-danger', milOn);
            milEl.classList.toggle('border-danger', milOn);
            milEl.classList.toggle('text-muted', !milOn);
            milEl.classList.toggle('border-secondary', !milOn);
            milEl.querySelector('span').textContent = milOn ? 'Check Engine ON' : 'Check Engine OFF';

            // Table rows
            body.innerHTML = '';
            const codes = d.codes || [];
            codes.forEach(function (c) {
                const code = c.code ?? (Array.isArray(c) ? c[0] : c);
                const desc = c.description ?? (Array.isArray(c) ? c[1] : '—');
                const row = document.createElement('tr');
                row.dataset.code = code;
                row.dataset.description = desc;
                row.innerHTML = `
                    <td><span class="badge bg-danger-subtle text-danger-emphasis fw-bold font-monospace">${code}</span></td>
                    <td>${desc}</td>`;
                body.appendChild(row);
            });

            updatedEl.textContent = 'Updated ' + new Date().toLocaleTimeString();
        } catch (e) {
            updatedEl.textContent = 'Failed to load';
        } finally {
            refreshBtn.disabled = false;
        }
    }

    refreshBtn.addEventListener('click', loadDtc);
    loadDtc();
})();
</script>
{% endblock %}