{% extends "op_zz_frame.html" %}
{% block centercontent %}


  <style>
:root{--bg:#006B52;--panel:#FFFFFF;--border:#D5D5D5;--text:#0b110f;--muted:#3a4a46;--accent:#008143}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
.header{display:flex;align-items:center;gap:10px;padding:14px 20px;background:linear-gradient(180deg,#006B52,#008143);color:#fff;border-bottom:1px solid rgba(255,255,255,.2)}
.header .brand{font-weight:800}
.container{max-width:1100px;margin:0 auto;padding:20px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:14px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0}
label{font-size:14px;color:var(--muted)}
input[type='text'],input[type='datetime-local'],input[type='number'],select,textarea{padding:8px;border:1px solid var(--border);border-radius:8px}
textarea{min-width:320px;min-height:60px}
.btn{display:inline-block;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#f5f8f7;color:#0f2b23;font-size:14px;text-decoration:none;cursor:pointer}
.btn:hover{border-color:#b8d2c5}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.bad{background:#fff1e8;border:1px solid #f3c7a6}
.warn{background:#fff9e6;border:1px solid #f5e6a2}
.good{background:#e8f5e5;border:1px solid #cfead0}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi .box{background:#f5f8f7;border:1px solid var(--border);border-radius:10px;padding:10px}
.kpi .box .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.kpi .box .val{font-size:20px;font-weight:800;margin-top:4px}
.small{font-size:12px;color:var(--muted)}
</style>

  <div class="header">
    <div class="brand">DEKRA – Manual SoH entry</div>
    <div style="margin-left:auto">
      <a class="btn" href="bhi_dashboard.html">Dashboard</a>
      <a class="btn" href="manual_odometer_entry.html">Manual odometer entry</a>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <h3 style="margin:0 0 8px 0">API configuration</h3>
      <div class="row">
        <label>Base URL <input id="apiBase" type="text" placeholder="https://api.example.com" style="width:260px"/></label>
        <label>Endpoint <input id="apiEndpoint" type="text" value="/refs/manual-soh" style="width:180px"/></label>
        <label>Auth header <input id="apiAuthName" type="text" value="Authorization" style="width:160px"/></label>
        <label>Token <input id="apiAuthVal" type="text" placeholder="Bearer XYZ…" style="width:240px"/></label>
        <label><input id="dryRun" type="checkbox" checked/> Dry‑run (no POST)</label>
      </div>
    </div>

    <div class="card">
      <h3 style="margin:0 0 8px 0">Add measurement</h3>
      <div class="row">
        <label>Vehicle
          <select id="vehSel"></select>
        </label>
        <label>Measured at
          <input id="measuredAt" type="datetime-local"/>
        </label>
        <label>SoH %
          <input id="soh" type="number" step="0.1" min="60" max="100" value="90"/>
        </label>
        <label>Method
          <select id="method">
            <option>DEKRA-lab-v1</option>
            <option>Workshop-quick</option>
            <option>OBD-diagnostic</option>
            <option>Other</option>
          </select>
        </label>
      </div>
      <div class="row">
        <label>Ambient °C
          <input id="ambient" type="number" step="0.1" style="width:120px"/>
        </label>
        <label>Odometer km (optional)
          <input id="odo" type="number" step="1" style="width:140px" placeholder="e.g. 145320"/>
        </label>
        <label>Notes
          <input id="notes" type="text" style="width:320px" placeholder="after service…"/>
        </label>
        <button class="btn" id="addBtn">Add to batch</button>
      </div>
      <div class="small">Δ vs last reference is shown for context; SoH must be 60–100 %.</div>
    </div>

    <div class="card">
      <div class="kpi">
        <div class="box"><div class="lbl">Rows</div><div class="val" id="kRows">0</div></div>
        <div class="box"><div class="lbl">Average SoH</div><div class="val" id="kAvg">–</div></div>
        <div class="box"><div class="lbl">Outliers</div><div class="val" id="kOut">0</div></div>
      </div>
      <table class="table" id="tbl">
        <thead>
          <tr><th>Vehicle</th><th>Measured at</th><th>SoH %</th><th>Δ vs last ref</th><th>Method</th><th>Ambient</th><th>Odometer</th><th>Notes</th><th></th></tr>
        </thead>
        <tbody></tbody>
      </table>
      <div class="row">
        <button class="btn" id="exportCSV">Export CSV</button>
        <button class="btn" id="exportJSON">Export JSON</button>
        <label>Import CSV <input id="importCSV" type="file" accept=".csv"/></label>
        <button class="btn" id="submit">Submit</button>
      </div>
    </div>
  </div>

  <script>
  {% raw %}
  const vehicles = [{"id": "DEK-001", "alias": "Vehicle 1", "cap_nom": 62.0, "odometer_km": 48526, "consumption_kwh_per_100km": 24.7, "last_ref_soh": 94.4, "last_ref_type": "OEM"}, {"id": "DEK-002", "alias": "Vehicle 2", "cap_nom": 72.0, "odometer_km": 100239, "consumption_kwh_per_100km": 19.8, "last_ref_soh": 94.2, "last_ref_type": "OEM"}, {"id": "DEK-003", "alias": "Vehicle 3", "cap_nom": 62.0, "odometer_km": 186116, "consumption_kwh_per_100km": 15.7, "last_ref_soh": 93.7, "last_ref_type": "Manual"}, {"id": "DEK-004", "alias": "Vehicle 4", "cap_nom": 62.0, "odometer_km": 205668, "consumption_kwh_per_100km": 23.5, "last_ref_soh": 87.5, "last_ref_type": "Manual"}, {"id": "DEK-005", "alias": "Vehicle 5", "cap_nom": 55.0, "odometer_km": 166421, "consumption_kwh_per_100km": 18.5, "last_ref_soh": 83.3, "last_ref_type": "OEM"}];

  const vehSel = document.getElementById('vehSel');
  const measuredAt = document.getElementById('measuredAt');
  const soh = document.getElementById('soh');
  const method = document.getElementById('method');
  const ambient = document.getElementById('ambient');
  const notes = document.getElementById('notes');
  const odo = document.getElementById('odo');
  const tblBody = document.querySelector('#tbl tbody');
  const kRows = document.getElementById('kRows');
  const kAvg = document.getElementById('kAvg');
  const kOut = document.getElementById('kOut');

  function fmt(val, d=1){{ return Number(val).toFixed(d); }}
  function nowLocalISO(){{ const d = new Date(); d.setMinutes(d.getMinutes() - d.getTimezoneOffset()); return d.toISOString().slice(0,16); }}

  // Fill vehicles
  vehicles.forEach(v=>{{ const o=document.createElement('option'); o.value=v.id; o.textContent=v.id+' – '+v.alias; vehSel.appendChild(o); }});
  // Preselect via ?vid=
  const params = new URLSearchParams(window.location.search);
  const qvid = params.get('vid');
  if(qvid && vehicles.some(v=>v.id===qvid)) vehSel.value = qvid;
  measuredAt.value = nowLocalISO();

  const batch = [];
  function lastRefSoH(id){{ const v=vehicles.find(x=>x.id===id); return v? v.last_ref_soh : null; }}

  function render(){{
    tblBody.innerHTML='';
    let sum=0, out=0;
    batch.forEach((r,idx)=>{{
      sum += r.soh_pct;
      const tr=document.createElement('tr');
      const lref=lastRefSoH(r.vehicle_id);
      const delta = lref!=null ? (r.soh_pct - lref) : null;
      const tdDelta = delta!=null ? (delta>0? '+'+fmt(delta): fmt(delta))+' pp' : 'n/a';
      const isOut = (r.soh_pct<60 || r.soh_pct>100) || (delta!=null && Math.abs(delta)>5);
      if(isOut){{ tr.classList.add('warn'); out++; }}
      tr.innerHTML = '<td>'+r.vehicle_id+'</td>' +
        '<td>'+r.measured_at+'</td>' +
        '<td>'+fmt(r.soh_pct)+'</td>' +
        '<td>'+tdDelta+'</td>' +
        '<td>'+(r.method||'')+'</td>' +
        '<td>'+(r.ambient_c??'')+'</td>' +
        '<td>'+(r.odometer_km??'')+'</td>' +
        '<td>'+(r.notes||'')+'</td>' +
        '<td><button class="btn" data-idx="'+idx+'">Delete</button></td>';
      tr.querySelector('button').onclick = ()=>{{ batch.splice(idx,1); render(); }};
      tblBody.appendChild(tr);
    }});
    kRows.textContent = batch.length;
    kAvg.textContent = batch.length? fmt(sum/batch.length): '–';
    kOut.textContent = out;
  }}

  document.getElementById('addBtn').onclick = ()=>{{
    const r = {{
      vehicle_id: vehSel.value,
      measured_at: measuredAt.value ? new Date(measuredAt.value).toISOString() : new Date().toISOString(),
      soh_pct: Number(soh.value),
      method: method.value,
      ambient_c: ambient.value? Number(ambient.value): null,
      odometer_km: odo.value? Number(odo.value): null,
      notes: notes.value||''
    }};
    batch.push(r);
    render();
  }};

  function toCSV(rows){{
    const cols = ["vehicle_id","measured_at","soh_pct","method","ambient_c","odometer_km","notes"];
    const esc = v => (v==null? "": (''+v).replace(/"/g,'""'));
    return [cols.join(','), ...rows.map(r=>cols.map(c=>'"'+esc(r[c])+'"' ).join(','))].join('\n');
  }}

  document.getElementById('exportCSV').onclick = ()=>{{
    const blob=new Blob([toCSV(batch)],{{type:'text/csv'}});
    const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='manual_soh.csv'; a.click();
  }};
  document.getElementById('exportJSON').onclick = ()=>{{
    const blob=new Blob([JSON.stringify(batch,null,2)],{{type:'application/json'}});
    const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='manual_soh.json'; a.click();
  }};

  document.getElementById('importCSV').onchange = (e)=>{{
    const file=e.target.files[0]; if(!file) return;
    const reader=new FileReader();
    reader.onload = ()=>{{
      const txt=reader.result;
      const lines=txt.split(/\r?\n/).filter(x=>x.trim().length>0);
      const hdr=lines[0].split(',').map(s=>s.trim());
      const idx = {{}};
      ["vehicle_id","measured_at","soh_pct","method","ambient_c","odometer_km","notes"].forEach(k=>idx[k]=hdr.indexOf(k));
      for(let i=1;i<lines.length;i++){{ const parts=lines[i].split(','); if(parts.length<3) continue;
        const r = {{
          vehicle_id: parts[idx.vehicle_id],
          measured_at: parts[idx.measured_at],
          soh_pct: Number(parts[idx.soh_pct]),
          method: idx.method>=0? parts[idx.method]:"",
          ambient_c: idx.ambient_c>=0? Number(parts[idx.ambient_c]): null,
          odometer_km: idx.odometer_km>=0? Number(parts[idx.odometer_km]): null,
          notes: idx.notes>=0? parts[idx.notes]:""
        }};
        batch.push(r);
      }}
      render();
    }};
    reader.readAsText(file);
    e.target.value = "";
  }};

  document.getElementById('submit').onclick = async ()=>{{
    const base = document.getElementById('apiBase').value||'';
    const ep = document.getElementById('apiEndpoint').value||'/refs/manual-soh';
    const hdr = document.getElementById('apiAuthName').value||'Authorization';
    const tok = document.getElementById('apiAuthVal').value||'';
    const dry = document.getElementById('dryRun').checked;
    if(!base){{ alert('Please set Base URL'); return; }}
    for(const r of batch){{
      const payload = {{"vehicle_id":r.vehicle_id,"measured_at":r.measured_at,"soh_pct":r.soh_pct,"method":r.method,"ambient_c":r.ambient_c,"odometer_km":r.odometer_km,"notes":r.notes}};
      if(dry){{ console.log('DRY POST', base+ep, payload); continue; }}
      try{{
        const res = await fetch(base+ep,{{method:'POST',headers:{{'Content-Type':'application/json',[hdr]:tok}},body:JSON.stringify(payload)}});
        if(!res.ok) throw new Error(await res.text());
      }}catch(err){{ console.error('POST failed', err); alert('Error posting one record: '+err); return; }}
    }}
    alert('Done.');
  }};
  {% endraw %}
  </script>


<h1>Manual SoC Entry</h1>
<form method="post">
  <label>Station ID:<input type="text" name="station_id"></label>
  <label>State of Charge (%):<input type="number" name="soc" min="0" max="100"></label>
  <button type="submit" class="pipelet-btn">Save</button>
</form>
<table border="1" cellspacing="0" cellpadding="5">
  <tr><th>Station</th><th>SoC</th><th>Timestamp</th></tr>
  {% for e in entries %}
  <tr>
    <td>{{ e.station_id }}</td>
    <td>{{ e.value }}</td>
    <td>{{ e.created_at }}</td>
  </tr>
  {% endfor %}
</table>
{% endblock %}