{% extends "base.html" %}

{% block title %}{{ task.name }}{% endblock %}
{% block heading %}{{ task.name }} <span class="text-neutral-400 font-normal text-base ml-2">· {{ task.machine_name }}</span>{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/maintenance" class="hover:underline">Wartung</a> / {{ task.name }}</p>{% endblock %}

{% block content %}
<style>
  .status-pill { display:inline-flex; padding:2px 8px; border-radius:9999px; font-size:11px; font-weight:600; }
  .status-ok { background:rgba(16,185,129,0.15); color:#059669; }
  .status-warn { background:rgba(245,158,11,0.15); color:#b45309; }
  .status-overdue { background:rgba(239,68,68,0.15); color:#dc2626; }
  .status-unknown { background:rgba(115,115,115,0.15); color:#737373; }
</style>

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 space-y-4">
    <!-- Stammdaten -->
    <div class="card">
      <div class="card-header"><h2>Stammdaten</h2></div>
      <div class="p-5 grid grid-cols-2 gap-4 text-sm">
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Maschine</p>
          <p class="font-medium">{{ task.machine_name }}</p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Intervall</p>
          <p class="nums">
            {% if task.interval_kind == 'hours' %}{{ task.interval_value|round(1) }} Betriebsstunden{% endif %}
            {% if task.interval_kind == 'days' %}{{ task.interval_value|round|int }} Tage{% endif %}
            {% if task.interval_kind == 'months' %}{{ task.interval_value|round|int }} Monate{% endif %}
            {% if task.interval_kind == 'cycles' %}{{ task.interval_value|round|int }} Zyklen{% endif %}
          </p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Letzte Wartung</p>
          <p class="nums">{{ task.last_done_at[:16] if task.last_done_at else '— noch nie —' }}</p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Verantwortlich</p>
          <p>
            {% if task.resp_first %}{{ task.resp_first }} {{ task.resp_last }}{% else %}—{% endif %}
            {% if task.external_provider %}<span class="text-xs text-neutral-500">· extern: {{ task.external_provider }}</span>{% endif %}
          </p>
        </div>
        {% if task.estimated_duration_min %}
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Erwartete Dauer</p>
          <p class="nums">{{ task.estimated_duration_min }} Min</p>
        </div>
        {% endif %}
        {% if task.estimated_cost_eur %}
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Erwartete Kosten</p>
          <p class="nums">{{ "%.2f"|format(task.estimated_cost_eur) }} €</p>
        </div>
        {% endif %}
        {% if task.description %}
        <div class="col-span-2">
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Beschreibung</p>
          <p class="text-xs whitespace-pre-line">{{ task.description }}</p>
        </div>
        {% endif %}
      </div>
    </div>

    <!-- Historie -->
    <div class="card">
      <div class="card-header">
        <div>
          <h2>Wartungs-Historie</h2>
          <p class="sub">{{ history|length }} Eintrag{% if history|length != 1 %}s{% endif %}</p>
        </div>
      </div>
      <table class="data-table">
        <thead>
          <tr>
            <th>Datum</th>
            <th>Stand bei Durchführung</th>
            <th>Dauer</th>
            <th>Kosten</th>
            <th>Durchgeführt von</th>
            <th>Notiz</th>
          </tr>
        </thead>
        <tbody>
          {% for h in history %}
          <tr>
            <td class="nums" style="font-size:12px;">{{ h.performed_at[:16] }}</td>
            <td class="nums" style="font-size:12px;">
              {% if h.value_at_done %}
                {% if task.interval_kind == 'hours' %}{{ h.value_at_done|round(1) }} h{% endif %}
                {% if task.interval_kind == 'cycles' %}{{ h.value_at_done|round|int }}{% endif %}
                {% if task.interval_kind in ('days', 'months') %}—{% endif %}
              {% else %}—{% endif %}
            </td>
            <td class="nums" style="font-size:12px;">{% if h.duration_min %}{{ h.duration_min }} Min{% else %}—{% endif %}</td>
            <td class="nums" style="font-size:12px;">{% if h.cost_eur %}{{ "%.2f"|format(h.cost_eur) }} €{% else %}—{% endif %}</td>
            <td>{% if h.first_name %}{{ h.first_name }} {{ h.last_name }}{% else %}—{% endif %}</td>
            <td class="text-xs" style="white-space:pre-line;">{{ h.notes or '—' }}</td>
          </tr>
          {% else %}
          <tr><td colspan="6" style="text-align:center;padding:24px;color:var(--card-text-muted);">
            Noch keine Wartung durchgeführt.
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="space-y-4">
    <!-- Aktueller Status + erledigt-Form -->
    <div class="card">
      <div class="card-header"><h2>Aktueller Status</h2></div>
      <div class="p-5 space-y-3 text-sm">
        {% set st = task.status_info %}
        <p>
          <span class="status-pill status-{{ st.status }}">
            {% if st.status == 'ok' %}🟢 OK{% endif %}
            {% if st.status == 'warn' %}🟡 Bald fällig{% endif %}
            {% if st.status == 'overdue' %}🔴 Überfällig{% endif %}
            {% if st.status == 'unknown' %}— Unbekannt{% endif %}
          </span>
        </p>
        {% if st.ratio_pct is not none %}
          <div style="height:10px;background:rgba(0,0,0,0.10);border-radius:5px;overflow:hidden;">
            {% set color = '#10b981' %}
            {% if st.status == 'warn' %}{% set color = '#f59e0b' %}{% endif %}
            {% if st.status == 'overdue' %}{% set color = '#ef4444' %}{% endif %}
            <div style="height:100%;background:{{ color }};width:{{ [st.ratio_pct, 100]|min }}%;"></div>
          </div>
          <p class="text-xs nums">{{ st.ratio_pct|round|int }} % des Intervalls</p>
        {% endif %}
        {% if st.hours_since_done is defined %}
          <p class="text-xs text-neutral-600 nums">{{ st.hours_since_done|round|int }} Stunden seit letzter Wartung</p>
        {% endif %}
        {% if st.cycles_since_done is defined %}
          <p class="text-xs text-neutral-600 nums">{{ st.cycles_since_done }} Zyklen seit letzter Wartung</p>
        {% endif %}
        {% if st.days_to_due is defined %}
          {% if st.days_to_due > 0 %}
            <p class="text-xs text-neutral-600">In {{ st.days_to_due|round|int }} Tagen fällig</p>
          {% else %}
            <p class="text-xs text-red-600">{{ (st.days_to_due*-1)|round|int }} Tage überfällig</p>
          {% endif %}
        {% endif %}
      </div>
    </div>

    <!-- Erledigt eintragen -->
    <div class="card">
      <div class="card-header"><h2>Wartung als erledigt eintragen</h2></div>
      <form method="post" action="/maintenance/{{ task.id }}/done" class="p-5 space-y-3">
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Dauer (Min)</label>
          <input class="input mt-1 w-full nums" type="number" min="0" name="duration_min"
                 placeholder="z.B. 45 — optional">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Tatsächliche Kosten (€)</label>
          <input class="input mt-1 w-full nums" type="number" step="0.01" min="0" name="cost_eur"
                 placeholder="z.B. 89.50 — optional">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Notiz</label>
          <textarea class="input mt-1 w-full" name="notes" rows="3"
                    placeholder="z.B. Hydraulik-Öl gewechselt, Filter erneuert. Auffälligkeiten: keine."></textarea>
        </div>
        <button class="btn btn-primary w-full" type="submit">Wartung als erledigt verbuchen</button>
      </form>
    </div>

    <!-- Aktivieren/Deaktivieren -->
    <div class="card">
      <div class="p-5">
        <form method="post" action="/maintenance/{{ task.id }}/toggle-active">
          <button class="btn btn-secondary btn-sm w-full" type="submit">
            {% if task.active %}Deaktivieren{% else %}Aktivieren{% endif %}
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}