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

<style>
  .badge-ok { background:#16a34a; }
  .badge-err { background:#dc2626; }
  .table-sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); }
  .small-muted { font-size:.9rem; color:#6b7280; }
</style>

<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div>
      <h3 class="mb-0"><i class="bi bi-people-fill me-2"></i>Import Employees</h3>
      <div class="small-muted">Upload CSV/XLSX, review issues, and confirm insert.</div>
    </div>
    <div class="d-flex gap-2">
      <a class="btn btn-outline-secondary" href="{{ url_for('employee.view_employees') }}">
        <i class="bi bi-arrow-left me-1"></i> Back to Employees
      </a>
      <a class="btn btn-outline-primary" href="{{ url_for('employee.download_employee_import_template') }}">
        <i class="bi bi-download me-1"></i> Download Template
      </a>
    </div>
  </div>

  {# Flash messages #}
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  {% set step = step or 'form' %}

  {# -------------------------- STEP: FORM -------------------------- #}
  {% if step == 'form' %}
    <div class="card shadow-sm">
      <div class="card-body">
        <form action="{{ url_for('employee.import_employees') }}" method="POST" enctype="multipart/form-data" class="row g-3">
          <input type="hidden" name="action" value="preview">
          <div class="col-12 col-lg-6">
            <label class="form-label fw-semibold">Upload file (.csv / .xlsx)</label>
            <input type="file" name="file" accept=".csv,.xlsx,.xls" class="form-control" required>
            <div class="form-text">Use the template for correct columns & formats.</div>
          </div>

          <div class="col-12 col-lg-6 d-flex align-items-end">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="auto_create" name="auto_create_dept_desig">
              <label class="form-check-label" for="auto_create">
                Auto-create missing Department/Designation
              </label>
            </div>
          </div>

          <hr class="mt-2">

          <div class="col-12">
            <details class="mb-2">
              <summary class="fw-semibold">Required columns</summary>
              <div class="small-muted mt-2">
                <code>employee_code, full_name, email, phone, department, designation,
                reporting_manager_code, date_of_joining(YYYY-MM-DD), status(active|notice_period|resigned),
                work_mode(WFO|WFH|Hybrid), location</code>
              </div>
            </details>
          </div>

          <div class="col-12 d-flex justify-content-end">
            <button class="btn btn-primary px-4" type="submit">
              <i class="bi bi-search me-1"></i> Preview
            </button>
          </div>
        </form>
      </div>
    </div>
  {% endif %}

  {# -------------------------- STEP: PREVIEW -------------------------- #}
  {% if step == 'preview' %}
    <div class="card shadow-sm">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div>
            <div class="fw-semibold">Preview</div>
            <div class="small-muted">Review any errors before confirming import.</div>
          </div>
          <form action="{{ url_for('employee.import_employees') }}" method="GET">
            <button class="btn btn-outline-secondary">
              <i class="bi bi-arrow-counterclockwise me-1"></i> Start Over
            </button>
          </form>
        </div>

        {% if rows and rows|length %}
          <div class="table-responsive table-sticky" style="max-height:70vh;">
            <table class="table table-hover align-middle">
              <thead>
                <tr class="text-muted small text-uppercase">
                  <th>#</th>
                  <th>Status</th>
                  <th>Emp Code</th>
                  <th>Full Name</th>
                  <th>Email</th>
                  <th>Phone</th>
                  <th>Department</th>
                  <th>Designation</th>
                  <th>RM Code</th>
                  <th>DOJ</th>
                  <th>Work Mode</th>
                  <th>Location</th>
                  <th>Errors</th>
                </tr>
              </thead>
              <tbody>
                {% set error_count = 0 %}
                {% for r in rows %}
                  {% set has_err = (r.status != 'OK') %}
                  {% if has_err %}{% set error_count = error_count + 1 %}{% endif %}
                  <tr class="{% if has_err %}table-warning{% endif %}">
                    <td>{{ r.idx }}</td>
                    <td>
                      {% if has_err %}
                        <span class="badge badge-err">ERROR</span>
                      {% else %}
                        <span class="badge badge-ok">OK</span>
                      {% endif %}
                    </td>
                    <td class="text-nowrap">{{ r.data.employee_code }}</td>
                    <td>{{ r.data.full_name }}</td>
                    <td class="text-nowrap">{{ r.data.email }}</td>
                    <td class="text-nowrap">{{ r.data.phone }}</td>
                    <td>{{ r.data.department }}</td>
                    <td>{{ r.data.designation }}</td>
                    <td class="text-nowrap">{{ r.data.reporting_manager_code }}</td>
                    <td class="text-nowrap">{{ r.data.date_of_joining }}</td>
                    <td class="text-nowrap">{{ r.data.work_mode }}</td>
                    <td class="text-nowrap">{{ r.data.location }}</td>
                    <td>
                      {% if r.errors and r.errors|length %}
                        <ul class="mb-0 small">
                          {% for e in r.errors %}
                            <li>{{ e }}</li>
                          {% endfor %}
                        </ul>
                      {% else %}
                        <span class="text-muted">—</span>
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>

          <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="small-muted">
              {% if error_count %}
                <span class="text-danger fw-semibold">{{ error_count }}</span> row(s) have issues.
                Fix your file or enable auto-create and re-upload if missing masters.
              {% else %}
                All rows look good. You can proceed to confirm.
              {% endif %}
            </div>
            <form action="{{ url_for('employee.import_employees') }}" method="POST" class="d-flex gap-2">
              <input type="hidden" name="action" value="confirm">
              <input type="hidden" name="temp_file" value="{{ temp_file }}">
              <input type="hidden" name="auto_create" value="{{ '1' if auto_create else '' }}">
              <a href="{{ url_for('employee.import_employees') }}" class="btn btn-outline-secondary">
                Upload Another
              </a>
              <button type="submit" class="btn btn-primary" {% if error_count %}disabled{% endif %}>
                <i class="bi bi-check2-circle me-1"></i> Confirm Import
              </button>
            </form>
          </div>
        {% else %}
          <div class="alert alert-info mb-0">No rows found in the uploaded file.</div>
        {% endif %}
      </div>
    </div>
  {% endif %}

  {# -------------------------- STEP: CONFIRM (post-redirect flashes show result) -------------------------- #}
  {% if step == 'confirm' %}
    <div class="alert alert-info">Processing import…</div>
  {% endif %}
</div>

{% endblock %}