{% extends "base.html" %}

{% block content %}
<section class="hero-panel compact page-header-compact">
    <div class="hero-copy">
        <p class="eyebrow">Fuel Chart 工具化</p>
        <h1>燃料体积 / 质量快速换算</h1>
        <p class="hero-text">
            系数直接来自工作簿第二行。输入升数可换算吨位，输入吨位可反推不同燃料对应的体积。
        </p>
    </div>
</section>

<section class="content-grid fuel-layout">
    <article class="panel">
        <div class="panel-heading">
            <p class="eyebrow">换算输入</p>
            <h2>输入一个值</h2>
        </div>

        <form id="converter-form" class="converter-form">
            <label class="field-label" for="mode">换算方向</label>
            <select id="mode" name="mode">
                <option value="volume">体积 L -> 质量 t</option>
                <option value="mass">质量 t -> 体积 L</option>
            </select>

            <label class="field-label" for="value">数值</label>
            <input id="value" name="value" type="number" min="0.000001" step="any" value="75" required>

            <button class="primary-button" type="submit">执行换算</button>
            <p id="form-error" class="form-error" hidden></p>
        </form>
    </article>

    <article class="panel panel-wide">
        <div class="panel-heading">
            <p class="eyebrow">换算结果</p>
            <h2>输出列表</h2>
        </div>

        <div id="result-summary" class="result-summary">输入 75 t 或 75 L 后，这里会显示结果。</div>
        <div id="result-table" class="result-table"></div>
    </article>
</section>

<section class="panel">
    <div class="panel-heading">
        <p class="eyebrow">当前系数</p>
        <h2>每升对应吨位</h2>
    </div>
    <div class="factor-grid">
        {% for factor in fuel_factors %}
        <article class="factor-card">
            <h3>{{ factor.fuel }}</h3>
            <p>{{ factor.tonnes_per_liter }} t / L</p>
        </article>
        {% endfor %}
    </div>
</section>

<script>
const form = document.getElementById("converter-form");
const modeField = document.getElementById("mode");
const valueField = document.getElementById("value");
const resultSummary = document.getElementById("result-summary");
const resultTable = document.getElementById("result-table");
const formError = document.getElementById("form-error");
const endpoint = "{{ url_for('api.convert_fuel') }}";

async function renderResults(mode, value) {
    formError.hidden = true;
    const query = new URLSearchParams({ mode, value }).toString();
    const response = await fetch(`${endpoint}?${query}`);
    const payload = await response.json();

    if (!response.ok) {
        throw new Error(payload.error || "换算失败");
    }

    const outputUnit = payload.results[0]?.unit || "";
    resultSummary.textContent = `输入 ${payload.input_value} ${payload.input_unit}，输出单位 ${outputUnit}`;
    resultTable.innerHTML = payload.results
        .map((item) => `
            <div class="result-row">
                <span>${item.fuel}</span>
                <strong>${item.value}</strong>
                <span>${item.unit}</span>
            </div>
        `)
        .join("");
}

form.addEventListener("submit", async (event) => {
    event.preventDefault();
    try {
        await renderResults(modeField.value, valueField.value);
    } catch (error) {
        formError.hidden = false;
        formError.textContent = error.message;
    }
});

renderResults(modeField.value, valueField.value).catch((error) => {
    formError.hidden = false;
    formError.textContent = error.message;
});
</script>
{% endblock %}