{% extends "base.html" %}

{% block title %}SPC · {{ summary.template_name }}{% endblock %}
{% block heading %}📊 SPC · {{ summary.template_name }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/spc" class="hover:underline">SPC</a> / {{ summary.template_name }}</p>{% endblock %}

{% block content %}
<style>
  .stat-card { background:white;border:1px solid var(--card-border);border-radius:8px;padding:12px 14px; }
  .stat-label { font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--card-text-muted);font-weight:600; }
  .stat-value { font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px; }
  .cpk-badge { display:inline-flex; padding:2px 8px; border-radius:9999px; font-size:11px; font-weight:600; }
  .cpk-excellent { background:rgba(16,185,129,0.20); color:#047857; }
  .cpk-good      { background:rgba(16,185,129,0.10); color:#059669; }
  .cpk-ok        { background:rgba(245,158,11,0.15); color:#b45309; }
  .cpk-critical  { background:rgba(239,68,68,0.15); color:#dc2626; }
  .point-tab { padding:8px 14px;border-radius:6px;font-size:13px;text-decoration:none;
               background:rgba(0,0,0,0.04);color:var(--card-text);margin-right:4px;display:inline-block; }
  .point-tab.active { background:#1e3a8a;color:white; }
  .point-tab:hover { background:rgba(0,0,0,0.08); }
  .point-tab.active:hover { background:#1e3a8a; }
</style>

<!-- Mess-Punkt-Tabs -->
<div class="card" style="padding:12px 18px;">
  <div style="display:flex;flex-wrap:wrap;gap:4px;">
    {% for p in summary.points %}
      <a class="point-tab {% if p.idx == selected_point %}active{% endif %}"
         href="/spc/{{ summary.template_id }}?point={{ p.idx }}">
        {{ p.name }}
        {% if p.cpk is not none %}
          <span style="opacity:0.7;font-size:11px;">· Cpk {{ "%.2f"|format(p.cpk) }}</span>
        {% endif %}
      </a>
    {% endfor %}
  </div>
</div>

<!-- Statistik-Kacheln -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0;">
  <div class="stat-card">
    <div class="stat-label">Stichprobe</div>
    <div class="stat-value nums">{{ chart.n }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Mittelwert</div>
    <div class="stat-value nums">{% if chart.mean is not none %}{{ "%.4f"|format(chart.mean) }}{% else %}—{% endif %}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">σ (Sigma)</div>
    <div class="stat-value nums">{% if chart.sigma is not none %}{{ "%.4f"|format(chart.sigma) }}{% else %}—{% endif %}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Cp</div>
    <div class="stat-value nums">{% if chart.cp is not none %}{{ "%.2f"|format(chart.cp) }}{% else %}—{% endif %}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Cpk</div>
    <div class="stat-value nums">{% if chart.cpk is not none %}{{ "%.2f"|format(chart.cpk) }}{% else %}—{% endif %}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Außer Spec</div>
    <div class="stat-value nums" style="color:{% if chart.out_of_spec_count > 0 %}#dc2626{% else %}#059669{% endif %};">{{ chart.out_of_spec_count }}</div>
  </div>
</div>

<!-- Chart-Karte -->
<div class="card">
  <div class="card-header">
    <div>
      <h2>{{ chart.point_name }} {% if chart.unit %}<span class="text-neutral-400 font-normal">[{{ chart.unit }}]</span>{% endif %}</h2>
      <p class="sub">
        Sollwert: <strong class="nums">{{ chart.nominal }}</strong>
        · USL: <strong class="nums" style="color:#dc2626;">{{ chart.usl }}</strong>
        · LSL: <strong class="nums" style="color:#dc2626;">{{ chart.lsl }}</strong>
        {% if chart.ucl is not none %}
        · UCL (3σ): <strong class="nums">{{ "%.4f"|format(chart.ucl) }}</strong>
        · LCL (3σ): <strong class="nums">{{ "%.4f"|format(chart.lcl) }}</strong>
        {% endif %}
      </p>
    </div>
  </div>

  {% if chart.n == 0 %}
    <p style="padding:30px;text-align:center;color:var(--card-text-muted);">
      Keine Mess-Werte für diesen Punkt vorhanden.
    </p>
  {% else %}
  <!-- SVG x-bar Chart inline -->
  {# Spannweite y-Achse: max(USL+10%, max-Wert) bis min(LSL-10%, min-Wert) #}
  {% set min_v_data = chart['values'] | map(attribute='value') | min %}
  {% set max_v_data = chart['values'] | map(attribute='value') | max %}
  {% set span = chart.usl - chart.lsl %}
  {% set pad = (span * 0.20) if span > 0 else 1 %}
  {% set y_min = [chart.lsl - pad, min_v_data]|min %}
  {% set y_max = [chart.usl + pad, max_v_data]|max %}
  {% set y_range = y_max - y_min if y_max > y_min else 1 %}
  {% set chart_w = 1000 %}
  {% set chart_h = 360 %}
  {% set padding_left = 70 %}
  {% set padding_right = 30 %}
  {% set padding_top = 20 %}
  {% set padding_bottom = 50 %}
  {% set inner_w = chart_w - padding_left - padding_right %}
  {% set inner_h = chart_h - padding_top - padding_bottom %}

  {% macro y_pos(v) -%}
    {{- padding_top + ((y_max - v) / y_range * inner_h) -}}
  {%- endmacro %}
  {% macro x_pos(i, total) -%}
    {{- padding_left + ((i / [total-1, 1]|max) * inner_w) -}}
  {%- endmacro %}

  <div style="padding:14px 18px;overflow-x:auto;">
    <svg viewBox="0 0 {{ chart_w }} {{ chart_h }}" style="width:100%;max-width:1000px;height:auto;background:#fafaf7;border-radius:6px;font-family:system-ui,sans-serif;">
      <!-- Grid-Linien y -->
      {% for frac in [0, 0.25, 0.5, 0.75, 1] %}
        {% set y = padding_top + (frac * inner_h) %}
        {% set v_at = y_max - (frac * y_range) %}
        <line x1="{{ padding_left }}" y1="{{ y }}" x2="{{ chart_w - padding_right }}" y2="{{ y }}"
              stroke="#e5e5e5" stroke-width="0.5"/>
        <text x="{{ padding_left - 5 }}" y="{{ y + 3 }}" text-anchor="end" font-size="10" fill="#737373">{{ "%.3f"|format(v_at) }}</text>
      {% endfor %}

      <!-- USL/LSL/Nominal Linien -->
      <line x1="{{ padding_left }}" y1="{{ y_pos(chart.usl) }}" x2="{{ chart_w - padding_right }}" y2="{{ y_pos(chart.usl) }}"
            stroke="#ef4444" stroke-width="1.5" stroke-dasharray="6 3"/>
      <text x="{{ chart_w - padding_right - 5 }}" y="{{ y_pos(chart.usl)|float - 4 }}" text-anchor="end" font-size="10" fill="#ef4444" font-weight="600">USL: {{ "%.4f"|format(chart.usl) }}</text>

      <line x1="{{ padding_left }}" y1="{{ y_pos(chart.lsl) }}" x2="{{ chart_w - padding_right }}" y2="{{ y_pos(chart.lsl) }}"
            stroke="#ef4444" stroke-width="1.5" stroke-dasharray="6 3"/>
      <text x="{{ chart_w - padding_right - 5 }}" y="{{ y_pos(chart.lsl)|float + 12 }}" text-anchor="end" font-size="10" fill="#ef4444" font-weight="600">LSL: {{ "%.4f"|format(chart.lsl) }}</text>

      <line x1="{{ padding_left }}" y1="{{ y_pos(chart.nominal) }}" x2="{{ chart_w - padding_right }}" y2="{{ y_pos(chart.nominal) }}"
            stroke="#1e3a8a" stroke-width="1" stroke-dasharray="2 2"/>
      <text x="{{ padding_left + 4 }}" y="{{ y_pos(chart.nominal)|float - 3 }}" font-size="10" fill="#1e3a8a">Nominal: {{ chart.nominal }}</text>

      {% if chart.mean is not none %}
        <line x1="{{ padding_left }}" y1="{{ y_pos(chart.mean) }}" x2="{{ chart_w - padding_right }}" y2="{{ y_pos(chart.mean) }}"
              stroke="#059669" stroke-width="1.5"/>
        <text x="{{ chart_w - padding_right - 5 }}" y="{{ y_pos(chart.mean)|float - 4 }}" text-anchor="end" font-size="10" fill="#059669" font-weight="600">x̄: {{ "%.4f"|format(chart.mean) }}</text>
      {% endif %}

      {% if chart.ucl is not none %}
        <line x1="{{ padding_left }}" y1="{{ y_pos(chart.ucl) }}" x2="{{ chart_w - padding_right }}" y2="{{ y_pos(chart.ucl) }}"
              stroke="#f59e0b" stroke-width="1" stroke-dasharray="4 2"/>
        <text x="{{ padding_left + 4 }}" y="{{ y_pos(chart.ucl)|float - 3 }}" font-size="9" fill="#f59e0b">UCL</text>
        <line x1="{{ padding_left }}" y1="{{ y_pos(chart.lcl) }}" x2="{{ chart_w - padding_right }}" y2="{{ y_pos(chart.lcl) }}"
              stroke="#f59e0b" stroke-width="1" stroke-dasharray="4 2"/>
        <text x="{{ padding_left + 4 }}" y="{{ y_pos(chart.lcl)|float + 11 }}" font-size="9" fill="#f59e0b">LCL</text>
      {% endif %}

      <!-- Mess-Werte verbinden + Punkte -->
      <polyline fill="none" stroke="#1d4ed8" stroke-width="1.5"
                points="{% for v in chart['values'] %}{{ x_pos(loop.index0, chart.n) }},{{ y_pos(v.value) }} {% endfor %}"/>

      {% for v in chart['values'] %}
        <circle cx="{{ x_pos(loop.index0, chart.n) }}" cy="{{ y_pos(v.value) }}"
                r="{% if not v.in_spec %}5{% else %}3.5{% endif %}"
                fill="{% if not v.in_spec %}#ef4444{% else %}#1d4ed8{% endif %}"
                stroke="white" stroke-width="1.5">
          <title>#{{ loop.index }} · {{ v.ts[:16] }} · {{ v.value }}{{ chart.unit }}{% if not v.in_spec %} (außer Spec){% endif %}{% if v.serial_no %} · S/N {{ v.serial_no }}{% endif %}</title>
        </circle>
      {% endfor %}

      <!-- X-Achse + Achsen-Labels -->
      <line x1="{{ padding_left }}" y1="{{ chart_h - padding_bottom }}"
            x2="{{ chart_w - padding_right }}" y2="{{ chart_h - padding_bottom }}"
            stroke="#737373" stroke-width="1"/>
      <line x1="{{ padding_left }}" y1="{{ padding_top }}"
            x2="{{ padding_left }}" y2="{{ chart_h - padding_bottom }}"
            stroke="#737373" stroke-width="1"/>

      {# X-Tick alle 10. Wert (oder bei n<=20 jeden) #}
      {% set step = 1 if chart.n <= 20 else (chart.n // 10) %}
      {% for v in chart['values'] %}
        {% if loop.index0 % step == 0 or loop.last %}
          <text x="{{ x_pos(loop.index0, chart.n) }}" y="{{ chart_h - padding_bottom + 14 }}"
                text-anchor="middle" font-size="9" fill="#737373">{{ loop.index }}</text>
        {% endif %}
      {% endfor %}
      <text x="{{ padding_left + inner_w / 2 }}" y="{{ chart_h - 8 }}" text-anchor="middle" font-size="11" fill="#525252" font-weight="600">Mess-Index (chronologisch)</text>
    </svg>
  </div>

  <p style="padding:0 18px 14px;font-size:11px;color:var(--card-text-muted);">
    🔴 = außerhalb Spec · 🔵 = innerhalb Spec ·
    Rot gestrichelt = USL/LSL (Toleranz-Grenzen) ·
    Orange gestrichelt = UCL/LCL (statistische 3σ-Grenzen) ·
    Grün durchgezogen = Mittelwert · Blau gestrichelt = Sollwert
  </p>
  {% endif %}
</div>

<!-- Werte-Tabelle -->
{% if chart['values'] %}
<div class="card" style="margin-top:14px;">
  <div class="card-header"><div><h2>Letzte Mess-Werte</h2><p class="sub">{{ chart['values']|length }} Stichproben</p></div></div>
  <table class="data-table">
    <thead>
      <tr>
        <th>#</th>
        <th>Zeitstempel</th>
        <th>Serien-Nr</th>
        <th class="num">Wert</th>
        <th>In Spec?</th>
      </tr>
    </thead>
    <tbody>
      {% for v in chart['values'] | reverse %}
        <tr>
          <td class="nums">{{ chart['values']|length - loop.index0 }}</td>
          <td class="text-xs nums">{{ v.ts[:16] }}</td>
          <td class="text-xs">{{ v.serial_no or '—' }}</td>
          <td class="num nums" style="font-weight:600;color:{% if not v.in_spec %}#dc2626{% endif %};">
            {{ v.value }} {{ chart.unit }}
          </td>
          <td>
            {% if v.in_spec %}
              <span style="color:#059669;">✓</span>
            {% else %}
              <span style="color:#dc2626;font-weight:600;">✗ außer Spec</span>
            {% endif %}
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
{% endblock %}