{% extends 'base.html' %}
{% block title %}Bericht-Explorer | Filament Manager{% endblock %}
{% block body_class %}page-reports-explorer{% endblock %}
{% block page_title %}Bericht-Explorer{% endblock %}
{% block page_subtitle %}Berichte filtern, Vorschau prüfen und direkt als PDF exportieren.{% endblock %}
{% block page_toolbar %}
<a class="sci-btn subtle small" href="{{ url_for('web.settings', tab='reports') }}"><iconify-icon icon="mdi:cog-outline" aria-hidden="true"></iconify-icon> Report Einstellungen</a>
<a class="sci-btn subtle small" href="{{ url_for('web.report_lagerstatus_pdf') }}"><iconify-icon icon="mdi:file-pdf-box" aria-hidden="true"></iconify-icon> Schnell-PDF</a>
{% endblock %}
{% block head_extra %}
<style>
  .reports-filter-shell {
    display: grid;
    gap: .65rem;
  }
  .reports-filter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
  }
  .reports-filter-toggle iconify-icon {
    transition: transform .2s ease;
  }
  .reports-filter-shell.is-collapsed .reports-filter-toggle iconify-icon {
    transform: rotate(180deg);
  }
  .reports-filter-body {
    display: grid;
    gap: .7rem;
  }
  .reports-filter-shell.is-collapsed .reports-filter-body {
    display: none;
  }
  .reports-quickbar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
  }
  .reports-quickbar .sci-btn {
    min-height: 30px;
  }
  .reports-split-wrap {
    position: relative;
    overflow: hidden;
  }
  .reports-split-wrap .reports-split-left {
    min-width: 0;
  }
  .reports-split-wrap .reports-split-right {
    min-width: 0;
    transition: transform .26s ease, opacity .22s ease, max-width .26s ease, width .26s ease;
    transform: translateX(0);
    opacity: 1;
    width: 100%;
    max-width: 100%;
  }
  .reports-split-wrap.is-preview-collapsed {
    grid-template-columns: 1fr;
  }
  .reports-split-wrap.is-preview-collapsed .reports-split-right {
    pointer-events: none;
    transform: translateX(108%);
    opacity: 0;
    width: 0;
    max-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .reports-preview-tab {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    min-height: 160px;
    width: 34px;
    border-radius: 10px 0 0 10px;
    border: 1px solid var(--app-filter-field-border);
    border-right: 0;
    background: var(--app-filter-field-bg);
    color: var(--app-text);
    display: none;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .08em;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .reports-split-wrap.is-preview-collapsed .reports-preview-tab {
    display: inline-flex;
  }
  .reports-split-hide-btn {
    margin-left: auto;
  }
  .reports-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
  }
  .report-editor-modal.hidden {
    display: none;
  }
  .report-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
  }
  .report-editor-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 26, .58);
    backdrop-filter: blur(2px);
  }
  .report-editor-card {
    position: relative;
    margin: clamp(16px, 4vh, 40px) auto;
    width: min(1160px, calc(100% - 28px));
    max-height: min(760px, calc(100vh - 32px));
    overflow: auto;
    background: var(--app-panel-solid, #111a27);
    opacity: 1;
    border: 1px solid var(--app-filter-field-border);
    border-radius: 16px;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .28);
    padding: 1rem;
    display: grid;
    gap: .85rem;
  }
  .report-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
  }
  .report-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: .85rem;
  }
  .report-editor-panel {
    border: 1px solid var(--app-filter-field-border);
    border-radius: 12px;
    background: var(--app-filter-field-bg);
    padding: .7rem;
    display: grid;
    gap: .55rem;
    min-height: 250px;
  }
  .report-editor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
  }
  .report-editor-item {
    border: 1px solid var(--app-filter-field-border);
    border-radius: 10px;
    background: var(--app-card-bg);
    padding: .45rem .55rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
  }
  .report-editor-item-controls {
    display: inline-flex;
    gap: .3rem;
  }
  .report-editor-item-controls .sci-btn {
    min-height: 26px;
    min-width: 26px;
    padding: 0 .42rem;
  }
  .report-editor-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
  }
  .report-editor-actions .left,
  .report-editor-actions .right {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    flex-wrap: wrap;
  }
  @media (max-width: 980px) {
    .report-editor-grid {
      grid-template-columns: 1fr;
    }
  }
  html[data-theme="light"] .report-editor-card {
    background: #f4f7fc;
  }
  html[data-theme="dark"] .report-editor-card {
    background: #111a27;
  }
</style>
{% endblock %}
{% block content %}
<section class="sci-panel section-gap">
  <div class="reports-filter-shell" data-reports-filter-shell>
    <div class="reports-filter-head">
      <h2 class="sci-h2">Filter & Berichtsauswahl</h2>
      <button type="button" class="sci-btn subtle small reports-filter-toggle" data-reports-filter-toggle aria-expanded="true">
        <iconify-icon icon="mdi:chevron-up" aria-hidden="true"></iconify-icon>
        Filter einklappen
      </button>
    </div>
    <div class="reports-filter-body" data-reports-filter-body>
      <div class="reports-quickbar">
        <button type="button" class="sci-btn subtle small" data-reports-preset="stock_all"><iconify-icon icon="mdi:warehouse" aria-hidden="true"></iconify-icon> Bestand alle Lager</button>
        <button type="button" class="sci-btn subtle small" data-reports-preset="stock_per_warehouse"><iconify-icon icon="mdi:domain" aria-hidden="true"></iconify-icon> Bestand pro Lager</button>
        <button type="button" class="sci-btn subtle small" data-reports-preset="low_stock_month"><iconify-icon icon="mdi:alert-outline" aria-hidden="true"></iconify-icon> Low Stock aktueller Monat</button>
        <button type="button" class="sci-btn subtle small" data-reports-preset="low_stock_3m"><iconify-icon icon="mdi:calendar-range" aria-hidden="true"></iconify-icon> Low Stock letzte 3 Monate</button>
        <button type="button" class="sci-btn subtle small" data-reports-preset="stats_year"><iconify-icon icon="mdi:chart-areaspline" aria-hidden="true"></iconify-icon> Filamentstatistik Jahr</button>
        <button type="button" class="sci-btn subtle small" data-reports-preset="stats_month"><iconify-icon icon="mdi:chart-line" aria-hidden="true"></iconify-icon> Filamentstatistik Monat</button>
      </div>
      <form method="get" class="filter-grid" data-reports-filter-form>
    <label>Bericht
      <select class="sci-input" name="report" data-reports-field="report">
        <option value="lagerstatus" {% if selected_report == 'lagerstatus' %}selected{% endif %}>Lagerstatus</option>
        <option value="rollenvorrat" {% if selected_report == 'rollenvorrat' %}selected{% endif %}>Rollenvorrat</option>
        <option value="bestellzettel" {% if selected_report == 'bestellzettel' %}selected{% endif %}>Bestellzettel</option>
        <option value="filamentstatistik" {% if selected_report == 'filamentstatistik' %}selected{% endif %}>Filamentstatistik</option>
      </select>
    </label>
    <label>Scope
      <select class="sci-input" name="scope" data-reports-field="scope">
        <option value="active" {% if filters.scope == 'active' %}selected{% endif %}>Nur aktiv</option>
        <option value="all" {% if filters.scope == 'all' %}selected{% endif %}>Aktiv + archiviert</option>
      </select>
    </label>
    <label>Lager
      <select class="sci-input" name="warehouse_id" data-reports-field="warehouse_id">
        <option value="">Alle Lager</option>
        {% for warehouse_id, warehouse_name in warehouse_options %}
        <option value="{{ warehouse_id }}" {% if filters.warehouse_id == warehouse_id %}selected{% endif %}>{{ warehouse_name }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Hersteller
      <select class="sci-input" name="brand" data-reports-field="brand">
        <option value="">Alle</option>
        {% for brand in brand_options %}
        <option value="{{ brand }}" {% if filters.brand == brand %}selected{% endif %}>{{ brand }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Material
      <select class="sci-input" name="material" data-reports-field="material">
        <option value="">Alle</option>
        {% for material in material_options %}
        <option value="{{ material }}" {% if filters.material == material %}selected{% endif %}>{{ material }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Farbe
      <select class="sci-input" name="color" data-reports-field="color">
        <option value="">Alle</option>
        {% for color in color_options %}
        <option value="{{ color }}" {% if filters.color == color %}selected{% endif %}>{{ color }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Von
      <input class="sci-input" type="date" name="from" data-reports-field="from" value="{{ filters.date_from.isoformat() if filters.date_from else '' }}">
    </label>
    <label>Bis
      <input class="sci-input" type="date" name="to" data-reports-field="to" value="{{ filters.date_to.isoformat() if filters.date_to else '' }}">
    </label>
    <label>Suche
      <input class="sci-input" type="text" name="q" data-reports-field="q" value="{{ filters.q }}" placeholder="ID, Hersteller, Material, Farbe ...">
    </label>
    <label>Zielbestand (g)
      <input class="sci-input" type="number" min="100" step="50" name="target_stock_g" data-reports-field="target_stock_g" value="{{ filters.target_stock_g }}">
    </label>
    <label>Low-Stock Grenze (g)
      <input class="sci-input" type="number" min="50" step="50" name="low_stock_group_threshold_g" data-reports-field="low_stock_group_threshold_g" value="{{ filters.low_stock_group_threshold_g }}">
    </label>
    <label class="check-line">
      <input type="checkbox" name="split" value="1" {% if split_view %}checked{% endif %}>
      Split-View (Vorschau + PDF)
    </label>
    <div class="sci-actions">
      <button type="submit" class="sci-btn small"><iconify-icon icon="mdi:magnify" aria-hidden="true"></iconify-icon> Vorschau laden</button>
      <a class="sci-btn subtle small" href="{{ url_for('web.reports_explorer') }}"><iconify-icon icon="mdi:refresh" aria-hidden="true"></iconify-icon> Zuruecksetzen</a>
    </div>
      </form>
    </div>
  </div>
</section>

<section class="sci-panel section-gap">
  <div class="section-head reports-preview-head">
    <h2 class="sci-h2">Report-Vorschau</h2>
    <div class="sci-actions">
      <span class="sci-badge ok">Spulen: {{ preview.meta.spools if preview.meta.spools is defined else 0 }}</span>
      {% if preview.meta.groups is defined %}<span class="sci-badge">{{ preview.meta.groups }} Gruppen</span>{% endif %}
      {% if preview.meta.low_stock_groups is defined %}<span class="sci-badge warn">{{ preview.meta.low_stock_groups }} Bestellpositionen</span>{% endif %}
      <button type="button" class="sci-btn subtle small" data-report-editor-open><iconify-icon icon="mdi:tune-variant" aria-hidden="true"></iconify-icon> Report-Editor</button>
    </div>
  </div>
  {% set active_pdf_url = url_for('web.report_lagerstatus_pdf') %}
  {% if selected_report == 'rollenvorrat' %}{% set active_pdf_url = url_for('web.report_rollenvorrat_pdf') %}{% endif %}
  {% if selected_report == 'bestellzettel' %}{% set active_pdf_url = url_for('web.report_bestellzettel_pdf') %}{% endif %}
  {% if selected_report == 'filamentstatistik' %}{% set active_pdf_url = url_for('web.report_filamentstatistik_pdf') %}{% endif %}
  {% set lagerstatus_pdf_url = url_for('web.report_lagerstatus_pdf') ~ '?' ~ export_query %}
  {% set rollenvorrat_pdf_url = url_for('web.report_rollenvorrat_pdf') ~ '?' ~ export_query %}
  {% set bestellzettel_pdf_url = url_for('web.report_bestellzettel_pdf') ~ '?' ~ export_query %}
  {% set filamentstatistik_pdf_url = url_for('web.report_filamentstatistik_pdf') ~ '?' ~ export_query %}
  <div class="sci-grid-2 reports-split-wrap" data-reports-split-wrap>
    <button type="button" class="reports-preview-tab" data-reports-preview-show title="PDF Vorschau einblenden" aria-label="PDF Vorschau einblenden">Vorschau</button>
    <div class="table-wrap reports-split-left">
      <table class="sci-table" data-report-preview-table>
        <thead>
          <tr data-report-preview-head>
            {% for column in preview.columns %}
            <th>{{ column }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody data-report-preview-body>
          {% for row in preview.rows %}
          <tr>
            {% for value in row %}
            <td>{{ value }}</td>
            {% endfor %}
          </tr>
          {% else %}
          <tr><td colspan="{{ preview.columns|length }}" class="empty-cell">Keine Daten fuer die aktuelle Filterkombination.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="sci-panel sci-panel-tight reports-split-right" data-reports-preview-pane>
      <div class="section-head">
        <h3 class="sci-h3">PDF Live-Vorschau</h3>
        <button type="button" class="sci-btn subtle small reports-split-hide-btn" data-reports-preview-hide><iconify-icon icon="mdi:chevron-right" aria-hidden="true"></iconify-icon> Ausblenden</button>
      </div>
      <div class="page-head-toolbar reports-explorer-split-toolbar" data-reports-split-toolbar>
        <label class="reports-split-field">
          <span class="muted tiny">Report</span>
          <select class="sci-input small" data-reports-split-select>
            <option value="{{ lagerstatus_pdf_url }}" {% if selected_report == 'lagerstatus' %}selected{% endif %}>Lagerstatus</option>
            <option value="{{ rollenvorrat_pdf_url }}" {% if selected_report == 'rollenvorrat' %}selected{% endif %}>Rollenvorrat</option>
            <option value="{{ bestellzettel_pdf_url }}" {% if selected_report == 'bestellzettel' %}selected{% endif %}>Bestellzettel</option>
            <option value="{{ filamentstatistik_pdf_url }}" {% if selected_report == 'filamentstatistik' %}selected{% endif %}>Filamentstatistik</option>
          </select>
        </label>
        <button type="button" class="sci-btn subtle small" data-reports-split-generate><iconify-icon icon="mdi:cog-refresh-outline" aria-hidden="true"></iconify-icon> Erstellen</button>
        <button type="button" class="sci-btn subtle small" data-reports-split-download><iconify-icon icon="mdi:download" aria-hidden="true"></iconify-icon> Download</button>
      </div>
      <iframe
        title="PDF Vorschau"
        data-reports-split-iframe
        src="{{ active_pdf_url }}?{{ export_query }}&inline=1"
        style="width:100%;min-height:640px;border:1px solid var(--app-filter-field-border);border-radius:10px;background:#fff;"
      ></iframe>
    </div>
  </div>
</section>
<div class="report-editor-modal hidden" data-report-editor-modal>
  <div class="report-editor-backdrop" data-report-editor-close></div>
  <section class="report-editor-card" role="dialog" aria-modal="true" aria-labelledby="reportEditorTitle">
    <header class="report-editor-head">
      <h3 class="sci-h3" id="reportEditorTitle">Report-Editor</h3>
      <button type="button" class="sci-btn subtle small" data-report-editor-close><iconify-icon icon="mdi:close" aria-hidden="true"></iconify-icon> Schliessen</button>
    </header>
    <p class="muted tiny">Spalten pro Report waehlen, Reihenfolge festlegen und als Preset speichern.</p>
    <div class="report-editor-actions">
      <div class="left">
        <label>
          <span class="muted tiny">Aktiver Report</span>
          <input class="sci-input small" type="text" data-report-editor-report readonly>
        </label>
      </div>
      <div class="right">
        <label>
          <span class="muted tiny">Preset</span>
          <select class="sci-input small" data-report-editor-preset-select></select>
        </label>
        <button type="button" class="sci-btn subtle small" data-report-editor-preset-load><iconify-icon icon="mdi:folder-open-outline" aria-hidden="true"></iconify-icon> Laden</button>
        <button type="button" class="sci-btn subtle small" data-report-editor-preset-save><iconify-icon icon="mdi:content-save-outline" aria-hidden="true"></iconify-icon> Speichern</button>
        <button type="button" class="sci-btn subtle small" data-report-editor-preset-delete><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon> Loeschen</button>
      </div>
    </div>
    <div class="report-editor-grid">
      <section class="report-editor-panel">
        <h4 class="sci-h3">Spaltenreihenfolge</h4>
        <ul class="report-editor-list" data-report-editor-list></ul>
      </section>
      <section class="report-editor-panel">
        <h4 class="sci-h3">Vorschau-Einstellungen</h4>
        <p class="muted tiny">Aenderungen werden direkt in die Tabellenvorschau uebernommen und fuer den aktiven Report gespeichert.</p>
        <div class="sci-actions">
          <button type="button" class="sci-btn subtle small" data-report-editor-select-all><iconify-icon icon="mdi:checkbox-multiple-marked-outline" aria-hidden="true"></iconify-icon> Alle</button>
          <button type="button" class="sci-btn subtle small" data-report-editor-select-none><iconify-icon icon="mdi:checkbox-blank-outline" aria-hidden="true"></iconify-icon> Keine</button>
          <button type="button" class="sci-btn subtle small" data-report-editor-reset><iconify-icon icon="mdi:restore" aria-hidden="true"></iconify-icon> Standard</button>
        </div>
      </section>
    </div>
  </section>
</div>
<script>
  (function () {
    const selectedReport = {{ selected_report|tojson }};
    const previewPayload = {{ preview|tojson }};
    const filterShell = document.querySelector('[data-reports-filter-shell]');
    const filterToggle = document.querySelector('[data-reports-filter-toggle]');
    const filterForm = document.querySelector('[data-reports-filter-form]');
    const presetButtons = document.querySelectorAll('[data-reports-preset]');
    const FILTER_PREF_KEY = 'nexus-reports-filter-collapsed';
    const setCollapsed = (collapsed) => {
      if (!filterShell || !filterToggle) return;
      filterShell.classList.toggle('is-collapsed', Boolean(collapsed));
      filterToggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
      filterToggle.innerHTML = collapsed
        ? '<iconify-icon icon="mdi:chevron-down" aria-hidden="true"></iconify-icon> Filter einblenden'
        : '<iconify-icon icon="mdi:chevron-up" aria-hidden="true"></iconify-icon> Filter einklappen';
    };
    try {
      setCollapsed(localStorage.getItem(FILTER_PREF_KEY) === '1');
    } catch (_err) {
      setCollapsed(false);
    }
    filterToggle?.addEventListener('click', () => {
      const next = !filterShell.classList.contains('is-collapsed');
      setCollapsed(next);
      try { localStorage.setItem(FILTER_PREF_KEY, next ? '1' : '0'); } catch (_err) {}
    });
    const field = (name) => filterForm?.querySelector(`[data-reports-field="${name}"]`);
    const formatDate = (date) => {
      const yyyy = String(date.getFullYear());
      const mm = String(date.getMonth() + 1).padStart(2, '0');
      const dd = String(date.getDate()).padStart(2, '0');
      return `${yyyy}-${mm}-${dd}`;
    };
    const firstDayOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
    const firstDayOfYear = (date) => new Date(date.getFullYear(), 0, 1);
    const monthsAgo = (date, amount) => new Date(date.getFullYear(), date.getMonth() - amount, date.getDate());

    presetButtons.forEach((button) => {
      button.addEventListener('click', () => {
        if (!filterForm) return;
        const preset = String(button.getAttribute('data-reports-preset') || '').trim();
        const now = new Date();
        const fReport = field('report');
        const fScope = field('scope');
        const fWarehouse = field('warehouse_id');
        const fFrom = field('from');
        const fTo = field('to');
        const fBrand = field('brand');
        const fMaterial = field('material');
        const fColor = field('color');
        const fQ = field('q');
        if (fBrand) fBrand.value = '';
        if (fMaterial) fMaterial.value = '';
        if (fColor) fColor.value = '';
        if (fQ) fQ.value = '';
        if (fWarehouse) fWarehouse.value = '';

        if (preset === 'stock_all') {
          if (fReport) fReport.value = 'lagerstatus';
          if (fScope) fScope.value = 'all';
          if (fFrom) fFrom.value = '';
          if (fTo) fTo.value = '';
        } else if (preset === 'stock_per_warehouse') {
          if (fReport) fReport.value = 'lagerstatus';
          if (fScope) fScope.value = 'active';
          if (fFrom) fFrom.value = '';
          if (fTo) fTo.value = '';
        } else if (preset === 'low_stock_month') {
          if (fReport) fReport.value = 'bestellzettel';
          if (fScope) fScope.value = 'active';
          if (fFrom) fFrom.value = formatDate(firstDayOfMonth(now));
          if (fTo) fTo.value = formatDate(now);
        } else if (preset === 'low_stock_3m') {
          if (fReport) fReport.value = 'bestellzettel';
          if (fScope) fScope.value = 'active';
          if (fFrom) fFrom.value = formatDate(monthsAgo(now, 3));
          if (fTo) fTo.value = formatDate(now);
        } else if (preset === 'stats_year') {
          if (fReport) fReport.value = 'filamentstatistik';
          if (fScope) fScope.value = 'all';
          if (fFrom) fFrom.value = formatDate(firstDayOfYear(now));
          if (fTo) fTo.value = formatDate(now);
        } else if (preset === 'stats_month') {
          if (fReport) fReport.value = 'filamentstatistik';
          if (fScope) fScope.value = 'active';
          if (fFrom) fFrom.value = formatDate(firstDayOfMonth(now));
          if (fTo) fTo.value = formatDate(now);
        }
        filterForm.submit();
      });
    });

    const splitWrap = document.querySelector('[data-reports-split-wrap]');
    const hidePreviewBtn = document.querySelector('[data-reports-preview-hide]');
    const showPreviewBtn = document.querySelector('[data-reports-preview-show]');
    const toolbar = document.querySelector('[data-reports-split-toolbar]');
    if (!toolbar || !splitWrap || !hidePreviewBtn || !showPreviewBtn) return;
    const PREF_KEY = 'nexus-reports-preview-collapsed';
    const applyCollapsed = (collapsed) => {
      splitWrap.classList.toggle('is-preview-collapsed', Boolean(collapsed));
    };
    try {
      applyCollapsed(localStorage.getItem(PREF_KEY) === '1');
    } catch (_err) {
      applyCollapsed(false);
    }
    const select = toolbar.querySelector('[data-reports-split-select]');
    const generateBtn = toolbar.querySelector('[data-reports-split-generate]');
    const downloadBtn = toolbar.querySelector('[data-reports-split-download]');
    const frame = document.querySelector('[data-reports-split-iframe]');
    if (!select || !generateBtn || !downloadBtn || !frame) return;

    const table = document.querySelector('[data-report-preview-table]');
    const headRow = table?.querySelector('[data-report-preview-head]');
    const body = table?.querySelector('[data-report-preview-body]');
    const editorModal = document.querySelector('[data-report-editor-modal]');
    const editorOpenBtn = document.querySelector('[data-report-editor-open]');
    const editorCloseButtons = document.querySelectorAll('[data-report-editor-close]');
    const editorList = document.querySelector('[data-report-editor-list]');
    const editorReportInput = document.querySelector('[data-report-editor-report]');
    const presetSelect = document.querySelector('[data-report-editor-preset-select]');
    const presetLoadBtn = document.querySelector('[data-report-editor-preset-load]');
    const presetSaveBtn = document.querySelector('[data-report-editor-preset-save]');
    const presetDeleteBtn = document.querySelector('[data-report-editor-preset-delete]');
    const editorSelectAllBtn = document.querySelector('[data-report-editor-select-all]');
    const editorSelectNoneBtn = document.querySelector('[data-report-editor-select-none]');
    const editorResetBtn = document.querySelector('[data-report-editor-reset]');

    const REPORT_EDITOR_KEY = 'nexus-report-editor-presets-v1';
    const defaultColumns = Array.isArray(previewPayload.columns) ? previewPayload.columns.slice() : [];
    const baseRows = Array.isArray(previewPayload.rows) ? previewPayload.rows.slice() : [];
    const columnState = defaultColumns.map((name) => ({ name, visible: true }));
    let activePreset = 'standard';
    let store = {};

    const safeJsonParse = (raw, fallback) => {
      try { return JSON.parse(raw); } catch (_err) { return fallback; }
    };
    const readStore = () => {
      const fallback = {};
      try {
        return safeJsonParse(localStorage.getItem(REPORT_EDITOR_KEY), fallback) || fallback;
      } catch (_err) {
        return fallback;
      }
    };
    const saveStore = () => {
      try { localStorage.setItem(REPORT_EDITOR_KEY, JSON.stringify(store)); } catch (_err) {}
    };
    const ensureReportStore = () => {
      if (!store[selectedReport] || typeof store[selectedReport] !== 'object') {
        store[selectedReport] = {};
      }
      if (!store[selectedReport].standard) {
        store[selectedReport].standard = { name: 'Standard', columns: defaultColumns.slice() };
      }
      return store[selectedReport];
    };
    const reportStore = () => ensureReportStore();
    const currentColumns = () => columnState.filter((item) => item.visible).map((item) => item.name);
    const selectedColumnParam = () => encodeURIComponent(currentColumns().join(','));
    const applyColumns = (columns) => {
      const ordered = Array.isArray(columns) ? columns.map((item) => String(item || '').trim()).filter(Boolean) : [];
      const known = new Set(defaultColumns);
      const merged = [];
      const used = new Set();
      ordered.forEach((name) => {
        if (!known.has(name) || used.has(name)) return;
        merged.push(name);
        used.add(name);
      });
      defaultColumns.forEach((name) => {
        if (used.has(name)) return;
        merged.push(name);
      });
      columnState.length = 0;
      merged.forEach((name) => {
        columnState.push({
          name,
          visible: ordered.includes(name),
        });
      });
      if (!columnState.some((item) => item.visible) && columnState[0]) {
        columnState[0].visible = true;
      }
    };
    const appendColumns = (url, inline) => {
      if (!url) return '';
      const sep = url.includes('?') ? '&' : '?';
      const columnsParam = `columns=${selectedColumnParam()}`;
      if (inline) {
        return `${url}${sep}inline=1&${columnsParam}`;
      }
      return `${url}${sep}${columnsParam}`;
    };
    const renderTable = () => {
      if (!headRow || !body) return;
      const visible = columnState.filter((item) => item.visible);
      const indexes = visible.map((item) => defaultColumns.indexOf(item.name)).filter((index) => index >= 0);
      headRow.innerHTML = visible.map((item) => `<th>${item.name}</th>`).join('');
      if (!visible.length) {
        body.innerHTML = '<tr><td class="empty-cell">Bitte mindestens eine Spalte auswaehlen.</td></tr>';
        return;
      }
      if (!baseRows.length) {
        body.innerHTML = `<tr><td colspan="${visible.length}" class="empty-cell">Keine Daten fuer die aktuelle Filterkombination.</td></tr>`;
        return;
      }
      const rowsHtml = baseRows.map((row) => {
        const cells = indexes.map((index) => `<td>${row[index] ?? ''}</td>`).join('');
        return `<tr>${cells}</tr>`;
      }).join('');
      body.innerHTML = rowsHtml;
    };
    const renderEditorList = () => {
      if (!editorList) return;
      editorList.innerHTML = columnState.map((item, index) => `
        <li class="report-editor-item" data-index="${index}">
          <label class="check-line">
            <input type="checkbox" ${item.visible ? 'checked' : ''} data-report-col-visible="${index}">
            <span>${item.name}</span>
          </label>
          <span class="report-editor-item-controls">
            <button type="button" class="sci-btn subtle tiny" data-report-col-up="${index}" title="Nach oben"><iconify-icon icon="mdi:chevron-up"></iconify-icon></button>
            <button type="button" class="sci-btn subtle tiny" data-report-col-down="${index}" title="Nach unten"><iconify-icon icon="mdi:chevron-down"></iconify-icon></button>
          </span>
        </li>
      `).join('');
    };
    const listPresetEntries = () => Object.entries(reportStore()).filter(([key, value]) => (
      key !== '__last' && value && typeof value === 'object' && Array.isArray(value.columns)
    ));
    const loadPresetOptions = () => {
      if (!presetSelect) return;
      const entries = listPresetEntries();
      presetSelect.innerHTML = entries.map(([key, value]) => `<option value="${key}">${value?.name || key}</option>`).join('');
      if (!entries.find(([key]) => key === activePreset)) activePreset = 'standard';
      presetSelect.value = activePreset;
    };
    const saveActiveStateAsPreset = (key, name) => {
      reportStore()[key] = { name, columns: currentColumns() };
      activePreset = key;
      saveStore();
      loadPresetOptions();
    };
    const applyPreset = (key) => {
      const target = reportStore()[key];
      if (!target) return;
      activePreset = key;
      applyColumns(target.columns || []);
      renderTable();
      renderEditorList();
      loadPresetOptions();
    };
    const persistAutoPreset = () => {
      saveActiveStateAsPreset(activePreset || 'standard', reportStore()[activePreset || 'standard']?.name || 'Standard');
      reportStore().__last = activePreset || 'standard';
      saveStore();
    };
    const swapColumns = (fromIndex, toIndex) => {
      if (toIndex < 0 || toIndex >= columnState.length) return;
      const temp = columnState[fromIndex];
      columnState[fromIndex] = columnState[toIndex];
      columnState[toIndex] = temp;
      renderTable();
      renderEditorList();
      persistAutoPreset();
    };

    store = readStore();
    ensureReportStore();
    editorReportInput && (editorReportInput.value = String(previewPayload.title || selectedReport));
    applyPreset('standard');
    const lastPresetKey = String((reportStore().__last || 'standard'));
    if (reportStore()[lastPresetKey]) {
      applyPreset(lastPresetKey);
    }
    renderTable();
    renderEditorList();
    loadPresetOptions();

    const withInline = (url) => {
      return appendColumns(url, true);
    };
    const withRefresh = (url) => {
      const base = appendColumns(url, true);
      const sep = base.includes('?') ? '&' : '?';
      return `${base}${sep}r=${Date.now()}`;
    };
    generateBtn.addEventListener('click', () => {
      frame.src = withRefresh(select.value);
    });
    downloadBtn.addEventListener('click', () => {
      window.open(appendColumns(select.value, false), '_blank', 'noopener');
    });

    select.addEventListener('change', () => {
      frame.src = withInline(select.value);
    });
    hidePreviewBtn.addEventListener('click', () => {
      applyCollapsed(true);
      try { localStorage.setItem(PREF_KEY, '1'); } catch (_err) {}
    });
    showPreviewBtn.addEventListener('click', () => {
      applyCollapsed(false);
      try { localStorage.setItem(PREF_KEY, '0'); } catch (_err) {}
    });
    frame.src = withInline(select.value);

    editorOpenBtn?.addEventListener('click', () => {
      editorModal?.classList.remove('hidden');
      renderEditorList();
      loadPresetOptions();
    });
    editorCloseButtons.forEach((button) => {
      button.addEventListener('click', () => editorModal?.classList.add('hidden'));
    });
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && editorModal && !editorModal.classList.contains('hidden')) {
        editorModal.classList.add('hidden');
      }
    });
    editorList?.addEventListener('click', (event) => {
      const target = event.target;
      if (!(target instanceof Element)) return;
      const upBtn = target.closest('[data-report-col-up]');
      if (upBtn) {
        const index = Number(upBtn.getAttribute('data-report-col-up'));
        if (!Number.isNaN(index)) swapColumns(index, index - 1);
        return;
      }
      const downBtn = target.closest('[data-report-col-down]');
      if (downBtn) {
        const index = Number(downBtn.getAttribute('data-report-col-down'));
        if (!Number.isNaN(index)) swapColumns(index, index + 1);
      }
    });
    editorList?.addEventListener('change', (event) => {
      const target = event.target;
      if (!(target instanceof HTMLInputElement)) return;
      const index = Number(target.getAttribute('data-report-col-visible'));
      if (Number.isNaN(index) || !columnState[index]) return;
      columnState[index].visible = target.checked;
      if (!columnState.some((item) => item.visible) && columnState[0]) {
        columnState[0].visible = true;
      }
      renderTable();
      renderEditorList();
      persistAutoPreset();
    });
    editorSelectAllBtn?.addEventListener('click', () => {
      columnState.forEach((item) => { item.visible = true; });
      renderTable();
      renderEditorList();
      persistAutoPreset();
    });
    editorSelectNoneBtn?.addEventListener('click', () => {
      columnState.forEach((item, index) => { item.visible = index === 0; });
      renderTable();
      renderEditorList();
      persistAutoPreset();
    });
    editorResetBtn?.addEventListener('click', () => {
      applyPreset('standard');
      reportStore().__last = 'standard';
      saveStore();
    });
    presetLoadBtn?.addEventListener('click', () => {
      const key = String(presetSelect?.value || 'standard');
      applyPreset(key);
      reportStore().__last = key;
      saveStore();
    });
    presetSaveBtn?.addEventListener('click', () => {
      const input = window.prompt('Preset-Name');
      const name = String(input || '').trim();
      if (!name) return;
      const key = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '') || `preset-${Date.now()}`;
      saveActiveStateAsPreset(key, name);
      reportStore().__last = key;
      saveStore();
    });
    presetDeleteBtn?.addEventListener('click', () => {
      const key = String(presetSelect?.value || '');
      if (!key || key === 'standard') return;
      delete reportStore()[key];
      activePreset = 'standard';
      reportStore().__last = 'standard';
      saveStore();
      applyPreset('standard');
    });
  })();
</script>
{% endblock %}