{% extends "admin/layout.html" %}
{% block title %}Clients{% endblock %}
{% block page_title %}Client Management{% endblock %}

{% block topbar_actions %}
<button class="btn btn-primary" onclick="openModal('addModal')">+ Add Client</button>
{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header">
    <span class="card-title">All Clients ({{ clients|length }})</span>
    <input type="text" placeholder="🔍 Search clients…" id="searchInput" style="background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;
                  color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;
                  padding:8px 13px;outline:none;width:220px;transition:border-color 0.2s;"
      onfocus="this.style.borderColor='var(--primary3)'" onblur="this.style.borderColor='var(--border)'"
      oninput="filterTable(this.value)">
  </div>
  <div class="table-wrap">
    <table id="clientTable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Username</th>
          <th>SSRS Folder</th>
          <th>Reports</th>
          <th>Status</th>
          <th>Last Login</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for c in clients %}
        <tr>
          <td><strong style="color:var(--ink)">{{ c.full_name }}</strong></td>
          <td style="color:var(--muted)">{{ c.username }}</td>
          <td>
            {% if c.ssrs_folder %}
            <span class="badge badge-gold">📁 {{ c.ssrs_folder }}</span>
            {% else %}<span style="color:var(--muted)">—</span>{% endif %}
          </td>
          <td>
            <a href="/admin/clients/{{ c.id }}/bulk-access" class="badge badge-gold"
              style="text-decoration:none;cursor:pointer;">
              {{ c.report_count }} reports
            </a>
          </td>
          <td>
            <span class="badge {{ 'badge-green' if c.is_active else 'badge-red' }}">
              {{ 'Active' if c.is_active else 'Inactive' }}
            </span>
          </td>
          <td style="color:var(--muted);font-size:11px;">
            {{ c.last_login.strftime('%d %b %Y %H:%M') if c.last_login else 'Never' }}
          </td>
          <td>
            <div style="display:flex;gap:5px;flex-wrap:wrap;">
              <a href="/admin/clients/{{ c.id }}/access" class="btn btn-ghost btn-sm" title="View Access">📄</a>
              <form method="POST" action="/admin/clients/{{ c.id }}/regrant-all" style="display:inline;"
                    onsubmit="return confirm('{{ c.full_name }} ko sab reports grant karo?')">
                <button class="btn btn-ghost btn-sm" type="submit" title="Grant All Reports"
                        style="color:var(--primary);border-color:var(--border);">🔄 Grant All</button>
              </form>
              <form method="POST" action="/admin/clients/{{ c.id }}/toggle" style="display:inline;">
                <button class="btn btn-ghost btn-sm" type="submit"
                  title="{{ 'Deactivate' if c.is_active else 'Activate' }}">
                  {{ '⏸' if c.is_active else '▶' }}
                </button>
              </form>
              <button class="btn btn-ghost btn-sm" data-uid="{{ c.id }}" data-uname="{{ c.username }}"
                onclick="openResetModal(this.dataset.uid, this.dataset.uname)" title="Reset Password">🔑</button>
            </div>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="8">
            <div class="empty">
              <div class="empty-icon">👥</div>
              <h3>No clients yet</h3>
              <p>Click "Add Client" to create the first one.</p>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block modals %}

<!-- ADD CLIENT MODAL -->
<div class="modal-bg" id="addModal">
  <div class="modal" style="max-width:520px;">
    <button class="modal-close" onclick='closeModal("addModal")'>✕</button>
    <div class="modal-title">Add New Client</div>
    <div class="modal-sub">Creates a Client-role account</div>

    <form method="POST" action="/admin/clients/add">
      <div class="form-row">
        <div class="form-group">
          <label>Full Name *</label>
          <input name="full_name" required placeholder="John Doe">
        </div>
        <div class="form-group">
          <label>Username *</label>
          <input name="username" required placeholder="johndoe">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>Email</label>
          <input name="email" type="email" placeholder="john@company.com">
        </div>
        <div class="form-group">
          <label>Password *</label>
          <input name="password" type="password" required placeholder="Min 6 chars">
        </div>
      </div>
      <div class="form-group">
        <label>SSRS Folder</label>
        <input name="ssrs_folder" placeholder="e.g.  ABC_Client  (folder name in SSRS)">
        <div style="font-size:11px;color:var(--muted);margin-top:5px;">
          This is the top-level folder name in SSRS that belongs to this client.
        </div>
      </div>
      <div class="form-group">
        <label>Client Database</label>
        <input name="client_db" placeholder="e.g. ClientABC_DB (SQL Server DB name)">
        <div style="font-size:11px;color:var(--muted);margin-top:5px;">
          This is the SQL Server database name for this client.
        </div>
      </div>
      <button type="submit" class="btn btn-primary"
        style="width:100%;justify-content:center;padding:13px;margin-top:4px;">
        Create Client
      </button>
    </form>
  </div>
</div>

<!-- RESET PASSWORD MODAL -->
<div class="modal-bg" id="resetModal">
  <div class="modal" style="max-width:380px;">
    <button class="modal-close" onclick="closeModal('resetModal')">✕</button>
    <div class="modal-title">Reset Password</div>
    <div class="modal-sub" id="resetSubtitle">for username</div>
    <div class="form-group">
      <label>New Password</label>
      <input type="password" id="newPwInput" placeholder="Enter new password" minlength="6">
    </div>
    <button class="btn btn-primary" style="width:100%;justify-content:center;padding:12px;"
      onclick="submitReset()">Reset Password</button>
    <div id="resetMsg" style="margin-top:10px;font-size:12px;text-align:center;"></div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
  let resetUid = null;

  function openModal(id) { document.getElementById(id).classList.add('open'); }
  function closeModal(id) { document.getElementById(id).classList.remove('open'); }

  document.querySelectorAll('.modal-bg').forEach(m =>
    m.addEventListener('click', e => { if (e.target === m) m.classList.remove('open'); })
  );

  function openResetModal(uid, uname) {
    resetUid = uid;
    document.getElementById('resetSubtitle').textContent = 'for ' + uname;
    document.getElementById('newPwInput').value = '';
    document.getElementById('resetMsg').textContent = '';
    openModal('resetModal');
  }

  async function submitReset() {
    const pw = document.getElementById('newPwInput').value;
    const msg = document.getElementById('resetMsg');
    if (pw.length < 6) {
      msg.style.color = 'var(--red)';
      msg.textContent = 'Min 6 chars';
      return;
    }
    const fd = new FormData();
    fd.append('new_password', pw);
    const r = await fetch(`/admin/clients/${resetUid}/reset-password`, { method: 'POST', body: fd });
    const d = await r.json();
    if (d.success) {
      msg.style.color = 'var(--green)';
      msg.textContent = 'Password reset!';
      setTimeout(() => closeModal('resetModal'), 1200);
    } else {
      msg.style.color = 'var(--red)';
      msg.textContent = d.error || 'Failed';
    }
  }

  function filterTable(q) {
    q = q.toLowerCase();
    document.querySelectorAll('#clientTable tbody tr').forEach(tr => {
      tr.style.display = tr.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
  }
</script>
{% endblock %}