{% extends "base.html" %}

{% block title %}Sägeplan-Optimierung{% endblock %}
{% block heading %}🪚 Sägeplan-Optimierung{% endblock %}

{% block topbar_actions %}
  <button class="btn btn-secondary" onclick="loadExample()">Beispiel laden</button>
  <button class="btn btn-primary" onclick="compute()">Plan berechnen</button>
  <button class="btn btn-secondary" onclick="downloadPdf()" id="pdf-btn" style="display: none;">📄 Sägeschein (PDF)</button>
{% endblock %}

{% block content %}
<div class="card">
  <h3 style="margin-top: 0;">Eingabe</h3>
  <div class="form-grid">
    <label>Stangenlänge (mm)
      <input type="number" id="bar-length" value="6000" step="100">
    </label>
    <label>Sägeschnitt-Breite / Kerf (mm)
      <input type="number" id="kerf" value="2" step="1">
    </label>
  </div>

  <h4 style="margin-top: 6mm;">Schnitt-Liste</h4>
  <table id="cuts-table" class="data-table">
    <thead>
      <tr>
        <th style="width: 40%;">Länge (mm)</th>
        <th style="width: 40%;">Stückzahl</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="cuts-tbody">
      <tr>
        <td><input type="number" class="cut-len" value="150" min="1"></td>
        <td><input type="number" class="cut-qty" value="25" min="1"></td>
        <td><button class="btn btn-sm" onclick="removeRow(this)">−</button></td>
      </tr>
    </tbody>
  </table>
  <button class="btn btn-sm btn-secondary" onclick="addRow()">+ Schnitt hinzufügen</button>
</div>

<div id="result" class="card" style="display: none; margin-top: 4mm;">
  <h3 style="margin-top: 0;">Ergebnis</h3>
  <div id="result-summary"></div>
  <div id="result-bars" style="margin-top: 4mm;"></div>
  <pre id="result-text" style="background: #0d1117; color: #e5e7eb; padding: 4mm; border-radius: 4px; overflow-x: auto; font-size: 11px; margin-top: 4mm;"></pre>
</div>

<script>
function addRow() {
  const tbody = document.getElementById('cuts-tbody');
  const row = document.createElement('tr');
  row.innerHTML = `
    <td><input type="number" class="cut-len" value="100" min="1"></td>
    <td><input type="number" class="cut-qty" value="10" min="1"></td>
    <td><button class="btn btn-sm" onclick="removeRow(this)">−</button></td>
  `;
  tbody.appendChild(row);
}

function removeRow(btn) {
  const tbody = document.getElementById('cuts-tbody');
  if (tbody.children.length > 1) btn.closest('tr').remove();
}

async function compute() {
  const bar_length = parseInt(document.getElementById('bar-length').value);
  const kerf = parseInt(document.getElementById('kerf').value);
  const requirements = Array.from(document.querySelectorAll('#cuts-tbody tr')).map(row => ({
    length: parseInt(row.querySelector('.cut-len').value),
    quantity: parseInt(row.querySelector('.cut-qty').value),
  })).filter(r => r.length > 0 && r.quantity > 0);

  if (requirements.length === 0) {
    alert('Bitte mindestens einen Schnitt eingeben');
    return;
  }

  const r = await fetch('/api/saw-optimizer/optimize', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ bar_length, kerf, requirements }),
  });
  const data = await r.json();
  if (!data.ok) { alert('Fehler: ' + data.error); return; }
  renderResult(data.plan, data.text);
}

async function loadExample() {
  const r = await fetch('/api/saw-optimizer/example');
  const data = await r.json();
  if (!data.ok) return;
  // Eingabe-Form mit Beispiel-Werten füllen
  document.getElementById('bar-length').value = data.plan.bar_length;
  document.getElementById('kerf').value = data.plan.kerf;
  // Aus dem Plan die Cut-Liste rückwärts ableiten
  const cutMap = new Map();
  for (const bar of data.plan.bars) {
    for (const c of bar.cuts) {
      cutMap.set(c.length, (cutMap.get(c.length) || 0) + 1);
    }
  }
  const tbody = document.getElementById('cuts-tbody');
  tbody.innerHTML = '';
  for (const [len, qty] of cutMap) {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td><input type="number" class="cut-len" value="${len}" min="1"></td>
      <td><input type="number" class="cut-qty" value="${qty}" min="1"></td>
      <td><button class="btn btn-sm" onclick="removeRow(this)">−</button></td>
    `;
    tbody.appendChild(row);
  }
  renderResult(data.plan, data.text);
}

async function downloadPdf() {
  const bar_length = parseInt(document.getElementById('bar-length').value);
  const kerf = parseInt(document.getElementById('kerf').value);
  const requirements = Array.from(document.querySelectorAll('#cuts-tbody tr')).map(row => ({
    length: parseInt(row.querySelector('.cut-len').value),
    quantity: parseInt(row.querySelector('.cut-qty').value),
  })).filter(r => r.length > 0 && r.quantity > 0);
  const r = await fetch('/api/saw-optimizer/pdf', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ bar_length, kerf, requirements }),
  });
  if (!r.ok) { alert('PDF-Erzeugung fehlgeschlagen'); return; }
  const blob = await r.blob();
  const url = URL.createObjectURL(blob);
  window.open(url, '_blank');
}

function renderResult(plan, text) {
  const div = document.getElementById('result');
  div.style.display = 'block';
  document.getElementById('pdf-btn').style.display = 'inline-block';

  document.getElementById('result-summary').innerHTML = `
    <p>
      <strong>${plan.bars_needed}</strong> Stangen à ${plan.bar_length} mm benötigt für
      <strong>${plan.total_pieces}</strong> Schnitte.<br>
      Verschnitt total: <strong>${plan.total_waste} mm</strong>
      (Auslastung Ø <strong>${plan.utilization_pct}%</strong>).
    </p>
  `;

  // Visuelle Bar-Darstellung
  const barsDiv = document.getElementById('result-bars');
  barsDiv.innerHTML = '<h4>Schnittpläne pro Stange</h4>';
  plan.bars.forEach((bar, idx) => {
    let html = `<div style="margin-bottom: 8px;">
      <div style="font-size: 11px; color: #6b7280;">Stange ${idx + 1} — Auslastung ${bar.utilization_pct}%</div>
      <div style="display: flex; height: 24px; border: 1px solid #d1d5db; border-radius: 3px; overflow: hidden;">`;
    bar.cuts.forEach((c, i) => {
      const pct = (c.length / plan.bar_length) * 100;
      const colors = ['#356692', '#E85D2F', '#10b981', '#a855f7', '#f59e0b', '#0891b2'];
      html += `<div style="width: ${pct}%; background: ${colors[i % colors.length]}; color: white; font-size: 10px; padding: 2px 4px; overflow: hidden; white-space: nowrap;" title="${c.length} mm">${c.length}</div>`;
    });
    const wastePct = (bar.waste_mm / plan.bar_length) * 100;
    html += `<div style="width: ${wastePct}%; background: #e5e7eb; color: #6b7280; font-size: 10px; padding: 2px 4px;" title="Rest ${bar.waste_mm} mm">${bar.waste_mm}</div>`;
    html += '</div></div>';
    barsDiv.innerHTML += html;
  });

  document.getElementById('result-text').textContent = text;
}
</script>
{% endblock %}