{% extends 'base.html' %}
{% block content %}
<div class="container py-3">

  <!-- Page header -->
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h2 class="mb-0">Public Onboarding Links</h2>
    <span class="text-muted small">Manage tokens & invites</span>
  </div>

<!-- Filter (GET) -->
<form method="GET" class="row g-2 align-items-center mb-2">
  <div class="col-auto">
    <div class="input-group">
      <span class="input-group-text"><i class="bi bi-search"></i></span>
      <input type="text" name="q" class="form-control" placeholder="Search by description…" value="{{ q }}">
    </div>
  </div>
  <div class="col-auto">
    <select name="per_page" class="form-select" onchange="this.form.submit()">
      {% for n in [10,20,50,100] %}
      <option value="{{n}}" {% if per_page==n %}selected{% endif %}>Rows {{n}}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-auto">
    <button class="btn btn-primary" type="submit">Filter</button>
  </div>
  <div class="col-auto">
    <a class="btn btn-secondary" href="{{ url_for('employee.list_public_links') }}">Reset</a>
  </div>
</form>

<!-- Generate (POST) -->
<form method="POST" class="row g-2 align-items-center mb-3">
  <div class="col-auto">
    <input name="description" type="email" class="form-control" placeholder="Enter candidate email" required>
  </div>
  <div class="col-auto">
    <div class="input-group">
      <span class="input-group-text">Days</span>
      <input name="expires_days" type="number" class="form-control" value="7" min="1">
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-success"><i class="bi bi-plus-lg"></i> Generate</button>
  </div>
</form>

  <!-- Data table -->
  {% if links %}
  <div class="card shadow-sm">
    <div class="table-responsive" style="max-height: 60vh;">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light sticky-top">
          <tr class="text-uppercase small text-muted">
            <th>#</th>
            <th class="ps-3">Description</th>
            <th>Token</th>
            <th>Expires</th>
            <th>Status</th>
            <th>Actions</th>
            <th class="pe-3">Full Link</th>
          </tr>
        </thead>
        <tbody>
          {% for link in links %}
          <tr>
            <td class="text-nowrap">{{ loop.index + (pagination.page - 1) * per_page }}</td>
            <td class="ps-3">{{ link.description }}</td>

            <td class="text-truncate" style="max-width: 220px;">
              <code class="user-select-all">{{ link.token }}</code>
            </td>

            <td>
              {% if link.expires_on %}
                {{ link.expires_on.strftime('%Y-%m-%d') }}
              {% else %}
                <span class="text-muted">No expiry</span>
              {% endif %}
            </td>

            <td>
              {% if link.is_used %}
                <span class="badge rounded-pill bg-danger-subtle text-danger border border-danger-subtle">Used</span>
              {% else %}
                <span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle">Active</span>
              {% endif %}
            </td>

            <td>
              <button
                class="btn btn-outline-primary btn-sm send-onboarding"
                data-email="{{ link.description }}"
                data-link="{{ url_for('employee.public_add_employee', token=link.token, _external=True) }}"
                data-name="{{ link.candidate_name or link.description }}">
                <i class="bi bi-send"></i> Send Email
              </button>
            </td>

            <td class="pe-3">
              <div class="input-group input-group-sm">
                <input type="text" class="form-control text-truncate"
                       readonly
                       value="{{ url_for('employee.public_add_employee', token=link.token, _external=True) }}">
                <button class="btn btn-outline-secondary copy-btn" type="button"
                        data-copy="{{ url_for('employee.public_add_employee', token=link.token, _external=True) }}">
                  <i class="bi bi-clipboard"></i>
                </button>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Footer: pagination + totals -->
    <div class="card-footer d-flex flex-column flex-md-row gap-2 align-items-center justify-content-between">
      <div class="small text-muted">
        Page {{ pagination.page }} of {{ pagination.pages or 1 }} •
        Showing {{ links|length }} of {{ pagination.total }} results
      </div>

      <nav aria-label="pagination">
        <ul class="pagination mb-0">
          <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
            <a class="page-link"
               href="{{ url_for('employee.list_public_links', page=pagination.prev_num, per_page=per_page, q=q) }}">Prev</a>
          </li>
          {% for p in page_numbers %}
            <li class="page-item {% if p == pagination.page %}active{% endif %}">
              <a class="page-link"
                 href="{{ url_for('employee.list_public_links', page=p, per_page=per_page, q=q) }}">{{ p }}</a>
            </li>
          {% endfor %}
          <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
            <a class="page-link"
               href="{{ url_for('employee.list_public_links', page=pagination.next_num, per_page=per_page, q=q) }}">Next</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  {% else %}
    <div class="alert alert-info shadow-sm">No public links yet.</div>
  {% endif %}
</div>

<!-- Page JS: copy & email actions -->
<script>
function toast(msg){ try{ if(window.bootstrap){const el=document.createElement('div'); el.className='toast align-items-center text-bg-dark border-0 position-fixed bottom-0 end-0 m-3'; el.role='alert'; el.innerHTML=`<div class="d-flex"><div class="toast-body">${msg}</div><button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button></div>`; document.body.appendChild(el); new bootstrap.Toast(el,{delay:2000}).show(); setTimeout(()=>el.remove(),2500);} else { alert(msg);} }catch(e){ alert(msg);} }

document.addEventListener('click', async (e) => {
  // Copy link
  const copyBtn = e.target.closest('.copy-btn');
  if (copyBtn){
    const txt = copyBtn.dataset.copy;
    try { await navigator.clipboard.writeText(txt); toast('Link copied'); }
    catch(_){ const ta=document.createElement('textarea'); ta.value=txt; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); toast('Link copied'); }
    return;
  }

  // Send emails
  const onb = e.target.closest('.send-onboarding');
  if (onb){
    const btn = onb; const orig = btn.innerHTML; btn.disabled = true; btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Sending';
    try {
      const payload = { email:onb.dataset.email, name:onb.dataset.name, link:onb.dataset.link, expiry_hours:48 };
      const res = await fetch('/api/email/onboarding', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload)});
      const j = await res.json().catch(()=>({}));
      toast(j.message || (res.ok ? 'Queued.' : 'Failed'));
    } catch (err){ toast('Failed to send'); }
    finally { btn.disabled=false; btn.innerHTML = orig; }
  }
});
</script>
{% endblock %}