{% extends 'base.html' %}
{% block content %}

<!-- Optional page-only styles (safe to keep inline) -->
<style>
  .card-kpi { border: 0; border-radius: 1rem; }
  .card-kpi .value { font-size: 1.25rem; font-weight: 700; }
  .thead-sticky { position: sticky; top: 0; z-index: 2; }
  .status-dot {
    display:inline-block; width:.5rem; height:.5rem; border-radius:50%;
    margin-right:.35rem; vertical-align:middle;
  }
  .status-active  { background:#16a34a; }
  .status-notice  { background:#f59e0b; }
  .status-resigned{ background:#dc2626; }
  .table thead th { white-space: nowrap; }
  .table td, .table th { vertical-align: middle; }
  .filters .form-label { font-size: .8rem; color: #6b7280; }
  .toolbar .btn { border-radius: .6rem; }
  .sticky-tools {
    position: sticky; top: .75rem; z-index: 3;
    background: var(--bs-body-bg); padding-top: .5rem;
  }
</style>

<div class="container py-4">

  <!-- Title bar -->
  <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <div>
      <h2 class="mb-0">All Employees</h2>
      <div class="text-muted small">Manage roles, password links &amp; more</div>
    </div>

    {# Role gate for actions (optional). Remove the if-block if not needed. #}
    {% set _role = (current_user.role.name if current_user.role else '')|lower %}
    <div class="toolbar d-flex gap-2">
      <a href="{{ url_for('employee.view_employees') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
      </a>

      {% if _role in ['hr','hr admin','admin'] %}
        <!-- Import -->
        <a href="{{ url_for('employee.import_employees') }}" class="btn btn-outline-primary">
          <i class="bi bi-file-earmark-arrow-up me-1"></i> Import
        </a>
        <a href="{{ url_for('employee.download_employee_import_template') }}" class="btn btn-outline-secondary">
          <i class="bi bi-download me-1"></i> Template
        </a>

        <!-- Export dropdown (keeps current filters) -->
        <div class="btn-group">
          <a class="btn btn-success" href="{{
            url_for('employee.export_employees',
              format='csv',
              name=name, code=code, department_id=dept_id, role=role_name,
              status=status, sort=sort, dir=direction)
          }}">
            <i class="bi bi-file-earmark-spreadsheet me-1"></i> Export CSV
          </a>
          <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li>
              <a class="dropdown-item" href="{{
                url_for('employee.export_employees',
                  format='xlsx',
                  name=name, code=code, department_id=dept_id, role=role_name,
                  status=status, sort=sort, dir=direction)
              }}">
                Export XLSX
              </a>
            </li>
          </ul>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- Quick KPIs -->
  <div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
      <div class="card card-kpi shadow-sm">
        <div class="card-body">
          <div class="text-muted small">Total</div>
          <div class="value">{{ pagination.total }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card card-kpi shadow-sm">
        <div class="card-body">
          <div class="text-muted small">On this page</div>
          <div class="value">{{ employees|length }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card card-kpi shadow-sm">
        <div class="card-body">
          <div class="text-muted small">Page</div>
          <div class="value">{{ pagination.page }} / {{ pagination.pages or 1 }}</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card card-kpi shadow-sm">
        <div class="card-body">
          <div class="text-muted small">Rows per page</div>
          <div class="value">{{ per_page }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Filters -->
  <div class="card shadow-sm mb-3">
    <div class="card-body filters">
      <form method="GET" class="row g-3">
        <div class="col-12 col-lg-3">
          <label class="form-label">Name</label>
          <input type="text" name="name" class="form-control" placeholder="Employee name" value="{{ name or '' }}">
        </div>
        <div class="col-6 col-lg-2">
          <label class="form-label">Code</label>
          <input type="text" name="code" class="form-control" placeholder="Emp code" value="{{ code or '' }}">
        </div>
        <div class="col-6 col-lg-3">
          <label class="form-label">Department</label>
          <select name="department_id" class="form-select">
            <option value="">All</option>
            {% for d in departments %}
              <option value="{{ d.id }}" {% if dept_id==d.id %}selected{% endif %}>{{ d.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-6 col-lg-2">
          <label class="form-label">Role</label>
          <select name="role" class="form-select">
            <option value="">All</option>
            {% for r in roles %}
              <option value="{{ r.name }}" {% if role_name==r.name %}selected{% endif %}>{{ r.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-6 col-lg-2">
          <label class="form-label">Status</label>
          <select name="status" class="form-select">
            <option value="">All</option>
            <option value="active"   {% if status=='active' %}selected{% endif %}>Active</option>
            <option value="notice"   {% if status=='notice' %}selected{% endif %}>Notice</option>
            <option value="resigned" {% if status=='resigned' %}selected{% endif %}>Resigned</option>
          </select>
        </div>

        <div class="col-6 col-lg-2">
          <label class="form-label">Rows</label>
          <select name="per_page" class="form-select">
            {% for n in [10,20,50,100] %}
              <option value="{{ n }}" {% if per_page==n %}selected{% endif %}>{{ n }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-6 col-lg-2">
          <label class="form-label">Sort</label>
          <select name="sort" class="form-select">
            <option value="name"        {% if sort=='name' %}selected{% endif %}>Name</option>
            <option value="code"        {% if sort=='code' %}selected{% endif %}>Code</option>
            <option value="department"  {% if sort=='department' %}selected{% endif %}>Department</option>
            <option value="designation" {% if sort=='designation' %}selected{% endif %}>Designation</option>
            <option value="status"      {% if sort=='status' %}selected{% endif %}>Status</option>
          </select>
        </div>
        <div class="col-6 col-lg-2">
          <label class="form-label">Direction</label>
          <select name="dir" class="form-select">
            <option value="asc"  {% if direction!='desc' %}selected{% endif %}>Ascending</option>
            <option value="desc" {% if direction=='desc' %}selected{% endif %}>Descending</option>
          </select>
        </div>

        <div class="col-12 d-flex gap-2 sticky-tools">
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-funnel me-1"></i> Apply Filters
          </button>
          <a href="{{ url_for('employee.view_employees') }}" class="btn btn-outline-secondary">
            Clear
          </a>
        </div>
      </form>
    </div>
  </div>

  <!-- Results -->
  {% if employees %}
    <div class="card shadow-sm">
      <div class="table-responsive" style="max-height: 70vh;">
        <table class="table table-hover align-middle mb-0">
          <thead class="table-light thead-sticky">
            <tr class="text-uppercase small text-muted">
              <th>Emp Code</th>
              <th>Name</th>
              <th>Designation</th>
              <th>Department</th>
              <th>Password Email</th>
              <th>Set Password</th>
              <th>Role</th>
              <th>Status</th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
          {% for emp in employees %}
            {% set s = (emp.status or '')|lower %}
            <tr class="{% if s=='resigned' %}table-light{% endif %}">
              <td class="text-nowrap">{{ emp.employee_code }}</td>

              <td class="{% if s == 'resigned' %}text-danger text-decoration-line-through{% endif %}">
                <div class="fw-semibold">{{ emp.full_name }}</div>
                <div class="small text-muted">{{ emp.official_email or emp.email }}</div>
              </td>

              <td class="text-nowrap">{{ emp.designation.title if emp.designation else '—' }}</td>
              <td class="text-nowrap">{{ emp.department.name  if emp.department  else '—' }}</td>

              <!-- Password Email button -->
              <td class="text-nowrap">
                {% set emp_email = emp.official_email or emp.email %}
                {% if emp.set_password_token and emp_email %}
                  <button
                    class="btn btn-outline-success btn-sm send-password"
                    data-email="{{ emp_email }}"
                    data-name="{{ emp.full_name }}"
                    data-link="{{ url_for('employee.set_password', token=emp.set_password_token, _external=True) }}">
                    <i class="bi bi-envelope-check me-1"></i> Send Email
                  </button>
                {% else %}
                  <button class="btn btn-outline-secondary btn-sm" disabled title="Generate link first">
                    <i class="bi bi-link-45deg me-1"></i> Send Email
                  </button>
                {% endif %}
              </td>

              <!-- Set Password link / regenerate -->
              <td class="text-center">
                {% if emp.set_password_token %}
                  <a href="{{ url_for('employee.set_password', token=emp.set_password_token, _external=True) }}"
                     class="btn btn-outline-secondary btn-sm" target="_blank">
                    <i class="bi bi-box-arrow-up-right"></i>
                  </a>
                {% else %}
                  <form action="{{ url_for('employee.regenerate_token', emp_id=emp.id) }}" method="POST" class="d-inline">
                    <button class="btn btn-sm btn-warning">
                      <i class="bi bi-arrow-repeat"></i>
                    </button>
                  </form>
                {% endif %}
              </td>

              <!-- Role updater -->
              <td style="min-width: 12rem;">
                <form action="{{ url_for('employee.update_role', emp_id=emp.id) }}" method="POST" class="d-flex gap-2">
                  <select name="role" class="form-select form-select-sm" required
                          {% if s == 'resigned' %}disabled{% endif %}>
                    <option value="" {% if not emp.role %}selected{% endif %}>-- Select --</option>
                    {% for role in roles %}
                      <option value="{{ role.name }}" {% if emp.role and role.name == emp.role.name %}selected{% endif %}>
                        {{ role.name }}
                      </option>
                    {% endfor %}
                  </select>
                  <button type="submit" class="btn btn-sm btn-primary"
                          {% if s == 'resigned' %}disabled{% endif %}>
                    Update
                  </button>
                </form>
              </td>

              <!-- Status -->
              <td class="text-center">
                {% if s == 'active' %}
                  <span class="status-dot status-active"></span><span class="badge bg-success">Active</span>
                {% elif s == 'notice' or s == 'notice_period' %}
                  <span class="status-dot status-notice"></span><span class="badge bg-warning text-dark">Notice</span>
                {% elif s == 'resigned' %}
                  <span class="status-dot status-resigned"></span><span class="badge bg-danger">Resigned</span>
                {% else %}
                  <span class="badge bg-secondary">{{ emp.status or '—' }}</span>
                {% endif %}
              </td>

              <!-- Actions -->
              <td class="text-end">
                <a href="{{ url_for('employee.edit_employee', employee_id=emp.id) }}"
                   class="btn btn-sm {% if s=='resigned' %}btn-outline-secondary{% else %}btn-success{% endif %}">
                  {% if s=='resigned' %}<i class="bi bi-eye"></i> View{% else %}<i class="bi bi-pencil-square"></i> Edit{% endif %}
                </a>
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>

      <!-- Footer: pagination -->
      <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 {{ employees|length }} of {{ pagination.total }} employees
        </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.view_employees',
                                   page=pagination.prev_num,
                                   per_page=per_page,
                                   name=name, code=code,
                                   department_id=dept_id, role=role_name, status=status,
                                   sort=sort, dir=direction) }}">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.view_employees',
                                     page=p,
                                     per_page=per_page,
                                     name=name, code=code,
                                     department_id=dept_id, role=role_name, status=status,
                                     sort=sort, dir=direction) }}">{{ p }}</a>
              </li>
            {% endfor %}

            <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
              <a class="page-link"
                 href="{{ url_for('employee.view_employees',
                                   page=pagination.next_num,
                                   per_page=per_page,
                                   name=name, code=code,
                                   department_id=dept_id, role=role_name, status=status,
                                   sort=sort, dir=direction) }}">Next</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  {% else %}
    <div class="alert alert-info">
      <i class="bi bi-info-circle me-1"></i> No employees match your filters.
    </div>
  {% endif %}

</div>

<!-- Page JS: send password-set email (unchanged, small UX tweak) -->
<script>
async function postJSON(url, payload){
  const r = await fetch(url, {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify(payload||{})
  });
  const text = await r.text();
  let data; try { data = JSON.parse(text); } catch(_) { data = {message:text}; }
  if (!r.ok) throw new Error(data.message || 'Request failed');
  return data;
}

document.addEventListener('click', async (e) => {
  const btn = e.target.closest('.send-password');
  if (!btn) return;

  const orig = btn.innerHTML;
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Sending…';

  try {
    const payload = {
      email: btn.dataset.email,
      name:  btn.dataset.name,
      link:  btn.dataset.link
    };
    const res = await postJSON('/api/email/password-set', payload);
    const ok = (res && (res.status === 'ok' || res.success));
    alert(res.message || (ok ? 'Queued.' : 'Request queued.'));
  } catch (err){
    alert(err.message || 'Failed to send');
  } finally {
    btn.disabled = false;
    btn.innerHTML = orig;
  }
});
</script>
{% endblock %}