{% extends "admin/layout.html" %}
{% block title %}Report Master{% endblock %}
{% block page_title %}Report Master{% endblock %}

{% block topbar_actions %}
  <button class="btn btn-primary" onclick="saveAll()" id="saveAllBtn">Save All Changes</button>
{% endblock %}

{% block extra_head %}
<style>
.rm-intro{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 22px;margin-bottom:20px;display:flex;align-items:center;gap:14px;}
.rm-intro-icon{font-size:26px;flex-shrink:0;}
.rm-intro-text{font-size:13px;color:var(--text2);line-height:1.6;}
.rm-intro-text strong{color:var(--text);font-weight:600;}

.rm-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.rm-toolbar input{flex:1;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-family:var(--font-sans);font-size:13px;padding:9px 14px;outline:none;transition:border-color 0.2s;}
.rm-toolbar input:focus{border-color:var(--primary);}
.rm-toolbar input::placeholder{color:var(--text4);}
.cat-filter{padding:8px 14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border2);color:var(--text2);font-family:var(--font-sans);font-size:13px;outline:none;cursor:pointer;}
.cat-filter:focus{border-color:var(--primary);}

.rm-table{width:100%;border-collapse:collapse;}
.rm-table thead th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);padding:10px 14px;border-bottom:2px solid var(--border2);background:var(--surface2);}
.rm-table tbody tr{border-bottom:1px solid var(--border);transition:background 0.15s;}
.rm-table tbody tr:hover{background:var(--surface2);}
.rm-table tbody tr.dirty{background:rgba(12,122,110,0.05);}
.rm-table td{padding:10px 14px;vertical-align:middle;}

.td-path{font-size:11px;color:var(--text3);font-family:var(--font-mono);}

.rm-input{width:100%;background:var(--surface3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font-sans);font-size:13px;padding:7px 11px;outline:none;transition:border-color 0.2s, background 0.2s;}
.rm-input:focus{border-color:var(--primary);background:var(--surface);}
.rm-input.changed{border-color:var(--primary3);background:rgba(12,122,110,0.05);}

.cat-select{width:100%;background:var(--surface3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:var(--font-sans);font-size:13px;padding:7px 11px;outline:none;cursor:pointer;}
.cat-select:focus{border-color:var(--primary);}
.cat-select.changed{border-color:var(--primary3);background:rgba(12,122,110,0.05);}

.stat-strip{display:flex;gap:12px;margin-bottom:20px;}
.stat-pill{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px;font-size:12px;color:var(--text2);}
.stat-pill strong{display:block;font-size:20px;font-weight:700;color:var(--text);font-family:var(--font-display);}

.rm-empty{text-align:center;padding:60px 20px;color:var(--text3);}
.rm-empty .ei{font-size:42px;margin-bottom:14px;opacity:.35;}

.toggle-active{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--border2);background:var(--surface3);color:var(--text3);font-size:13px;font-weight:700;cursor:pointer;transition:all 0.18s;display:inline-flex;align-items:center;justify-content:center;}
.toggle-active.active{background:rgba(12,122,110,0.12);border-color:var(--primary3);color:var(--primary);}
.toggle-active.changed{border-color:var(--primary3);}
.toast-ok{background:var(--green);color:#fff;}
.toast-err{background:var(--red);color:#fff;}
@keyframes slide-up{from{transform:translateY(8px);opacity:0;}to{opacity:1;}}
</style>
{% endblock %}

{% block content %}

<div class="rm-intro">
  <div class="rm-intro-icon">🗂️</div>
  <div class="rm-intro-text">
    Set the <strong>Display Name</strong>, <strong>Category</strong>, and <strong>Active</strong> status for each report here.
    Changes apply to all clients immediately on save.
    These settings are also applied automatically when new clients are created.
  </div>
</div>

<div class="stat-strip">
  <div class="stat-pill"><strong>{{ master_reports | length }}</strong>Total Reports</div>
  <div class="stat-pill"><strong>{{ master_reports | selectattr('category') | list | length }}</strong>Categorised</div>
  <div class="stat-pill"><strong>{{ master_reports | rejectattr('category') | list | length }}</strong>Needs Category</div>
</div>

<div class="rm-toolbar">
  <input type="text" id="searchInput" placeholder="🔍  Search by name or path…" oninput="filterTable()">
  <select class="cat-filter" id="catFilter" onchange="filterTable()">
    <option value="">All Categories</option>
    {% set cats = master_reports | map(attribute='category') | select | unique | sort %}
    {% for c in cats %}
    <option value="{{ c }}">{{ c }}</option>
    {% endfor %}
    <option value="__unset__">— Uncategorised</option>
  </select>
</div>

<div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;">
  {% if master_reports %}
  <table class="rm-table">
    <thead>
      <tr>
        <th style="width:32%">Report Name (SSRS)</th>
        <th style="width:28%">Display Name <span style="font-weight:400;color:var(--text4);">(shown to clients)</span></th>
        <th style="width:20%">Category</th>
        <th style="width:8%" style="text-align:center">Active</th>
      </tr>
    </thead>
    <tbody id="masterBody">
      {% for r in master_reports %}
      <tr id="row_{{ loop.index }}"
          data-path="{{ r.report_path }}"
          data-name="{{ r.report_name | lower }}"
          data-cat="{{ r.category | lower }}">
        <td>
          <div style="font-size:13px;font-weight:500;color:var(--text);">{{ r.report_name }}</div>
          <div class="td-path">{{ r.report_path }}</div>
        </td>
        <td>
          <input class="rm-input" type="text"
                 id="disp_{{ loop.index }}"
                 value="{{ r.display_name }}"
                 data-orig="{{ r.display_name }}"
                 oninput="markDirty({{ loop.index }})"
                 placeholder="Display name…">
        </td>
        <td>
          <select class="cat-select" id="cat_{{ loop.index }}"
                  data-orig="{{ r.category }}"
                  onchange="markDirty({{ loop.index }})">
            <option value="">— unset —</option>
            {% for opt in ['Project','Supplier','Client','Security','Archived'] %}
            <option value="{{ opt }}" {% if r.category == opt %}selected{% endif %}>{{ opt }}</option>
            {% endfor %}
            {% if r.category and r.category not in ['Project','Supplier','Client','Security','Archived'] %}
            <option value="{{ r.category }}" selected>{{ r.category }}</option>
            {% endif %}
          </select>
        </td>
        <td style="text-align:center;">
          <button type="button"
                  id="active_{{ loop.index }}"
                  class="toggle-active {% if r.is_active %}active{% endif %}"
                  data-orig="{{ '1' if r.is_active else '0' }}"
                  onclick="toggleActive({{ loop.index }})"
                  title="{{ 'Active — click to deactivate' if r.is_active else 'Inactive — click to activate' }}">
            {{ '✓' if r.is_active else '✗' }}
          </button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="rm-empty">
    <div class="ei">📋</div>
    <h3 style="font-size:15px;font-weight:600;margin-bottom:6px;">No reports found</h3>
    <p style="font-size:13px;">No active reports in ReportClientAccess right now.</p>
  </div>
  {% endif %}
</div>

<div class="toast" id="toast"></div>
{% endblock %}

{% block scripts %}
<script>
let dirtyRows = new Set();

function toggleActive(idx) {
  const btn = document.getElementById('active_' + idx);
  const isActive = btn.classList.contains('active');
  btn.classList.toggle('active', !isActive);
  btn.textContent = isActive ? '✗' : '✓';
  btn.title = isActive ? 'Inactive — click to activate' : 'Active — click to deactivate';
  markDirty(idx);
}

function markDirty(idx) {
  const row      = document.getElementById('row_' + idx);
  const dispEl   = document.getElementById('disp_' + idx);
  const catEl    = document.getElementById('cat_'  + idx);
  const activeEl = document.getElementById('active_' + idx);
  const dispChanged   = dispEl.value !== dispEl.dataset.orig;
  const catChanged    = catEl.value  !== catEl.dataset.orig;
  const activeChanged = activeEl ? (activeEl.classList.contains('active') ? '1' : '0') !== activeEl.dataset.orig : false;
  dispEl.classList.toggle('changed', dispChanged);
  catEl.classList.toggle('changed',  catChanged);
  if (activeEl) activeEl.classList.toggle('changed', activeChanged);
  if (dispChanged || catChanged || activeChanged) {
    dirtyRows.add(idx); row.classList.add('dirty');
  } else {
    dirtyRows.delete(idx); row.classList.remove('dirty');
  }
  const btn = document.getElementById('saveAllBtn');
  btn.textContent = dirtyRows.size > 0
    ? 'Save All Changes (' + dirtyRows.size + ' modified)' : 'Save All Changes';
}

function filterTable() {
  const q   = document.getElementById('searchInput').value.toLowerCase();
  const cat = document.getElementById('catFilter').value;
  document.querySelectorAll('#masterBody tr').forEach(row => {
    const matchQ = !q || row.dataset.name.includes(q) || row.dataset.path.toLowerCase().includes(q);
    const rowCat = row.dataset.cat || '';
    const matchC = !cat || (cat === '__unset__' ? !rowCat : rowCat === cat.toLowerCase());
    row.style.display = (matchQ && matchC) ? '' : 'none';
  });
}

async function saveAll() {
  const btn = document.getElementById('saveAllBtn');
  btn.disabled = true; btn.textContent = 'Saving…';

  const reports = [];
  dirtyRows.forEach(idx => {
    const row  = document.getElementById('row_' + idx);
    const disp = document.getElementById('disp_' + idx);
    const cat  = document.getElementById('cat_'  + idx);
    const activeEl = document.getElementById('active_' + idx);
    if (!row || !disp) return;
    reports.push({
      report_path:  row.dataset.path,
      display_name: disp.value.trim() || disp.dataset.orig,
      category:     cat.value,
      is_active:    activeEl ? activeEl.classList.contains('active') : true
    });
  });

  try {
    const res  = await fetch('/admin/api/report-master/save-all', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({reports})
    });
    const data = await res.json();
    showToast(data.success ? '✓ ' + data.saved + ' reports saved!' : 'Save failed.', data.success);
    if (data.success) {
      const savedIdxs = [...dirtyRows];
      dirtyRows.clear();
      savedIdxs.forEach(idx => {
        const row = document.getElementById('row_' + idx);
        if (row) row.classList.remove('dirty');
        const disp = document.getElementById('disp_' + idx);
        const cat  = document.getElementById('cat_'  + idx);
        const activeEl = document.getElementById('active_' + idx);
        if (disp) { disp.dataset.orig = disp.value; disp.classList.remove('changed'); }
        if (cat)  { cat.dataset.orig  = cat.value;  cat.classList.remove('changed');  }
        if (activeEl) { activeEl.dataset.orig = activeEl.classList.contains('active') ? '1' : '0'; activeEl.classList.remove('changed'); }
      });
    }
  } catch(e) { showToast('Network error.', false); }

  btn.disabled = false; btn.textContent = 'Save All Changes';
}

function showToast(msg, ok) {
  const t = document.getElementById('toast');
  t.className = 'toast ' + (ok ? 'toast-ok' : 'toast-err');
  t.textContent = msg;
  t.style.display = 'block';
  setTimeout(() => t.style.display = 'none', 3500);
}
</script>
{% endblock %}