{% 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">Reports</h2>
    <div class="text-muted">Create report definitions and generate raw output for testing.</div>
  </div>
  <div class="mt-2 mt-md-0">
    <a class="btn btn-primary" id="rep_new_btn" href="{{ url_for('main.reports_new') }}">New report</a>
  </div>
</div>

<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between">
    <div>
      <div class="fw-semibold">Report definitions</div>
      <div class="text-muted small">Configure reports with custom periods, columns, and optional scheduling.</div>
    </div>
    <div class="d-flex align-items-center gap-2">
      <button type="button" class="btn btn-sm btn-outline-secondary" id="rep_refresh_btn">Refresh</button>
    </div>
  </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
              <tr>
                <th style="width: 30%;">Name</th>
                <th style="width: 18%;">Type</th>
                <th style="width: 22%;">Period</th>
                <th style="width: 12%;">Format</th>
                <th style="width: 18%;" class="text-end">Actions</th>
              </tr>
            </thead>
            <tbody id="rep_table_body">
              {% if initial_reports %}
                {% for item in initial_reports %}
                  <tr>
                    <td><strong>{{ item.name }}</strong><div class="text-muted small">{{ item.description }}</div></td>
                    <td class="text-muted small">{{ item.report_type }}</td>
                    <td class="text-muted small">
                      {% if item.period_start or item.period_end %}
                        {{ item.period_start.replace('T',' ') if item.period_start else '' }} → {{ item.period_end.replace('T',' ') if item.period_end else '' }}
                      {% else %}
                        <span class="text-muted">—</span>
                      {% endif %}
                    </td>
                    <td><span class="badge text-bg-light border">{{ item.output_format }}</span></td>
                    <td class="text-end">
                      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('main.reports_edit', report_id=item.id) }}">Edit</a>
                      <button type="button" class="btn btn-sm btn-outline-primary rep-generate-btn" data-id="{{ item.id }}">Generate</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary ms-1 rep-view-btn" data-id="{{ item.id }}">View raw</button>
                      <a class="btn btn-sm btn-outline-success rep-download-btn ms-1" href="/api/reports/{{ item.id }}/export?format={{ (item.output_format or 'csv')|lower }}" target="_blank" rel="noopener">Download</a>
                      {% if active_role in ('admin','operator','reporter') %}
                        <button type="button" class="btn btn-sm btn-outline-danger rep-delete-btn ms-1" data-id="{{ item.id }}">Delete</button>
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="5" class="text-center text-muted py-4">No reports found.</td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="card-footer text-muted small">
        Tip: Generate a report first, then preview the raw data or download the CSV export.
      </div>
    </div>
  </div>

<!-- Raw data modal -->
<div class="modal fade" id="rep_raw_modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="rep_raw_title">Raw data</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
          <div class="btn-group" role="group" aria-label="Raw view selector">
            <button type="button" class="btn btn-outline-primary" id="rep_raw_view_summary">Summary</button>
            <button type="button" class="btn btn-outline-primary" id="rep_raw_view_snapshot">Snapshot</button>
          </div>
          <div class="d-flex align-items-center gap-2">
            <span class="text-muted small" id="rep_raw_meta">-</span>
            <div class="btn-group" role="group" aria-label="Raw pagination">
              <button type="button" class="btn btn-outline-secondary" id="rep_raw_prev_btn">Prev</button>
              <button type="button" class="btn btn-outline-secondary" id="rep_raw_next_btn">Next</button>
            </div>
          </div>
        </div>

        <div class="table-responsive">
          <table class="table table-sm table-hover align-middle mb-0" id="rep_raw_table">
            <thead class="table-light" id="rep_raw_thead"></thead>
            <tbody id="rep_raw_tbody">
              <tr><td class="text-center text-muted py-4">Select a report to view raw data.</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="modal-footer">
        <a class="btn btn-outline-success" id="rep_raw_download_btn" href="#" target="_blank">Download CSV</a>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
  window.__reportColumnsMeta = {{ columns_meta|tojson }};
  window.addEventListener('DOMContentLoaded', function () {
    var rawModalEl = document.getElementById('rep_raw_modal');
    var rawModal = window.bootstrap ? new bootstrap.Modal(rawModalEl) : null;

    var rawReportId = null;
    var rawView = 'summary';
    var rawLimit = 100;
    var rawOffset = 0;

    var canDeleteReports = {{ 'true' if active_role in ('admin','operator','reporter') else 'false' }};

    var reportsItems = [];
    var reportColumnsMeta = window.__reportColumnsMeta || null;
    var rawReportConfig = null;

    function loadReportColumnsMeta() {
      if (reportColumnsMeta) return Promise.resolve();
      return fetch('/api/reports/columns', { credentials: 'same-origin' })
        .then(function (r) { return r.json(); })
        .then(function (j) { reportColumnsMeta = j || null; })
        .catch(function () { reportColumnsMeta = null; });
    }

    function colLabel(key) {
      if (!reportColumnsMeta || !reportColumnsMeta.groups) return key;
      for (var i = 0; i < reportColumnsMeta.groups.length; i++) {
        var items = reportColumnsMeta.groups[i].items || [];
        for (var j = 0; j < items.length; j++) {
          if (items[j].key === key) return items[j].label || key;
        }
      }
      // Backwards compatibility: object_name was used for job name in older configs.
      if (key === 'job_name') {
        for (var i2 = 0; i2 < reportColumnsMeta.groups.length; i2++) {
          var items2 = reportColumnsMeta.groups[i2].items || [];
          for (var j2 = 0; j2 < items2.length; j2++) {
            if (items2[j2].key === 'object_name') return items2[j2].label || 'Job name';
          }
        }
        return 'Job name';
      }
      return key;
    }

    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 normalizeCols(arr) {
      if (!Array.isArray(arr)) return [];
      return uniqPreserveOrder(arr.map(function (k) { return (k === 'object_name') ? 'job_name' : k; }));
    }

    function defaultColsFor(view) {
      if (reportColumnsMeta && reportColumnsMeta.defaults && reportColumnsMeta.defaults[view]) {
        return normalizeCols(reportColumnsMeta.defaults[view].slice());
      }
      // hard fallback
      if (view === 'snapshot') return ['job_name','customer_name','job_id','status','run_at'];
      return ['job_name','total_runs','success_count','warning_count','failed_count','missed_count','success_rate'];
    }

    function selectedColsFor(view) {
      var cfg = rawReportConfig || {};
      var cols = null;
      var hasView = false;
      if (cfg.columns && typeof cfg.columns === 'object') {
        hasView = Object.prototype.hasOwnProperty.call(cfg.columns, view);
        cols = cfg.columns[view];
      }
      if (hasView && Array.isArray(cols)) {
        // If an empty list is saved, keep it empty.
        return normalizeCols(cols);
      }
      if (cols && cols.length) return normalizeCols(cols);
      return defaultColsFor(view);
    }

    function fmtCellValue(v) {
      if (v === null || v === undefined) return '';
      if (typeof v === 'boolean') return v ? 'Yes' : 'No';
      var s = String(v);
      // basic ISO datetime prettify
      if (s.indexOf('T') >= 0 && s.indexOf(':') >= 0 && s.indexOf('-') >= 0) {
        return s.replace('T', ' ');
      }
      return s;
    }

    function qs(id) { return document.getElementById(id); }

    function fmtPeriod(item) {
      var a = (item.period_start || '').replace('T', ' ');
      var b = (item.period_end || '').replace('T', ' ');
      if (!a && !b) return '-';
      return a + ' → ' + b;
    }

    function badgeForType(item) {
      var t = (item.report_type || '').toLowerCase();
      if (t === 'scheduled') return '<span class="badge text-bg-warning">Scheduled</span>';
      return '<span class="badge text-bg-secondary">One-time</span>';
    }

    function escapeHtml(s) {
      return (s || '').replace(/[&<>"']/g, function (c) {
        return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
      });
    }

    function setTableLoading(msg) {
      var body = qs('rep_table_body');
      body.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4">' + escapeHtml(msg || 'Loading…') + '</td></tr>';
    }

    function setRawLoading(msg) {
      qs('rep_raw_thead').innerHTML = '';
      qs('rep_raw_tbody').innerHTML = '<tr><td class="text-center text-muted py-4">' + escapeHtml(msg || 'Loading…') + '</td></tr>';
      qs('rep_raw_meta').textContent = '-';
      qs('rep_raw_prev_btn').disabled = true;
      qs('rep_raw_next_btn').disabled = true;
    }

    function setRawViewButtons() {
      var a = qs('rep_raw_view_summary');
      var b = qs('rep_raw_view_snapshot');
      if (rawView === 'snapshot') {
        b.classList.add('active');
        a.classList.remove('active');
      } else {
        a.classList.add('active');
        b.classList.remove('active');
      }
    }

    function setRawDownloadLink() {
      var btn = qs('rep_raw_download_btn');
      if (!btn) return;
      if (!rawReportId) {
        btn.setAttribute('href', '#');
        btn.classList.add('disabled');
        return;
      }
      btn.classList.remove('disabled');
      btn.setAttribute('href', '/api/reports/' + rawReportId + '/export?view=' + rawView);
    }

    function updateRawMeta(total) {
      var t = parseInt(total || 0, 10) || 0;
      var start = t ? (rawOffset + 1) : 0;
      var end = t ? Math.min(rawOffset + rawLimit, t) : 0;
      var label = (rawView === 'snapshot') ? 'Snapshot' : 'Summary';
      qs('rep_raw_meta').textContent = label + ' · Rows ' + start + '-' + end + ' of ' + t;
      qs('rep_raw_prev_btn').disabled = (rawOffset <= 0);
      qs('rep_raw_next_btn').disabled = ((rawOffset + rawLimit) >= t);
    }

    function renderRawTable(view, items) {
      var thead = qs('rep_raw_thead');
      var tbody = qs('rep_raw_tbody');

      var cols = selectedColsFor(view);

      if (!cols || !cols.length) {
        thead.innerHTML = '<tr><th class="text-muted">No columns selected</th></tr>';
        tbody.innerHTML = '<tr><td class="text-muted py-4">No columns selected.</td></tr>';
        setRawDownloadLink();
        return;
      }

      function thRow(keys) {
        return '<tr>' + keys.map(function (k) { return '<th>' + escapeHtml(colLabel(k)) + '</th>'; }).join('') + '</tr>';
      }

      thead.innerHTML = thRow(cols);

      if (!items || !items.length) {
        tbody.innerHTML = '<tr><td colspan="' + String(cols.length || 1) + '" class="text-center text-muted py-4">No rows found.</td></tr>';
        setRawDownloadLink();
        return;
      }

      function td(val, nowrap) {
        var c = nowrap ? ' class="text-nowrap"' : '';
        return '<td' + c + '>' + escapeHtml(fmtCellValue(val)) + '</td>';
      }

      tbody.innerHTML = items.map(function (r) {
        return (
          '<tr>' +
            cols.map(function (k) {
              var val = (k === 'job_name') ? ((r.job_name !== null && r.job_name !== undefined && String(r.job_name).length) ? r.job_name : r.object_name) : r[k];
              return td(val, (k === 'run_at' || k === 'reviewed_at' || k === 'job_id' || k === 'run_id' || k === 'customer_name'));
            }).join('') +
          '</tr>'
        );
      }).join('');

      setRawDownloadLink();
    }

function loadRawData() {
      if (!rawReportId) return;
      setRawViewButtons();
      setRawDownloadLink();
      setRawLoading('Loading…');

      fetch('/api/reports/' + rawReportId + '/data?view=' + rawView + '&limit=' + rawLimit + '&offset=' + rawOffset, { credentials: 'same-origin' })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          var items = (data && data.items) ? data.items : [];
          var total = (data && data.total) ? data.total : 0;
          renderRawTable(rawView, items);
          updateRawMeta(total);
        })
        .catch(function () {
          setRawLoading('Failed to load raw data. Generate the report first.');
        });
    }

    function openRawModal(id) {
      rawReportId = id;
      rawReportConfig = null;
      var rid = String(id || '');
      for (var i = 0; i < (reportsItems || []).length; i++) {
        if (String(reportsItems[i].id) === rid) { rawReportConfig = (reportsItems[i].report_config || null); break; }
      }

      rawOffset = 0;
      rawView = rawView || 'summary';
      qs('rep_raw_title').textContent = 'Raw data (Report #' + id + ')';
      loadRawData();
      rawModal.show();
    }

    function renderTable(items) {
      reportsItems = items || [];
      var body = qs('rep_table_body');
      if (!items || !items.length) {
        body.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4">No reports defined yet.</td></tr>';
        return;
      }

      body.innerHTML = '';
      items.forEach(function (item) {
        var tr = document.createElement('tr');

        var name = escapeHtml(item.name || 'Report');
        var desc = escapeHtml(item.description || '');
        var typeBadge = badgeForType(item);
        var period = escapeHtml(fmtPeriod(item));
        var fmt = escapeHtml((item.output_format || 'csv').toUpperCase());

        tr.innerHTML =
          '<td>' +
            '<div class="fw-semibold">' + name + '</div>' +
            (desc ? '<div class="text-muted small">' + desc + '</div>' : '') +
          '</td>' +
          '<td>' + typeBadge + '</td>' +
          '<td class="text-muted small">' + period + '</td>' +
          '<td><span class="badge text-bg-light border">' + fmt + '</span></td>' +
          '<td class="text-end">' +
            '<a class="btn btn-sm btn-outline-secondary me-1" href="/reports/' + item.id + '/edit">Edit</a>' +
            '<button type="button" class="btn btn-sm btn-outline-primary me-1 rep-generate-btn" data-id="' + item.id + '">Generate</button>' +
            '<button type="button" class="btn btn-sm btn-outline-secondary me-1 rep-view-btn" data-id="' + item.id + '">View raw</button>' +
            '<a class="btn btn-sm btn-outline-success rep-download-btn" href="/api/reports/' + item.id + '/export?format=' + encodeURIComponent((item.output_format || 'csv').toLowerCase()) + '" target="_blank" rel="noopener">Download</a>' +
            (canDeleteReports ? '<button type="button" class="btn btn-sm btn-outline-danger ms-1 rep-delete-btn" data-id="' + item.id + '">Delete</button>' : '') +
          '</td>';;

        body.appendChild(tr);
      });

      body.querySelectorAll('.rep-generate-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
          var id = btn.getAttribute('data-id');
          generateReport(id, btn);
        });
      });

      body.querySelectorAll('.rep-view-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
          var id = btn.getAttribute('data-id');
          openRawModal(id);
        });
      });


      body.querySelectorAll('.rep-delete-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
          var id = btn.getAttribute('data-id');
          deleteReport(id, btn);
        });
      });
    }

    function loadReports() {
      setTableLoading('Loading…');
      var params = new URLSearchParams(window.location.search || '');
      var q = (params.get('q') || '').trim();
      var apiUrl = '/api/reports' + (q ? ('?q=' + encodeURIComponent(q)) : '');
      fetch(apiUrl, { credentials: 'same-origin' })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          renderTable((data && data.items) ? data.items : []);
        })
        .catch(function () {
          setTableLoading('Failed to load reports.');
        });
    }

    function deleteReport(id, btnEl) {
      if (!id) return;
      if (!confirm('Delete this report definition? This cannot be undone.')) return;
      var oldText = btnEl ? btnEl.textContent : '';
      if (btnEl) { btnEl.disabled = true; btnEl.textContent = 'Deleting…'; }

      fetch('/api/reports/' + id, { method: 'DELETE', credentials: 'same-origin' })
        .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, json: j }; }); })
        .then(function (res) {
          if (btnEl) { btnEl.disabled = false; btnEl.textContent = oldText; }
          if (!res.ok) {
            alert((res.json && res.json.error) ? res.json.error : 'Delete failed.');
            return;
          }
          // If the raw modal is open for this report, close it.
          if (rawReportId && String(rawReportId) === String(id) && rawModal) {
            rawModal.hide();
            rawReportId = null;
          }
          loadReportColumnsMeta().then(function () { loadReports(); });
        })
        .catch(function () {
          if (btnEl) { btnEl.disabled = false; btnEl.textContent = oldText; }
          alert('Delete failed.');
        });
    }

    function generateReport(id, btnEl) {
      if (!id) return;
      var oldText = btnEl.textContent;
      btnEl.disabled = true;
      btnEl.textContent = 'Generating…';

      fetch('/api/reports/' + id + '/generate', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({})
      })
        .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, json: j }; }); })
        .then(function (res) {
          btnEl.disabled = false;
          btnEl.textContent = oldText;
          if (!res.ok) {
            alert((res.json && res.json.error) ? res.json.error : 'Generate failed.');
            return;
          }
          if (res.json && (res.json.snapshot_rows !== undefined || res.json.summary_rows !== undefined)) {
            alert('Report generated. Snapshots: ' + (res.json.snapshot_rows || 0) + ', Summary: ' + (res.json.summary_rows || 0));
          } else {
            alert('Report generated.');
          }
        })
        .catch(function () {
          btnEl.disabled = false;
          btnEl.textContent = oldText;
          alert('Generate failed.');
        });
    }

    qs('rep_refresh_btn').addEventListener('click', loadReports);

    qs('rep_raw_view_summary').addEventListener('click', function () {
      rawView = 'summary';
      rawOffset = 0;
      loadRawData();
    });

    qs('rep_raw_view_snapshot').addEventListener('click', function () {
      rawView = 'snapshot';
      rawOffset = 0;
      loadRawData();
    });

    qs('rep_raw_prev_btn').addEventListener('click', function () {
      rawOffset = Math.max(0, rawOffset - rawLimit);
      loadRawData();
    });

    qs('rep_raw_next_btn').addEventListener('click', function () {
      rawOffset = rawOffset + rawLimit;
      loadRawData();
    });

    loadReportColumnsMeta().then(function () { loadReports(); });
  });
</script>


{% endblock %}