{% extends "base.html" %}

{% block title %}Kapazitätsplanung{% endblock %}
{% block heading %}Kapazitätsplanung{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if weeks == 2 %}is-active{% endif %}" href="/planning/gantt?weeks=2">2 Wochen</a>
    <a class="tab {% if weeks == 4 %}is-active{% endif %}" href="/planning/gantt?weeks=4">4 Wochen</a>
    <a class="tab {% if weeks == 8 %}is-active{% endif %}" href="/planning/gantt?weeks=8">8 Wochen</a>
    <a class="tab {% if weeks == 12 %}is-active{% endif %}" href="/planning/gantt?weeks=12">12 Wochen</a>
  </div>
{% endblock %}

{% block content %}

<style>
  .gantt-card { padding: 0; overflow: hidden; }
  .gantt-wrap { overflow-x: auto; overflow-y: hidden; padding: 0 0 12px 0; }
  .gantt-wrap::-webkit-scrollbar { height: 10px; }
  .gantt-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border-radius: 5px; }

  .gantt-grid {
    display: grid;
    background: rgba(0,0,0,0.20);
    color: var(--card-text);
    font-size: 12px;
  }
  .gantt-cell-machine,
  .gantt-cell-day {
    border-bottom: 1px solid var(--card-border-2);
    border-right: 1px solid var(--card-border-2);
  }
  .gantt-cell-machine {
    padding: 8px 12px;
    background: rgba(0,0,0,0.30);
    font-weight: 600;
    position: sticky; left: 0; z-index: 4;
    min-width: 180px;
  }
  .gantt-cell-day {
    text-align: center; padding: 6px 0;
    color: var(--card-text-muted);
    font-size: 10px; text-transform: uppercase;
    position: relative;
  }
  .gantt-cell-day.is-weekend { background: rgba(0,0,0,0.30); }
  .gantt-cell-day.is-today {
    background: rgba(242, 88, 27, 0.12);
    color: #f2581b; font-weight: 700;
  }
  .gantt-row {
    position: relative;
    height: 56px;
    border-bottom: 1px solid var(--card-border-2);
  }
  .gantt-row-bg {
    position: absolute; inset: 0;
    background-image: linear-gradient(to right,
      transparent calc(100% - 1px),
      var(--card-border-2) calc(100% - 1px));
    background-size: var(--day-w) 100%;
  }
  .gantt-row-bg .weekend {
    position: absolute; top: 0; bottom: 0;
    background: rgba(0,0,0,0.20);
  }
  .gantt-row-bg .today-line {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: #f2581b;
  }
  .gantt-bar {
    position: absolute;
    height: 36px; top: 10px;
    border-radius: 6px;
    padding: 4px 8px;
    color: white; font-size: 11px;
    cursor: grab; user-select: none;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
    background: linear-gradient(135deg, #356692 0%, #2b4f73 100%);
    border-left: 3px solid #93c5fd;
  }
  .gantt-bar.is-running {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    border-left-color: #6ee7b7;
  }
  .gantt-bar.is-done {
    background: linear-gradient(135deg, #525252 0%, #404040 100%);
    border-left-color: #a3a3a3;
    opacity: 0.65;
  }
  .gantt-bar.is-conflict {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    border-left-color: #fca5a5;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.40);
  }
  .gantt-bar.is-overlap {
    border: 2px dashed #fbbf24;
  }
  .gantt-bar:hover { transform: translateY(-1px); }
  .gantt-bar:active { cursor: grabbing; transform: none; }
  .gantt-bar-title {
    font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .gantt-bar-meta {
    font-size: 9px; color: rgba(255,255,255,0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .gantt-legend {
    padding: 12px 16px;
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 11px; color: var(--card-text-muted);
    border-top: 1px solid var(--card-border-2);
    background: rgba(0,0,0,0.20);
  }
  .gantt-legend .lg-chip {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .gantt-legend .lg-dot {
    width: 12px; height: 12px; border-radius: 3px;
  }

  /* Personal-Kapazitäts-Zeile (krank/urlaub) */
  .gantt-cell-cap {
    border-bottom: 1px solid var(--card-border-2);
    border-right: 1px solid var(--card-border-2);
    text-align: center; padding: 4px 0;
    font-size: 10px; font-weight: 600;
    color: var(--card-text-muted);
    position: relative; cursor: help;
  }
  .gantt-cell-cap.has-absence {
    background: rgba(168, 85, 247, 0.18);  /* purple-Vacation tint */
    color: #c4b5fd;
  }
  .gantt-cell-cap.has-sick {
    background: rgba(239, 68, 68, 0.18);  /* red-Krank tint */
    color: #fca5a5;
  }
  .gantt-cell-cap.is-overload {
    background: rgba(239, 68, 68, 0.35);
    color: #fee2e2;
    box-shadow: inset 0 -2px 0 #ef4444;
  }
  .gantt-cell-cap.is-weekend {
    background: rgba(0,0,0,0.30);
    color: rgba(255,255,255,0.20);
  }
  .gantt-row-cap-label {
    padding: 4px 12px; font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(0,0,0,0.30);
    color: var(--card-text-muted);
    position: sticky; left: 0; z-index: 4;
    border-bottom: 1px solid var(--card-border-2);
    border-right: 1px solid var(--card-border-2);
    font-weight: 600;
  }
</style>

<div class="card gantt-card">
  <div class="card-header">
    <div>
      <h2>Maschinenbelegung — {{ data.win_start }} bis {{ data.win_end }}</h2>
      <p class="sub">
        {{ data.machines|length }} aktive Maschinen · {{ data.jobs|length }} geplante / laufende Jobs ·
        ziehen mit Maus zum Verschieben
      </p>
    </div>
  </div>

  <div class="gantt-wrap" id="gantt-wrap">
    <div id="gantt-root"></div>
  </div>

  <div class="gantt-legend">
    <div class="lg-chip"><span class="lg-dot" style="background:#356692;"></span>Geplant</div>
    <div class="lg-chip"><span class="lg-dot" style="background:#10b981;"></span>Läuft</div>
    <div class="lg-chip"><span class="lg-dot" style="background:#ef4444;"></span>Termin nicht haltbar</div>
    <div class="lg-chip"><span class="lg-dot" style="background:transparent;border:2px dashed #fbbf24;"></span>Überlappung mit anderem Job</div>
    <div class="lg-chip"><span class="lg-dot" style="background:#525252;"></span>Erledigt</div>
    <div class="lg-chip" style="margin-left:auto;font-weight:600;color:var(--card-text);">Personal-Zeile:</div>
    <div class="lg-chip"><span class="lg-dot" style="background:rgba(239,68,68,0.35);"></span>Überlast (Job-Stunden &gt; verfügbares Personal)</div>
    <div class="lg-chip"><span class="lg-dot" style="background:rgba(239,68,68,0.18);"></span>Krank gemeldet</div>
    <div class="lg-chip"><span class="lg-dot" style="background:rgba(168,85,247,0.18);"></span>Urlaub / frei</div>
  </div>
</div>

<script type="application/json" id="gantt-data">{{ data|tojson }}</script>
<script>
(function () {
  const data = JSON.parse(document.getElementById('gantt-data').textContent);
  const root = document.getElementById('gantt-root');
  if (!data.machines.length) {
    root.innerHTML = '<div style="padding:40px;text-align:center;color:var(--card-text-muted);">' +
      '<div style="font-size:48px;opacity:0.20;margin-bottom:12px;">📅</div>' +
      'Keine aktiven Maschinen.</div>';
    return;
  }

  const DAY_W = 38; // px pro Tag
  const ROW_H = 56;
  const HEADER_H = 32;
  const MACHINE_COL_W = 180;

  // Tage zwischen win_start und win_end ausrechnen
  const start = new Date(data.win_start + 'T00:00:00');
  const end   = new Date(data.win_end + 'T23:59:59');
  const today = new Date(data.today + 'T00:00:00');
  const days = [];
  for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
    days.push(new Date(d));
  }

  function dayOffsetPx(iso) {
    if (!iso) return 0;
    const dt = new Date(iso.replace(' ', 'T').slice(0,19));
    if (isNaN(dt.getTime())) return 0;
    const ms = dt - start;
    const days = ms / 86400000;
    return Math.max(0, days * DAY_W);
  }
  function durationPx(s, e) {
    return Math.max(20, dayOffsetPx(e) - dayOffsetPx(s));
  }

  // Header: Tage
  const totalW = days.length * DAY_W + MACHINE_COL_W;
  let html = `<div class="gantt-grid" style="grid-template-columns:${MACHINE_COL_W}px repeat(${days.length}, ${DAY_W}px);width:${totalW}px;--day-w:${DAY_W}px;">`;
  html += `<div class="gantt-cell-machine" style="position:sticky;left:0;z-index:5;">Maschine</div>`;
  for (const d of days) {
    const wd = d.getDay();
    const isWeekend = wd === 0 || wd === 6;
    const isToday = d.toDateString() === today.toDateString();
    const cls = ['gantt-cell-day'];
    if (isWeekend) cls.push('is-weekend');
    if (isToday) cls.push('is-today');
    const showWeek = wd === 1; // Montag
    const wkLabel = showWeek
      ? `<div style="font-size:8px;color:rgba(255,255,255,0.40);">KW ${getWeek(d)}</div>` : '';
    html += `<div class="${cls.join(' ')}">${wkLabel}<div>${d.getDate().toString().padStart(2,'0')}</div></div>`;
  }

  // ===== Personal-Kapazitäts-Zeile =====
  // Zeigt pro Tag: verfügbare Stunden (oder Abwesenheits-Marker).
  // Datenquelle: data.capacity (vom Backend, daily_personnel_capacity).
  const cap = data.capacity || {};
  html += `<div class="gantt-row-cap-label" title="Personal-Verfügbarkeit pro Tag (krank · urlaub · frei)">Personal</div>`;
  for (const d of days) {
    const iso = d.toISOString().slice(0, 10);
    const c = cap[iso];
    const wd = d.getDay();
    const isWeekend = wd === 0 || wd === 6;

    const cls = ['gantt-cell-cap'];
    let label = '—';
    let title = `${iso}: keine Daten`;

    if (isWeekend) {
      cls.push('is-weekend');
      label = '·';
      title = `${iso}: Wochenende`;
    } else if (c) {
      const avail = c.available_h || 0;
      const total = c.total_h || 0;
      const lost  = c.lost_h || 0;
      const load  = c.workload_h || 0;
      label = avail > 0 ? `${Math.round(avail)}h` : '0';

      if (c.overload) {
        cls.push('is-overload');
      } else if (c.absent && c.absent.length) {
        const hasSick = c.absent.some(a => a.shift === 'sick');
        cls.push(hasSick ? 'has-sick' : 'has-absence');
      }
      const absentNames = (c.absent || []).map(a => `${a.name} (${a.reason})`).join(', ');
      title = `${iso}\\nVerfügbar: ${avail}h / Gesamt: ${total}h\\nGeplante Job-Last: ${load}h${c.overload ? '  ⚠ ÜBERLAST!' : ''}${absentNames ? '\\nAbwesend: ' + absentNames : ''}`;
    }

    html += `<div class="${cls.join(' ')}" title="${escapeAttr(title)}">${label}</div>`;
  }
  html += `</div>`;

  // Maschinen-Zeilen
  for (const m of data.machines) {
    html += `<div style="display:grid;grid-template-columns:${MACHINE_COL_W}px ${days.length * DAY_W}px;width:${totalW}px;">`;
    html += `<div class="gantt-cell-machine" style="position:sticky;left:0;z-index:3;">
        ${escapeHtml(m.name)}
        ${m.controller_type ? `<div style="font-size:9px;color:var(--card-text-muted);text-transform:uppercase;">${escapeHtml(m.controller_type)}</div>` : ''}
       </div>`;
    html += `<div class="gantt-row" data-machine-id="${m.id}">`;
    html += `<div class="gantt-row-bg">`;
    // Wochenende-Schraffuren
    let off = 0;
    for (const d of days) {
      const wd = d.getDay();
      if (wd === 0 || wd === 6) {
        html += `<div class="weekend" style="left:${off}px;width:${DAY_W}px;"></div>`;
      }
      off += DAY_W;
    }
    // today line
    const todayOff = dayOffsetPx(data.today + ' 00:00:00');
    if (todayOff > 0 && todayOff < days.length * DAY_W) {
      html += `<div class="today-line" style="left:${todayOff}px;"></div>`;
    }
    html += `</div>`;

    // Bars dieser Maschine
    const myJobs = data.jobs.filter(j => j.machine_id === m.id);
    for (const j of myJobs) {
      const left = dayOffsetPx(j.planned_start);
      const width = durationPx(j.planned_start, j.planned_end);
      const cls = ['gantt-bar'];
      if (j.status === 'running') cls.push('is-running');
      else if (j.status === 'done') cls.push('is-done');
      if (j.due_conflict) cls.push('is-conflict');
      if (j.overlap_conflict) cls.push('is-overlap');
      const title = `${j.ident}\\n${j.item_ident || ''} ${j.item_description || ''}\\nAuftrag: ${j.order_no || '—'}\\nKunde: ${j.customer || '—'}\\nGeplant: ${j.planned_start} → ${j.planned_end}\\nMenge: ${j.qty_done}/${j.qty_target}\\nStatus: ${j.status}${j.due_conflict ? '\\n⚠ Liefertermin (' + j.so_due + ') wird nicht erreicht' : ''}${j.overlap_conflict ? '\\n⚠ Überlappung mit anderem Job' : ''}`;
      html += `<div class="${cls.join(' ')}" data-job-id="${j.id}"
               style="left:${left}px;width:${width}px;"
               draggable="true"
               title="${escapeAttr(title)}">
          <div class="gantt-bar-title">${escapeHtml(j.ident)} · ${escapeHtml(j.item_ident || '')}</div>
          <div class="gantt-bar-meta">${escapeHtml(j.order_no || '—')}${j.customer ? ' · ' + escapeHtml(j.customer) : ''}</div>
        </div>`;
    }
    html += `</div></div>`;
  }
  root.innerHTML = html;

  // Drag-Drop: Job auf andere Position / andere Maschine ziehen
  let dragJob = null;
  root.addEventListener('dragstart', e => {
    const bar = e.target.closest('.gantt-bar');
    if (!bar) return;
    dragJob = bar;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', bar.dataset.jobId);
    bar.style.opacity = '0.45';
  });
  root.addEventListener('dragend', e => {
    if (dragJob) dragJob.style.opacity = '';
    dragJob = null;
  });
  root.addEventListener('dragover', e => {
    if (!dragJob) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  });
  root.addEventListener('drop', e => {
    if (!dragJob) return;
    e.preventDefault();
    const row = e.target.closest('.gantt-row');
    if (!row) return;
    const machineId = parseInt(row.dataset.machineId, 10);
    const rowRect = row.getBoundingClientRect();
    const xInRow = e.clientX - rowRect.left;
    // px → Tag → ISO-Datum
    const dayIdx = Math.floor(xInRow / DAY_W);
    if (dayIdx < 0 || dayIdx >= days.length) return;
    const newStart = days[dayIdx];
    // Behalte Stunde aus altem planned_start
    const jobId = parseInt(dragJob.dataset.jobId, 10);
    const job = data.jobs.find(j => j.id === jobId);
    if (!job) return;
    const oldDt = new Date(job.planned_start.replace(' ', 'T').slice(0,19));
    const h = isNaN(oldDt.getTime()) ? 8 : oldDt.getHours();
    const mn = isNaN(oldDt.getTime()) ? 0 : oldDt.getMinutes();
    const newPlanStart = `${newStart.getFullYear()}-${String(newStart.getMonth()+1).padStart(2,'0')}-${String(newStart.getDate()).padStart(2,'0')} ${String(h).padStart(2,'0')}:${String(mn).padStart(2,'0')}:00`;
    // Dauer: aus existing duration_min oder berechnet aus alten Daten
    const dur = job.duration_min || (() => {
      const ps = new Date(job.planned_start.replace(' ', 'T').slice(0,19));
      const pe = new Date(job.planned_end.replace(' ', 'T').slice(0,19));
      return Math.max(60, Math.round((pe - ps) / 60000));
    })();

    fetch('/api/planning/jobs/' + jobId + '/plan', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        machine_id: machineId,
        planned_start: newPlanStart,
        duration_min: dur,
      }),
    }).then(r => r.json()).then(d => {
      if (d.ok) location.reload();
      else if (window.toast) toast('Verschieben fehlgeschlagen', 'error');
    });
  });

  function getWeek(d) {
    const dt = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
    const dayNum = (dt.getUTCDay() + 6) % 7;
    dt.setUTCDate(dt.getUTCDate() - dayNum + 3);
    const firstThursday = new Date(Date.UTC(dt.getUTCFullYear(), 0, 4));
    return 1 + Math.round(((dt - firstThursday) / 86400000 - 3 + ((firstThursday.getUTCDay() + 6) % 7)) / 7);
  }
  function escapeHtml(s) {
    return (s || '').toString().replace(/[&<>"']/g, ch =>
      ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[ch]));
  }
  function escapeAttr(s) {
    return (s || '').toString().replace(/"/g, '&quot;').replace(/\\\\n/g, '&#10;');
  }
})();
</script>
{% endblock %}