{% extends "base.html" %}
{% block title %}{{ task.title or 'Task' }} — {{ _('Misure') }} — TieMeasureFlow{% endblock %}

{# Full-screen layout: no body scroll, no footer, main fills available space #}
{% block body_class %}h-screen overflow-hidden{% endblock %}
{% block wrapper_class %}h-full{% endblock %}
{% block main_class %}flex-1 min-h-0{% endblock %}
{% block footer %}{% endblock %}

{% block extra_head %}
<style>
  /* Annotation viewer container */
  .annotation-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    overflow: hidden;
  }
  .annotation-container canvas {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* Tolerance bar gradient background */
  .tolerance-bar-bg {
    background: linear-gradient(to right,
      rgba(220, 38, 38, 0.15) 0%,
      rgba(217, 119, 6, 0.15) 15%,
      rgba(5, 150, 105, 0.15) 30%,
      rgba(5, 150, 105, 0.15) 70%,
      rgba(217, 119, 6, 0.15) 85%,
      rgba(220, 38, 38, 0.15) 100%
    );
  }

  /* Pulse animation for active marker */
  @keyframes markerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
  }
  .marker-active-pulse {
    animation: markerPulse 2s ease-in-out infinite;
  }

  /* Left sidebar scrollbar */
  .sidebar-markers::-webkit-scrollbar { width: 3px; }
  .sidebar-markers::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

  /* Right panel scrollbar */
  .right-panel::-webkit-scrollbar { width: 4px; }
  .right-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
</style>
{% endblock %}

{% block content %}
<script>
  window.__taskData = {{ task|tojson }};
  window.__taskSubtasks = {{ task.subtasks|tojson if task.subtasks else '[]' }};
  window.__taskAnnotations = {{ task.annotations_json|default('null')|tojson }};
  window.__allTaskIds = {{ all_task_ids|tojson }};
</script>

<div class="h-full flex flex-col overflow-hidden"
     x-data="taskExecute()"
     x-init="init()"
     @numpad-confirm.window="handleMeasurement($event.detail.value, $event.detail.inputMethod)"
     @numpad-rejected.window="onNumpadRejected($event.detail)"
     @numpad-error.window="onNumpadError($event.detail)"
     @marker-click.window="goToSubtaskByMarker($event.detail.marker_number)"
     @vision-recorded.window="onVisionRecorded($event.detail)">

  {# ================================================================
     HEADER — Compact task info bar
     ================================================================ #}
  <div class="shrink-0 bg-[var(--bg-card)] border-b border-[var(--border-color)] shadow-sm z-20">
    <div class="px-3 py-2 flex items-center gap-3">

      {# Back button #}
      <a href="{{ url_for('measure.task_list', recipe_id=task.recipe_id or 0) }}"
         class="shrink-0 p-1.5 rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-[var(--text-muted)] hover:text-[var(--text-primary)]">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
      </a>

      {# Task badge + title #}
      <div class="flex items-center gap-2 min-w-0">
        <span class="shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-bold
                     bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300
                     border border-primary-200 dark:border-primary-800">
          Task {{ (task.order_index or 0) + 1 }}
        </span>
        <h1 class="text-sm font-bold text-[var(--text-primary)] truncate">
          {{ task.title or _('Task di misurazione') }}
        </h1>
      </div>

      {#
        Lista task + Completato.

        The list is the second level now: the operator arrives inside the sequence
        and comes here when they want the whole of it. What used to sit beside it
        was «Riepilogo», which jumped out of the sequence to a recap - the wrong
        thing to offer someone halfway through a task. The way forward is
        «Completato», and on a measurement task it stays shut until the cycle is
        closed, which is the same rule the footer enforces.
      #}
      <div class="shrink-0 flex items-center gap-1.5">
        <a href="{{ url_for('measure.task_list', recipe_id=task.recipe_id or 0) }}"
           class="btn btn-secondary text-xs py-1 px-2.5 gap-1">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
          </svg>
          {{ _('Lista task') }}
        </a>
        {# #60: un solo «Completato», quello grande in fondo (touch); qui resta solo la lista. #}
      </div>

      {# Fermo linea + Fine produzione: task di misura o del ciclo (#53: anche un check nel loop) #}
      <template x-if="(isMeasureTask || isMeasurementTaskOfRun) && productionRun">
        {# #61: Fermo linea / Fine produzione solo con una produzione aperta #}
        <div class="shrink-0 flex items-center gap-1.5">
          {# While the line is stopped this becomes the way to restart it, so the
             capoturno never has to hunt for a second control. #}
          <button x-show="!isPaused"
                  @click="openSupervisorModal('fermo_linea')"
                  class="btn text-xs py-1 px-2.5 gap-1 border-2 border-amber-500 text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/40">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ _('Fermo linea') }}
          </button>
          <button x-show="isPaused" x-cloak
                  @click="openSupervisorModal('ripresa')"
                  class="btn text-xs py-1 px-2.5 gap-1 border-2 border-emerald-500 text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-900/20 hover:bg-emerald-100 dark:hover:bg-emerald-900/40">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/>
            </svg>
            {{ _('Riprendi') }}
          </button>
          <button @click="openSupervisorModal('fine_produzione')"
                  class="btn text-xs py-1 px-2.5 gap-1 border-2 border-red-500 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/40">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
            </svg>
            {{ _('Fine Produzione') }}
          </button>
        </div>
      </template>

      {# Lot + Serial badges #}
      <div class="shrink-0 flex items-center gap-2">
        {% if lot_number %}
        <div class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs
                    bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800
                    text-amber-800 dark:text-amber-200">
          <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
          </svg>
          <span class="font-mono font-semibold">{{ lot_number }}</span>
        </div>
        {% endif %}
        {% if serial_number %}
        <div class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs
                    bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800
                    text-indigo-800 dark:text-indigo-200">
          <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
          </svg>
          <span class="font-mono font-semibold">{{ serial_number }}</span>
        </div>
        {% endif %}

        {# Caliper status #}
        {% include "components/caliper_status.html" %}
      </div>
    </div>
  </div>

  {# ================================================================
     MAIN — 3-column layout
     ================================================================ #}
  {# #46: camera_measure / dxf_compare get the acquisition panel below instead of the manual layout #}
  <div class="flex-1 flex overflow-hidden" x-show="!isVisionTask">

    {# ──────────────────────────────────────────────
       LEFT SIDEBAR — Marker list (vertical, hidden when no subtasks)
       ────────────────────────────────────────────── #}
    <div x-show="isMeasureTask && subtasks.length > 0"
         class="shrink-0 w-14 md:w-16 bg-[var(--bg-card)] border-r border-[var(--border-color)] flex flex-col sidebar-markers overflow-y-auto">
      <template x-for="(st, idx) in subtasks" :key="st.id">
        <button @click="goToSubtask(idx)"
                class="relative flex flex-col items-center justify-center py-2.5 px-1 border-b border-[var(--border-color)] transition-all duration-200"
                :class="idx === currentIndex
                  ? 'bg-primary-50 dark:bg-primary-900/20 border-l-[3px] border-l-primary'
                  : 'hover:bg-[var(--bg-secondary)] border-l-[3px] border-l-transparent'">

          {# Marker circle #}
          <span class="inline-flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-all"
                :class="idx === currentIndex
                  ? 'bg-primary text-white shadow-md marker-active-pulse'
                  : getMeasurementStatus(st.id) === 'pass'
                    ? 'bg-measure-pass/20 text-measure-pass border border-measure-pass/40'
                    : getMeasurementStatus(st.id) === 'fail'
                      ? 'bg-red-100 dark:bg-red-900/30 text-measure-fail border border-measure-fail/40'
                      : getMeasurementStatus(st.id) === 'warning'
                        ? 'bg-amber-100 dark:bg-amber-900/30 text-measure-warning border border-measure-warning/40'
                        : 'bg-[var(--bg-secondary)] text-[var(--text-muted)] border border-[var(--border-color)]'"
                x-text="st.marker_number"></span>

          {# Status icon below circle #}
          <template x-if="getMeasurementStatus(st.id) === 'pass'">
            <svg class="w-3 h-3 mt-0.5 text-measure-pass" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
            </svg>
          </template>
          <template x-if="getMeasurementStatus(st.id) === 'fail'">
            <svg class="w-3 h-3 mt-0.5 text-measure-fail" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </template>
          <template x-if="getMeasurementStatus(st.id) === 'warning'">
            <svg class="w-3 h-3 mt-0.5 text-measure-warning" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
            </svg>
          </template>
        </button>
      </template>
    </div>

    {# ──────────────────────────────────────────────
       CENTER — Image area
       ────────────────────────────────────────────── #}
    <div class="flex-1 flex flex-col overflow-hidden bg-[var(--bg-secondary)]">

      {# What the task says to do. It was written for the operator and until now
         only the maker ever saw it; the line breaks and the bold of the technical
         sheet survive here as they do in the editor. #}
      {% if task.directive or task.description %}
      <div class="shrink-0 max-h-36 overflow-y-auto px-4 py-2.5
                  bg-[var(--bg-card)] border-b border-[var(--border-color)]">
        {% if task.directive %}
        <p class="text-sm font-semibold text-[var(--text-primary)] leading-snug">
          {{ task.directive|rich_text }}
        </p>
        {% endif %}
        {% if task.description %}
        <div class="text-sm text-[var(--text-secondary)] leading-relaxed
                    {% if task.directive %}mt-1{% endif %}">
          {{ task.description|rich_text }}
        </div>
        {% endif %}
      </div>
      {% endif %}

      {# #55: the inputs of the fields of a «note» task. One block for the task on screen
         and for the panel at the end of production, so the rules are written once. #}
      {% macro result_fields() %}
      <template x-for="fld in f.fields" :key="fld.key">
        <div class="mb-3">
          <label class="block text-sm font-medium text-[var(--text-secondary)] mb-1" x-text="fld.label"></label>
          <input :type="fld.type === 'number' ? 'number' : 'text'"
                 :step="fld.type === 'number' ? 'any' : null"
                 :inputmode="fld.type === 'number' ? 'decimal' : null"
                 x-model="f.values[fld.key]"
                 class="input w-full text-base py-2">
          <template x-if="fld.attachment">
            <div class="mt-1.5">
              <label class="btn btn-secondary text-xs gap-1.5 cursor-pointer">
                {{ _('Allega immagine o PDF') }}
                <input type="file" accept="image/*,application/pdf" class="hidden"
                       @change="pickFile(f, fld.key, $event)">
              </label>
              <span class="ml-2 text-xs text-[var(--text-muted)]" x-text="f.fileNames[fld.key]"></span>
            </div>
          </template>
        </div>
      </template>
      {% endmacro %}

      {# #54 #55: result panel of the task on screen - OK / NOK for a «check», the
         fields and «Completato» for a «note» with fields. #}
      <div x-show="hasResultPanel" x-cloak
           x-data="taskResultForm()"
           x-init="ctx = () => ({ runId: productionRun ? productionRun.id : null, done: () => advanceAfterResult() });
                   initForTask(task);
                   $watch('productionRun && productionRun.id', () => loadLast())"
           @task-result-reset.window="justRecorded = false; initForTask(task)"
           class="shrink-0 max-h-[65%] overflow-y-auto px-4 py-3 bg-[var(--bg-card)] border-b border-[var(--border-color)]">
        <template x-for="f in forms" :key="f.task_id">
          <div class="max-w-2xl mx-auto">
            <div x-show="f.result" class="mb-3 px-3 py-2 rounded-lg text-sm border border-[var(--border-color)] bg-[var(--bg-secondary)]">
              <span class="text-[var(--text-secondary)]">{{ _('Ultimo esito') }}:</span>
              <span class="font-bold"
                    :class="f.result && f.result.outcome === 'nok' ? 'text-measure-fail' : 'text-measure-pass'"
                    x-text="resultLabel(f.result)"></span>
              <span class="text-[var(--text-muted)]" x-text="f.result && f.result.note ? '— ' + f.result.note : ''"></span>
            </div>

            <template x-if="f.type === 'check'">
              <div>
                <textarea x-model="f.note" rows="2"
                          placeholder="{{ _('Nota (obbligatoria per un NOK)') }}"
                          class="input w-full text-base mb-3"></textarea>
                <div class="grid grid-cols-2 gap-3">
                  <button @click="submit('ok')" :disabled="working"
                          class="btn min-h-[72px] text-2xl font-bold justify-center shadow-md bg-measure-pass text-white hover:opacity-90 disabled:opacity-50">
                    {{ _('OK') }}
                  </button>
                  <button @click="submit('nok')" :disabled="working"
                          class="btn min-h-[72px] text-2xl font-bold justify-center shadow-md bg-red-600 text-white hover:bg-red-700 disabled:opacity-50">
                    {{ _('NOK') }}
                  </button>
                </div>
              </div>
            </template>

            <template x-if="f.type === 'note'">
              <div>
                {{ result_fields() }}
                <button @click="submit('done')" :disabled="working"
                        class="btn text-lg font-bold w-full min-h-[64px] justify-center gap-2 shadow-md bg-measure-pass text-white hover:opacity-90 disabled:opacity-50">
                  <span>{{ _('Completato') }}</span>
                </button>
              </div>
            </template>

            <p x-show="f.error" class="mt-2 text-sm text-measure-fail" x-text="f.error"></p>
            {# The result is in, but going on failed (cycle refused, network): another try, without recording twice. #}
            <button x-show="justRecorded" @click="proceed()"
                    class="btn btn-secondary mt-3 w-full justify-center">
              {{ _('Prosegui') }}
            </button>
          </div>
        </template>
      </div>

      {# Main image area #}
      <div class="flex-1 overflow-hidden relative">

        {# Option A: Subtask has its own image → plain <img> #}
        <div x-show="showSubtaskImage" class="absolute inset-0 flex items-center justify-center p-2">
          <img :src="'/measure/api/files/' + currentSubtaskImage"
               alt="{{ _('Immagine dettaglio misura') }}"
               class="max-w-full max-h-full object-contain rounded-lg shadow-sm">
        </div>

        {# Option B: Task image with annotations → annotation-viewer (kept in DOM via x-show) #}
        <div x-show="showTaskImage" class="absolute inset-0">
          {% if task.file_path %}
          <div class="annotation-container"
               x-data="annotationViewer()"
               x-init="
                 imageUrl = '/measure/api/files/{{ task.file_path }}';
                 annotations = window.__taskAnnotations;
                 $nextTick(() => init());
               "
               x-effect="setActiveMarker(currentSubtask?.marker_number || 0)">
            <canvas x-ref="annotationCanvas"
                    @click="handleClick($event)"
                    class="cursor-pointer"></canvas>
          </div>
          {% endif %}
        </div>

        {# Option C: No image → placeholder #}
        <div x-show="!showSubtaskImage && !showTaskImage" class="absolute inset-0 flex items-center justify-center">
          <div class="text-center">
            <svg class="w-16 h-16 mx-auto text-[var(--text-muted)] mb-3 opacity-30" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
            <p class="text-sm font-medium text-[var(--text-muted)]">{{ _('Nessuna immagine allegata') }}</p>
          </div>
        </div>
      </div>
    </div>

    {# ──────────────────────────────────────────────
       RIGHT PANEL — Info + tolerances + numpad (hidden when no subtasks)
       ────────────────────────────────────────────── #}
    <div x-show="isMeasureTask && subtasks.length > 0"
         class="shrink-0 w-72 lg:w-80 bg-[var(--bg-card)] border-l border-[var(--border-color)] flex flex-col right-panel overflow-y-auto">

      {# ---- Subtask header ---- #}
      <div class="p-3 border-b border-[var(--border-color)]" x-show="currentSubtask">
        <div class="flex items-center gap-2">
          <span class="inline-flex items-center justify-center w-8 h-8 rounded-full
                       bg-primary text-white font-bold text-sm shadow marker-active-pulse"
                x-text="currentSubtask?.marker_number"></span>
          <div class="min-w-0 flex-1">
            <h2 class="font-semibold text-[var(--text-primary)] text-sm leading-tight truncate"
                x-text="currentSubtask?.description || '{{ _('Misurazione') }}'"></h2>
            <span class="text-[11px] text-[var(--text-muted)]"
                  x-text="(currentSubtask?.measurement_type || '{{ _('Misura') }}') + ' (' + (currentSubtask?.unit || 'mm') + ')'"></span>
          </div>
          <span class="shrink-0 text-[11px] font-mono text-[var(--text-muted)] bg-[var(--bg-secondary)] px-1.5 py-0.5 rounded">
            <span x-text="currentIndex + 1"></span>/<span x-text="totalSubtasks"></span>
          </span>
        </div>
      </div>

      {# ---- Tolerance parameters (compact grid) ---- #}
      <div class="px-3 py-2 border-b border-[var(--border-color)]" x-show="currentSubtask">
        {# Nominal row #}
        <div class="flex items-center justify-between py-1 px-2 rounded bg-primary-50 dark:bg-primary-900/20 border border-primary-100 dark:border-primary-800 mb-1.5">
          <span class="text-[10px] font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wider">{{ _('Nominale') }}</span>
          <span class="font-mono font-bold text-primary text-sm"
                x-text="currentSubtask?.nominal?.toFixed(3) || '—'"></span>
        </div>

        {# 2x2 tolerance grid #}
        <div class="grid grid-cols-2 gap-1 text-[11px]">
          <div class="flex items-center justify-between py-0.5 px-2 rounded bg-red-50/50 dark:bg-red-900/10">
            <span class="text-measure-fail font-medium">UTL</span>
            <span class="font-mono font-semibold text-measure-fail" x-text="currentSubtask?.utl?.toFixed(3) || '—'"></span>
          </div>
          <div class="flex items-center justify-between py-0.5 px-2 rounded bg-red-50/50 dark:bg-red-900/10">
            <span class="text-measure-fail font-medium">LTL</span>
            <span class="font-mono font-semibold text-measure-fail" x-text="currentSubtask?.ltl?.toFixed(3) || '—'"></span>
          </div>
          <div class="flex items-center justify-between py-0.5 px-2 rounded bg-amber-50/50 dark:bg-amber-900/10">
            <span class="text-measure-warning font-medium">UWL</span>
            <span class="font-mono font-semibold text-measure-warning" x-text="currentSubtask?.uwl?.toFixed(3) || '—'"></span>
          </div>
          <div class="flex items-center justify-between py-0.5 px-2 rounded bg-amber-50/50 dark:bg-amber-900/10">
            <span class="text-measure-warning font-medium">LWL</span>
            <span class="font-mono font-semibold text-measure-warning" x-text="currentSubtask?.lwl?.toFixed(3) || '—'"></span>
          </div>
        </div>
      </div>

      {# ---- Tolerance bar (compact) ---- #}
      <div class="px-3 py-2 border-b border-[var(--border-color)]" x-show="currentSubtask">
        <div class="tolerance-bar-bg h-5 rounded-full relative overflow-hidden border border-[var(--border-color)]">
          {# Zone labels #}
          <div class="absolute inset-0 flex items-center justify-between px-1.5 text-[8px] font-mono text-[var(--text-muted)]">
            <span x-text="currentSubtask?.ltl?.toFixed(2)"></span>
            <span x-text="currentSubtask?.nominal?.toFixed(2)"></span>
            <span x-text="currentSubtask?.utl?.toFixed(2)"></span>
          </div>
          {# Center line #}
          <div class="absolute top-0 bottom-0 w-px bg-[var(--text-muted)]/30" style="left: 50%;"></div>
          {# Value needle #}
          <div x-show="currentValue !== null"
               x-transition
               class="absolute top-0 bottom-0 w-1 rounded-full transition-all duration-300"
               :class="{
                 'bg-measure-pass': passFailStatus === 'pass',
                 'bg-measure-warning': passFailStatus === 'warning',
                 'bg-measure-fail': passFailStatus === 'fail'
               }"
               :style="'left: calc(' + progressWidth + '% - 2px)'">
            <div class="absolute -top-0.5 left-1/2 -translate-x-1/2 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-slate-800 shadow"
                 :class="{
                   'bg-measure-pass': passFailStatus === 'pass',
                   'bg-measure-warning': passFailStatus === 'warning',
                   'bg-measure-fail': passFailStatus === 'fail'
                 }"></div>
          </div>
        </div>
      </div>

      {# ---- Already measured indicator ---- #}
      <div x-show="isMeasured(currentSubtask?.id)"
           class="mx-3 mt-2 p-2 rounded-lg bg-measure-pass/10 border border-measure-pass/20">
        <div class="flex items-center gap-1.5 text-xs text-measure-pass font-medium">
          <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
          </svg>
          <span>{{ _('Registrata') }}:</span>
          {# #118: quota registrata senza valore (visione, NaN) #}
          <span class="font-mono font-bold" x-text="getMeasuredValue(currentSubtask?.id)?.toFixed(3) ?? 'NaN'"></span>
          <span x-text="currentSubtask?.unit || 'mm'"></span>
        </div>
      </div>

      {# ---- Measurement feedback ---- #}
      <div class="px-3 pt-2" x-show="currentSubtask" x-data="{ get nominal() { return currentSubtask?.nominal || 0; },
                                        get utl() { return currentSubtask?.utl || 0; },
                                        get uwl() { return currentSubtask?.uwl || 0; },
                                        get lwl() { return currentSubtask?.lwl || 0; },
                                        get ltl() { return currentSubtask?.ltl || 0; },
                                        get unit() { return currentSubtask?.unit || 'mm'; } }">
        {% include "components/measurement_feedback.html" %}
      </div>

      {# ---- Numpad (only when a subtask is active) ---- #}
      <div class="px-3 py-2 relative flex-1" x-show="currentSubtask">
        {# Saving overlay #}
        <div x-show="saving"
             x-transition
             class="absolute inset-0 z-10 bg-white/70 dark:bg-slate-900/70 flex items-center justify-center backdrop-blur-sm rounded">
          <div class="flex items-center gap-2 text-primary font-medium text-sm">
            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
            {{ _('Salvataggio...') }}
          </div>
        </div>

        {% include "components/numpad.html" %}
      </div>

      {# ---- Next measurement indicator ---- #}
      <div class="px-3 pb-2" x-show="currentSubtask">
        {% include "components/next_measurement.html" %}
      </div>


      {# ---- Error message ---- #}
      <div x-show="errorMessage"
           x-transition
           x-cloak
           class="mx-3 mb-2 p-2 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-xs text-measure-fail">
        <div class="flex items-center gap-1.5">
          <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <span x-text="errorMessage"></span>
        </div>
      </div>
    </div>

  </div>

  {# ================================================================
     VISION PANEL (#46) - acquire an image, run the recipe server-side, show the
     quotes and the overlay. acquire(blob) is the entry point the agent camera
     (#3) will reuse.
     ================================================================ #}
  <div x-show="isVisionTask" x-cloak
       x-data="visionExecute()"
       x-init="ctx = () => ({ lot: lotNumber, serial: serialNumber, runId: productionRun ? productionRun.id : null })"
       class="flex-1 min-h-0 overflow-hidden p-3 flex flex-col lg:flex-row gap-3">
    {# #96: il pannello non scorre mai (overflow-hidden, min-h-0): l'immagine sta in fit nello spazio che resta #}

    <div class="flex-1 min-w-0 min-h-0 flex flex-col gap-2">
      <div class="flex items-center gap-2 flex-wrap">
        {% if not camera_enabled %}
        {# #119: l'input file solo senza camera. On a tablet this opens the camera; on a PC it picks a file. «Riprova» reuses the same input. #}
        <label class="btn btn-primary text-sm gap-1.5 cursor-pointer" :class="busy ? 'opacity-50 pointer-events-none' : ''">
          <span x-text="result ? '{{ _('Riprova') }}' : '{{ _('Acquisisci immagine') }}'"></span>
          <input type="file" accept="image/*" capture="environment" class="hidden"
                 @change="onPick($event)" :disabled="busy">
        </label>
        {% else %}
        {# #97: camera del task (o della stazione). Impulsiva: «Acquisisci» rifa grab+check; in linea: «Pausa»/«Riprendi» sul ciclo #}
        {% if camera_mode == 'in_linea' %}
        <button type="button" class="btn btn-secondary text-sm gap-1.5" @click="togglePause()"
                :class="registering ? 'opacity-50 pointer-events-none' : ''"
                :disabled="registering">
          <span x-text="(paused || saved) ? '{{ _('Riprendi') }}' : '{{ _('Pausa') }}'"></span>
        </button>
        {% else %}
        {# #72: frame dalla camera, stessa strada di acquire(); #97: ora grab + analisi senza salvare #}
        <button type="button" class="btn btn-secondary text-sm gap-1.5" @click="grab()"
                :class="(busy || grabbing) ? 'opacity-50 pointer-events-none' : ''"
                :disabled="busy || grabbing">
          <span>{{ _('Acquisisci da camera') }}</span>  {# #119 #}
        </button>
        {% endif %}
        {# #97: salva l'ULTIMO frame mostrato (execute); fino ad allora e' solo un'anteprima #}
        <button type="button" class="btn btn-primary text-sm gap-1.5" @click="record()"
                :class="canRecord ? '' : 'opacity-50 pointer-events-none'"
                :disabled="!canRecord">
          <span>{{ _('Registra') }}</span>
        </button>
        <span x-show="preview && !saved" x-cloak
              class="inline-block px-2 py-0.5 rounded text-xs font-bold bg-amber-50 dark:bg-amber-900/20 border border-amber-300 dark:border-amber-700">{{ _('Anteprima, non registrata') }}</span>
        <span x-show="grabbing" class="text-sm text-[var(--text-muted)]">{{ _('Acquisizione in corso...') }}</span>
        {% endif %}
        <span x-show="busy" class="text-sm text-[var(--text-muted)]">{{ _('Elaborazione in corso...') }}</span>
      </div>

      <div x-show="error" class="p-2 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-sm text-measure-fail" x-text="error"></div>

      {# #96: riquadro flex-1 min-h-0; #122: dentro, <tmf-viewer> (zoom, pan, Salva, overlay SVG a tratto costante ed etichette quota) riempie il riquadro; overlay e labels arrivano da x-effect (px dell'immagine, #121 #116); x-show sul contenitore, mai sul viewer #}
      <div x-show="shownImage" class="relative flex-1 min-h-0 border border-[var(--border-color)] rounded-lg overflow-hidden bg-black/5">
        {# #126: no-layers = viewer semplice, senza menu dei livelli e senza trascinamento delle etichette #}
        <tmf-viewer class="block w-full h-full" no-layers :src="shownImage" :save-name="saveName"
                    label-fit="{{ _('Adatta') }}" label-save="{{ _('Salva') }}"
                    title-in="{{ _('Ingrandisci') }}" title-out="{{ _('Riduci') }}" title-save="{{ _('Salva immagine') }}"
                    x-effect="$el.overlay = (result && result.overlay) || []; $el.labels = viewerLabels"></tmf-viewer>
      </div>
      <div x-show="!shownImage" class="text-sm text-[var(--text-muted)]">
        {{ _('Nessuna immagine acquisita: premi «Acquisisci immagine».') }}
      </div>
    </div>

    {# #96: colonna esito con scorrimento proprio (solo con molte quote); sotto lg max 40% dell'altezza #}
    <div class="lg:w-80 shrink-0 min-h-0 overflow-y-auto max-h-[40%] lg:max-h-none flex flex-col gap-2" x-show="result">
      <div class="text-sm font-bold text-[var(--text-primary)]">
        {{ _('Esito') }}: <span x-text="(result && result.outcome) || '-'"></span>
      </div>

      <table class="w-full text-sm" x-show="rows.length">
        {# #117: due righe per quota (esito, poi nominale e tolleranze come nella schermata dei calibri); un solo tbody per quota perche' x-for vuole un'unica radice #}
        <template x-for="r in rows" :key="r.label">
          <tbody>
            <tr>
              <td class="py-1 pr-2 text-[var(--text-secondary)]" x-text="r.label"></td>
              {# #118: quota non misurata (value null) = «NaN», esito fail #}
              <td class="py-1 pr-2 font-mono text-right" x-text="fmtValue(r.value, r.unit)"></td>
              <td class="py-1"><span class="inline-block px-2 py-0.5 rounded text-xs font-bold" :class="statusClass(r.status)" x-text="r.status"></span></td>
            </tr>
            <tr class="border-b border-[var(--border-color)]">
              <td colspan="3" class="pb-1.5 text-[11px] font-mono">
                <span class="text-primary font-semibold">{{ _('Nom') }} <span x-text="fmtTol(r.nominal)"></span></span>
                <span class="text-measure-fail ml-2">LTL <span x-text="fmtTol(r.ltl)"></span></span>
                <span class="text-measure-fail ml-1">UTL <span x-text="fmtTol(r.utl)"></span></span>
                <template x-if="r.lwl != null || r.uwl != null">
                  <span>
                    <span class="text-measure-warning ml-2">LWL <span x-text="fmtTol(r.lwl)"></span></span>
                    <span class="text-measure-warning ml-1">UWL <span x-text="fmtTol(r.uwl)"></span></span>
                  </span>
                </template>
              </td>
            </tr>
          </tbody>
        </template>
      </table>

      <div x-show="result && result.failures && result.failures.length"
           class="p-2 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-300 dark:border-amber-700 text-xs">
        <div class="font-bold mb-1">{{ _('Strumenti falliti') }}</div>
        <template x-for="f in ((result && result.failures) || [])" :key="f.tool_id">
          <div><span class="font-mono" x-text="f.tool_name || f.tool_id"></span>: <span x-text="f.error"></span></div>
        </template>
      </div>
    </div>
  </div>

  {# ================================================================
     MEASUREMENT TIMER BANNER
     ================================================================ #}
  {# Past zero the counter turns round: it stops saying how long is left and starts
     saying how late the line is, in red. A delay has to be read, not deduced. #}
  <div x-show="timerActive"
       x-transition
       x-cloak
       class="shrink-0 border-t px-4 py-2"
       :class="isOverdue
         ? 'bg-red-50 dark:bg-red-900/30 border-red-400 dark:border-red-700'
         : 'bg-amber-50 dark:bg-amber-900/20 border-amber-300 dark:border-amber-700'">
    <div class="flex items-center justify-center gap-3">
      <svg class="w-5 h-5 animate-pulse"
           :class="isOverdue ? 'text-red-600' : 'text-amber-600'"
           fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      <span x-show="!isOverdue" class="text-sm font-medium text-amber-800 dark:text-amber-200">
        {{ _('Prossima misurazione tra') }}
      </span>
      <span x-show="isOverdue" class="text-sm font-bold text-red-800 dark:text-red-200">
        {{ _('Misurazione in ritardo di') }}
      </span>
      <span class="text-lg font-bold font-mono px-2 py-0.5 rounded"
            :class="isOverdue
              ? 'text-red-900 dark:text-red-100 bg-red-100 dark:bg-red-900/40'
              : 'text-amber-900 dark:text-amber-100 bg-amber-100 dark:bg-amber-900/40'"
            x-text="timerDisplay"></span>
      <span class="text-xs"
            :class="isOverdue ? 'text-red-600 dark:text-red-300' : 'text-amber-600 dark:text-amber-400'">
        ({{ _('Ciclo') }} #<span x-text="cycleCount"></span>)
      </span>
    </div>
  </div>

  {# ================================================================
     MISURA SENZA QUOTE — declared a measurement task but none configured yet.
     Under the old rule this screen quietly looked like a note; now the task keeps
     its identity and says what is missing instead.
     ================================================================ #}
  <div x-show="isMeasureTaskWithoutQuotes"
       x-transition
       x-cloak
       class="shrink-0 bg-amber-50 dark:bg-amber-900/20 border-t border-amber-300 dark:border-amber-700 px-4 py-2">
    <div class="flex items-center justify-center gap-2">
      <svg class="w-4 h-4 text-amber-600 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
      </svg>
      <span class="text-sm text-amber-800 dark:text-amber-200">
        {{ _('Task di misura senza quote configurate: la ricetta è incompleta') }}
      </span>
    </div>
  </div>

  {# ================================================================
     QUOTA FUORI TOLLERANZA — nothing moves from here without the capoturno or a
     new reading of this same quote. Kept on screen after the modal is dismissed,
     because the block outlives the modal: the server refuses the next value.
     ================================================================ #}
  <div x-show="blockedByTolerance"
       x-transition
       x-cloak
       class="shrink-0 bg-red-50 dark:bg-red-900/30 border-t-2 border-red-500 px-4 py-2">
    <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
      <svg class="w-5 h-5 text-red-600 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
      </svg>
      <span class="text-sm font-semibold text-red-900 dark:text-red-100">
        {{ _('Quota fuori tolleranza') }}
      </span>
      <span class="text-xs text-red-800 dark:text-red-200">
        {{ _('serve il capoturno, oppure una nuova misura della stessa quota') }}
      </span>
      <button @click="openSupervisorModal('out_of_tolerance')"
              class="btn text-xs py-1 px-2.5 bg-red-600 hover:bg-red-700 text-white">
        {{ _('Autorizza') }}
      </button>
    </div>
  </div>

  {# ================================================================
     LINEA FERMA — the countdown is frozen, not merely hidden. Stated plainly
     because a stopped line that looks like a running one is how a measurement
     interval gets silently missed.
     ================================================================ #}
  <div x-show="isPaused"
       x-transition
       x-cloak
       class="shrink-0 bg-amber-100 dark:bg-amber-900/40 border-t-2 border-amber-500 px-4 py-2">
    <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
      <svg class="w-5 h-5 text-amber-700 dark:text-amber-300 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      <span class="text-sm font-semibold text-amber-900 dark:text-amber-100">
        {{ _('Linea ferma') }}
      </span>
      {# A line stopped past its interval is frozen at a delay, not at a wait. Both
         read as mm:ss, so the wording is what has to change. #}
      <span class="text-xs text-amber-800 dark:text-amber-200">
        <span x-show="timerRemaining > 0">{{ _('Il conto alla rovescia è congelato a') }}</span>
        <span x-show="timerRemaining <= 0">{{ _('Misurazione in ritardo di') }}</span>
        <span class="font-mono font-bold" x-text="timerDisplay"></span>
        — {{ _('serve il capoturno per riprendere') }}
      </span>
    </div>
  </div>

  {# ================================================================
     PRODUCTION ERROR — the server refused to record the production state.
     Shown because the fallback keeps the operator working locally, and a timer
     that is not backed by the server must never look like one that is.
     ================================================================ #}
  <div x-show="productionError"
       x-transition
       x-cloak
       class="shrink-0 bg-red-50 dark:bg-red-900/20 border-t border-red-300 dark:border-red-700 px-4 py-2">
    <div class="flex items-center justify-center gap-2">
      <svg class="w-4 h-4 text-red-600 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
      </svg>
      <span class="text-sm text-red-800 dark:text-red-200">
        {{ _('Produzione non registrata sul server') }}:
        <span x-text="productionError"></span>
      </span>
    </div>
  </div>

  {# ================================================================
     AVVIO PRODUZIONE — visible after first cycle, before production started
     ================================================================ #}
  <div x-show="cycleConfirmed && cycleCount === 1 && !productionStarted && isMeasureTask"
       x-transition
       x-cloak
       class="shrink-0 border-t border-[var(--border-color)] bg-[var(--bg-card)] px-4 py-3">
    <div class="flex items-center justify-center">
      <button @click="startProduction()"
              class="btn gap-2 px-6 py-2.5 text-sm font-bold
                     bg-emerald-600 hover:bg-emerald-700 text-white shadow-lg hover:shadow-xl
                     rounded-xl transition-all duration-200">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M5 3l14 9-14 9V3z"/>
        </svg>
        {{ _('Avvio Produzione') }}
      </button>
    </div>
    <p class="text-xs text-center text-[var(--text-muted)] mt-1.5">
      {{ _('Invia segnale al gestionale per avviare il timer della linea') }}
    </p>
  </div>
  <div x-show="productionStarted && isMeasureTask"
       x-transition
       x-cloak
       class="shrink-0 border-t border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-900/20 px-4 py-1.5">
    <div class="flex items-center justify-center gap-2 text-xs text-emerald-700 dark:text-emerald-300">
      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
      </svg>
      <span class="font-medium">{{ _('Produzione avviata') }}</span>
    </div>
  </div>

  {# ================================================================
     FOOTER — Progress bar + navigation
     ================================================================ #}
  <div class="shrink-0 bg-[var(--bg-card)] border-t border-[var(--border-color)] shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-20">
    <div class="px-3 py-2 flex items-center gap-3">

      {# Left: Back #}
      <a href="{{ url_for('measure.task_list', recipe_id=task.recipe_id or 0) }}"
         class="btn btn-secondary text-xs shrink-0 gap-1 py-1.5 px-2.5">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        <span class="hidden sm:inline">{{ _('Task') }}</span>
      </a>

      {# Center: Progress bar #}
      <div class="flex-1 flex items-center gap-2">
        <span class="text-xs font-medium text-[var(--text-secondary)] shrink-0 font-mono">
          <span x-text="completedCount"></span>/<span x-text="totalSubtasks"></span>
        </span>
        <div class="flex-1 h-2 rounded-full bg-[var(--bg-secondary)] border border-[var(--border-color)] overflow-hidden">
          <div class="h-full rounded-full transition-all duration-500 ease-out"
               :class="isComplete ? 'bg-measure-pass' : 'bg-primary'"
               :style="'width: ' + progressPercent + '%'"></div>
        </div>
        <span class="text-xs font-bold shrink-0"
              :class="isComplete ? 'text-measure-pass' : 'text-primary'"
              x-text="Math.round(progressPercent) + '%'"></span>
      </div>

      {# Right: Fine ciclo misura (measurement tasks) / Task successivo (after cycle) #}
      <template x-if="isMeasureTask && subtasks.length > 0">
        <div class="flex items-center gap-1.5">
          {#
            Shown from the start, and greyed until every quote has a value. It used
            to appear only once the task was finished, which left the operator with
            no sign that the button existed or what would bring it out - a control
            that is missing teaches nothing, one that is disabled says what is left.
          #}
          <button x-show="!cycleConfirmed"
                  x-transition
                  @click="confirmCycle()"
                  :disabled="!isComplete"
                  :title="isComplete ? '' : missingQuotesLabel"
                  :class="isComplete
                    ? 'bg-primary text-white hover:bg-primary-700 shadow-md'
                    : 'bg-steel-200 dark:bg-steel-700 text-steel-500 dark:text-steel-400 cursor-not-allowed'"
                  class="btn text-xs shrink-0 gap-1 py-1.5 px-3">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span x-text="isComplete
              ? {{ _('Fine ciclo misura')|tojson_attr }}
              : missingQuotesLabel"></span>
          </button>
          {# Girare il pezzo e rimisurare, senza chiudere il ciclo: a second reading
             of the same part is not a new one, and must not restart the interval. #}
          <button x-show="isComplete && productionStarted"
                  x-transition
                  @click="remeasure()"
                  class="btn btn-secondary text-xs shrink-0 gap-1 py-1.5 px-3">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992V4.356M3.977 14.652H8.97v4.992m10.058-9.348a8.25 8.25 0 00-14.02-3.34L3.977 9.348m0 5.304a8.25 8.25 0 0014.02 3.34l1.03-1.03"/>
            </svg>
            {{ _('Rimisura') }}
          </button>
          {# The cycle is closed; this only walks on. «Completato» is the header's
             word for finishing a task, and two buttons wearing it would be one too
             many. #}
          <button x-show="cycleConfirmed"
                  x-transition
                  @click="goToNextTask()"
                  class="btn text-xs shrink-0 gap-1 py-1.5 px-3 shadow-md
                         bg-measure-pass text-white hover:opacity-90">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
            </svg>
            {{ _('Task successivo') }}
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
            </svg>
          </button>
        </div>
      </template>
      {# #54 #55: a check / note-with-fields task has its own buttons in the panel #}
      <template x-if="(!isMeasureTask || subtasks.length === 0) && !hasResultPanel">
        {# #60: unico «Completato», largo e alto almeno 64 px per il touch. #}
        <button @click="goToNextTask()"
                :disabled="!canLeaveTask"
                class="btn text-lg font-bold flex-1 w-full min-h-[64px] justify-center gap-2 shadow-md
                       bg-measure-pass text-white hover:opacity-90">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
          </svg>
          {{ _('Completato') }}
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
          </svg>
        </button>
      </template>
    </div>
  </div>

  {# ================================================================
     È ORA DI MISURARE — the interval expired on a task that is not the
     measurement. The operator is told why the screen is about to change, then
     taken there; there is no way to dismiss it, because putting the measurement
     off is exactly what the interval exists to prevent.
     ================================================================ #}
  <div x-show="announcedRedirect"
       x-transition
       x-cloak
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
    <div class="bg-[var(--bg-card)] rounded-2xl shadow-2xl p-8 max-w-sm mx-4 text-center border-2 border-red-500">
      <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 mb-4">
        <svg class="w-8 h-8 text-red-600 animate-pulse" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </div>
      <h3 class="text-lg font-bold text-[var(--text-primary)] mb-1">{{ _('È ora di misurare') }}</h3>
      <p class="text-sm text-[var(--text-secondary)] mb-5">
        {{ _('Ritorno alla misurazione tra') }}
        <span class="font-bold font-mono" x-text="redirectIn"></span> s
      </p>
      <button @click="goToMeasurementTask()"
              class="btn w-full justify-center gap-2 bg-red-600 hover:bg-red-700 text-white font-bold py-2.5">
        {{ _('Vai alla misura') }}
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
        </svg>
      </button>
    </div>
  </div>

  {# ================================================================
     COMPLETION OVERLAY
     ================================================================ #}
  <div x-show="showCompletionOverlay"
       x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       x-cloak
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
    <div class="bg-[var(--bg-card)] rounded-2xl shadow-2xl p-8 max-w-sm mx-4 text-center"
         x-transition:enter="transition ease-out duration-300 delay-100"
         x-transition:enter-start="opacity-0 scale-90"
         x-transition:enter-end="opacity-100 scale-100">

      <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-measure-pass/10 mb-4">
        <svg class="w-8 h-8 text-measure-pass" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </div>

      <h3 class="text-lg font-bold text-[var(--text-primary)] mb-1">{{ _('Misurazioni Complete') }}</h3>
      <p class="text-sm text-[var(--text-secondary)] mb-2">
        {{ _('Tutte le') }} <span class="font-bold font-mono" x-text="totalSubtasks"></span> {{ _('misurazioni sono state registrate.') }}
      </p>

      <div class="flex justify-center gap-4 mb-5">
        <div class="text-center">
          <div class="text-xl font-bold font-mono text-measure-pass" x-text="passCount"></div>
          <div class="text-[10px] uppercase tracking-wider text-[var(--text-muted)]">{{ _('Conformi') }}</div>
        </div>
        <div class="text-center" x-show="warningCount > 0">
          <div class="text-xl font-bold font-mono text-measure-warning" x-text="warningCount"></div>
          <div class="text-[10px] uppercase tracking-wider text-[var(--text-muted)]">{{ _('Attenzione') }}</div>
        </div>
        <div class="text-center" x-show="failCount > 0">
          <div class="text-xl font-bold font-mono text-measure-fail" x-text="failCount"></div>
          <div class="text-[10px] uppercase tracking-wider text-[var(--text-muted)]">{{ _('Non Conf.') }}</div>
        </div>
      </div>

      {# #61: se il server rifiuta l'avvio produzione, l'errore si vede qui, nell'overlay #}
      <p x-show="productionError" x-cloak
         class="mb-2 text-sm text-red-700 dark:text-red-300 text-center" x-text="productionError"></p>

      <div class="flex gap-2">
        <button @click="goToSummary()"
                class="btn btn-secondary flex-1 justify-center gap-2">
          {{ _('Riepilogo') }}
        </button>

        {# Production phase: confirm the cycle. Goes through confirmCycle so the
           server records it - setting the flag here only looked like it had. #}
        <button x-show="productionStarted"
                @click="confirmCycle()"
                class="btn btn-primary flex-1 justify-center gap-2">
          {{ _('Conferma ciclo') }}
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
          </svg>
        </button>

        {# START phase, more tasks to go: advance without blocking or exiting #}
        <button x-show="!productionStarted && !isLastTask"
                @click="goToNextTask()"
                class="btn btn-primary flex-1 justify-center gap-2">
          {{ _('Task successivo') }}
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
          </svg>
        </button>

        {# START phase, last task: start production #}
        <button x-show="!productionStarted && isLastTask"
                @click="startProductionFromOverlay()"
                class="btn flex-1 justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white">
          {{ _('Avvio Produzione') }}
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3l14 9-14 9V3z"/>
          </svg>
        </button>
      </div>

      {# The piece can be turned over here, where the operator actually is when the
         quotes are done - not only from the bar behind the overlay. #}
      <button x-show="productionStarted"
              @click="remeasure()"
              class="mt-3 w-full text-sm text-[var(--text-secondary)] hover:text-primary
                     inline-flex items-center justify-center gap-1.5 py-1">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992V4.356M3.977 14.652H8.97v4.992m10.058-9.348a8.25 8.25 0 00-14.02-3.34L3.977 9.348m0 5.304a8.25 8.25 0 0014.02 3.34l1.03-1.03"/>
        </svg>
        {{ _('Girare il pezzo e rimisurare') }}
      </button>
    </div>
  </div>

  {# ================================================================
     #55 TASK DI CHIUSURA — before the capoturno's modal, the notes marked «alla fine
     della produzione» are filled in and recorded on the run. The modal below is
     untouched: it opens when this panel is done.
     ================================================================ #}
  <div x-show="open" x-cloak
       x-data="taskResultForm()"
       x-init="ctx = () => ({ runId: productionRun ? productionRun.id : null, done: () => closeTasksRecorded() })"
       @task-close-open.window="openClose($event.detail.ids)"
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
    <div class="bg-[var(--bg-card)] rounded-2xl shadow-2xl p-6 w-full max-w-xl mx-4 max-h-[90vh] overflow-y-auto border border-[var(--border-color)]">
      <h3 class="text-lg font-bold text-[var(--text-primary)] mb-3">{{ _('Prima di chiudere la produzione') }}</h3>
      <p x-show="working && !forms.length" class="text-sm text-[var(--text-muted)]">{{ _('Caricamento...') }}</p>
      <template x-for="f in forms" :key="f.task_id">
        <div class="mb-4" x-show="!f.recorded">
          <div class="font-semibold text-[var(--text-primary)] mb-1" x-text="f.title"></div>
          <div class="text-sm text-[var(--text-secondary)] mb-2" x-show="f.directive" x-text="f.directive"></div>
          {{ result_fields() }}
          <textarea x-model="f.note" rows="2" placeholder="{{ _('Nota') }}" class="input w-full text-base"></textarea>
          <p x-show="f.error" class="mt-1 text-sm text-measure-fail" x-text="f.error"></p>
        </div>
      </template>
      <p x-show="error" class="mb-2 text-sm text-measure-fail" x-text="error"></p>
      <div class="flex gap-3 mt-2">
        <button @click="cancelClose()" class="btn btn-secondary flex-1 justify-center">{{ _('Annulla') }}</button>
        <button @click="submitClose()" :disabled="working || !forms.length"
                class="btn flex-1 justify-center font-bold bg-measure-pass text-white hover:opacity-90 disabled:opacity-50">
          {{ _('Registra e prosegui') }}
        </button>
      </div>
    </div>
  </div>

  {# ================================================================
     SUPERVISOR LOGIN MODAL
     ================================================================ #}
  <div x-show="showSupervisorModal"
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       x-cloak
       class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm"
       @click.self="closeSupervisorModal()">
    <div class="bg-[var(--bg-card)] rounded-2xl shadow-2xl p-6 max-w-sm mx-4 w-full border border-[var(--border-color)]">
      <div class="flex items-center gap-3 mb-4">
        <div class="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
          <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-bold text-[var(--text-primary)]">{{ _('Autorizzazione capoturno') }}</h3>
          <p class="text-xs text-[var(--text-secondary)]" x-text="supervisorReason"></p>
        </div>
      </div>

      {# #59: two ways to authorise - PIN (default, touch pad) or password. #}
      <div class="flex gap-2 mb-4" role="tablist">
        <button type="button" role="tab" @click="setSupervisorMode('pin')"
                :disabled="!supervisorPinUsers.length"
                class="btn flex-1 text-sm"
                :class="supervisorMode === 'pin' ? 'btn-primary' : 'btn-secondary'">{{ _('PIN') }}</button>
        <button type="button" role="tab" @click="setSupervisorMode('password')"
                class="btn flex-1 text-sm"
                :class="supervisorMode === 'password' ? 'btn-primary' : 'btn-secondary'">{{ _('Password') }}</button>
      </div>

      <div x-show="supervisorMode === 'pin'" class="mb-5">
        {# name grid #}
        <div x-show="!supervisorPinUser">
          <p class="text-xs text-center text-[var(--text-secondary)] mb-3">{{ _('Chi sei?') }}</p>
          <div class="grid grid-cols-2 gap-3 max-h-64 overflow-y-auto">
            <template x-for="u in supervisorPinUsers" :key="u.id">
              <button type="button" @click="selectSupervisorUser(u)"
                      class="btn btn-secondary min-h-[64px] text-base w-full" x-text="u.display_name"></button>
            </template>
          </div>
        </div>
        {# pad #}
        <div x-show="supervisorPinUser">
          <p class="text-center font-semibold mb-1" x-text="supervisorPinUser && supervisorPinUser.display_name"></p>
          <p class="text-xs text-center text-[var(--text-secondary)] mb-3">{{ _('Inserisci il PIN') }}</p>
          <div class="flex justify-center gap-3 mb-3" aria-hidden="true">
            <template x-for="i in 4" :key="i">
              <span class="h-4 w-4 rounded-full border-2 border-[var(--border-color)]"
                    :class="supervisorPin.length >= i ? 'bg-primary-600 border-primary-600' : ''"></span>
            </template>
          </div>
          <div class="grid grid-cols-3 gap-3 max-w-xs mx-auto">
            <template x-for="d in ['1','2','3','4','5','6','7','8','9']" :key="d">
              <button type="button" @click="pressSupervisorPin(d)" :disabled="supervisorValidating"
                      class="btn btn-secondary h-16 min-w-[64px] text-2xl" x-text="d"></button>
            </template>
            <button type="button" @click="backSupervisorUser()" :disabled="supervisorValidating"
                    class="btn btn-secondary h-16 min-w-[64px] text-sm">{{ _('Indietro') }}</button>
            <button type="button" @click="pressSupervisorPin('0')" :disabled="supervisorValidating"
                    class="btn btn-secondary h-16 min-w-[64px] text-2xl">0</button>
            <button type="button" @click="supervisorPin = supervisorPin.slice(0, -1)" :disabled="supervisorValidating"
                    class="btn btn-secondary h-16 min-w-[64px] text-sm">{{ _('Cancella') }}</button>
          </div>
        </div>
        <p x-show="supervisorError" class="text-sm text-center text-red-600 mt-3" role="alert" x-text="supervisorError"></p>
      </div>

      <div x-show="supervisorMode === 'password'" class="space-y-3 mb-5">
        <div>
          <label class="tmf-label text-xs">{{ _('Username') }}</label>
          <input type="text" x-model="supervisorUsername" class="tmf-input text-sm"
                 placeholder="{{ _('Username capoturno') }}" @keydown.enter="submitSupervisor()">
        </div>
        <div>
          <label class="tmf-label text-xs">{{ _('Password') }}</label>
          <input type="password" x-model="supervisorPassword" class="tmf-input text-sm"
                 placeholder="••••••••" @keydown.enter="submitSupervisor()">
        </div>
        <p x-show="supervisorError" class="text-xs text-red-600" x-text="supervisorError"></p>
      </div>

      <div class="flex gap-2">
        {# Out of tolerance, the way out of this modal is measuring the quote
           again - not cancelling. Closing it changes nothing: the quote stays
           blocked, and the banner behind says so. #}
        <button @click="closeSupervisorModal()"
                class="btn btn-secondary flex-1 text-sm">
          <span x-show="supervisorAction !== 'out_of_tolerance'">{{ _('Annulla') }}</span>
          <span x-show="supervisorAction === 'out_of_tolerance'">{{ _('Rimisura la quota') }}</span>
        </button>
        <button @click="submitSupervisor()"
                :disabled="!supervisorCanSubmit || supervisorValidating"
                class="btn btn-primary flex-1 text-sm gap-1">
          <svg x-show="supervisorValidating" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
          </svg>
          <span x-text="supervisorMode === 'pin' ? '{{ _('Conferma') }}' : '{{ _('Autorizza') }}'"></span>
        </button>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='vendor/pdf-3.11.174.min.js') }}"></script>
<script>
  pdfjsLib.GlobalWorkerOptions.workerSrc = '{{ url_for('static', filename='vendor/pdf.worker-3.11.174.min.js') }}';
</script>
<script src="{{ url_for('static', filename='js/numpad.js') }}"></script>
<script src="{{ url_for('static', filename='js/annotation-viewer.js') }}?v=6"></script>
<script src="{{ url_for('static', filename='js/caliper.js') }}"></script>
{# #46: acquisition + overlay for camera_measure / dxf_compare #}
<script>
  window.__visionCfg = {
    executeUrl: '{{ url_for("measure.api_vision_execute") }}',
    grabUrl: '{{ url_for("measure.api_vision_grab") }}',
    checkUrl: '{{ url_for("measure.api_vision_check") }}',  {# #97: analisi senza salvare #}
    cameraAvailable: {{ (camera_enabled|default(false))|tojson }},
    modo: {{ (camera_mode|default('impulsiva'))|tojson }},
    imageUrlTpl: '{{ url_for("measure.api_vision_result_image", result_id=0) }}',
    taskId: {{ task.id|tojson }},
    taskType: {{ (task.task_type or '')|tojson }},
    taskName: {{ (task.title or '')|tojson }},  {# #119: nome proposto per «Salva» #}
    subtasks: window.__taskSubtasks,
    labels: { requestFailed: {{ _('Richiesta non riuscita')|tojson }} },
  };
</script>
{# #116: disegno overlay ed etichette quote; prima di vision_execute.js, che lo usa se presente #}
<script src="{{ url_for('static', filename='js/vision_overlay.js') }}"></script>
{# #119: «Salva» immagine (frame grezzo PNG) #}
<script src="{{ url_for('static', filename='js/save_image.js') }}"></script>
{# #122: visualizzatore standard <tmf-viewer>, dopo vision_overlay.js e save_image.js #}
<script src="{{ url_for('static', filename='js/image_viewer.js') }}"></script>
<script src="{{ url_for('static', filename='js/vision_execute.js') }}"></script>
{# #53 #54 #55: result of check / note tasks (urls and words for the component) #}
<script>
  window.__taskResultsCfg = {
    saveUrl: '{{ url_for("measure.api_save_task_result") }}',
    listUrl: '{{ url_for("measure.api_list_task_results") }}',
    uploadUrl: '{{ url_for("measure.api_upload_attachment") }}',
    taskUrlTpl: '{{ url_for("measure.api_get_task", task_id=0) }}',
    labels: {
      connection: {{ _('Errore di connessione')|tojson }},
      sessionExpired: {{ _('Sessione scaduta: ricaricare la pagina')|tojson }},
      serverError: {{ _('Errore di comunicazione con il server')|tojson }},
      nokNeedsNote: {{ _('Per un NOK serve la nota')|tojson }},
      notANumber: {{ _('Valore non numerico')|tojson }},
      outcomeOk: {{ _('OK')|tojson }},
      outcomeNok: {{ _('NOK')|tojson }},
      outcomeDone: {{ _('Registrato')|tojson }},
    },
  };
</script>
<script src="{{ url_for('static', filename='js/task-results.js') }}"></script>
{# The clock's rules - how a delay reads, when the buzzer goes, where the
   measurement lives - are shared with the other screens rather than restated. #}
<script src="{{ url_for('static', filename='js/production-clock.js') }}"></script>

<script>
/**
 * Task Execute - Main Alpine.js component
 * Manages measurement workflow state, save logic, and navigation.
 * Layout: 3-column (marker sidebar | image center | info+numpad right)
 */
function taskExecute() {
  return {
    // ---- Data from server ----
    task: window.__taskData,
    subtasks: window.__taskSubtasks,
    lotNumber: {{ (lot_number or '')|tojson }},
    serialNumber: {{ (serial_number or '')|tojson }},
    // ---- Measurement state ----
    currentIndex: 0,
    measurements: [],   // [{subtask_id, value, pass_fail, deviation}, ...]
    visionRecorded: false,   // #120: task visione: il pezzo e' stato registrato («Registra»), le quote sono in measurements
    saving: false,
    // The single reentrancy guard for handleMeasurement (#13): true for the
    // whole time a reading is being processed, including the 1s feedback
    // pause after the save where "saving" alone used to go false too early.
    // "saving" stays as it was - it only drives the UI spinner.
    busy: false,
    errorMessage: '',
    showCompletionOverlay: false,

    // ---- Measurement timer ----
    // The interval is only used for display: the deadline itself lives on the server,
    // so it survives the page. See loadProductionRun().
    measurementIntervalMinutes: {{ measurement_interval_minutes|tojson if measurement_interval_minutes else 'null' }},
    timerActive: false,
    timerRemaining: 0,
    _timerInterval: null,
    _timerDeadline: null,  // wall-clock ms the countdown is aimed at (#37.7)
    cycleCount: 0,
    productionStarted: false,

    // ---- Production run (server-side state) ----
    // Navigating between tasks is a full page load, so anything kept only here dies.
    // This is read back from the server on every load instead.
    productionRun: null,
    productionError: '',
    // The measurement tasks of this recipe, in order: the loop the operator stays
    // in once production starts, and what says which task closes a cycle.
    measurementTaskIds: [],
    // #55: notes to fill in before the capoturno closes the production, and whether
    // they were already recorded (so cancelling the modal does not ask them again).
    closeTaskIds: [],
    closeTasksDone: false,
    // The interval has elapsed and it has been said out loud - buzzer, and the
    // operator on their way back to the measurement. Kept so it is said once.
    dueAnnounced: false,
    redirectIn: 0,

    // ---- Cycle & workflow state ----
    cycleConfirmed: false,
    showSupervisorModal: false,
    supervisorAction: '',       // 'out_of_tolerance', 'fermo_linea', 'fine_produzione'
    supervisorUsername: '',
    supervisorPassword: '',
    // #59: the capoturno can authorise with name + 4-digit PIN instead of the password.
    supervisorMode: 'pin',      // 'pin' | 'password'
    supervisorPinUsers: [],     // [{id, display_name}] from /measure/api/pin-users
    supervisorPinUser: null,
    supervisorPin: '',          // never kept past the modal: cleared on open and close
    supervisorError: '',
    supervisorValidating: false,
    /* The out-of-tolerance measurement waiting for the capoturno:
       { id, subtask_id }, or null. While it is set the operator stays on that
       quote - the server refuses the next one anyway. */
    pendingFail: null,

    // ---- Value from numpad / caliper ----
    currentValue: null,

    // ---- Input timing (ms spent on the active subtask) ----
    inputStartedAt: null,

    // ---- Image switching logic ----
    get currentSubtaskImage() {
      return this.currentSubtask?.image_path || null;
    },
    get showSubtaskImage() {
      return !!this.currentSubtaskImage;
    },
    get showTaskImage() {
      return !this.currentSubtaskImage && !!this.task.file_path;
    },

    // ---- Computed properties ----
    get currentSubtask() {
      return this.subtasks[this.currentIndex] || null;
    },

    get nextSubtask() {
      return this.subtasks[this.currentIndex + 1] || null;
    },

    get totalSubtasks() {
      return this.subtasks.length;
    },

    get completedCount() {
      return this.measurements.length;
    },

    get isComplete() {
      return this.completedCount >= this.totalSubtasks;
    },

    get progressPercent() {
      return this.totalSubtasks > 0
        ? (this.completedCount / this.totalSubtasks * 100)
        : 0;
    },

    /* How many quotes are still owed, worded rather than counted down in silence.
       This is what the greyed «Fine ciclo misura» says instead of nothing. */
    get missingQuotes() {
      return Math.max(0, this.totalSubtasks - this.completedCount);
    },

    get missingQuotesLabel() {
      // #120: task visione non registrato: le quote arrivano tutte col «Registra», non una a una
      if (this.isVisionTask && !this.visionRecorded) return {{ _('Registra il pezzo')|tojson }};
      const n = this.missingQuotes;
      return n === 1
        ? {{ _('Manca 1 quota')|tojson }}
        : {{ _('Mancano')|tojson }} + ' ' + n + ' ' + {{ _('quote')|tojson }};
    },

    /* Whether «Completato» can take the operator on.

       A documental task is done when they say it is. A measurement task is done
       when its cycle is closed - otherwise the button would be a way round «Fine
       ciclo misura», and the quotes it exists to collect would be optional. */
    get canLeaveTask() {
      if (this.blockedByTolerance) return false;
      // #120: un task visione si lascia solo dopo «Registra» (anche dxf_compare, prima sempre attivo)
      if (this.isVisionTask && !this.visionRecorded) return false;
      if (this.isMeasureTask && this.subtasks.length > 0) {
        return this.cycleConfirmed;
      }
      return true;
    },

    get blockedReason() {
      if (this.blockedByTolerance) {
        return {{ _("Serve l'autorizzazione del capoturno")|tojson }};
      }
      if (this.isVisionTask && !this.visionRecorded) return this.missingQuotesLabel;  // #120
      if (!this.isComplete) return this.missingQuotesLabel;
      return {{ _('Chiudi prima il ciclo di misura')|tojson }};
    },

    // ---- Pass/fail logic ----
    get passFailStatus() {
      if (this.currentValue === null || !this.currentSubtask) return null;
      const v = this.currentValue;
      const s = this.currentSubtask;
      if (s.utl != null && v > s.utl) return 'fail';
      if (s.ltl != null && v < s.ltl) return 'fail';
      if (s.uwl != null && v > s.uwl) return 'warning';
      if (s.lwl != null && v < s.lwl) return 'warning';
      return 'pass';
    },

    get deviation() {
      if (this.currentValue === null || !this.currentSubtask) return null;
      return this.currentValue - (this.currentSubtask.nominal || 0);
    },

    get progressWidth() {
      if (!this.currentSubtask || this.currentValue === null) return 50;
      const s = this.currentSubtask;
      if (s.utl == null || s.ltl == null) return 50;
      const range = s.utl - s.ltl;
      if (range <= 0) return 50;
      const pos = (this.currentValue - s.ltl) / range * 100;
      return Math.max(0, Math.min(100, pos));
    },

    // ---- Summary counts ----
    get passCount() {
      return this.measurements.filter(m => m.pass_fail === 'pass').length;
    },
    get warningCount() {
      return this.measurements.filter(m => m.pass_fail === 'warning').length;
    },
    get failCount() {
      return this.measurements.filter(m => m.pass_fail === 'fail').length;
    },

    // ---- Init ----
    async init() {
      this.subtasks.sort((a, b) => (a.order_index || 0) - (b.order_index || 0));
      this.inputStartedAt = Date.now();
      // Rejoin whatever production is already open at this station.
      await this.loadProductionRun();
      await this.loadCurrentCycle();
      await this.loadPendingAuthorisation();
      // A tablet left to sleep drifts (#37.7): catch the countdown back up to
      // the server's own clock, the same source adoptProductionRun already
      // trusts on load, as soon as the tab is visible again.
      var self = this;
      document.addEventListener('visibilitychange', function () {
        if (document.visibilityState === 'visible') self.loadProductionRun();
      });
    },

    /* Quotes already measured in the cycle under way (#40).

       A reload, a timer redirect or an auto-logout used to bring every quote back
       and measuring them again put duplicates in the SPC statistics. Only inside
       a production: outside one there is no cycle, and the screen starts empty as
       it always did. */
    async loadCurrentCycle() {
      if (!this.isMeasureTask || !this.subtasks.length || !this.productionRun) return;
      try {
        const resp = await fetch(
          '{{ url_for("measure.api_current_cycle", task_id=task.id) }}',
        );
        if (!resp.ok) return;
        const data = await resp.json();
        const known = new Set(this.subtasks.map(s => s.id));
        const restored = (data.measurements || []).filter(m => known.has(m.subtask_id));
        if (!restored.length) return;
        this.measurements = restored.map(m => {
          const st = this.subtasks.find(s => s.id === m.subtask_id);
          const nominal = st ? (st.nominal || 0) : 0;
          return {
            subtask_id: m.subtask_id,
            value: m.value,
            pass_fail: m.pass_fail,
            deviation: m.value == null ? null : m.value - nominal,  // #118: quota non misurata = NaN, nessuna deviazione
          };
        });
        if (this.isVisionTask) this.visionRecorded = true;  // #120: misure ripristinate = pezzo gia' registrato
        const next = this.subtasks.findIndex(
          s => !this.measurements.some(m => m.subtask_id === s.id),
        );
        this.currentIndex = next !== -1 ? next : this.subtasks.length - 1;
      } catch (e) {
        // Offline: the screen starts empty, as before.
      }
    },

    /* Is a quote already waiting for the capoturno?

       Reloading the page was the simplest way past the old gate. It is not one
       now - the server refuses the next measurement either way - so the screen
       picks the block back up as soon as it opens, on the quote it belongs to. */
    async loadPendingAuthorisation() {
      if (!this.isMeasureTask || !this.subtasks.length) return;
      try {
        const params = new URLSearchParams({ version_id: this.task.version_id });
        if (this.productionRun) {
          params.set('production_run_id', this.productionRun.id);
        }
        const resp = await fetch(
          '{{ url_for("measure.api_pending_authorisation") }}?' + params.toString(),
        );
        if (!resp.ok) return;
        const pending = await resp.json();
        if (!pending || !pending.id) return;

        this.pendingFail = { id: pending.id, subtask_id: pending.subtask_id };
        const idx = this.subtasks.findIndex(s => s.id === pending.subtask_id);
        if (idx !== -1) this.currentIndex = idx;
        this.openSupervisorModal('out_of_tolerance');
      } catch (e) {
        // Offline: the banner is missing, but so is the ability to save anything.
      }
    },

    // ---- Production run: read the state back from the server ----

    async loadProductionRun() {
      try {
        const resp = await fetch('{{ url_for("measure.api_current_production") }}');
        if (!resp.ok) {
          // #61: si mostra il detail del server (es. 503 "Stazione non configurata"),
          // che e' la causa vera; fallback generico se il corpo non e' JSON.
          const errBody = await resp.json().catch(() => null);
          this.productionError = (errBody && errBody.detail) || '{{ _("Errore di comunicazione con il server") }}';
          return;
        }
        const run = await resp.json();
        if (run && run.id) this.adoptProductionRun(run);
      } catch (e) {
        // #61: offline o server giu: pagina usabile, ma l'errore e' visibile.
        this.productionError = '{{ _("Errore di connessione") }}';
      }
    },

    /* Take the server's word for the state of the production. Called on load and
       after every action that changes it, so the page never drifts from the truth. */
    adoptProductionRun(run) {
      this.productionRun = run;
      this.productionStarted = run.status !== 'closed';
      this.cycleCount = run.cycle_count;
      this.measurementTaskIds = run.measurement_task_ids || [];
      this.closeTaskIds = run.close_task_ids || [];  // #55

      const seconds = run.seconds_to_next_measurement;
      if (seconds === null || seconds === undefined) {
        this.stopMeasurementTimer();
        return;
      }
      if (run.status !== 'running') {
        // Paused: keep the figure on screen, frozen, so the banner can show how
        // much of the interval is being held rather than going blank.
        this.stopMeasurementTimer();
        this.timerRemaining = seconds;
        return;
      }
      // The server hands over seconds already computed rather than a timestamp: a
      // naive datetime would be read in the browser's timezone and the countdown
      // would be off by the UTC offset.
      this.startCountdownFrom(seconds);
    },

    // ---- Check if a subtask has been measured ----
    isMeasured(subtaskId) {
      return this.measurements.some(m => m.subtask_id === subtaskId);
    },

    getMeasuredValue(subtaskId) {
      const m = this.measurements.find(m => m.subtask_id === subtaskId);
      return m ? m.value : null;
    },

    getMeasurementStatus(subtaskId) {
      const m = this.measurements.find(m => m.subtask_id === subtaskId);
      return m ? m.pass_fail : null;
    },

    /* The keypad refused a value because this recipe wants the caliper. Said on
       the same line as any other measurement error, so there is one place to look
       when a value does not go in. */
    onNumpadRejected(detail) {
      if (detail && detail.reason === 'manual_not_allowed') {
        this.errorMessage = '{{ _("Questa ricetta non ammette valori digitati: usare il calibro") }}';
      }
    },

    /* The numpad refused the reading itself (e.g. a caliper burst whose
       integer part does not fit) rather than a rule about who may type it.
       Same error line, so there is still one place to look. */
    onNumpadError(detail) {
      this.errorMessage = '{{ _("Lettura del calibro rifiutata: valore troppo grande") }}';
    },

    // ---- Handle numpad confirm ----
    async handleMeasurement(value, inputMethod) {
      if (!this.currentSubtask) return;

      // Single reentrancy guard (#13): a second reading arriving while the
      // first one is still being saved - or while the operator is stuck
      // behind the modal/overlay the first one opened - must not become its
      // own measurement (double record, one quote skipped). It is not
      // silently dropped either: the same error line other rejections use
      // says so.
      if (this.busy || this.showCompletionOverlay || this.showSupervisorModal ||
          this.isPaused || this.cycleConfirmed) {
        this.errorMessage = '{{ _("Lettura ignorata: attendere") }}';
        return;
      }

      this.busy = true;
      this.currentValue = value;
      this.errorMessage = '';

      const pf = this.passFailStatus;
      const dev = this.deviation;
      const inputDurationMs = this.inputStartedAt !== null
        ? Math.max(0, Math.round(Date.now() - this.inputStartedAt))
        : null;

      this.saving = true;

      try {
        const csrfToken = document.querySelector('meta[name=csrf-token]')?.content || '';

        const response = await fetch('{{ url_for("measure.save_measurement") }}', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken,
          },
          body: JSON.stringify({
            subtask_id: this.currentSubtask.id,
            version_id: this.task.version_id,
            value: value,
            lot_number: this.lotNumber,
            serial_number: this.serialNumber,
            input_method: inputMethod || 'manual',
            input_duration_ms: inputDurationMs,
            // Ties the value to the production under way, so fine produzione can
            // emit the statistics file for the whole run.
            production_run_id: this.productionRun ? this.productionRun.id : null,
          }),
        });

        let result;
        try {
          result = await response.json();
        } catch (parseErr) {
          // The server answered but not with JSON: a CSRF-expired POST gets
          // the login page's HTML back, not a payload. Distinguish that from
          // a dead network so the operator is told to reload rather than to
          // retry blindly; the unsaved reading stays on screen either way.
          this.errorMessage = '{{ _("Sessione scaduta: ricaricare la pagina") }}';
          this.saving = false;
          this.busy = false;
          return;
        }

        if (result && (result.csrf_expired || result.session_expired)) {
          this.errorMessage = '{{ _("Sessione scaduta: ricaricare la pagina") }}';
          this.saving = false;
          this.busy = false;
          return;
        }

        if (!response.ok || result.error) {
          this.errorMessage = result.detail || '{{ _("Errore nel salvataggio della misurazione") }}';
          this.saving = false;
          this.busy = false;
          return;
        }

        // The server decides pass/fail from the recipe's official tolerances;
        // passFailStatus is only a live preview while the value is on screen,
        // not what a capoturno block or the pass/warning/fail counts should
        // be keyed on.
        const serverPassFail = result.pass_fail || pf;

        // Record measurement locally
        const existingIdx = this.measurements.findIndex(m => m.subtask_id === this.currentSubtask.id);
        const mEntry = { subtask_id: this.currentSubtask.id, value, pass_fail: serverPassFail, deviation: dev };
        if (existingIdx !== -1) {
          this.measurements.splice(existingIdx, 1, mEntry);
        } else {
          this.measurements.push(mEntry);
        }

        this.saving = false;

        // Pause to show result feedback
        await new Promise(r => setTimeout(r, 1000));

        // Out of tolerance: nothing moves until the capoturno says so, or until
        // this same quote is measured again and comes out inside tolerance.
        if (serverPassFail === 'fail') {
          this.pendingFail = { id: result.id, subtask_id: this.currentSubtask.id };
          this.openSupervisorModal('out_of_tolerance');
          this.busy = false;
          return;
        }

        // A second reading of the blocked quote, this time in tolerance: the quote
        // is in tolerance now, so the block goes. Both readings stay on record -
        // how many attempts are allowed is point 4's business, not this one's.
        if (this.pendingFail && this.pendingFail.subtask_id === this.currentSubtask.id) {
          this.pendingFail = null;
        }

        // Check if all done
        if (this.completedCount >= this.totalSubtasks) {
          // START run (production not yet started): don't block with the
          // "Misurazioni Complete" overlay — just advance to the next task.
          // The overlay is shown only on the last task (to offer "Avvio
          // Produzione") or once production is running ("Conferma ciclo").
          if (!this.productionStarted && !this.isLastTask) {
            this.goToNextTask();
            this.busy = false;
            return;
          }
          this.showCompletionOverlay = true;
          this.busy = false;
          return;
        }

        this.advanceToNext();
        this.busy = false;

      } catch (err) {
        console.error('Save measurement error:', err);
        this.errorMessage = '{{ _("Errore di rete. Riprovare.") }}';
        this.saving = false;
        this.busy = false;
      }
    },

    // ---- Advance to next unmeasured subtask ----
    advanceToNext() {
      this.currentValue = null;
      this.inputStartedAt = Date.now();

      for (let i = this.currentIndex + 1; i < this.totalSubtasks; i++) {
        if (!this.isMeasured(this.subtasks[i].id)) {
          this.currentIndex = i;
          return;
        }
      }
      for (let i = 0; i < this.currentIndex; i++) {
        if (!this.isMeasured(this.subtasks[i].id)) {
          this.currentIndex = i;
          return;
        }
      }
    },

    /* Out of tolerance and nobody has authorised it: the operator stays put.

       This is the whole of point 5. The screen used to open a modal that could be
       dismissed, and the measurement was already saved by then, so a value outside
       tolerance could be left behind by clicking the backdrop. The server refuses
       the next measurement now; these checks only spare the operator the trip. */
    get blockedByTolerance() {
      return this.pendingFail !== null;
    },

    /* Say why nothing is moving, and offer the way out. */
    refuseWhileBlocked() {
      // |tojson, not quotes: the Italian carries an apostrophe, and an apostrophe
      // inside a single-quoted literal is how every Alpine binding on the page dies.
      this.errorMessage = {{ _("Quota fuori tolleranza: serve l'autorizzazione del capoturno, oppure misurare di nuovo la quota")|tojson }};
      this.openSupervisorModal('out_of_tolerance');
    },

    // ---- Navigation ----
    goToSubtask(index) {
      if (index < 0 || index >= this.totalSubtasks) return;
      // Moving to another quote is exactly what a blocked quote forbids; going
      // back to the blocked one to measure it again is not.
      if (this.blockedByTolerance
          && this.subtasks[index].id !== this.pendingFail.subtask_id) {
        this.refuseWhileBlocked();
        return;
      }
      this.currentIndex = index;
      this.currentValue = null;
      this.errorMessage = '';
      this.inputStartedAt = Date.now();
    },

    goToSubtaskByMarker(markerNumber) {
      const idx = this.subtasks.findIndex(s => s.marker_number === markerNumber);
      if (idx !== -1) {
        this.goToSubtask(idx);
      }
    },

    // ---- Confirm measurement cycle (Fine ciclo misura) ----
    /* A cycle spans every measurement task of the recipe, so this one only closes
       it if it is the last. The server decides that - it knows the sequence - and
       the cycle count coming back tells us which of the two happened. */
    async confirmCycle() {
      // Closing the cycle would be another way of walking past a quote that is out
      // of tolerance. The server refuses it too.
      if (this.blockedByTolerance) {
        this.refuseWhileBlocked();
        return;
      }
      this.cycleConfirmed = true;
      this.showCompletionOverlay = false;

      // Recorded server-side so the count and the next deadline outlive this page.
      if (this.productionRun) {
        const countBefore = this.cycleCount;
        const run = await this.postProduction(
          '{{ url_for("measure.api_complete_cycle", run_id=0) }}'.replace('/0/', '/' + this.productionRun.id + '/'),
          { task_id: this.task.id },
        );
        if (run) {
          this.adoptProductionRun(run);
          // Cycle still open: on to the next measurement task, interval untouched.
          if (run.cycle_count === countBefore && this.nextMeasurementTaskId) {
            this.goToTask(this.nextMeasurementTaskId);
          }
          return;
        }

        // The server refused to close the cycle (line stopped, production
        // closed, network down): the screen must not show a cycle that never
        // actually closed. productionError already carries why.
        this.cycleConfirmed = false;
        this.showCompletionOverlay = true;
        return;
      }

      // No production open (recipe run outside a production): keep the old local
      // behaviour rather than leaving the operator without a timer.
      this.cycleCount++;
      if (this.measurementIntervalMinutes && this.measurementIntervalMinutes > 0) {
        this.startCountdownFrom(this.measurementIntervalMinutes * 60);
      }
    },

    /* Rimisura: turn the piece over and measure it again, inside the same cycle.

       Not a new cycle - the deadline and the count stay where they are, so a second
       reading of the same part does not buy another interval's worth of time. Both
       readings stay in the statistics: that is what they are for. */
    async remeasure() {
      if (this.productionRun) {
        const run = await this.postProduction(
          '{{ url_for("measure.api_remeasure", run_id=0) }}'.replace('/0/', '/' + this.productionRun.id + '/'),
          { task_id: this.task.id },
        );
        // Refused - the line is stopped, or the production is closed. The screen
        // stays as it is: clearing it would hide the reason.
        if (!run) return;
        this.adoptProductionRun(run);
      }
      this.resetForNewCycle();
    },

    /* POST to a production endpoint, returning the updated run or null on failure. */
    async postProduction(url, body) {
      this.productionError = '';
      try {
        const csrfToken = document.querySelector('meta[name=csrf-token]')?.content || '';
        const resp = await fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
          body: JSON.stringify(body || {}),
        });
        const data = await resp.json().catch(() => null);
        // Not JSON at all (CSRF-expired POSTs get the login page's HTML
        // back), or the server flagged the session as gone: same "reload"
        // message handleMeasurement gives for the same failure (#12).
        if (!data || data.csrf_expired || data.session_expired) {
          this.productionError = '{{ _("Sessione scaduta: ricaricare la pagina") }}';
          return null;
        }
        if (!resp.ok) {
          this.productionError = (data && data.detail) || '{{ _("Errore di comunicazione con il server") }}';
          return null;
        }
        return data;
      } catch (e) {
        this.productionError = '{{ _("Errore di connessione") }}';
        return null;
      }
    },

    // ---- Measurement timer ----
    /* Ticks locally for a smooth display, but the number it starts from always comes
       from the server, and every page load resynchronises it.
       It does not stop at zero: past the deadline it keeps counting the other way,
       and the banner reads the delay off it. */
    startCountdownFrom(seconds) {
      this.stopMeasurementTimer();
      this.timerRemaining = seconds;
      this.timerActive = true;
      // The wall clock, not a tick count (#37.7): a tablet asleep for a few
      // minutes has to catch the countdown up in one jump when it wakes, not
      // replay the ticks it missed while suspended - setInterval does not
      // fire while a tab is backgrounded, so a tick-based countdown drifted
      // behind by exactly however long the tab was hidden.
      this._timerDeadline = Date.now() + seconds * 1000;
      // Landing on a page that is already late is the same event as going late
      // while sitting on it; being back in time re-arms the announcement.
      if (seconds <= 0) {
        this.onMeasurementDue();
      } else {
        this.dueAnnounced = false;
        this.redirectIn = 0;
      }
      var self = this;
      this._timerInterval = setInterval(function () { self.onSecond(); }, 1000);
    },

    onSecond() {
      const wasAnnounced = this.dueAnnounced;
      this.timerRemaining = Math.ceil((this._timerDeadline - Date.now()) / 1000);
      if (this.timerRemaining <= 0) this.onMeasurementDue();

      if (wasAnnounced && this.redirectIn > 0) {
        this.redirectIn--;
        if (this.redirectIn === 0) this.goToMeasurementTask();
      }
    },

    stopMeasurementTimer() {
      if (this._timerInterval) {
        clearInterval(this._timerInterval);
        this._timerInterval = null;
      }
      this.timerActive = false;
    },

    /* The interval has run out. Said once, then acted on.

       Someone already measuring is late, not lost: the banner turns red and they
       are left alone. Taking them elsewhere mid-cycle would wipe quotes they can
       see on the screen and gain nothing.

       Otherwise a new cycle starts, and it starts at the first measurement task of
       the recipe - re-arming wherever the operator happens to be standing would
       skip whatever comes before it and still count as a full cycle. */
    onMeasurementDue() {
      if (this.dueAnnounced) return;
      this.dueAnnounced = true;
      window.ProductionClock.playBuzzer();

      if (this.isMeasurementTaskOfRun && !this.cycleConfirmed) return;

      if (this.task.id === this.measurementTaskIds[0]) {
        this.resetForNewCycle();
        return;
      }
      this.redirectIn = this.measurementTaskUrl ? 5 : 0;
    },

    /* #120: «Registra» del pannello visione: le misure salvate dal server diventano le misure del
       ciclo (conteggio quote, «Fine ciclo misura»/«Completato»). value null = quota non misurata. */
    onVisionRecorded(detail) {
      const ms = (detail && detail.measurements) || [];
      this.measurements = ms.map(m => {
        const st = this.subtasks.find(s => s.id === m.subtask_id);
        const nominal = st ? (st.nominal || 0) : 0;
        return {
          subtask_id: m.subtask_id,
          value: m.value == null ? null : m.value,
          pass_fail: m.pass_fail,
          deviation: m.value == null ? null : m.value - nominal,
        };
      });
      this.visionRecorded = true;
    },

    /* Clear the screen for another pass over the same quotes.
       Local only: everything already measured is on the server, and the next
       reading is saved beside it rather than replacing it. */
    resetForNewCycle() {
      this.cycleConfirmed = false;
      this.showCompletionOverlay = false;
      this.measurements = [];
      this.visionRecorded = false;   // #120: nuovo ciclo = pezzo da registrare di nuovo
      this.currentIndex = 0;
      this.currentValue = null;
      this.errorMessage = '';
      this.inputStartedAt = Date.now();
      window.dispatchEvent(new CustomEvent('task-result-reset'));  // #54: a check / note loops on the spot
    },

    // ---- Where the measurement lives ----

    get isMeasurementTaskOfRun() {
      return this.measurementTaskIds.indexOf(this.task.id) !== -1;
    },

    get measurementTaskUrl() {
      return window.ProductionClock.measurementUrl(
        this.productionRun, '{{ url_for("measure.task_execute", task_id=0) }}',
      );
    },

    /* The next measurement task of the recipe, or null if this is the last one -
       which is the one that closes the cycle and restarts the interval. */
    get nextMeasurementTaskId() {
      const ids = this.measurementTaskIds;
      const idx = ids.indexOf(this.task.id);
      if (idx === -1 || idx >= ids.length - 1) return null;
      return ids[idx + 1];
    },

    get isOverdue() {
      return this.timerActive && this.timerRemaining <= 0;
    },

    get announcedRedirect() {
      return this.dueAnnounced && this.redirectIn > 0;
    },

    goToMeasurementTask() {
      const url = this.measurementTaskUrl;
      if (url) window.location.href = url;
    },

    goToTask(taskId) {
      window.location.href =
        '{{ url_for("measure.task_execute", task_id=0) }}'.replace('/0', '/' + taskId);
    },

    // ---- Avvio Produzione ----
    /* Opens a production run on the server. That row is what makes the timer, the
       cycle count and the history survive a change of task.
       The hand-off to the ERP (GAIA) plugs in on top of this, once the protocol is
       agreed: everything before it works without waiting for that. */
    async startProduction() {
      const run = await this.postProduction(
        '{{ url_for("measure.api_start_production") }}',
        {
          recipe_id: this.task.recipe_id,
          version_id: this.task.version_id,
          lot_number: this.lotNumber || null,
          serial_number: this.serialNumber || null,
        },
      );
      if (run) {
        this.adoptProductionRun(run);
        return true;
      }
      return false;
    },

    // Is the current task the last one in the recipe sequence?
    get isLastTask() {
      const taskIds = window.__allTaskIds || [];
      const idx = taskIds.indexOf(this.task.id);
      return idx === -1 || idx >= taskIds.length - 1;
    },

    // Start production from the completion overlay (last START task) and begin
    // the measurement-interval cycle if the recipe defines one.
    async startProductionFromOverlay() {
      this.showCompletionOverlay = false;
      const opened = await this.startProduction();
      if (!opened) {
        // #61: server rifiuta -> niente timer locale finto; si riapre l'overlay
        // con l'errore (productionError) cosi' l'operatore puo' riprovare.
        this.showCompletionOverlay = true;
        return;
      }
      // The START-phase measurements have just been taken: record them as the first
      // cycle, which is also what starts the interval running.
      await this.confirmCycle();
    },

    /* mm:ss of the distance from the deadline, either side of it. The direction is
       carried by the wording in the banner, not by a minus sign. */
    get timerDisplay() {
      return window.ProductionClock.format(this.timerRemaining);
    },

    /* #53: result recorded on a check / note task. In the loop of a production the
       task counts as a step of the cycle exactly like a measurement task: the last
       one closes the cycle (the server decides, as in confirmCycle), the others go
       to the next one. If the server refuses, the panel stays with «Prosegui». */
    async advanceAfterResult() {
      if (this.productionRun && this.isMeasurementTaskOfRun) {
        const countBefore = this.cycleCount;
        const run = await this.postProduction(
          '{{ url_for("measure.api_complete_cycle", run_id=0) }}'.replace('/0/', '/' + this.productionRun.id + '/'),
          { task_id: this.task.id },
        );
        if (!run) return;
        this.adoptProductionRun(run);
        if (run.cycle_count === countBefore && this.nextMeasurementTaskId) {
          this.goToTask(this.nextMeasurementTaskId);
          return;
        }
      }
      this.goToNextTask();
    },

    /* #55: the end-of-production notes are recorded: now the capoturno's modal. */
    closeTasksRecorded() {
      this.closeTasksDone = true;
      this.openSupervisorModal('fine_produzione');
    },

    // ---- Navigate to next task (Completato) ----
    /* With a production open the operator stays in the measurement loop until the
       capoturno closes it: after the last measurement task they go back to the
       first, not out to the summary. Before production starts, and on the
       documental tasks that come before the measurement, the plain sequence
       applies - that is the run-up, not the loop. */
    goToNextTask() {
      if (this.blockedByTolerance) {
        this.refuseWhileBlocked();
        return;
      }
      if (this.productionStarted && this.isMeasurementTaskOfRun) {
        const next = this.nextMeasurementTaskId || this.measurementTaskIds[0];
        // A recipe with a single measurement task loops on the spot: reloading the
        // same page to arrive at the same state would only cost a round trip.
        if (next === this.task.id) {
          this.resetForNewCycle();
          return;
        }
        this.goToTask(next);
        return;
      }

      const taskIds = window.__allTaskIds || [];
      const currentIdx = taskIds.indexOf(this.task.id);
      if (currentIdx >= 0 && currentIdx < taskIds.length - 1) {
        this.goToTask(taskIds[currentIdx + 1]);
      } else {
        this.goToSummary();
      }
    },

    // ---- Open/close supervisor modal (always reset fields) ----
    openSupervisorModal(action) {
      // #61: fermo/ripresa/fine produzione agiscono su un run: senza run aperto
      // si dice subito, prima di chiedere le credenziali.
      if (['fermo_linea', 'ripresa', 'fine_produzione'].includes(action) && !this.productionRun) {
        this.productionError = '{{ _("Nessuna produzione aperta su questa stazione") }}';
        return;
      }
      // #55: first the notes marked «alla fine della produzione»; the panel calls back
      // here (closeTasksRecorded) when they are recorded.
      if (action === 'fine_produzione' && this.closeTaskIds.length && !this.closeTasksDone) {
        window.dispatchEvent(new CustomEvent('task-close-open', { detail: { ids: this.closeTaskIds } }));
        return;
      }
      this.supervisorAction = action;
      this.supervisorUsername = '';
      this.supervisorPassword = '';
      this.supervisorError = '';
      this.resetSupervisorPin();  // #59: PIN fields cleared, names reloaded
      this.showSupervisorModal = true;
    },

    closeSupervisorModal() {
      this.showSupervisorModal = false;
      this.supervisorUsername = '';
      this.supervisorPassword = '';
      this.supervisorError = '';
      this.supervisorPin = '';  // #59: the PIN does not outlive the modal
      this.supervisorPinUser = null;
    },

    /* #59: PIN mode of the capoturno modal. */
    resetSupervisorPin() {
      this.supervisorPin = '';
      this.supervisorPinUser = null;
      this.supervisorMode = 'pin';
      this.loadSupervisorPinUsers();
    },

    // Names with a PIN; an empty list or a failure opens the Password tab instead.
    async loadSupervisorPinUsers() {
      try {
        const resp = await fetch('{{ url_for("measure.api_pin_users") }}', { headers: { 'Accept': 'application/json' } });
        const list = resp.ok ? await resp.json() : [];
        this.supervisorPinUsers = Array.isArray(list) ? list : [];
      } catch (e) {
        this.supervisorPinUsers = [];
      }
      if (!this.supervisorPinUsers.length) this.supervisorMode = 'password';
    },

    setSupervisorMode(mode) {
      this.supervisorMode = mode;
      this.supervisorPin = '';
      this.supervisorPinUser = null;
      this.supervisorError = '';
    },

    selectSupervisorUser(u) {
      this.supervisorPinUser = u;
      this.supervisorPin = '';
      this.supervisorError = '';
    },

    backSupervisorUser() {
      this.supervisorPinUser = null;
      this.supervisorPin = '';
      this.supervisorError = '';
    },

    // Submits by itself on the fourth digit.
    pressSupervisorPin(d) {
      if (this.supervisorValidating || this.supervisorPin.length >= 4) return;
      this.supervisorPin += d;
      this.supervisorError = '';
      if (this.supervisorPin.length === 4) this.submitSupervisor();
    },

    get supervisorCanSubmit() {
      if (this.supervisorMode === 'pin') return !!this.supervisorPinUser && this.supervisorPin.length === 4;
      return !!this.supervisorUsername && !!this.supervisorPassword;
    },

    // The pair the proxies forward: id + PIN in PIN mode, username + password otherwise.
    supervisorCredentials() {
      if (this.supervisorMode === 'pin') {
        return { supervisor_user_id: this.supervisorPinUser && this.supervisorPinUser.id, supervisor_pin: this.supervisorPin };
      }
      return { supervisor_username: this.supervisorUsername, supervisor_password: this.supervisorPassword };
    },

    /* What kind of task this is, as declared in the recipe.
       Deducing it from the quotes meant a measurement task whose quotes had not
       been entered yet behaved as a note - the screen changed shape depending on
       how finished the recipe was. Falls back to the old rule for tasks saved
       before the type existed and not yet migrated. */
    get isMeasureTask() {
      const declared = this.task.task_type;
      if (!declared) return this.subtasks.length > 0;
      return declared === 'measure' || declared === 'camera_measure';
    },

    /* #46: image-based tasks run a VisionSuite recipe on the server. */
    get isVisionTask() {
      const t = this.task.task_type;
      return t === 'camera_measure' || t === 'dxf_compare';
    },

    /* #54: «Controllo OK/NOK» - no quotes, the result is the outcome. */
    get isCheckTask() {
      return this.task.task_type === 'check';
    },

    /* #54 #55: tasks that bring their own result panel (a check, or a note with
       fields). A note without fields stays the plain «Completato» task. */
    get hasResultPanel() {
      if (this.isCheckTask) return true;
      return this.task.task_type === 'note' && Array.isArray(this.task.fields)
        && this.task.fields.length > 0;
    },

    /* A measurement task with no quotes yet: the recipe is unfinished. Said out
       loud rather than silently rendering an empty screen. */
    get isMeasureTaskWithoutQuotes() {
      return this.isMeasureTask && this.subtasks.length === 0;
    },

    // ---- Is the production stopped? ----
    get isPaused() {
      return !!this.productionRun && this.productionRun.status === 'paused';
    },

    // ---- Supervisor reason text ----
    get supervisorReason() {
      if (this.supervisorAction === 'out_of_tolerance') return '{{ _("Misurazione fuori tolleranza") }}';
      if (this.supervisorAction === 'fermo_linea') return '{{ _("Fermo linea richiesto") }}';
      if (this.supervisorAction === 'ripresa') return '{{ _("Ripresa della produzione") }}';
      if (this.supervisorAction === 'fine_produzione') return '{{ _("Fine produzione richiesta") }}';
      return '';
    },

    /* Route the modal's confirm to what the action actually does. Fermo linea,
       ripresa and fine produzione act on the production run; the out-of-tolerance
       one is recorded on the measurement itself. */
    async submitSupervisor() {
      if (this.supervisorAction === 'fermo_linea') return this.runSupervisedAction('pause');
      if (this.supervisorAction === 'ripresa') return this.runSupervisedAction('resume');
      if (this.supervisorAction === 'fine_produzione') return this.runSupervisedAction('close');
      return this.authoriseOutOfTolerance();
    },

    /* The capoturno lets an out-of-tolerance value stand.

       The credentials go to the endpoint that writes the approval onto that
       measurement. It used to be a bare credential check whose answer was thrown
       away: nothing recorded who had said yes, and nothing depended on it, so
       closing the modal was enough to walk past a value out of tolerance. */
    async authoriseOutOfTolerance() {
      if (!this.pendingFail) {
        this.closeSupervisorModal();
        return;
      }
      this.supervisorError = '';
      this.supervisorValidating = true;

      try {
        const csrfToken = document.querySelector('meta[name=csrf-token]')?.content || '';
        const url = '{{ url_for("measure.api_authorise_measurement", measurement_id=0) }}'
          .replace('/0/', '/' + this.pendingFail.id + '/');
        const resp = await fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
          body: JSON.stringify(this.supervisorCredentials()),  // #59: PIN or password
        });
        const data = await resp.json().catch(() => null);

        if (!resp.ok || (data && data.error)) {
          this.supervisorError = (data && data.detail)
            || (this.supervisorMode === 'pin' && resp.status === 401 ? '{{ _("PIN errato") }}' : '')
            || '{{ _("Credenziali non valide o utente non autorizzato") }}';
          if (this.supervisorMode === 'pin') this.supervisorPin = '';  // #59: wrong PIN stays in the modal, pad cleared
          this.supervisorValidating = false;
          return;
        }

        this.supervisorValidating = false;
        this.closeSupervisorModal();
        this.pendingFail = null;

        if (this.completedCount >= this.totalSubtasks) {
          this.showCompletionOverlay = true;
        } else {
          this.advanceToNext();
        }

      } catch (err) {
        this.supervisorError = '{{ _("Errore di connessione") }}';
        this.supervisorValidating = false;
      }
    },

    /* Fermo linea, ripresa e fine produzione.
       These used to open the modal and then do nothing. They now act on the
       production run: the credentials go to the endpoint, which checks them and
       records on the run's trace who authorised the stop or the closure. */
    async runSupervisedAction(action) {
      if (!this.productionRun) {
        this.supervisorError = '{{ _("Nessuna produzione aperta su questa stazione") }}';
        return;
      }
      this.supervisorError = '';
      this.supervisorValidating = true;

      const base = '{{ url_for("measure.api_pause_production", run_id=0) }}'
        .replace('/0/pause', '/' + this.productionRun.id + '/' + action);
      const run = await this.postProduction(base, this.supervisorCredentials());  // #59: PIN or password

      this.supervisorValidating = false;
      if (!run) {
        // postProduction already holds the reason; show it inside the modal so the
        // capoturno sees why the action was refused, rather than a silent no-op.
        this.supervisorError = this.productionError || '{{ _("Azione non riuscita") }}';
        this.productionError = '';
        if (this.supervisorMode === 'pin') this.supervisorPin = '';  // #59: wrong PIN / lockout: pad cleared, modal stays
        return;
      }

      this.closeSupervisorModal();
      this.adoptProductionRun(run);

      if (run.status === 'closed') {
        this.goToSummary();
      }
    },

    // ---- Go to summary ----
    goToSummary() {
      const recipeId = this.task.recipe_id || 0;
      window.location.href = '{{ url_for("measure.task_complete", recipe_id=0) }}'.replace('/0', '/' + recipeId) +
        '?version_id=' + encodeURIComponent(this.task.version_id || '');
    },
  };
}
</script>
{% endblock %}