<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NOCCIOLE — Carta della Nocciola</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f0; color: #333; padding: 2rem; }
        .container { max-width: 680px; margin: 0 auto; }
        h1 { color: #5a8a3c; margin-bottom: 0.2rem; }
        .subtitle { color: #888; margin-bottom: 2rem; font-size: 0.95rem; }
        .card { background: white; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
        label { display: block; font-weight: 600; margin-bottom: 0.3rem; margin-top: 1rem; font-size: 0.9rem; }
        select, input { width: 100%; padding: 0.6rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }
        input:focus, select:focus { outline: none; border-color: #5a8a3c; box-shadow: 0 0 0 2px rgba(90,138,60,0.2); }
        .row { display: flex; gap: 1rem; }
        .row > div { flex: 1; }
        button { width: 100%; padding: 0.8rem; background: #5a8a3c; color: white; border: none; border-radius: 4px; font-size: 1.1rem; cursor: pointer; margin-top: 1.5rem; transition: background 0.2s; }
        button:hover { background: #4a7a2c; }
        button:disabled { background: #aaa; cursor: not-allowed; }
        .result { margin-top: 1.5rem; padding: 1rem; border-radius: 6px; display: none; }
        .result.show { display: block; }
        .ottimale { background: #e8f5e9; border-left: 4px solid #4caf50; }
        .accettabile { background: #fff8e1; border-left: 4px solid #ff9800; }
        .non_conforme { background: #ffebee; border-left: 4px solid #f44336; }
        .indicatore { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 0.9rem; }
        .indicatore span { color: #666; }
        .soglia { font-size: 0.8rem; color: #999; margin-top: 0.3rem; }
        .semaforo { font-size: 2.5rem; text-align: center; margin-bottom: 0.8rem; }
        .esito-label { text-align: center; font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; text-transform: uppercase; }
        .messaggi { margin-top: 0.8rem; font-size: 0.9rem; }
        .messaggi li { margin-left: 1.2rem; margin-bottom: 0.3rem; }
        .db-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.7rem; font-weight: 600; margin-left: 0.5rem; }
        .db-ok { background: #e8f5e9; color: #2e7d32; }
        .db-err { background: #ffebee; color: #c62828; }
        .loading { text-align: center; padding: 1rem; color: #888; }
    </style>
</head>
<body>
<div class="container">
    <h1>🌰 NOCCIOLE <span id="dbBadge" class="db-badge db-err">DB</span></h1>
    <p class="subtitle">Microapp — Algoritmo «Carta della Nocciola» v0.2.0</p>

    <div class="card">
        <h3 style="margin-bottom:0.5rem">📐 Parametri Taratura</h3>

        <label for="tipo">Tipo Irroratrice</label>
        <select id="tipo" onchange="aggiornaSoglie()">
            <option value="atomizzatore">Atomizzatore</option>
            <option value="nebulizzatore">Nebulizzatore</option>
        </select>

        <div class="row">
            <div><label for="portata">Portata ugelli (L/min)</label><input id="portata" type="number" step="0.1" value="1.8"></div>
            <div><label for="velocita">Velocita (km/h)</label><input id="velocita" type="number" step="0.1" value="5.2"></div>
        </div>
        <div class="row">
            <div><label for="larghezza">Larghezza fila (m)</label><input id="larghezza" type="number" step="0.1" value="4.5"></div>
            <div><label for="pressione">Pressione (bar)</label><input id="pressione" type="number" step="0.1" value="8.0"></div>
        </div>
        <div class="row">
            <div><label for="diametro">Diam. gocce (&micro;m)</label><input id="diametro" type="number" step="1" value="150"></div>
            <div><label for="altezza">Altezza chioma (m)</label><input id="altezza" type="number" step="0.1" value="3.8"></div>
        </div>
        <div class="row">
            <div><label for="vento">Velocita vento (km/h)</label><input id="vento" type="number" step="0.1" value="3.0"></div>
            <div></div>
        </div>

        <div id="soglieInfo" class="soglia"></div>

        <button id="btnCalcola" onclick="calcola()">🔍 Calcola Taratura</button>
        <div id="result" class="result"></div>
    </div>
</div>

<script>
let soglieData = {};

async function init() {
    try {
        const h = await fetch('/api/health');
        const health = await h.json();
        const badge = document.getElementById('dbBadge');
        if (health.database === 'connected') {
            badge.className = 'db-badge db-ok';
        }
    } catch(e) {}

    try {
        const r = await fetch('/api/taratura/soglie');
        soglieData = await r.json();
        aggiornaSoglie();
    } catch(e) {}
}

function aggiornaSoglie() {
    const tipo = document.getElementById('tipo').value;
    const s = soglieData[tipo];
    if (!s) return;
    let html = 'Soglie: ';
    for (const [k, v] of Object.entries(s)) {
        html += k + ': ' + v.min + '–' + v.max + ' ' + v.unita + '  ';
    }
    document.getElementById('soglieInfo').textContent = html;
}

async function calcola() {
    const btn = document.getElementById('btnCalcola');
    const resultDiv = document.getElementById('result');
    btn.disabled = true;
    btn.textContent = 'Calcolo in corso...';
    resultDiv.className = 'result loading show';
    resultDiv.innerHTML = 'Elaborazione algoritmo...';

    const payload = {
        tipo_irroratrice: document.getElementById('tipo').value,
        parametri: {
            portata_ugelli: parseFloat(document.getElementById('portata').value),
            velocita_avanzamento: parseFloat(document.getElementById('velocita').value),
            larghezza_fila: parseFloat(document.getElementById('larghezza').value),
            pressione: parseFloat(document.getElementById('pressione').value),
            diametro_gocce: parseInt(document.getElementById('diametro').value),
            altezza_chioma: parseFloat(document.getElementById('altezza').value),
            velocita_vento: parseFloat(document.getElementById('vento').value),
        }
    };

    try {
        const resp = await fetch('/api/taratura/calcola', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const data = await resp.json();

        resultDiv.className = 'result show ' + data.esito;

        let html = '<div class="semaforo">' + data.semaforo + '</div>';
        html += '<div class="esito-label">' + data.esito + '</div>';

        if (data.indicatori) {
            html += '<h4 style="margin-top:1rem;margin-bottom:0.5rem">Indicatori</h4>';
            const labels = {
                volume_ha_base: 'Volume base', volume_ha_corretto: 'Volume corretto',
                portata_totale: 'Portata totale', velocita: 'Velocita',
                larghezza_fila: 'Larghezza fila', pressione: 'Pressione',
                diametro_gocce: 'Diam. gocce', coeff_deriva: 'Coeff. deriva',
                coeff_copertura: 'Coeff. copertura',
            };
            const units = {
                volume_ha_base: ' L/ha', volume_ha_corretto: ' L/ha',
                portata_totale: ' L/min', velocita: ' km/h',
                larghezza_fila: ' m', pressione: ' bar', diametro_gocce: ' um',
            };
            for (const [k, v] of Object.entries(data.indicatori)) {
                const label = labels[k] || k;
                const unit = units[k] || '';
                html += '<div class="indicatore"><span>' + label + '</span><strong>' + v + unit + '</strong></div>';
            }
        }

        if (data.messaggi && data.messaggi.length) {
            html += '<ul class="messaggi" style="margin-top:1rem">';
            data.messaggi.forEach(function(m) { html += '<li>' + m + '</li>'; });
            html += '</ul>';
        }

        resultDiv.innerHTML = html;
    } catch (e) {
        resultDiv.className = 'result show non_conforme';
        resultDiv.innerHTML = '<p style="color:#c62828">Errore: ' + e.message + '</p>';
    } finally {
        btn.disabled = false;
        btn.textContent = '🔍 Calcola Taratura';
    }
}

init();
</script>
</body>
</html>
