{% extends "base.html" %}

{% block title %}Schichtplan {{ year }}-{{ '%02d'|format(month) }}{% endblock %}
{% block heading %}Schichtplan — {{ ['','Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'][month] }} {{ year }}{% endblock %}
{% block topbar_actions %}
  {% set prev_y = year if month > 1 else year - 1 %}
  {% set prev_m = month - 1 if month > 1 else 12 %}
  {% set next_y = year if month < 12 else year + 1 %}
  {% set next_m = month + 1 if month < 12 else 1 %}
  <a class="btn btn-sm btn-secondary" href="/personal/shifts?year={{ prev_y }}&month={{ prev_m }}">← {{ prev_m }}/{{ prev_y }}</a>
  <a class="btn btn-sm btn-secondary" href="/personal/shifts?year={{ next_y }}&month={{ next_m }}">{{ next_m }}/{{ next_y }} →</a>
{% endblock %}

{% block content %}
<style>
  .shift-table {
    border-collapse: collapse;
    font-size: 11px;
    background: var(--card-bg);
    color: var(--card-text);
  }
  .shift-table th,
  .shift-table td {
    border: 1px solid var(--card-border-2);
    padding: 4px 6px;
    text-align: center;
    min-width: 28px; max-width: 36px;
    height: 32px;
    white-space: nowrap;
  }
  .shift-table th.user-col,
  .shift-table td.user-col {
    text-align: left; min-width: 200px; max-width: 240px;
    position: sticky; left: 0; z-index: 3;
    background: rgba(0,0,0,0.30);
    color: var(--card-text);
    font-weight: 600;
  }
  .shift-table th.day-col {
    color: var(--card-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-size: 9px;
    background: rgba(0,0,0,0.20);
  }
  .shift-table th.day-col.is-weekend,
  .shift-table td.day-col.is-weekend { background: rgba(0,0,0,0.40); }
  .shift-table th.day-col.is-today,
  .shift-table td.day-col.is-today { background: rgba(242, 88, 27, 0.18); }
  .shift-table td.day-col {
    cursor: pointer; user-select: none;
    transition: opacity 80ms;
  }
  .shift-table td.day-col:hover { opacity: 0.80; }
  .shift-table td.day-col.has-shift {
    color: white; font-weight: 700;
  }
  .shift-table .balance-row td {
    background: rgba(0,0,0,0.40);
    font-size: 9px; height: 24px;
  }
  .shift-legend {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; font-size: 11px;
    color: var(--card-text-muted);
    border-top: 1px solid var(--card-border-2);
  }
  .shift-legend .lg-chip { display: inline-flex; align-items: center; gap: 6px; }
  .shift-legend .lg-dot { width: 14px; height: 14px; border-radius: 3px; }
</style>

<div class="card" style="overflow:hidden;">
  <div class="card-header"><div>
    <h2>Belegungsplan</h2>
    <p class="sub">
      Klick auf eine Zelle wechselt die Schicht: <strong>F</strong>rüh →
      <strong>S</strong>pät → <strong>N</strong>acht → Frei → Urlaub → Krank → leer.
      Rechtsklick öffnet Auswahl. Erfordert Berechtigung „manage_users" oder „manage_hr".
    </p>
  </div></div>

  <div style="overflow-x:auto;">
    <table class="shift-table">
      <thead>
        <tr>
          <th class="user-col">Mitarbeiter</th>
          {% for d in days %}
          {% set wd = d.weekday() %}
          {% set is_weekend = wd >= 5 %}
          <th class="day-col{% if is_weekend %} is-weekend{% endif %}"
              title="{{ d.strftime('%A %d.%m.') }}">
            {{ d.day }}
            <div style="font-size:8px;font-weight:400;">{{ ['Mo','Di','Mi','Do','Fr','Sa','So'][wd] }}</div>
          </th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr data-uid="{{ u.id }}">
          <td class="user-col">
            {{ u.first_name }} {{ u.last_name }}
            {% if u.position %}<div style="font-size:9px;color:var(--card-text-muted);font-weight:400;">{{ u.position }}</div>{% endif %}
          </td>
          {% for d in days %}
          {% set wd = d.weekday() %}
          {% set ds = d.isoformat() %}
          {% set st = (shift_map.get(u.id, {})).get(ds) %}
          <td class="day-col{% if wd >= 5 %} is-weekend{% endif %}{% if st %} has-shift{% endif %}"
              data-uid="{{ u.id }}" data-date="{{ ds }}"
              data-shift="{{ st or '' }}"
              {% if st %}style="background: {{ colors.get(st, '#737373') }};"{% endif %}
              title="{{ labels.get(st, '—') }} · {{ d.strftime('%d.%m.') }}">
            {% if st == 'early' %}F
            {% elif st == 'late' %}S
            {% elif st == 'night' %}N
            {% elif st == 'free' %}–
            {% elif st == 'vacation' %}U
            {% elif st == 'sick' %}K
            {% endif %}
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
        {# Balance-Zeile: pro Tag wie viele MA pro Schicht #}
        <tr class="balance-row">
          <td class="user-col" style="color:var(--card-text-muted);font-weight:600;">Belegung</td>
          {% for d in days %}
          {% set ds = d.isoformat() %}
          {% set b = balance.get(ds, {}) %}
          <td class="day-col{% if d.weekday() >= 5 %} is-weekend{% endif %}"
              title="Frühschicht: {{ b.get('early', 0) }} · Spätschicht: {{ b.get('late', 0) }} · Nacht: {{ b.get('night', 0) }}">
            {% set total = (b.get('early',0) + b.get('late',0) + b.get('night',0)) %}
            {% if total %}{{ total }}{% endif %}
          </td>
          {% endfor %}
        </tr>
      </tbody>
    </table>
  </div>

  <div class="shift-legend">
    <div class="lg-chip"><span class="lg-dot" style="background:{{ colors.early }};"></span>F = Frühschicht</div>
    <div class="lg-chip"><span class="lg-dot" style="background:{{ colors.late }};"></span>S = Spätschicht</div>
    <div class="lg-chip"><span class="lg-dot" style="background:{{ colors.night }};"></span>N = Nachtschicht</div>
    <div class="lg-chip"><span class="lg-dot" style="background:{{ colors.free }};"></span>– = Frei</div>
    <div class="lg-chip"><span class="lg-dot" style="background:{{ colors.vacation }};"></span>U = Urlaub</div>
    <div class="lg-chip"><span class="lg-dot" style="background:{{ colors.sick }};"></span>K = Krank</div>
  </div>
</div>

<script>
(function () {
  const ROTATION = ['early', 'late', 'night', 'free', 'vacation', 'sick', ''];
  const COLORS = {{ colors|tojson }};
  const LABELS = {{ labels|tojson }};
  function shiftLetter(s) {
    return ({early:'F', late:'S', night:'N', free:'–', vacation:'U', sick:'K'})[s] || '';
  }
  function applyToCell(td, st) {
    td.dataset.shift = st || '';
    td.style.background = st ? (COLORS[st] || '') : '';
    td.classList.toggle('has-shift', !!st);
    td.textContent = shiftLetter(st);
    td.title = (LABELS[st] || '—') + ' · ' + td.dataset.date.split('-').slice(1).reverse().join('.');
  }
  document.addEventListener('click', e => {
    const td = e.target.closest('.shift-table .day-col[data-uid]');
    if (!td) return;
    const cur = td.dataset.shift || '';
    const idx = ROTATION.indexOf(cur);
    const next = ROTATION[(idx + 1) % ROTATION.length];
    fetch('/api/shifts/set', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        user_id: parseInt(td.dataset.uid, 10),
        date: td.dataset.date,
        shift_type: next || null,
      }),
    }).then(r => r.json()).then(d => {
      if (d.ok) {
        applyToCell(td, next);
        // Option-E.2: Konflikt-Warnung anzeigen
        if (d.warnings && d.warnings.length) {
          const msg = '⚠ Konflikt-Hinweis:\n\n' + d.warnings.join('\n');
          if (window.toast) {
            d.warnings.forEach(w => toast(w, 'warning', { ttl: 4000 }));
          } else {
            // Fallback: kleines Banner über der Zelle
            td.title = msg;
            td.style.outline = '2px solid #fcd34d';
            setTimeout(() => { td.style.outline = ''; }, 4000);
          }
        }
      } else if (window.toast) toast(d.error || 'Speichern fehlgeschlagen', 'error');
    }).catch(() => { if (window.toast) toast('Netzwerkfehler', 'error'); });
  });
  // Rechtsklick → Direkt-Auswahl-Menü via prompt
  document.addEventListener('contextmenu', e => {
    const td = e.target.closest('.shift-table .day-col[data-uid]');
    if (!td) return;
    e.preventDefault();
    const choice = prompt(
      'Schicht setzen für ' + td.dataset.date + ':\n' +
      'F=Früh · S=Spät · N=Nacht · - =Frei · U=Urlaub · K=Krank · leer=löschen',
      shiftLetter(td.dataset.shift));
    if (choice === null) return;
    const m = {f:'early', s:'late', n:'night', '-':'free', u:'vacation', k:'sick',
               'F':'early', 'S':'late', 'N':'night', 'U':'vacation', 'K':'sick'};
    const st = m[choice.trim()] || (choice.trim() ? null : null);
    fetch('/api/shifts/set', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        user_id: parseInt(td.dataset.uid, 10),
        date: td.dataset.date,
        shift_type: st,
      }),
    }).then(r => r.json()).then(d => { if (d.ok) applyToCell(td, st); });
  });
})();
</script>
{% endblock %}