{% extends "base.html" %}

{% block title %}Simulation — {{ program.name or program.program_no }}{% endblock %}
{% block heading %}🪛 CNC-Simulation: {{ program.name or program.program_no }}{% endblock %}

{% block topbar_actions %}
  <a class="btn btn-secondary" href="/programs/{{ program.id }}">← Zurück zum Editor</a>
  <button class="btn btn-primary" onclick="playSim()">▶ Play</button>
  <button class="btn btn-secondary" onclick="stepSim()">⏭ Step</button>
  <button class="btn btn-secondary" onclick="resetSim()">⏮ Reset</button>
{% endblock %}

{% block content %}
<style>
  .sim-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; }
  @media (max-width: 1000px) { .sim-grid { grid-template-columns: 1fr; } }

  .sim-code {
    background: #0d1117;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.8rem;
    overflow-y: auto;
    max-height: 70vh;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #e5e7eb;
  }
  .sim-code .line {
    display: flex;
    padding: 1px 4px;
    border-left: 3px solid transparent;
    transition: background 100ms;
  }
  .sim-code .line.active {
    background: rgba(232,93,47,0.18);
    border-left-color: #E85D2F;
  }
  .sim-code .line-no { color: #6b7280; margin-right: 1em; min-width: 3em; }
  .sim-code .cycle-tag {
    display: inline-block;
    padding: 1px 5px;
    margin-left: 0.5em;
    font-size: 10px;
    border-radius: 3px;
    color: white;
    font-weight: 600;
  }

  .sim-canvas-wrap {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 1rem;
    position: relative;
  }
  .sim-canvas-wrap canvas {
    width: 100%;
    height: auto;
    display: block;
  }
  .sim-status {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: #cbd5e1;
  }
  .sim-status .pill {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 0.5em;
    border-radius: 10px;
    color: white;
    font-size: 11px;
    font-weight: 600;
  }

  .sim-legend {
    margin-top: 0.5rem;
    display: flex;
    gap: 1rem;
    font-size: 11px;
    color: #94a3b8;
  }
  .sim-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .sim-legend .swatch {
    width: 12px; height: 12px; border-radius: 2px;
    display: inline-block;
  }
</style>

<div class="sim-grid">
  <!-- Linke Spalte: G-Code mit Cycle-Highlights -->
  <div>
    <h3 style="margin-top: 0;">G-Code</h3>
    <div class="sim-code" id="code-pane">
      {% for ln in sim.lines %}
        <div class="line" data-line="{{ ln.no }}">
          <span class="line-no">{{ "%03d" % ln.no }}</span>
          <span class="code-text">{{ ln.text or ' ' }}</span>
          {% if ln.cycle %}
            <span class="cycle-tag" style="background: {{ ln.color }};">{{ ln.cycle }}</span>
          {% endif %}
        </div>
      {% endfor %}
    </div>
    <div class="sim-legend">
      {% for c in sim.cycles %}
        <span><span class="swatch" style="background: {{ c.color }};"></span>{{ c.name }} — {{ c.label }}</span>
      {% endfor %}
    </div>
  </div>

  <!-- Rechte Spalte: Canvas-Simulation -->
  <div>
    <h3 style="margin-top: 0;">Werkstück-Simulation (Side-View)</h3>
    <div class="sim-canvas-wrap">
      <canvas id="sim-canvas" width="800" height="400"></canvas>
    </div>
    <div class="sim-status" id="sim-status">
      Bereit. Klick „▶ Play" für die Animation.
    </div>
    <div class="sim-legend">
      <span>Stats: {{ sim.stats.total_lines }} Zeilen · {{ sim.stats.total_moves }} Bewegungen ({{ sim.stats.cut_count }} Cuts + {{ sim.stats.rapid_count }} Eilgang) · {{ sim.stats.total_cycles }} Cycle(s)</span>
    </div>
  </div>
</div>

<script>
const SIM = {{ sim | tojson }};
const canvas = document.getElementById('sim-canvas');
const ctx = canvas.getContext('2d');

// Welt-Koordinaten → Canvas-Pixel
// Werkstück liegt waagrecht: Z auf X-Achse, X (Radius) auf Y-Achse (gespiegelt — symmetrisch)
const W = canvas.width, H = canvas.height;
const PADDING = 30;
const blank = SIM.blank;

// Z-Range: 0 bis (Länge + etwas Toolweg)
const Z_MIN = -10, Z_MAX = blank.length + 10;
const X_MAX = blank.d_outer / 2 + 15;  // Radius + Tool-Margin

function worldToPx(z, x) {
  const px = PADDING + (z - Z_MIN) / (Z_MAX - Z_MIN) * (W - 2*PADDING);
  const py = H/2 - (x / X_MAX) * (H/2 - PADDING);   // X→oben
  return [px, py];
}

function drawWorkpieceBase() {
  // Hintergrund
  ctx.fillStyle = '#1e293b';
  ctx.fillRect(0, 0, W, H);

  // Mittelachse (Drehachse, Z)
  ctx.strokeStyle = '#475569';
  ctx.lineWidth = 1;
  ctx.setLineDash([4, 4]);
  ctx.beginPath();
  ctx.moveTo(PADDING, H/2);
  ctx.lineTo(W - PADDING, H/2);
  ctx.stroke();
  ctx.setLineDash([]);

  // Achs-Labels
  ctx.fillStyle = '#94a3b8';
  ctx.font = '11px sans-serif';
  ctx.fillText('Z →', W - PADDING - 30, H/2 - 8);
  ctx.fillText('X ↑', PADDING + 8, PADDING - 10);

  // Spindel (links)
  ctx.fillStyle = '#475569';
  const [chuckX1, _] = worldToPx(-5, 0);
  ctx.fillRect(chuckX1 - 15, H/2 - X_MAX/X_MAX*(H/2 - PADDING) - 10,
               15, 2*(H/2 - PADDING) + 20);

  // Originaler Werkstück-Umriss (Rohling) als Schatten — orange wie im Video
  const [zStart, _y1] = worldToPx(0, blank.d_outer/2);
  const [zEnd, _y2]   = worldToPx(blank.length, blank.d_outer/2);
  const yTop = _y1, yBot = H/2 + (H/2 - _y1);
  ctx.fillStyle = 'rgba(232,93,47,0.15)';   // Material-Schatten
  ctx.strokeStyle = 'rgba(232,93,47,0.4)';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.rect(zStart, yTop, zEnd - zStart, yBot - yTop);
  ctx.fill();
  ctx.stroke();
}

// Profil-Tracking: Wir mutieren das Werkstück Stück für Stück
let currentProfile = null;  // Array von (z, x_top) Punkten

function initProfile() {
  // Start: Rechteck = Rohling
  currentProfile = [];
  const step = 0.5;
  for (let z = 0; z <= blank.length; z += step) {
    currentProfile.push([z, blank.d_outer / 2]);
  }
}

function applyCut(seg) {
  // Cuts (linear/roughing/finishing/threading) reduzieren das Profil
  if (seg.type === 'rapid') return;
  // Für jeden Punkt im Profil zwischen z_from und z_to: x clamp auf seg-Werte
  const zMin = Math.min(seg.z_from, seg.z_to);
  const zMax = Math.max(seg.z_from, seg.z_to);
  const dz = seg.z_to - seg.z_from;
  for (const p of currentProfile) {
    if (p[0] >= zMin && p[0] <= zMax) {
      // Lineare Interpolation der Werkzeug-X-Position bei z=p[0]
      const t = dz === 0 ? 0 : (p[0] - seg.z_from) / dz;
      const toolX = seg.x_from + t * (seg.x_to - seg.x_from);
      if (toolX < p[1]) p[1] = toolX;
    }
  }
}

function drawCurrentProfile() {
  if (!currentProfile || currentProfile.length === 0) return;
  // Material (orange) füllen — Polygon von (0, X_MAX) entlang Profil zurück
  ctx.fillStyle = '#E85D2F';
  ctx.strokeStyle = '#c2410c';
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  // Oben (vorne)
  const [px0, py0] = worldToPx(currentProfile[0][0], currentProfile[0][1]);
  ctx.moveTo(px0, py0);
  for (const [z, x] of currentProfile) {
    const [px, py] = worldToPx(z, x);
    ctx.lineTo(px, py);
  }
  // Achse
  const [pxEnd, _] = worldToPx(currentProfile[currentProfile.length-1][0], 0);
  ctx.lineTo(pxEnd, H/2);
  const [pxStart, _2] = worldToPx(currentProfile[0][0], 0);
  ctx.lineTo(pxStart, H/2);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();

  // Spiegelung nach unten (rotationssymmetrisch)
  ctx.save();
  ctx.scale(1, -1);
  ctx.translate(0, -H);
  ctx.beginPath();
  ctx.moveTo(px0, H - py0);
  for (const [z, x] of currentProfile) {
    const [px, py] = worldToPx(z, x);
    ctx.lineTo(px, H - py);
  }
  ctx.lineTo(pxEnd, H/2);
  ctx.lineTo(pxStart, H/2);
  ctx.closePath();
  ctx.fillStyle = 'rgba(232,93,47,0.7)';
  ctx.fill();
  ctx.stroke();
  ctx.restore();
}

function drawTool(seg) {
  if (!seg) return;
  // Werkzeug an seg.x_to / seg.z_to — kleines Dreieck
  const [px, py] = worldToPx(seg.z_to, seg.x_to);
  ctx.fillStyle = '#10b981';
  ctx.strokeStyle = '#065f46';
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.moveTo(px, py);
  ctx.lineTo(px + 8, py - 14);
  ctx.lineTo(px - 8, py - 14);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
}

let segIndex = 0;
let playing = false;
let playTimer = null;

function highlightLine(lineNo) {
  document.querySelectorAll('.sim-code .line').forEach(el => {
    el.classList.toggle('active', parseInt(el.dataset.line) === lineNo);
    if (parseInt(el.dataset.line) === lineNo) {
      el.scrollIntoView({ block: 'center', behavior: 'smooth' });
    }
  });
}

function renderFrame() {
  drawWorkpieceBase();
  drawCurrentProfile();
  const seg = SIM.segments[segIndex];
  drawTool(seg);
  const status = document.getElementById('sim-status');
  const cycleLabel = seg && seg.cycle
    ? `<span class="pill" style="background:${SIM.cycles.find(c=>c.name===seg.cycle)?.color||'#356692'};">${seg.cycle}</span>`
    : '';
  status.innerHTML = `${cycleLabel} Schritt ${segIndex+1}/${SIM.segments.length} · ` +
    (seg ? `${seg.type} · Z=${seg.z_to} X=${(seg.x_to*2).toFixed(1)}` +
            (seg.feed ? ` F=${seg.feed}` : '') : 'Fertig');
  if (seg) highlightLine(seg.line);
}

function stepSim() {
  if (segIndex >= SIM.segments.length) return;
  applyCut(SIM.segments[segIndex]);
  segIndex++;
  renderFrame();
}

function playSim() {
  if (playing) {
    clearInterval(playTimer);
    playing = false;
    return;
  }
  playing = true;
  playTimer = setInterval(() => {
    if (segIndex >= SIM.segments.length) {
      clearInterval(playTimer);
      playing = false;
      return;
    }
    stepSim();
  }, 150);
}

function resetSim() {
  if (playTimer) clearInterval(playTimer);
  playing = false;
  segIndex = 0;
  initProfile();
  renderFrame();
}

// Init
initProfile();
renderFrame();
</script>
{% endblock %}