{% extends "layout/base.html" %}
{% block content %}

<div class="d-flex flex-wrap align-items-baseline justify-content-between mb-3">
  <div>
    <h2 class="mb-1">{{ 'Edit report' if is_edit else 'New report' }}</h2>
    <div class="text-muted">{{ 'Update this report definition. Generate output from the Reports overview.' if is_edit else 'Create a one-time report definition. Generate output from the Reports overview.' }}</div>
  </div>
  <div class="mt-2 mt-md-0">
    <a class="btn btn-outline-secondary" href="{{ url_for('main.reports') }}">Back</a>
  </div>
</div>

<div class="row g-3">
  <div class="col-12 col-xl-8">
    <div class="card">
      <div class="card-header">
        <div class="fw-semibold">Report basics</div>
        <div class="text-muted small">Fields below are designed to scale as reporting grows.</div>
      </div>
      <div class="card-body">
        <div class="alert alert-danger d-none" id="rep_new_error"></div>

        <div class="row g-3">
          <div class="col-12 col-md-6">
            <label class="form-label">Report name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="rep_name" placeholder="e.g. Monthly Backup Report" />
          </div>

          <div class="col-12 col-md-6">
            <label class="form-label">Output format</label>
            <select class="form-select" id="rep_output_format">
              <option value="csv">CSV</option>
              <option value="html">HTML</option>
              <option value="pdf">PDF</option>
            </select>
          </div>

          <div class="col-12 col-md-6">
            <label class="form-label">HTML/PDF content</label>
            <select class="form-select" id="rep_html_content">
              <option value="customers">Customers</option>
              <option value="jobs">Jobs</option>
              <option value="both">Customers + Jobs</option>
            </select>
            <div class="form-text">Controls whether the HTML/PDF output shows a customer list, a job list, or both.</div>
          </div>

          <div class="col-12">
            <label class="form-label">Description</label>
            <input type="text" class="form-control" id="rep_description" placeholder="Optional description" />
          </div>
        </div>

        <hr class="my-4" />

        <div class="fw-semibold mb-1">Reporting period (UTC)</div>
        <div class="text-muted small mb-3">Pick a day from the month calendar and set the time next to it.</div>

        <div class="row g-3 align-items-end">
          <div class="col-12 col-md-6">
            <label class="form-label">Start</label>
            <div class="input-group">
              <input type="date" class="form-control" id="rep_start_date" />
              <input type="time" class="form-control" id="rep_start_time" step="60" />
              <span class="input-group-text">UTC</span>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <label class="form-label">End</label>
            <div class="input-group">
              <input type="date" class="form-control" id="rep_end_date" />
              <input type="time" class="form-control" id="rep_end_time" step="60" />
              <span class="input-group-text">UTC</span>
            </div>
          </div>

          <div class="col-12">
            <div class="d-flex flex-wrap gap-2">
              <button type="button" class="btn btn-sm btn-outline-secondary" id="rep_preset_cur_month">First day of current month (00:00)</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="rep_preset_last_month">First day of last month (00:00)</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" id="rep_preset_last_month_full">Last month (full)</button>
            </div>
          </div>
        </div>

        <hr class="my-4" />

        <div class="fw-semibold mb-1">Scope selection</div>
        <div class="text-muted small mb-3">Generate for a single customer, multiple customers, or all customers.</div>

        <div class="row g-3">
          <div class="col-12">
            <div class="btn-group" role="group" aria-label="Customer scope">
              <input type="radio" class="btn-check" name="rep_scope" id="rep_scope_single" value="single" autocomplete="off" checked>
              <label class="btn btn-outline-primary" for="rep_scope_single">Single customer</label>

              <input type="radio" class="btn-check" name="rep_scope" id="rep_scope_multiple" value="multiple" autocomplete="off">
              <label class="btn btn-outline-primary" for="rep_scope_multiple">Multiple customers</label>

              <input type="radio" class="btn-check" name="rep_scope" id="rep_scope_all" value="all" autocomplete="off">
              <label class="btn btn-outline-primary" for="rep_scope_all">All customers</label>
            </div>
          </div>

          <div class="col-12 col-md-6" id="rep_single_wrap">
            <label class="form-label">Customer <span class="text-danger">*</span></label>
            <select class="form-select" id="rep_customer_single">
  <option value="" selected>Select a customer…</option>
  {% if initial_customers %}
    {% for c in initial_customers %}
      <option value="{{ c.id }}">{{ c.name }}</option>
    {% endfor %}
  {% endif %}
</select>
            <div class="form-text">Search will be added later. For MVP this is a simple dropdown.</div>
          </div>

          <div class="col-12 col-md-6 d-none" id="rep_multiple_wrap">
            <label class="form-label">Customers <span class="text-danger">*</span></label>
            <select class="form-select" id="rep_customer_multiple" multiple size="10">
  {% if initial_customers %}
    {% for c in initial_customers %}
      <option value="{{ c.id }}">{{ c.name }}</option>
    {% endfor %}
  {% endif %}
</select>
            <div class="form-text">Hold Ctrl/Cmd to select multiple customers.</div>
          </div>

          <div class="col-12">
            <div class="fw-semibold mb-1">Jobs filter</div>
            <div class="text-muted small mb-3">
              Filter which jobs are included in the report by backup software and backup type. Informational jobs (e.g. License Key) are always excluded.
            </div>
          </div>

          <div class="col-12 col-lg-6">
            <label class="form-label fw-semibold" for="rep_job_backup_software">Backup software</label>
            <select class="form-select" id="rep_job_backup_software" multiple size="6">
              {% for item in job_filters_meta.backup_softwares %}
                <option value="{{ item.key }}">{{ item.label }}</option>
              {% endfor %}
            </select>
            <div class="form-text">Leave empty to include all backup software.</div>
          </div>

          <div class="col-12 col-lg-6">
            <label class="form-label fw-semibold" for="rep_job_backup_type">Backup type</label>
            <select class="form-select" id="rep_job_backup_type" multiple size="6">
              {% for item in job_filters_meta.backup_types %}
                <option value="{{ item.key }}">{{ item.label }}</option>
              {% endfor %}
            </select>
            <div class="form-text">Leave empty to include all backup types (except informational types).</div>
          </div>

        </div>

        
        <div class="fw-semibold mb-1">Report content</div>
        <div class="text-muted small mb-3">Choose which columns are included in the report and define their order. (Applies to online table views.)</div>

        <div class="border rounded p-3">
          <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between mb-3">
            <div class="btn-group" role="group" aria-label="Report content view selector">
              <button type="button" class="btn btn-outline-secondary active" id="rep_cols_tab_summary">Summary</button>
              <button type="button" class="btn btn-outline-secondary" id="rep_cols_tab_snapshot">Snapshot</button>
              <button type="button" class="btn btn-outline-secondary" id="rep_cols_tab_jobs">Jobs</button>
            </div>
            <div class="text-muted small" id="rep_cols_hint">Select columns for the summary view.</div>
          </div>

          <div class="alert alert-info py-2 px-3 mb-3 d-none" id="rep_cols_loading">Loading available columns…</div>
          <div class="alert alert-danger py-2 px-3 mb-3 d-none" id="rep_cols_error"></div>

          <div class="row g-3">
            <div class="col-12 col-lg-6">
              <div class="fw-semibold mb-2">Available columns</div>
              <div id="rep_cols_available"></div>
            </div>

            <div class="col-12 col-lg-6">
              <div class="fw-semibold mb-2">Selected columns (drag to reorder)</div>
              <div class="text-muted small mb-2">Tip: disabled items are coming soon.</div>
              <ul class="list-group" id="rep_cols_selected"></ul>
            </div>
          </div>
        </div>

        <hr class="my-4" />

        <div class="d-flex flex-wrap gap-2">
          <button type="button" class="btn btn-primary" id="rep_create_btn">{{ 'Save changes' if is_edit else 'Create report' }}</button>
          <a class="btn btn-outline-secondary" href="{{ url_for('main.reports') }}">Cancel</a>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-xl-4">
    <div class="card">
      <div class="card-header">
        <div class="fw-semibold">Scheduling (placeholder)</div>
        <div class="text-muted small">Disabled for now. Will be enabled in a future iteration.</div>
      </div>
      <div class="card-body">
        <div class="mb-3">
          <label class="form-label">Delivery method</label>
          <select class="form-select" disabled>
            <option selected>Email</option>
            <option>Download only</option>
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Frequency</label>
          <select class="form-select" disabled>
            <option selected>Monthly</option>
            <option>Weekly</option>
            <option>Daily</option>
          </select>
        </div>

        <div class="mb-0">
          <div class="alert alert-info mb-0">Scheduling is not active yet.</div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  window.__reportColumnsMeta = {{ columns_meta|tojson }};
  window.__jobFiltersMeta = {{ job_filters_meta|tojson }};
  window.__initialCustomers = {{ initial_customers|tojson }};
  window.__isEdit = {{ 'true' if is_edit else 'false' }};
  window.__initialReport = {{ initial_report|tojson }};
  window.addEventListener('DOMContentLoaded', function () {
    function qs(id) { return document.getElementById(id); }

    function showError(msg) {
      var el = qs('rep_new_error');
      el.textContent = msg || 'Unknown error';
      el.classList.remove('d-none');
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function clearError() {
      var el = qs('rep_new_error');
      el.classList.add('d-none');
      el.textContent = '';
    }

    var isEdit = !!window.__isEdit;
    var initialReport = window.__initialReport || null;
    var editReportId = (initialReport && initialReport.id) ? initialReport.id : null;

    // --- HTML/PDF content selector ---
    var repHtmlContent = null;
    var repHtmlContentTouched = false;
    if (isEdit && initialReport && initialReport.report_config && initialReport.report_config.presentation) {
      var p = initialReport.report_config.presentation;
      if (p && typeof p === 'object') {
        repHtmlContent = (p.html_content || '').trim().toLowerCase() || null;
      }
    }

    function defaultHtmlContentForScope(scope) {
      if ((scope || '').toLowerCase() === 'single') return 'jobs';
      return 'customers';
    }

    
    // --- Report content / column selector ---
    var repColsView = 'summary';
    var repColsMeta = window.__reportColumnsMeta || null;
    // Use null to indicate "no value configured" so defaults can be applied.
    // If the user explicitly saves an empty list, keep it empty.
    var repColsSelected = { summary: null, snapshot: null, jobs: null };

    if (isEdit && initialReport && initialReport.report_config && initialReport.report_config.columns) {
      var cols = initialReport.report_config.columns;
      repColsSelected = {
        summary: (cols && Object.prototype.hasOwnProperty.call(cols, 'summary') && Array.isArray(cols.summary)) ? cols.summary.slice() : null,
        snapshot: (cols && Object.prototype.hasOwnProperty.call(cols, 'snapshot') && Array.isArray(cols.snapshot)) ? cols.snapshot.slice() : null,
        jobs: (cols && Object.prototype.hasOwnProperty.call(cols, 'jobs') && Array.isArray(cols.jobs)) ? cols.jobs.slice() : null,
      };
    }

    function uniqPreserveOrder(arr) {
      var out = [];
      var seen = {};
      (arr || []).forEach(function (k) {
        var key = String(k);
        if (seen[key]) return;
        seen[key] = true;
        out.push(k);
      });
      return out;
    }

    function normalizeJobNameColumns() {
      // Merge legacy object_name into job_name (single logical column: "Job name").
      if (repColsMeta && repColsMeta.groups) {
        repColsMeta.groups.forEach(function (g) {
          var items = g.items || [];
          var jobItem = null;
          var objItem = null;

          items.forEach(function (it) {
            if (!it) return;
            if (it.key === 'job_name') jobItem = it;
            if (it.key === 'object_name') objItem = it;
          });

          if (objItem && !jobItem) {
            // convert object_name into job_name
            objItem.key = 'job_name';
            objItem.label = 'Job name';
            jobItem = objItem;
            objItem = null;
          }

          if (jobItem) {
            jobItem.label = 'Job name';
            // Merge views if object_name existed in the same group
            if (objItem && Array.isArray(objItem.views)) {
              var merged = (Array.isArray(jobItem.views) ? jobItem.views.slice() : []);
              objItem.views.forEach(function (v) {
                if (merged.indexOf(v) < 0) merged.push(v);
              });
              jobItem.views = merged;
            }
          }

          // Remove any remaining object_name items
          g.items = (g.items || []).filter(function (it) { return it && it.key !== 'object_name'; });

          // Remove duplicate job_name items within the same group
          var seenJob = false;
          g.items = (g.items || []).filter(function (it) {
            if (!it) return false;
            if (it.key !== 'job_name') return true;
            if (!seenJob) {
              seenJob = true;
              it.label = 'Job name';
              return true;
            }
            return false;
          });
        });

        // Ensure job_name only appears once across all groups.
        var seenGlobalJob = false;
        repColsMeta.groups.forEach(function (g2) {
          g2.items = (g2.items || []).filter(function (it2) {
            if (!it2) return false;
            if (it2.key !== 'job_name') return true;
            if (!seenGlobalJob) {
              seenGlobalJob = true;
              it2.label = 'Job name';
              return true;
            }
            return false;
          });
        });
      }

      // Defaults: replace object_name -> job_name and de-duplicate
      if (repColsMeta && repColsMeta.defaults) {
        ['summary', 'snapshot', 'jobs'].forEach(function (v) {
          var d = repColsMeta.defaults[v];
          if (!Array.isArray(d)) return;
          repColsMeta.defaults[v] = uniqPreserveOrder(d.map(function (k) { return (k === 'object_name') ? 'job_name' : k; }));
        });
      }

      // Selected: replace object_name -> job_name and de-duplicate
      ['summary', 'snapshot', 'jobs'].forEach(function (v) {
        if (repColsSelected[v] === null || typeof repColsSelected[v] === 'undefined') return;
        if (!Array.isArray(repColsSelected[v])) return;
        repColsSelected[v] = uniqPreserveOrder(repColsSelected[v].map(function (k) { return (k === 'object_name') ? 'job_name' : k; }));
      });
    }


    // --- Job filters (backup software / backup type) ---
    var jobFiltersMeta = window.__jobFiltersMeta || null;
    var repJobFiltersSelected = { backup_softwares: [], backup_types: [] };

    if (isEdit && initialReport && initialReport.report_config && initialReport.report_config.filters) {
      var f = initialReport.report_config.filters;
      repJobFiltersSelected = {
        backup_softwares: Array.isArray(f.backup_softwares) ? f.backup_softwares.slice() : [],
        backup_types: Array.isArray(f.backup_types) ? f.backup_types.slice() : [],
      };
    }

    function getSelectedValues(selectEl) {
      var out = [];
      if (!selectEl) return out;
      for (var i = 0; i < selectEl.options.length; i++) {
        var opt = selectEl.options[i];
        if (opt && opt.selected) out.push(opt.value);
      }
      return out;
    }

    function setSelectedValues(selectEl, values) {
      if (!selectEl) return;
      var set = {};
      (values || []).forEach(function (v) { set[String(v)] = true; });
      for (var i = 0; i < selectEl.options.length; i++) {
        var opt = selectEl.options[i];
        if (!opt) continue;
        opt.selected = !!set[String(opt.value)];
      }
    }

    function rebuildBackupTypeOptions(allowedTypes, preserveSelected) {
      var sel = qs('rep_job_backup_type');
      if (!sel || !jobFiltersMeta || !Array.isArray(jobFiltersMeta.backup_types)) return;

      var currentSelected = preserveSelected ? getSelectedValues(sel) : [];
      var allowedSet = null;
      if (Array.isArray(allowedTypes) && allowedTypes.length) {
        allowedSet = {};
        allowedTypes.forEach(function (v) { allowedSet[String(v)] = true; });
      }

      // rebuild options
      sel.innerHTML = '';
      jobFiltersMeta.backup_types.forEach(function (item) {
        if (!item || !item.key) return;
        if (String(item.key).toLowerCase() === 'license key') return; // always excluded
        if (allowedSet && !allowedSet[String(item.key)]) return;
        var opt = document.createElement('option');
        opt.value = item.key;
        opt.textContent = item.label || item.key;
        sel.appendChild(opt);
      });

      // restore selection (only if still exists)
      var finalSelected = [];
      currentSelected.forEach(function (v) {
        for (var i = 0; i < sel.options.length; i++) {
          if (sel.options[i].value === v) finalSelected.push(v);
        }
      });
      setSelectedValues(sel, finalSelected);
    }

    function onBackupSoftwareChange() {
      var swSel = qs('rep_job_backup_software');
      var selected = getSelectedValues(swSel);

      if (!jobFiltersMeta || !jobFiltersMeta.by_backup_software) {
        rebuildBackupTypeOptions(null, true);
        return;
      }

      // union types for selected software(s)
      if (!selected.length) {
        rebuildBackupTypeOptions(null, true);
        return;
      }

      var union = {};
      selected.forEach(function (sw) {
        var arr = jobFiltersMeta.by_backup_software[sw];
        if (Array.isArray(arr)) {
          arr.forEach(function (t) { union[String(t)] = true; });
        }
      });

      var allowed = Object.keys(union);
      rebuildBackupTypeOptions(allowed, true);
    }


    // Initialize job filter selects
    (function initJobFilters() {
      var swSel = qs('rep_job_backup_software');
      if (swSel) {
        swSel.addEventListener('change', onBackupSoftwareChange);
        setSelectedValues(swSel, repJobFiltersSelected.backup_softwares);
      }
      onBackupSoftwareChange();
      var btSel = qs('rep_job_backup_type');
      if (btSel) setSelectedValues(btSel, repJobFiltersSelected.backup_types);
    })();

    function colsHintText(viewKey) {
      if (viewKey === 'snapshot') return 'Select columns for the snapshot view.';
      if (viewKey === 'jobs') return 'Select columns for the jobs view (HTML/PDF).';
      return 'Select columns for the summary view.';
    }

    function setColsView(viewKey) {
      repColsView = (viewKey === 'snapshot' || viewKey === 'jobs') ? viewKey : 'summary';

      var a = qs('rep_cols_tab_summary');
      var b = qs('rep_cols_tab_snapshot');
      var c = qs('rep_cols_tab_jobs');
      a.classList.toggle('active', repColsView === 'summary');
      b.classList.toggle('active', repColsView === 'snapshot');
      c.classList.toggle('active', repColsView === 'jobs');
      qs('rep_cols_hint').textContent = colsHintText(repColsView);

      renderColsAvailable();
      renderColsSelected();
    }

    function showColsError(msg) {
      var el = qs('rep_cols_error');
      el.textContent = msg || 'Failed to load columns.';
      el.classList.remove('d-none');
    }

    function clearColsError() {
      var el = qs('rep_cols_error');
      el.classList.add('d-none');
      el.textContent = '';
    }

    function showColsLoading(on) {
      var el = qs('rep_cols_loading');
      if (on) el.classList.remove('d-none');
      else el.classList.add('d-none');
    }

    function ensureDefaultsFromMeta() {
      if (!repColsMeta || !repColsMeta.defaults) return;
      ['summary', 'snapshot', 'jobs'].forEach(function (v) {
        if (repColsSelected[v] === null || typeof repColsSelected[v] === 'undefined') {
          repColsSelected[v] = (repColsMeta.defaults[v] || []).slice();
        }
      });
    }

    function renderColsAvailable() {
      var host = qs('rep_cols_available');
      if (!host) return;
      host.innerHTML = '';

      if (!repColsMeta || !repColsMeta.groups) {
        host.innerHTML = '<div class="text-muted">No column metadata available.</div>';
        return;
      }

      function isSelected(key) {
        return (repColsSelected[repColsView] || []).indexOf(key) >= 0;
      }

      function toggleKey(key, checked) {
        var arr = repColsSelected[repColsView] || [];
        var idx = arr.indexOf(key);
        if (checked && idx < 0) arr.push(key);
        if (!checked && idx >= 0) arr.splice(idx, 1);
        repColsSelected[repColsView] = arr;
        renderColsSelected();
      }

      repColsMeta.groups.forEach(function (g) {
        var items = (g.items || []).filter(function (it) {
          var v = it.views || [];
          return v.indexOf(repColsView) >= 0;
        });
        if (!items.length) return;

        var groupEl = document.createElement('div');
        groupEl.className = 'mb-3';

        var title = document.createElement('div');
        title.className = 'fw-semibold mb-2';
        title.textContent = g.name || 'Columns';
        groupEl.appendChild(title);

        items.forEach(function (it) {
          var enabled = (it.enabled !== false);
          var id = 'rep_col_' + repColsView + '_' + (it.key || '').replace(/[^a-zA-Z0-9_]/g, '_');

          var wrap = document.createElement('div');
          wrap.className = 'form-check';

          var cb = document.createElement('input');
          cb.className = 'form-check-input';
          cb.type = 'checkbox';
          cb.id = id;
          cb.disabled = !enabled;
          cb.checked = isSelected(it.key);

          cb.addEventListener('change', function () {
            toggleKey(it.key, cb.checked);
          });

          var lbl = document.createElement('label');
          lbl.className = 'form-check-label';
          lbl.setAttribute('for', id);
          lbl.textContent = it.label || it.key || '';

          if (!enabled) {
            lbl.classList.add('text-muted');
            lbl.textContent = (lbl.textContent || '') + ' (coming soon)';
          }

          wrap.appendChild(cb);
          wrap.appendChild(lbl);
          groupEl.appendChild(wrap);
        });

        host.appendChild(groupEl);
      });
    }

    function renderColsSelected() {
      var host = qs('rep_cols_selected');
      if (!host) return;
      host.innerHTML = '';

      var arr = repColsSelected[repColsView] || [];
      if (!arr.length) {
        host.innerHTML = '<li class="list-group-item text-muted">No columns selected.</li>';
        return;
      }

      function labelForKey(key) {
        if (!repColsMeta || !repColsMeta.groups) return key;
        for (var i = 0; i < repColsMeta.groups.length; i++) {
          var items = repColsMeta.groups[i].items || [];
          for (var j = 0; j < items.length; j++) {
            if (items[j].key === key) return items[j].label || key;
          }
        }
        return key;
      }

      function removeKey(key) {
        var i = arr.indexOf(key);
        if (i >= 0) arr.splice(i, 1);
        repColsSelected[repColsView] = arr;
        renderColsAvailable();
        renderColsSelected();
      }

      arr.forEach(function (key) {
        var li = document.createElement('li');
        li.className = 'list-group-item d-flex align-items-center justify-content-between gap-2';
        li.setAttribute('draggable', 'true');
        li.dataset.key = key;

        var left = document.createElement('div');
        left.className = 'd-flex align-items-center gap-2';
        var handle = document.createElement('span');
        handle.className = 'text-muted';
        handle.textContent = '↕';
        var txt = document.createElement('span');
        txt.textContent = labelForKey(key);

        left.appendChild(handle);
        left.appendChild(txt);

        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'btn btn-sm btn-outline-danger';
        btn.textContent = 'Remove';
        btn.addEventListener('click', function () { removeKey(key); });

        li.appendChild(left);
        li.appendChild(btn);

        li.addEventListener('dragstart', function (ev) {
          ev.dataTransfer.setData('text/plain', key);
          ev.dataTransfer.effectAllowed = 'move';
        });

        li.addEventListener('dragover', function (ev) {
          ev.preventDefault();
          ev.dataTransfer.dropEffect = 'move';
        });

        li.addEventListener('drop', function (ev) {
          ev.preventDefault();
          var draggedKey = ev.dataTransfer.getData('text/plain');
          if (!draggedKey || draggedKey === key) return;

          var from = arr.indexOf(draggedKey);
          var to = arr.indexOf(key);
          if (from < 0 || to < 0) return;

          arr.splice(from, 1);
          arr.splice(to, 0, draggedKey);
          repColsSelected[repColsView] = arr;
          renderColsSelected();
        });

        host.appendChild(li);
      });
    }

    function loadReportColumns() {
      var area = document.getElementById('rep_cols_available');
      if (!area) return;

      if (repColsMeta) {
        showColsLoading(false);
        clearColsError();
        normalizeJobNameColumns();
        ensureDefaultsFromMeta();
        qs('rep_cols_tab_summary').addEventListener('click', function () { setColsView('summary'); });
        qs('rep_cols_tab_snapshot').addEventListener('click', function () { setColsView('snapshot'); });
        qs('rep_cols_tab_jobs').addEventListener('click', function () { setColsView('jobs'); });
        setColsView('summary');
        return;
      }


      showColsLoading(true);
      clearColsError();

      fetch('/api/reports/columns', { credentials: 'same-origin' })
        .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, json: j }; }); })
        .then(function (res) {
          showColsLoading(false);
          if (!res.ok) {
            showColsError((res.json && res.json.error) ? res.json.error : 'Failed to load columns.');
            return;
          }

          repColsMeta = res.json || null;
          normalizeJobNameColumns();
          ensureDefaultsFromMeta();

          // bind tabs once metadata is ready
          qs('rep_cols_tab_summary').addEventListener('click', function () { setColsView('summary'); });
          qs('rep_cols_tab_snapshot').addEventListener('click', function () { setColsView('snapshot'); });
          qs('rep_cols_tab_jobs').addEventListener('click', function () { setColsView('jobs'); });

          setColsView('summary');
        })
        .catch(function () {
          showColsLoading(false);
          showColsError('Failed to load columns.');
        });
    }


    function pad2(n) { return (n < 10 ? '0' : '') + String(n); }

    function setDateTime(prefix, d) {
      qs(prefix + '_date').value = d.getUTCFullYear() + '-' + pad2(d.getUTCMonth() + 1) + '-' + pad2(d.getUTCDate());
      qs(prefix + '_time').value = pad2(d.getUTCHours()) + ':' + pad2(d.getUTCMinutes());
    }

    function setDateTimeFromIso(prefix, iso) {
      var s = (iso || '').trim();
      if (!s) return;
      var m = s.match(/^(\d{4})-(\d{2})-(\d{2})(?:T|\s)(\d{2}):(\d{2})/);
      if (!m) return;
      qs(prefix + '_date').value = m[1] + '-' + m[2] + '-' + m[3];
      qs(prefix + '_time').value = m[4] + ':' + m[5];
    }

    function buildIso(dateStr, timeStr, fallbackTime) {
      var d = (dateStr || '').trim();
      var t = (timeStr || '').trim() || (fallbackTime || '00:00');
      if (!d) return '';
      if (!t) t = '00:00';
      if (t.length === 5) t = t + ':00';
      return d + 'T' + t;
    }

    function todayUtc() {
      return new Date();
    }

    function presetCurrentMonth() {
      var now = todayUtc();
      var d = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1, 0, 0, 0));
      setDateTime('rep_start', d);
    }

    function presetLastMonth() {
      var now = todayUtc();
      var d = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() - 1, 1, 0, 0, 0));
      setDateTime('rep_start', d);
    }

    function presetLastMonthFull() {
      var now = todayUtc();
      var start = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() - 1, 1, 0, 0, 0));
      var end = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 0, 23, 59, 0));
      setDateTime('rep_start', start);
      setDateTime('rep_end', end);
    }

    function selectedScope() {
      var els = document.querySelectorAll('input[name="rep_scope"]');
      for (var i = 0; i < els.length; i++) {
        if (els[i].checked) return els[i].value;
      }
      return 'single';
    }

    function updateScopeUi() {
      var scope = selectedScope();
      qs('rep_single_wrap').classList.toggle('d-none', scope !== 'single');
      qs('rep_multiple_wrap').classList.toggle('d-none', scope !== 'multiple');

      // Set a sensible default for HTML content selection when the user hasn't chosen one yet.
      if (!isEdit && !repHtmlContentTouched) {
        qs('rep_html_content').value = defaultHtmlContentForScope(scope);
      }
    }

    function applyCustomerSelection() {
      if (!isEdit || !initialReport) return;
      var scope = (initialReport.customer_scope || 'all');
      var ids = initialReport.customer_ids || [];

      if (scope === 'single') {
        var singleSel = qs('rep_customer_single');
        if (singleSel && ids.length === 1) {
          singleSel.value = String(ids[0]);
        }
      } else if (scope === 'multiple') {
        var multiSel = qs('rep_customer_multiple');
        if (multiSel && Array.isArray(multiSel.options)) {
          for (var i = 0; i < multiSel.options.length; i++) {
            var opt = multiSel.options[i];
            opt.selected = (ids.indexOf(parseInt(opt.value, 10)) >= 0);
          }
        }
      }
    }

    function loadCustomers() {
      var initialCustomers = window.__initialCustomers || null;
      if (initialCustomers && Array.isArray(initialCustomers) && initialCustomers.length) {
        // Already rendered server-side. Keep the selects usable even if API calls fail.
        applyCustomerSelection();
        return;
      }
      qs('rep_customer_single').innerHTML = '<option value="" selected>Loading…</option>';
      qs('rep_customer_multiple').innerHTML = '';

      fetch('/api/reports/customers', { credentials: 'same-origin' })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          var items = (data && data.items) ? data.items : [];
          if (!items.length) {
            qs('rep_customer_single').innerHTML = '<option value="" selected>No customers found</option>';
            return;
          }

          qs('rep_customer_single').innerHTML = '<option value="" selected>Select a customer…</option>';
          items.forEach(function (c) {
            var opt1 = document.createElement('option');
            opt1.value = String(c.id);
            opt1.textContent = c.name || ('Customer ' + c.id);
            qs('rep_customer_single').appendChild(opt1);

            var opt2 = document.createElement('option');
            opt2.value = String(c.id);
            opt2.textContent = c.name || ('Customer ' + c.id);
            qs('rep_customer_multiple').appendChild(opt2);
          });

          applyCustomerSelection();
        })
        .catch(function () {
          qs('rep_customer_single').innerHTML = '<option value="" selected>Failed to load customers</option>';
        });
    }

    function applyInitialReport() {
      if (!isEdit || !initialReport) return;

      qs('rep_name').value = initialReport.name || '';
      qs('rep_description').value = initialReport.description || '';
      qs('rep_output_format').value = (initialReport.output_format || 'csv');

      // HTML/PDF content selection (defaults handled below)
      if (repHtmlContent) {
        qs('rep_html_content').value = repHtmlContent;
      }

      setDateTimeFromIso('rep_start', initialReport.period_start || '');
      setDateTimeFromIso('rep_end', initialReport.period_end || '');

      // scope + customer selections
      var scope = (initialReport.customer_scope || 'all');
      qs('rep_scope_single').checked = (scope === 'single');
      qs('rep_scope_multiple').checked = (scope === 'multiple');
      qs('rep_scope_all').checked = (scope === 'all');
      updateScopeUi();
      applyCustomerSelection();

      if (!repHtmlContent) {
        qs('rep_html_content').value = defaultHtmlContentForScope(scope);
      }
    }

    function validate(payload) {
      if (!payload.name) return 'Report name is required.';
      if (!payload.period_start || !payload.period_end) return 'Start and end period are required.';
      if (payload.period_end <= payload.period_start) return 'End must be after start.';

      if (payload.customer_scope === 'single') {
        if (!payload.customer_ids || payload.customer_ids.length !== 1) return 'Select exactly one customer.';
      }
      if (payload.customer_scope === 'multiple') {
        if (!payload.customer_ids || payload.customer_ids.length < 1) return 'Select at least one customer.';
      }
      return '';
    }

    function createReport() {
      clearError();

      if (isEdit && !editReportId) {
        showError('Missing report id.');
        return;
      }

      var scope = selectedScope();
      var customerIds = [];
      if (scope === 'single') {
        var v = (qs('rep_customer_single').value || '').trim();
        if (v) customerIds = [parseInt(v, 10)];
      } else if (scope === 'multiple') {
        var opts = qs('rep_customer_multiple').selectedOptions;
        for (var i = 0; i < opts.length; i++) {
          var id = parseInt(opts[i].value, 10);
          if (!isNaN(id)) customerIds.push(id);
        }
      }

      var payload = {
        name: (qs('rep_name').value || '').trim(),
        description: (qs('rep_description').value || '').trim(),
        report_type: 'one-time',
        output_format: (qs('rep_output_format').value || 'csv').trim(),
        schedule: '',
        customer_scope: scope,
        customer_ids: customerIds,
        period_start: buildIso(qs('rep_start_date').value, qs('rep_start_time').value, '00:00'),
        period_end: buildIso(qs('rep_end_date').value, qs('rep_end_time').value, '23:59'),
        report_config: {
          columns: repColsSelected,
          columns_version: 1,
          filters: {
            backup_softwares: getSelectedValues(qs('rep_job_backup_software')),
            backup_types: getSelectedValues(qs('rep_job_backup_type')),
            filters_version: 1
          },
          presentation: {
            html_content: (qs('rep_html_content').value || '').trim().toLowerCase(),
            presentation_version: 1
          }
        }
      };

      if (!payload.description) delete payload.description;

      var err = validate(payload);
      if (err) {
        showError(err);
        return;
      }

      var btn = qs('rep_create_btn');
      var oldText = btn.textContent;
      btn.disabled = true;
      btn.textContent = (isEdit ? 'Saving…' : 'Creating…');

      var url = isEdit ? ('/api/reports/' + editReportId) : '/api/reports';
      var method = isEdit ? 'PUT' : 'POST';

      fetch(url, {
        method: method,
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      })
        .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, json: j }; }); })
        .then(function (res) {
          btn.disabled = false;
          btn.textContent = oldText;
          if (!res.ok) {
            showError((res.json && res.json.error) ? res.json.error : (isEdit ? 'Save failed.' : 'Create failed.'));
            return;
          }
          window.location.href = '{{ url_for('main.reports') }}';
        })
        .catch(function () {
          btn.disabled = false;
          btn.textContent = oldText;
          showError(isEdit ? 'Save failed.' : 'Create failed.');
        });
    }

    // Defaults / initial values
    if (isEdit) {
      applyInitialReport();
    } else {
      var now = todayUtc();
      var end = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), 0));
      var start = new Date(end.getTime() - (7 * 24 * 60 * 60 * 1000));
      setDateTime('rep_start', start);
      setDateTime('rep_end', end);
    }

    document.querySelectorAll('input[name="rep_scope"]').forEach(function (r) {
      r.addEventListener('change', updateScopeUi);
    });

    qs('rep_html_content').addEventListener('change', function () { repHtmlContentTouched = true; });

    qs('rep_preset_cur_month').addEventListener('click', presetCurrentMonth);
    qs('rep_preset_last_month').addEventListener('click', presetLastMonth);
    qs('rep_preset_last_month_full').addEventListener('click', presetLastMonthFull);
    qs('rep_create_btn').addEventListener('click', createReport);

    updateScopeUi();
    loadCustomers();
    
    // init column selector
    loadReportColumns();
  });
</script>

{% endblock %}