{% extends "base.html" %}
{% from "_macros.html" import money, app_pill, item_type_badge, order_status_badge, avatar %}

{% block title %}Auswertungen{% endblock %}
{% block heading %}Auswertungen{% endblock %}

{% block content %}

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script>
  // Chart.js global defaults — readable on white cards
  Chart.defaults.font.family = "'Inter', sans-serif";
  Chart.defaults.font.size = 11;
  Chart.defaults.color = '#525252';
  Chart.defaults.borderColor = '#e5e5e5';
  Chart.defaults.plugins.legend.labels.boxWidth = 12;
  Chart.defaults.plugins.legend.labels.padding = 12;
</script>

{# ============= DATEV-EXPORT ============= #}
<section class="card mb-6">
  <div class="card-header"><div>
    <h2 style="color:#1e3a8a;">DATEV-Export (Buchungsstapel)</h2>
    <p class="sub">CSV nach DATEV v7.0 — Steuerberater-fertig (SKR03 Default)</p>
  </div></div>
  <form method="get" action="/reports/datev" class="p-5 grid grid-cols-1 md:grid-cols-4 gap-3 items-end text-sm">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Von</label>
      <input class="input mt-1 w-full nums" type="date" name="date_from"
             value="{{ '2026-01-01' }}" required>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bis</label>
      <input class="input mt-1 w-full nums" type="date" name="date_to"
             value="{{ '2026-12-31' }}" required>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Inhalt</label>
      <select name="include_payments" class="select mt-1 w-full">
        <option value="1" selected>Rechnungen + Zahlungen</option>
        <option value="0">Nur Rechnungen</option>
      </select>
    </div>
    <button class="btn btn-primary" type="submit">CSV herunterladen</button>
  </form>
  <p class="px-5 pb-4 text-[11px] text-neutral-500">
    Konten: 1400 Forderungen · 4400 Erlöse 19 % · 1776 USt 19 % · 4500 EU-Reverse-Charge · 4530 Drittland-Ausfuhr · 1200 Bank.
    Override pro Konto möglich via <code>company_settings.datev_account_*</code>.
  </p>
</section>

{# ============= VERKAUF & FINANZEN ============= #}
{% if sales_rep %}
<section class="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-6">
  <div class="stat-tile accent" style="--c:#10b981;">
    <p class="lbl">Umsatz YTD</p>
    <p class="val">{{ money(sales_rep.revenue_total_ytd) }}</p>
    <p class="sub">{{ sales_rep.revenue_by_month|length }} Monate</p>
  </div>
  <div class="stat-tile accent" style="--c:#2563EB;">
    <p class="lbl">Forderungen offen</p>
    <p class="val">{{ money(sales_rep.aging.total_open) }}</p>
    <p class="sub">davon {{ money(sales_rep.aging.bucket_over) }} > 90 T</p>
  </div>
  <div class="stat-tile accent" style="--c:{% if sales_rep.dso_days > 45 %}#ef4444{% elif sales_rep.dso_days > 30 %}#f59e0b{% else %}#10b981{% endif %};">
    <p class="lbl">DSO</p>
    <p class="val nums">{{ sales_rep.dso_days }} T</p>
    <p class="sub">Days Sales Outstanding</p>
  </div>
  <div class="stat-tile accent" style="--c:#E85D2F;">
    <p class="lbl">Top-Kunden (A)</p>
    <p class="val">{{ sales_rep.top_customers|selectattr('klasse','equalto','A')|list|length }}</p>
    <p class="sub">≥ 80 % Umsatz</p>
  </div>
</section>

<section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
  <div class="card">
    <div class="card-header"><div>
      <h2>Umsatz pro Monat</h2>
      <p class="sub">Letzte 12 Monate · brutto</p>
    </div></div>
    <div class="p-5"><canvas id="chart-revenue" style="max-height:280px"></canvas></div>
  </div>

  <div class="card">
    <div class="card-header"><div>
      <h2>Forderungsalter (Aging)</h2>
      <p class="sub">Offene Beträge nach Verzugsdauer</p>
    </div></div>
    <div class="p-5"><canvas id="chart-aging" style="max-height:280px"></canvas></div>
  </div>
</section>

<section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
  <div class="card">
    <div class="card-header"><div>
      <h2>Top-Kunden (ABC-Analyse)</h2>
      <p class="sub">YTD · A = 80 %, B = bis 95 %, C = Rest</p>
    </div></div>
    {% if sales_rep.top_customers %}
    <table class="data-table">
      <thead><tr><th>Klasse</th><th>Kunde</th><th class="num">Umsatz</th><th class="num">% kum.</th></tr></thead>
      <tbody>
      {% for c in sales_rep.top_customers[:10] %}
        <tr class="cursor-pointer" onclick="location='/customers/{{ c.customer_id }}'">
          <td><span class="badge badge-{% if c.klasse=='A' %}emerald{% elif c.klasse=='B' %}blue{% else %}neutral{% endif %}">{{ c.klasse }}</span></td>
          <td>{{ c.customer }}</td>
          <td class="num nums font-semibold">{{ money(c.revenue) }}</td>
          <td class="num nums">{{ "%.1f"|format(c.cum_pct) }} %</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="p-6 text-center text-sm text-neutral-500">Noch keine Kundenumsätze.</div>
    {% endif %}
  </div>

  <div class="card">
    <div class="card-header"><div>
      <h2>Marge pro Auftrag</h2>
      <p class="sub">Letzte 20 Aufträge — Soll/Ist Stunden + Material</p>
    </div></div>
    {% if sales_rep.margin_by_order %}
    <table class="data-table">
      <thead><tr><th>Auftrag</th><th>Kunde</th><th class="num">Verkauft</th><th class="num">Kosten</th><th class="num">Marge</th></tr></thead>
      <tbody>
      {% for m in sales_rep.margin_by_order %}
        <tr class="cursor-pointer" onclick="location='/sales-orders/{{ m.order_id }}'">
          <td class="nums text-xs">{{ m.order_no }}</td>
          <td class="text-xs">{{ m.customer }}</td>
          <td class="num nums">{{ money(m.sold_net) }}</td>
          <td class="num nums text-neutral-600">{{ money(m.total_cost) }}</td>
          <td class="num nums {% if m.margin > 0 %}text-emerald-700{% elif m.margin < 0 %}text-red-600{% endif %} font-semibold">
            {{ money(m.margin) }} <span class="text-[10px]">({{ m.margin_pct }} %)</span>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="p-6 text-center text-sm text-neutral-500">Keine Aufträge.</div>
    {% endif %}
  </div>
</section>

<script type="application/json" id="sales-data">
{
  "revenue_months": {{ sales_rep.revenue_by_month|map(attribute='month')|list|tojson }},
  "revenue_values": {{ sales_rep.revenue_by_month|map(attribute='revenue')|list|tojson }},
  "aging_labels": ["≤ 30 T", "31-60 T", "61-90 T", "> 90 T"],
  "aging_values": [{{ sales_rep.aging.bucket_30 }}, {{ sales_rep.aging.bucket_60 }}, {{ sales_rep.aging.bucket_90 }}, {{ sales_rep.aging.bucket_over }}]
}
</script>
<script>
(function () {
  const data = JSON.parse(document.getElementById('sales-data').textContent);
  new Chart(document.getElementById('chart-revenue'), {
    type: 'bar',
    data: { labels: data.revenue_months,
            datasets: [{ label: 'Umsatz €', data: data.revenue_values, backgroundColor: '#10b981', borderRadius: 4 }] },
    options: { maintainAspectRatio: false, plugins: { legend: { display: false } },
               scales: { y: { ticks: { callback: v => v.toLocaleString('de-DE') + ' €' } } } }
  });
  new Chart(document.getElementById('chart-aging'), {
    type: 'bar',
    data: { labels: data.aging_labels,
            datasets: [{ data: data.aging_values, backgroundColor: ['#10b981','#f59e0b','#ef4444','#7c2d12'], borderRadius: 4 }] },
    options: { maintainAspectRatio: false, plugins: { legend: { display: false } },
               scales: { y: { ticks: { callback: v => v.toLocaleString('de-DE') + ' €' } } } }
  });
})();
</script>
{% endif %}

{# ============= CONVERSION PRO VERTRIEBLER ============= #}
{% if rep_funnel is defined and rep_funnel %}
<section class="card mb-6">
  <div class="card-header"><div>
    <h2>Conversion pro Vertriebler · 90 Tage</h2>
    <p class="sub">Anfragen → Angebote → Aufträge je Vertriebler — wer schließt am besten ab?</p>
  </div></div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Vertriebler</th>
        <th class="num">Anfragen</th>
        <th class="num">Angebote</th>
        <th class="num">Anfr → Angebot</th>
        <th class="num">Aufträge</th>
        <th class="num">Angebot → Auftrag</th>
        <th class="num">Win-%</th>
        <th class="num">Auftragsvolumen</th>
      </tr>
    </thead>
    <tbody>
      {% for r in rep_funnel %}
      <tr>
        <td class="font-semibold">{{ r.name }}</td>
        <td class="num nums">{{ r.inq_count }}</td>
        <td class="num nums">{{ r.q_count }}</td>
        <td class="num nums">
          {% if r.inq_to_q_pct is none %}<span style="color: var(--card-text-muted);">—</span>
          {% elif r.inq_to_q_pct >= 70 %}<span style="color:#6ee7b7;font-weight:700;">{{ r.inq_to_q_pct }}%</span>
          {% elif r.inq_to_q_pct >= 40 %}<span style="color:#fbbf24;">{{ r.inq_to_q_pct }}%</span>
          {% else %}<span style="color:#fca5a5;">{{ r.inq_to_q_pct }}%</span>{% endif %}
        </td>
        <td class="num nums">{{ r.so_count }}</td>
        <td class="num nums">
          {% if r.q_to_so_pct is none %}<span style="color: var(--card-text-muted);">—</span>
          {% elif r.q_to_so_pct >= 50 %}<span style="color:#6ee7b7;font-weight:700;">{{ r.q_to_so_pct }}%</span>
          {% elif r.q_to_so_pct >= 25 %}<span style="color:#fbbf24;">{{ r.q_to_so_pct }}%</span>
          {% else %}<span style="color:#fca5a5;">{{ r.q_to_so_pct }}%</span>{% endif %}
        </td>
        <td class="num nums">
          {% if r.win_pct is none %}<span style="color: var(--card-text-muted);">—</span>
          {% elif r.win_pct >= 30 %}<span style="color:#6ee7b7;font-weight:700;">{{ r.win_pct }}%</span>
          {% elif r.win_pct >= 15 %}<span style="color:#fbbf24;">{{ r.win_pct }}%</span>
          {% else %}<span style="color:#fca5a5;">{{ r.win_pct }}%</span>{% endif %}
        </td>
        <td class="num nums font-bold" style="color: var(--brand-orange);">{{ money(r.so_volume) }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endif %}

{# ============= QUALITÄT & PRODUKTION ============= #}
{% if quality_kpis is defined and quality_kpis %}
<section class="grid grid-cols-1 lg:grid-cols-4 gap-3 mb-6">
  {% set qk = quality_kpis %}
  <div class="stat-tile accent" style="--c:{% if qk.ot_delivery_pct is none %}#737373{% elif qk.ot_delivery_pct >= 95 %}#10b981{% elif qk.ot_delivery_pct >= 85 %}#f59e0b{% else %}#ef4444{% endif %};">
    <p class="lbl">Liefertreue 90T</p>
    <p class="val">{% if qk.ot_delivery_pct is none %}—{% else %}{{ qk.ot_delivery_pct }} %{% endif %}</p>
    <p class="sub">On-Time-Delivery</p>
  </div>
  <div class="stat-tile accent" style="--c:{% if qk.ncr_rate_pct is none %}#737373{% elif qk.ncr_rate_pct < 1 %}#10b981{% elif qk.ncr_rate_pct < 3 %}#f59e0b{% else %}#ef4444{% endif %};">
    <p class="lbl">NCR-Quote 90T</p>
    <p class="val">{% if qk.ncr_rate_pct is none %}—{% else %}{{ qk.ncr_rate_pct }} %{% endif %}</p>
    <p class="sub">Reklamationen / Aufträge</p>
  </div>
  <div class="stat-tile accent" style="--c:{% if qk.critical_complaints %}#ef4444{% elif qk.open_complaints %}#f59e0b{% else %}#10b981{% endif %};">
    <p class="lbl">Reklamationen offen</p>
    <p class="val">{{ qk.open_complaints }}</p>
    <p class="sub">{% if qk.critical_complaints %}{{ qk.critical_complaints }} kritisch{% else %}—{% endif %}</p>
  </div>
  <div class="stat-tile accent" style="--c:{% if qk.expiring_certs %}#f59e0b{% else %}#10b981{% endif %};">
    <p class="lbl">Zertifikate</p>
    <p class="val">{{ qk.expiring_certs }}</p>
    <p class="sub">laufen in 60 T ab</p>
  </div>
</section>

<section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
  <div class="card">
    <div class="card-header"><div>
      <h2>Reklamationen nach Status</h2>
      <p class="sub">Aktueller Snapshot — alle Schweregrade</p>
    </div></div>
    <div class="p-5"><canvas id="chart-complaints-status" style="max-height:240px"></canvas></div>
  </div>
  <div class="card">
    <div class="card-header"><div>
      <h2>Maschinenauslastung</h2>
      <p class="sub">Belegung der letzten 30 Tage (geschätzt)</p>
    </div></div>
    <div class="p-5"><canvas id="chart-machine-load" style="max-height:240px"></canvas></div>
  </div>
</section>

<script type="application/json" id="quality-data">
{
  "complaints_by_status": {{ (quality_kpis.complaints_by_status or {})|tojson if quality_kpis.complaints_by_status is defined else '{}' }},
  "machine_load": {{ (quality_kpis.machine_load or [])|tojson if quality_kpis.machine_load is defined else '[]' }}
}
</script>
<script>
(function () {
  const qd = JSON.parse(document.getElementById('quality-data').textContent);
  // Komplaintssss-Chart: Statusse aus DB-Tabelle "complaints" zählen — falls
  // quality_kpis.complaints_by_status nicht geliefert wird, eine kleine Fetch-
  // Fallback machen, damit das Chart trotzdem etwas anzeigt.
  function drawComplaints(byStatus) {
    const labels = Object.keys(byStatus);
    const values = labels.map(k => byStatus[k]);
    const COLORS = {open:'#f59e0b', investigating:'#3b82f6', contained:'#06b6d4',
                    resolved:'#10b981', closed:'#737373'};
    const colors = labels.map(k => COLORS[k] || '#525252');
    const STATUS_LABELS = {open:'Offen', investigating:'In Analyse',
      contained:'Eingegrenzt', resolved:'Gelöst', closed:'Geschlossen'};
    const niceLabels = labels.map(k => STATUS_LABELS[k] || k);
    if (!labels.length) {
      const el = document.getElementById('chart-complaints-status');
      el.parentElement.innerHTML = '<div class="p-6 text-sm" style="color:var(--card-text-muted);">Noch keine Reklamationen erfasst.</div>';
      return;
    }
    new Chart(document.getElementById('chart-complaints-status'), {
      type: 'doughnut',
      data: { labels: niceLabels, datasets: [{ data: values, backgroundColor: colors,
              borderColor: '#fff', borderWidth: 2 }] },
      options: { cutout: '60%', plugins: { legend: { position: 'right' } } },
    });
  }
  function drawMachineLoad(rows) {
    if (!rows.length) {
      const el = document.getElementById('chart-machine-load');
      el.parentElement.innerHTML = '<div class="p-6 text-sm" style="color:var(--card-text-muted);">Keine Maschinen-Bewegungen in 30 T.</div>';
      return;
    }
    new Chart(document.getElementById('chart-machine-load'), {
      type: 'bar',
      data: {
        labels: rows.map(r => r.machine),
        datasets: [{
          label: 'Auslastung %',
          data: rows.map(r => r.load_pct),
          backgroundColor: rows.map(r => r.load_pct >= 90 ? '#ef4444' : r.load_pct >= 70 ? '#10b981' : '#f59e0b'),
          borderRadius: 4,
        }],
      },
      options: {
        indexAxis: 'y',
        plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ctx.raw + ' %' } } },
        scales: { x: { max: 100, ticks: { callback: v => v + ' %' } } },
      },
    });
  }
  // Live-Fetch falls Server-Daten leer waren
  if (!Object.keys(qd.complaints_by_status).length || !qd.machine_load.length) {
    fetch('/api/reports/quality').then(r => r.json()).then(d => {
      drawComplaints(d.complaints_by_status || {});
      drawMachineLoad(d.machine_load || []);
    }).catch(() => {
      drawComplaints({});
      drawMachineLoad([]);
    });
  } else {
    drawComplaints(qd.complaints_by_status);
    drawMachineLoad(qd.machine_load);
  }
})();
</script>
{% endif %}

{# ---------- 4 KPI-CHARTS (Werkstatt) ---------- #}
<section class="grid grid-cols-1 lg:grid-cols-2 gap-6">

  <div class="card">
    <div class="card-header"><div>
      <h2>Lagerwert nach Typ</h2>
      <p class="sub">Verteilung in Euro</p>
    </div></div>
    <div class="p-5"><canvas id="chart-stock-type" style="max-height:280px"></canvas></div>
  </div>

  <div class="card">
    <div class="card-header"><div>
      <h2>Bestellungen nach Status</h2>
      <p class="sub">Anzahl &amp; Wert</p>
    </div></div>
    <div class="p-5"><canvas id="chart-orders-status" style="max-height:280px"></canvas></div>
  </div>

  <div class="card">
    <div class="card-header"><div>
      <h2>Top-Lieferanten</h2>
      <p class="sub">Bestellwert in Euro</p>
    </div></div>
    <div class="p-5"><canvas id="chart-vendors" style="max-height:280px"></canvas></div>
  </div>

  <div class="card">
    <div class="card-header"><div>
      <h2>Prüfmittel-Status</h2>
      <p class="sub">Mess- &amp; Spannmittel</p>
    </div></div>
    <div class="p-5"><canvas id="chart-inspections" style="max-height:280px"></canvas></div>
  </div>
</section>

{# ---------- 2 BREITE CHARTS ---------- #}
<section class="card">
  <div class="card-header"><div>
    <h2>Bestand-Bewegungen letzte 30 Tage</h2>
    <p class="sub">Eingang · Auslagerung · Verleih</p>
  </div></div>
  <div class="p-5"><canvas id="chart-history" style="max-height:280px"></canvas></div>
</section>

<section class="card">
  <div class="card-header"><div>
    <h2>Team-Aktivität (30 Tage)</h2>
    <p class="sub">Verleihe · Auslagerungen · Bestellungen je Mitarbeiter</p>
  </div></div>
  <div class="p-5"><canvas id="chart-team" style="max-height:320px"></canvas></div>
</section>

{# ---------- ALTE TABELLEN BLEIBEN: präzise Zahlen ---------- #}
<section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
  <div class="card">
    <div class="card-header"><div><h2>Lagerwert nach Typ — Details</h2></div></div>
    <table class="data-table">
      <thead>
        <tr><th>Typ</th><th class="num">Artikel</th><th class="num">Bestand</th><th class="num">Wert</th></tr>
      </thead>
      <tbody>
        {% for r in by_type %}
        <tr>
          <td>{{ item_type_badge(r.item_type) }}</td>
          <td class="num">{{ r.item_count }}</td>
          <td class="num">{{ r.qty or 0 }}</td>
          <td class="num font-medium">{{ money(r.value) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="card">
    <div class="card-header"><div><h2>Bestellungen — Details</h2></div></div>
    <table class="data-table">
      <thead>
        <tr><th>Status</th><th class="num">Anzahl</th><th class="num">Wert</th></tr>
      </thead>
      <tbody>
        {% for r in orders %}
        <tr>
          <td>{{ order_status_badge(r.status) }}</td>
          <td class="num">{{ r.order_count }}</td>
          <td class="num font-medium">{{ money(r.total_value) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

<section class="card">
  <div class="card-header"><div>
    <h2>Mindestbestand erreicht</h2>
    <p class="sub">{{ low_stock|length }} Artikel — gesamt-Beschaffungswert: {{ money(low_stock|sum(attribute='reorder_value')) }}</p>
  </div></div>
  {% if low_stock %}
  <table class="data-table">
    <thead>
      <tr>
        <th></th>
        <th>SKU</th>
        <th>Beschreibung</th>
        <th class="num">Bestand</th>
        <th class="num">Min</th>
        <th class="num">Bestellt</th>
        <th>Lieferant</th>
        <th class="num">Beschaffungswert</th>
      </tr>
    </thead>
    <tbody>
      {% for it in low_stock %}
      <tr class="cursor-pointer" onclick="location='/items/{{ it.id }}'">
        <td>{{ app_pill(it.source_app) }}</td>
        <td class="nums font-medium">{{ it.ident }}</td>
        <td class="text-neutral-700 text-xs truncate" style="max-width:300px">{{ it.description }}</td>
        <td class="num text-red-600 font-semibold">{{ it.quantity_total }}</td>
        <td class="num text-neutral-500">{{ it.quantity_min }}</td>
        <td class="num">{% if it.on_order %}<span class="badge badge-amber">{{ it.on_order }}</span>{% else %}—{% endif %}</td>
        <td class="text-xs">{{ it.vendor_name or '—' }}</td>
        <td class="num font-medium">{{ money(it.reorder_value) }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center text-sm text-neutral-500">Alle Artikel über Mindestbestand.</div>
  {% endif %}
</section>

{# ---------- CHART INIT ---------- #}
<script>
const data = {{ chart_data | tojson }};

// Color palettes
const TYPE_COLORS = {
  tool: '#3b82f6', measuring_equipment: '#a855f7', clamping: '#06b6d4',
  material: '#10b981', consumable: '#f59e0b', packaging: '#737373', other: '#525252',
};
const STATUS_COLORS = {
  open: '#f59e0b', received: '#10b981', closed: '#737373', cancelled: '#ef4444',
};
const INSP_COLORS = { overdue: '#ef4444', warning: '#f59e0b', ok: '#10b981' };

const moneyFmt = v => new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR',maximumFractionDigits:0}).format(v);

// 1) Lagerwert nach Typ — Doughnut
new Chart(document.getElementById('chart-stock-type'), {
  type: 'doughnut',
  data: {
    labels: data.by_type.map(r => r.label),
    datasets: [{
      data: data.by_type.map(r => r.value),
      backgroundColor: data.by_type.map(r => TYPE_COLORS[r.type] || '#525252'),
      borderColor: '#fff', borderWidth: 2,
    }],
  },
  options: {
    cutout: '60%',
    plugins: {
      legend: { position: 'right' },
      tooltip: { callbacks: { label: ctx => `${ctx.label}: ${moneyFmt(ctx.raw)}` } },
    },
  },
});

// 2) Bestellungen nach Status — Doughnut
new Chart(document.getElementById('chart-orders-status'), {
  type: 'doughnut',
  data: {
    labels: data.orders.map(r => `${r.label} (${r.count})`),
    datasets: [{
      data: data.orders.map(r => r.value),
      backgroundColor: data.orders.map(r => STATUS_COLORS[r.status] || '#525252'),
      borderColor: '#fff', borderWidth: 2,
    }],
  },
  options: {
    cutout: '60%',
    plugins: {
      legend: { position: 'right' },
      tooltip: { callbacks: { label: ctx => `${ctx.label}: ${moneyFmt(ctx.raw)}` } },
    },
  },
});

// 3) Top-Lieferanten — Horizontal Bar
new Chart(document.getElementById('chart-vendors'), {
  type: 'bar',
  data: {
    labels: data.vendors.map(r => r.label),
    datasets: [{
      data: data.vendors.map(r => r.value),
      backgroundColor: '#2563EB',
      borderRadius: 4,
    }],
  },
  options: {
    indexAxis: 'y',
    plugins: {
      legend: { display: false },
      tooltip: { callbacks: { label: ctx => moneyFmt(ctx.raw) } },
    },
    scales: {
      x: { ticks: { callback: v => moneyFmt(v) }, grid: { color: '#f5f5f5' } },
      y: { grid: { display: false } },
    },
  },
});

// 4) Prüfmittel — Doughnut mit Color per Status
new Chart(document.getElementById('chart-inspections'), {
  type: 'doughnut',
  data: {
    labels: data.inspections.map(r => r.label),
    datasets: [{
      data: data.inspections.map(r => r.value),
      backgroundColor: data.inspections.map(r => INSP_COLORS[r.key]),
      borderColor: '#fff', borderWidth: 2,
    }],
  },
  options: {
    cutout: '60%',
    plugins: { legend: { position: 'right' } },
  },
});

// 5) Bestand-Bewegungen — Line (mehrere Linien)
const days = data.history.map(r => r.day);
new Chart(document.getElementById('chart-history'), {
  type: 'line',
  data: {
    labels: days,
    datasets: [
      { label: 'Eingang', data: data.history.map(r => r.in),
        borderColor: '#10b981', backgroundColor: '#10b98133', fill: true, tension: 0.3 },
      { label: 'Auslagerung', data: data.history.map(r => r.out),
        borderColor: '#f59e0b', backgroundColor: '#f59e0b33', fill: true, tension: 0.3 },
      { label: 'Verleih', data: data.history.map(r => r.rent),
        borderColor: '#3b82f6', backgroundColor: '#3b82f633', fill: true, tension: 0.3 },
    ],
  },
  options: {
    interaction: { mode: 'index', intersect: false },
    plugins: { legend: { position: 'top', align: 'end' } },
    scales: {
      x: { grid: { display: false } },
      y: { beginAtZero: true, grid: { color: '#f5f5f5' }, title: { display: true, text: 'Stück', color: '#737373' } },
    },
  },
});

// 6) Team-Aktivität — Stacked Bar
new Chart(document.getElementById('chart-team'), {
  type: 'bar',
  data: {
    labels: data.team.map(r => r.label),
    datasets: [
      { label: 'Verleihe',    data: data.team.map(r => r.rentals),    backgroundColor: '#3b82f6', borderRadius: 4 },
      { label: 'Auslagerung', data: data.team.map(r => r.stock_outs), backgroundColor: '#f59e0b', borderRadius: 4 },
      { label: 'Bestellung',  data: data.team.map(r => r.orders),     backgroundColor: '#10b981', borderRadius: 4 },
    ],
  },
  options: {
    plugins: { legend: { position: 'top', align: 'end' } },
    scales: {
      x: { stacked: true, grid: { display: false } },
      y: { stacked: true, beginAtZero: true, grid: { color: '#f5f5f5' } },
    },
  },
});
</script>

{% endblock %}