{% extends 'base.html' %}
{% block title %}Planning{% endblock %}

{% block content %}
<div class="page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
  <h1><i class="bi bi-calendar3 me-2" style="color:#ff6b35"></i>Planning d'impression</h1>
  <div class="d-flex gap-2">
    <a href="{{ url_for('working_schedule') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-clock me-1"></i>Horaires
    </a>
    <a href="{{ url_for('calendar_blocks') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-calendar-x me-1"></i>Indispos
    </a>
    <a href="{{ url_for('printers_page') }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-printer me-1"></i>Imprimantes
    </a>
    <a href="/calendar.ics" class="btn btn-sm btn-outline-info">
      <i class="bi bi-calendar-check me-1"></i>Export iCal
    </a>
  </div>
</div>

<div class="row g-3">
  <!-- Timeline -->
  <div class="col-12">
    <div class="card">
      <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <span><i class="bi bi-bar-chart-gantt me-2"></i>Gantt — 14 prochains jours</span>
        <div class="d-flex gap-2 align-items-center">
          <button class="btn btn-sm btn-outline-secondary" onclick="shiftTimeline(-7)"><i class="bi bi-chevron-left"></i></button>
          <button class="btn btn-sm btn-outline-secondary" onclick="timeline.moveTo(new Date())">Aujourd'hui</button>
          <button class="btn btn-sm btn-outline-secondary" onclick="shiftTimeline(7)"><i class="bi bi-chevron-right"></i></button>
        </div>
      </div>
      <div class="card-body p-0">
        <div id="timeline" style="height:320px"></div>
      </div>
    </div>
  </div>

  <!-- Commandes non planifiées -->
  <div class="col-md-5">
    <div class="card">
      <div class="card-header py-3">
        <i class="bi bi-inbox me-2"></i>À planifier
        <span class="badge bg-secondary ms-1">{{ unscheduled|length }}</span>
      </div>
      <div class="card-body p-0">
        {% if unscheduled %}
        <div class="list-group list-group-flush">
          {% for j in unscheduled %}
          {% set missing = j.total_plates_needed - j.scheduled_plates %}
          <div class="list-group-item py-2">
            <div class="d-flex justify-content-between align-items-start">
              <div>
                <div class="fw-semibold small">{{ j.name }}</div>
                <div class="text-muted" style="font-size:.75rem">
                  {{ j.print_time_s | fmt_time }}
                  {% if j.order_qty > 1 %} · ×{{ j.order_qty }} pièces{% endif %}
                  {% if j.client_name %} · {{ j.client_name }}{% endif %}
                </div>
                {% if j.total_plates_needed > 1 %}
                <div class="mt-1">
                  <span class="badge bg-warning text-dark" style="font-size:.65rem">
                    <i class="bi bi-layers me-1"></i>
                    Plateau {{ j.scheduled_plates + 1 }}/{{ j.total_plates_needed }}
                    {% if missing > 1 %} · {{ missing }} restants{% endif %}
                  </span>
                </div>
                {% endif %}
              </div>
              <div class="d-flex gap-1">
                <button class="btn btn-sm btn-outline-success py-0"
                        onclick="suggestSlot({{ j.id }}, {{ j.print_time_s }}, '{{ j.name|replace("'","\\'")|truncate(30,true,"…") }}')">
                  <i class="bi bi-magic"></i>
                </button>
                <button class="btn btn-sm btn-outline-primary py-0"
                        onclick="openScheduleModal({{ j.id }}, {{ j.print_time_s }}, '{{ j.name|replace("'","\\'")|truncate(30,true,"…") }}')">
                  <i class="bi bi-plus-lg"></i>
                </button>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="text-center text-muted py-4 small">
          <i class="bi bi-check2-circle fs-3"></i>
          <p class="mt-2">Toutes les commandes sont planifiées.</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Prochains créneaux -->
  <div class="col-md-7">
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-list-ul me-2"></i>Créneaux planifiés</div>
      <div class="card-body p-0" id="slotsList">
        <div class="text-center text-muted py-3 small">Chargement…</div>
      </div>
    </div>
  </div>

  <!-- Live HA Status -->
  <div class="col-md-5">
    <div class="card">
      <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <span><i class="bi bi-activity me-2 text-success"></i>Imprimantes en direct</span>
        <span id="haLastUpdate" class="text-muted" style="font-size:.7rem"></span>
      </div>
      <div class="card-body p-2" id="haPrinterCards">
        <div class="text-center text-muted py-3 small">
          <i class="bi bi-hourglass-split me-1"></i>Chargement…
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal planification -->
<div class="modal fade" id="scheduleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-calendar-plus me-2"></i>Planifier l'impression</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="modalJobId">
        <input type="hidden" id="modalPrintTime">
        <div class="mb-3">
          <label class="form-label fw-semibold">Commande</label>
          <div id="modalJobName" class="form-control-plaintext fw-semibold text-primary"></div>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">Imprimante</label>
          <select id="modalPrinter" class="form-select">
            {% for p in printers %}
            {% if p.is_active %}
            <option value="{{ p.id }}">{{ p.name }}</option>
            {% endif %}
            {% endfor %}
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">Date et heure de lancement</label>
          <input type="datetime-local" id="modalStart" class="form-control">
        </div>
        <div class="mb-2">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="modalAlreadyDone" onchange="onAlreadyDoneChange()">
            <label class="form-check-label fw-semibold text-success" for="modalAlreadyDone">
              <i class="bi bi-check-circle-fill me-1"></i>Déjà imprimé
            </label>
          </div>
          <div class="form-text ms-4">Enregistre le plateau comme terminé sans passer par le planning actif.</div>
        </div>
        <div id="modalSuggestion" class="alert alert-success py-2 small d-none">
          <i class="bi bi-magic me-1"></i><span id="modalSuggestionText"></span>
        </div>
        <div id="modalError" class="alert alert-danger py-2 small d-none">
          <i class="bi bi-exclamation-triangle me-1"></i><span></span>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
        <button type="button" id="modalSaveBtn" class="btn fw-bold" style="background:#ff6b35;color:#fff" onclick="saveSlot()">
          <i class="bi bi-save me-1"></i>Planifier
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal statut slot -->
<div class="modal fade" id="slotModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Mettre à jour le créneau</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="slotModalId">
        <p id="slotModalInfo" class="text-muted small"></p>

        <!-- Quick action buttons -->
        <div class="d-flex gap-2 mb-3">
          <button class="btn btn-sm btn-success flex-fill" onclick="quickAction('done')">
            <i class="bi bi-check-circle me-1"></i>Terminé
          </button>
          <button class="btn btn-sm btn-danger flex-fill" onclick="quickAction('fail')">
            <i class="bi bi-exclamation-triangle me-1"></i>Échec
          </button>
        </div>

        <div class="mb-3">
          <label class="form-label fw-semibold">Statut</label>
          <select id="slotModalStatus" class="form-select" onchange="onStatusChange()">
            <option value="planned">Planifié</option>
            <option value="printing">En cours</option>
            <option value="done">Terminé ✓</option>
            <option value="failed">Échec ✗</option>
            <option value="cancelled">Annulé</option>
          </select>
        </div>
        <div class="mb-3" id="slotModalNoteGroup">
          <label class="form-label">Note d'échec (optionnel)</label>
          <input type="text" id="slotModalNote" class="form-control" placeholder="Ex: couche 45 — sous-extrusion">
        </div>
        <div class="mb-3" id="slotModalWastedGroup" style="display:none">
          <label class="form-label">Filament gaspillé (g) <small class="text-muted fw-normal">optionnel</small></label>
          <input type="number" id="slotModalWasted" class="form-control" step="0.1" min="0"
                 placeholder="Poids plateau si vide">
        </div>
        <div class="mb-3" id="slotModalActualGroup" style="display:none">
          <label class="form-label">Poids réel consommé (g) <small class="text-muted fw-normal">optionnel</small></label>
          <input type="number" id="slotModalActual" class="form-control" step="0.1" min="0"
                 placeholder="Pour déduire du stock">
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-between">
        <button class="btn btn-sm btn-outline-danger" onclick="deleteSlot()">
          <i class="bi bi-trash"></i> Supprimer
        </button>
        <div>
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="button" class="btn btn-success ms-1" onclick="updateSlotStatus()">Enregistrer</button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<script>
const HA_POLL_MS = {{ (settings.get('ha_poll_interval', '60') | int) * 1000 }};

const STATUS_COLORS = {
  planned:   '#3b82f6',
  printing:  '#f59e0b',
  done:      '#22c55e',
  failed:    '#ef4444',
  cancelled: '#9ca3af',
};
const STATUS_LABELS = {
  planned: 'Planifié', printing: 'En cours', done: 'Terminé', failed: 'Échec', cancelled: 'Annulé'
};

let timeline, items, groups;

/**
 * Calcule les périodes où le nombre de slots actifs atteint max_printers
 * et retourne des items background vis.js pour les afficher en rouge.
 */
function buildCapacityBands(slots, maxPrinters) {
  const active = slots.filter(s => !['cancelled','failed','done'].includes(s.status));
  if (active.length < maxPrinters) return [];

  // Collecter tous les événements (début/fin)
  const events = [];
  active.forEach(s => {
    events.push({ t: new Date(s.planned_start), d: +1 });
    events.push({ t: new Date(s.planned_end),   d: -1 });
  });
  events.sort((a, b) => a.t - b.t);

  const bands = [];
  let count = 0;
  let bandStart = null;
  let bgId = 0;

  for (const ev of events) {
    count += ev.d;
    if (count >= maxPrinters && bandStart === null) {
      bandStart = ev.t;
    } else if (count < maxPrinters && bandStart !== null) {
      bands.push({
        id: 'cap_' + (bgId++),
        start: bandStart,
        end: ev.t,
        type: 'background',
        className: '',
        style: 'background: rgba(239,68,68,.18); border-left: 2px solid rgba(239,68,68,.5);',
        title: `⚠️ Capacité max atteinte (${maxPrinters} impressions simultanées)`,
      });
      bandStart = null;
    }
  }
  if (bandStart !== null) {
    bands.push({
      id: 'cap_' + (bgId++),
      start: bandStart,
      end: new Date(bandStart.getTime() + 86400000),
      type: 'background',
      className: '',
      style: 'background: rgba(239,68,68,.18); border-left: 2px solid rgba(239,68,68,.5);',
      title: `⚠️ Capacité max atteinte (${maxPrinters} impressions simultanées)`,
    });
  }
  return bands;
}

async function initTimeline() {
  const [slotsRes, availRes] = await Promise.all([
    fetch('/api/slots').then(r => r.json()),
    fetch('/api/availability').then(r => r.json()),
  ]);

  // Printers as groups
  const printerData = {{ printers | tojson }};
  groups = new vis.DataSet(printerData.map(p => ({
    id: p.id,
    content: `<span class="small fw-semibold">${p.name}</span>`,
    className: p.is_active ? '' : 'text-muted'
  })));

  // Background items (unavailable periods)
  const bgItems = availRes.map((a, i) => ({
    id: 'bg_' + i,
    start: a.start,
    end: a.end,
    type: 'background',
    className: a.type === 'off' ? 'bg-danger bg-opacity-10' : 'bg-secondary bg-opacity-10',
  }));

  // Print slots
  const slotItems = slotsRes.map(s => {
    const h = Math.floor(s.print_time_s / 3600);
    const mn = String(Math.floor((s.print_time_s % 3600) / 60)).padStart(2,'0');
    const dur = `${h}h${mn}`;
    const dot = s.material_color
      ? `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${s.material_color};border:1px solid rgba(255,255,255,.5);margin-right:3px;flex-shrink:0;vertical-align:middle"></span>`
      : '';
    const platePart = s.plate_name ? ` · ${s.plate_name}` : '';
    const filLine = s.material_name ? `<br>🧵 ${s.material_name} ${s.material_type || ''}` : '';
    const clientLine = s.client_name ? `<br>👤 ${s.client_name}` : '';
    const plateLine = s.plate_name ? `<br>📋 ${s.plate_name}` : '';
    return {
      id: s.id,
      group: s.printer_id,
      start: s.planned_start,
      end: s.planned_end,
      content: `<span style="font-size:.7rem;display:flex;align-items:center;gap:2px;white-space:nowrap">${dot}<strong>${s.job_name}</strong><span style="opacity:.75;font-weight:normal"> (${dur})</span></span>`,
      title: `<strong>${s.job_name}</strong>${plateLine}${clientLine}<br>⏱ ${dur}${filLine}<br>${STATUS_LABELS[s.status] || s.status}`,
      style: `background:${STATUS_COLORS[s.status]||'#3b82f6'};border-color:${STATUS_COLORS[s.status]||'#3b82f6'};color:#fff;border-radius:4px`,
    };
  });

  // Bandes rouges "capacité saturée" (toutes imprimantes, groupe null = full-width background)
  const MAX_PRINTERS = {{ settings.get('max_simultaneous_printers', 5) }};
  const capacityBgItems = buildCapacityBands(slotsRes, MAX_PRINTERS);

  items = new vis.DataSet([...bgItems, ...slotItems, ...capacityBgItems]);

  const now = new Date();
  timeline = new vis.Timeline(
    document.getElementById('timeline'),
    items, groups,
    {
      start: new Date(now.getTime() - 12 * 3600000),
      end: new Date(now.getTime() + 14 * 86400000),
      groupOrder: 'id',
      selectable: true,
      zoomMin: 3600000,
      zoomMax: 60 * 86400000,
      locale: 'fr',
    }
  );

  timeline.on('select', function(props) {
    if (!props.items.length) return;
    const id = props.items[0];
    if (typeof id === 'string' && id.startsWith('bg_')) return;
    const slot = slotsRes.find(s => s.id === id);
    if (!slot) return;
    openSlotModal(slot);
  });

  renderSlotsList(slotsRes);
}

function shiftTimeline(days) {
  const w = timeline.getWindow();
  const ms = days * 86400000;
  timeline.setWindow(new Date(w.start.getTime() + ms), new Date(w.end.getTime() + ms));
}

function renderSlotsList(slots) {
  const el = document.getElementById('slotsList');
  if (!slots.length) {
    el.innerHTML = '<div class="text-center text-muted py-4 small"><i class="bi bi-calendar fs-3"></i><p class="mt-2">Aucun créneau planifié.</p></div>';
    return;
  }
  const upcoming = slots.filter(s => s.status !== 'cancelled').slice(0, 30);

  // Pre-compute per-job stats using job_total_ignored from API (covers all slots, even old ones)
  const jobMeta = {};
  for (const s of upcoming) {
    if (!jobMeta[s.job_id]) {
      jobMeta[s.job_id] = {
        name: s.job_name,
        totalPlates: s.total_plates,
        totalIgnored: s.job_total_ignored,   // sum across ALL slots of job
        pendingSlots: []
      };
    }
    if (['planned','running'].includes(s.status)) jobMeta[s.job_id].pendingSlots.push(s);
  }

  let rows = '';
  const seenJobs = new Set();

  for (const s of upcoming) {
    const job = jobMeta[s.job_id];
    const isMulti = job.totalPlates > 1;

    // ── Job group header (once per multi-plate job) ──────────────────────
    if (isMulti && !seenJobs.has(s.job_id)) {
      seenJobs.add(s.job_id);
      const deficit = job.totalIgnored;
      const alreadyCompensated = job.pendingSlots.reduce((sum, sl) =>
        sum + (sl.pieces_override !== null ? Math.max(0, sl.pieces_override - sl.pieces_per_plate) : 0), 0);
      const remaining = deficit - alreadyCompensated;
      const defBadge = remaining > 0
        ? `<span class="badge ms-2" style="background:#fbbf24;color:#78350f;font-size:.65rem">
             <i class="bi bi-exclamation-triangle-fill me-1"></i>${remaining} pièce(s) à compenser
           </span>`
        : (deficit > 0
          ? `<span class="badge bg-success ms-2" style="font-size:.65rem"><i class="bi bi-check-circle-fill me-1"></i>Compensé</span>`
          : '');
      rows += `<tr style="background:#eef2ff;border-top:2px solid #c7d2fe">
        <td colspan="5" style="padding:.3rem .75rem">
          <span style="font-size:.78rem;font-weight:600;color:#3730a3">
            <i class="bi bi-layers-half me-1"></i>${s.job_name} — ${job.totalPlates} plateaux
          </span>${defBadge}
        </td>
      </tr>`;
    }

    // ── Individual slot row ──────────────────────────────────────────────
    const h  = Math.floor(s.print_time_s / 3600);
    const mn = String(Math.floor((s.print_time_s % 3600) / 60)).padStart(2,'0');
    const dur = `${h}h${mn}`;
    const dot = s.material_color
      ? `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${s.material_color};border:1px solid #ccc;margin-right:3px;vertical-align:middle"></span>`
      : '';

    // Plate label: for multi-plate show "Plateau X/Y", else fallback to plate_name
    const platePart = isMulti
      ? `<br><span style="font-size:.7rem;color:#6b7280"><i class="bi bi-layers me-1"></i>Plateau ${s.plate_num}/${s.total_plates}</span>`
      : (s.plate_name
        ? `<br><span style="font-size:.7rem;color:#6b7280"><i class="bi bi-layers me-1"></i>${s.plate_name}</span>`
        : '');

    const filPart = s.material_name
      ? `<br><span style="font-size:.7rem;color:#6b7280">${dot}${s.material_name} ${s.material_type||''}</span>`
      : '';
    const clientPart = s.client_name
      ? `<br><span class="text-muted fw-normal" style="font-size:.75rem">${s.client_name}</span>`
      : '';

    // Pieces delivered on this slot (if already printed with ignores)
    const ignoredPart = s.pieces_ignored > 0
      ? `<br><span style="font-size:.7rem;background:#fef3c7;color:#92400e;padding:1px 5px;border-radius:3px">
           <i class="bi bi-exclamation-triangle-fill me-1"></i>${s.effective_pieces - s.pieces_ignored}/${s.effective_pieces} pièces livrées
         </span>`
      : '';

    // Override badge (slot was manually adjusted)
    const overridePart = s.pieces_override !== null
      ? `<br><span style="font-size:.7rem;background:#dcfce7;color:#166534;padding:1px 5px;border-radius:3px">
           <i class="bi bi-check-circle-fill me-1"></i>${s.pieces_override} pièces (ajusté)
         </span>`
      : '';

    // Compensation needed on this pending slot
    const isPending = ['planned','running'].includes(s.status);
    const deficit = job.totalIgnored;
    const alreadyComp = job.pendingSlots.reduce((sum, sl) =>
      sum + (sl.pieces_override !== null ? Math.max(0, sl.pieces_override - sl.pieces_per_plate) : 0), 0);
    const stillNeeded = deficit - alreadyComp;
    const compensatePart = (isPending && stillNeeded > 0 && s.pieces_ignored === 0 && s.pieces_override === null)
      ? `<br><span style="font-size:.7rem;background:#fff7ed;color:#9a3412;padding:1px 6px;border-radius:3px;cursor:pointer"
               onclick="event.stopPropagation();applyCompensation(${s.id}, ${s.effective_pieces}, ${stillNeeded})">
           <i class="bi bi-arrow-up-circle-fill me-1"></i>Compenser : imprimer ${s.effective_pieces + stillNeeded} ✏️
         </span>`
      : '';

    // For multi-plate jobs, don't repeat the job name in each row (it's in the header)
    const jobLabel = isMulti ? '' : `${s.job_name}`;

    rows += `<tr style="cursor:pointer" onclick="openSlotModal(${JSON.stringify(s).replace(/"/g,'&quot;')})">
      <td class="small" style="white-space:nowrap">${formatDt(s.planned_start)}</td>
      <td class="small fw-semibold">${jobLabel}${platePart}${filPart}${clientPart}${ignoredPart}${overridePart}${compensatePart}</td>
      <td class="small text-muted" style="white-space:nowrap">${dur}</td>
      <td class="small" style="white-space:nowrap">${s.printer_name}</td>
      <td><span class="badge" style="background:${STATUS_COLORS[s.status]}">${STATUS_LABELS[s.status]||s.status}</span></td>
    </tr>`;
  }

  el.innerHTML = `<div class="table-responsive"><table class="table table-sm table-hover mb-0">
    <thead class="table-light"><tr>
      <th class="small">Début</th>
      <th class="small">Job / Plateau</th>
      <th class="small">Durée</th>
      <th class="small">Machine</th>
      <th class="small">Statut</th>
    </tr></thead>
    <tbody>${rows}</tbody>
  </table></div>`;
}

async function applyCompensation(slotId, currentPieces, deficit) {
  const newVal = currentPieces + deficit;
  if (!confirm(`Ajuster ce plateau à ${newVal} pièces (au lieu de ${currentPieces}) pour compenser les ${deficit} pièce(s) ignorée(s) ?`)) return;
  const res = await fetch(`/api/slots/${slotId}/pieces_override`, {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({pieces: newVal})
  }).then(r => r.json());
  if (res.ok) loadSlots();
}

function formatDt(iso) {
  if (!iso) return '—';
  const d = new Date(iso);
  return d.toLocaleDateString('fr-FR',{day:'2-digit',month:'2-digit'}) + ' ' +
         d.toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit'});
}

function onAlreadyDoneChange() {
  const done = document.getElementById('modalAlreadyDone').checked;
  const btn  = document.getElementById('modalSaveBtn');
  if (done) {
    btn.innerHTML = '<i class="bi bi-check-circle me-1"></i>Enregistrer comme terminé';
    btn.style.background = '#22c55e';
    // Reset to "now" so user picks when it was done
    const now = new Date();
    now.setMinutes(0, 0, 0);
    document.getElementById('modalStart').value = now.toISOString().slice(0,16);
    document.getElementById('modalSuggestion').classList.add('d-none');
    document.getElementById('modalError').classList.add('d-none');
  } else {
    btn.innerHTML = '<i class="bi bi-save me-1"></i>Planifier';
    btn.style.background = '#ff6b35';
  }
}

function openScheduleModal(jobId, printTime, jobName) {
  document.getElementById('modalJobId').value = jobId;
  document.getElementById('modalPrintTime').value = printTime;
  document.getElementById('modalJobName').textContent = jobName;
  document.getElementById('modalSuggestion').classList.add('d-none');
  document.getElementById('modalError').classList.add('d-none');
  // Reset already-done checkbox
  document.getElementById('modalAlreadyDone').checked = false;
  onAlreadyDoneChange();
  // Default: now rounded to next hour
  const now = new Date();
  now.setMinutes(0, 0, 0);
  now.setHours(now.getHours() + 1);
  document.getElementById('modalStart').value = now.toISOString().slice(0,16);
  new bootstrap.Modal(document.getElementById('scheduleModal')).show();
}

async function suggestSlot(jobId, printTime, jobName) {
  openScheduleModal(jobId, printTime, jobName);
  const res = await fetch('/api/suggest-slot', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({print_time_s: printTime})
  }).then(r => r.json());
  if (res.planned_start) {
    document.getElementById('modalStart').value = res.planned_start.slice(0,16);
    // Find the printer option
    const sel = document.getElementById('modalPrinter');
    for (let opt of sel.options) {
      if (parseInt(opt.value) === res.printer_id) { sel.value = opt.value; break; }
    }
    document.getElementById('modalSuggestionText').textContent =
      `Suggestion : ${res.printer_name} — ${formatDt(res.planned_start)}`;
    document.getElementById('modalSuggestion').classList.remove('d-none');
  }
}

async function saveSlot() {
  const jobId      = parseInt(document.getElementById('modalJobId').value);
  const printer    = parseInt(document.getElementById('modalPrinter').value);
  const start      = document.getElementById('modalStart').value;
  const alreadyDone = document.getElementById('modalAlreadyDone').checked;
  // Clear previous error
  document.getElementById('modalError').classList.add('d-none');
  const r = await fetch('/api/slots/new', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({job_id: jobId, printer_id: printer, planned_start: start,
                          already_done: alreadyDone})
  });
  const res = await r.json();
  if (res.ok) {
    bootstrap.Modal.getInstance(document.getElementById('scheduleModal')).hide();
    location.reload();
  } else {
    const errEl = document.getElementById('modalError');
    errEl.querySelector('span').textContent = res.error || 'Erreur inconnue';
    errEl.classList.remove('d-none');
  }
}

let currentSlot = null;

function onStatusChange() {
  const status = document.getElementById('slotModalStatus').value;
  document.getElementById('slotModalWastedGroup').style.display = status === 'failed' ? '' : 'none';
  document.getElementById('slotModalActualGroup').style.display = status === 'done'   ? '' : 'none';
}

function openSlotModal(slot) {
  currentSlot = slot;
  document.getElementById('slotModalId').value = slot.id;
  document.getElementById('slotModalInfo').textContent =
    `${slot.job_name} · ${slot.printer_name} · ${formatDt(slot.planned_start)}`;
  document.getElementById('slotModalStatus').value = slot.status || 'planned';
  document.getElementById('slotModalNote').value = slot.failure_note || '';
  document.getElementById('slotModalWasted').value = '';
  document.getElementById('slotModalActual').value = '';
  onStatusChange();
  new bootstrap.Modal(document.getElementById('slotModal')).show();
}

async function quickAction(type) {
  // Submit immediately via the dedicated fail/done endpoints
  const id       = document.getElementById('slotModalId').value;
  const note     = document.getElementById('slotModalNote').value;
  const wasted_g = document.getElementById('slotModalWasted').value || '';
  const actual_g = document.getElementById('slotModalActual').value || '';

  if (type === 'done') {
    const fd = new FormData();
    fd.append('actual_g', actual_g);
    await fetch(`/api/slots/${id}/done`, {method:'POST', body:fd});
  } else {
    const fd = new FormData();
    fd.append('failure_note', note);
    fd.append('wasted_g', wasted_g);
    await fetch(`/api/slots/${id}/fail`, {method:'POST', body:fd});
  }
  bootstrap.Modal.getInstance(document.getElementById('slotModal')).hide();
  location.reload();
}

async function updateSlotStatus() {
  const id     = document.getElementById('slotModalId').value;
  const status = document.getElementById('slotModalStatus').value;
  const note   = document.getElementById('slotModalNote').value;
  const wasted = document.getElementById('slotModalWasted').value;
  const actual = document.getElementById('slotModalActual').value;

  if (status === 'done') {
    const fd = new FormData();
    fd.append('actual_g', actual);
    await fetch(`/api/slots/${id}/done`, {method:'POST', body:fd});
  } else if (status === 'failed') {
    const fd = new FormData();
    fd.append('failure_note', note);
    fd.append('wasted_g', wasted);
    await fetch(`/api/slots/${id}/fail`, {method:'POST', body:fd});
  } else {
    await fetch(`/api/slots/${id}/status`, {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({status, note})
    });
  }
  bootstrap.Modal.getInstance(document.getElementById('slotModal')).hide();
  location.reload();
}

async function deleteSlot() {
  if (!confirm('Supprimer ce créneau ?')) return;
  const id = document.getElementById('slotModalId').value;
  await fetch(`/api/slots/${id}/delete`, {method:'POST'});
  bootstrap.Modal.getInstance(document.getElementById('slotModal')).hide();
  location.reload();
}

initTimeline();

// ── Home Assistant live status ──────────────────────────────────────────────
async function refreshHaStatus() {
  try {
    const r = await fetch('/api/ha/status');
    const d = await r.json();
    const el = document.getElementById('haPrinterCards');
    const lu = document.getElementById('haLastUpdate');
    lu.textContent = 'Mis à jour ' + new Date().toLocaleTimeString('fr-FR', {hour:'2-digit',minute:'2-digit'});
    if (d.error && !d.printers) {
      el.innerHTML = `<div class="text-muted small p-3"><i class="bi bi-info-circle me-1"></i>${d.error}</div>`;
      return;
    }
    const printers = d.printers || {};
    const keys = Object.keys(printers);
    if (!keys.length) {
      el.innerHTML = '<div class="text-muted small p-3"><i class="bi bi-info-circle me-1"></i>Aucune imprimante avec préfixe HA. Configurez dans Paramètres + Imprimantes.</div>';
      return;
    }
    const STATUS_LABEL = {running:'En cours',finish:'Terminé',idle:'Idle',pause:'En pause',failed:'Erreur',offline:'Hors ligne',init:'Démarrage',unknown:'—'};
    const STATUS_CLS   = {running:'success',finish:'secondary',idle:'light',pause:'warning',failed:'danger',offline:'dark',init:'info',unknown:'light'};
    el.innerHTML = keys.map(pid => {
      const p = printers[pid];
      const sc = STATUS_CLS[p.status] || 'light';
      const sl = STATUS_LABEL[p.status] || p.status;
      const prog = p.progress || 0;
      const barColor = p.error ? '#ef4444' : p.status === 'running' ? '#22c55e' : '#94a3b8';
      const layerInfo = (p.layers_total > 0)
        ? `<span class="text-muted" style="font-size:.7rem">Couche ${p.layer}/${p.layers_total}</span>`
        : '';
      const finInfo = (p.heure_fin && p.heure_fin !== 'unknown' && p.status === 'running')
        ? `<span class="text-muted" style="font-size:.7rem">Fin ≈ ${new Date(p.heure_fin).toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit'})}</span>`
        : '';
      const taskInfo = (p.task_name && p.task_name !== 'unknown')
        ? `<div class="text-truncate" style="font-size:.72rem;color:#6b7280;max-width:220px" title="${p.task_name}">${p.task_name}</div>`
        : '';
      const ignoredWarn = (p.pieces_ignored > 0)
        ? `<div class="mt-1"><span class="badge" style="background:#fef3c7;color:#92400e;font-size:.7rem">
             <i class="bi bi-exclamation-triangle-fill me-1"></i>${p.pieces_total - p.pieces_ignored}/${p.pieces_total} pièces — ${p.pieces_ignored} ignorée(s)
           </span></div>`
        : '';
      return `<div class="p-2 mb-1 rounded" style="background:#f8f9fa;border:1px solid ${p.pieces_ignored>0?'#fbbf24':'#e5e7eb'}">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span class="fw-semibold small">${p.printer_name}</span>
          <span class="badge bg-${sc} text-${sc==='light'?'dark':'white'}">${sl}</span>
        </div>
        ${taskInfo}
        ${ignoredWarn}
        <div class="d-flex justify-content-between align-items-center mt-1">
          <div class="flex-fill me-2">
            <div style="height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden">
              <div style="width:${prog}%;height:100%;background:${barColor};transition:width .5s"></div>
            </div>
          </div>
          <span class="fw-bold small" style="min-width:36px;text-align:right">${prog}%</span>
        </div>
        <div class="d-flex gap-3 mt-1">${layerInfo}${finInfo}</div>
      </div>`;
    }).join('');
  } catch(e) {
    console.warn('HA status error:', e);
  }
}
refreshHaStatus();
setInterval(refreshHaStatus, HA_POLL_MS);

</script>
{% endblock %}