{% import '_macros.html' as ui %}
<div id="mapari-section">

  {% if message %}
  <div class="flash" style="margin-bottom:12px;">{{ message }}</div>
  {% endif %}

  <!-- ============================================================ -->
  <!-- Sectiunea 1: De rezolvat (operatii needs_mapping)            -->
  <!-- ============================================================ -->
  <div class="card">
    <h2 style="font-size:15px; margin:0 0 12px;">De rezolvat</h2>

    {% if not pending %}
    <div class="empty">
      Nicio operatie nemapata — tot ce a venit s-a tradus in coduri RAR.
      <a href="/?tab=acasa">Importa un fisier nou</a> daca vrei sa adaugi prezentari.
    </div>
    {% else %}
    <p class="muted" style="margin:0 0 12px; font-size:13px;">
      Operatii ROAAUTO necunoscute, blocate in <span class="s-needs_mapping">needs_mapping</span>.
      Alege codul RAR (sugestia fuzzy e preselectata) si salveaza — submission-urile se deblocheaza automat.
    </p>

    <div class="tablewrap">
    <table>
      <thead><tr>
        <th>Operatie</th>
        <th>Sugestii</th>
        <th>Cod RAR</th>
        <th>Punere in coada</th>
        <th></th>
      </tr></thead>
      <tbody>
      {% for e in pending %}
      {% set top = e.suggestions[0] if e.suggestions else None %}
      {% set preselect = top.cod_prestatie if (top and top.score >= 60) else '' %}
        <tr>
          <td>
            <form id="map-rez-{{ loop.index }}" hx-post="/mapari" hx-target="#mapari-section" hx-swap="outerHTML">
              <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
              <input type="hidden" name="cod_op_service" value="{{ e.cod_op_service }}">
            </form>
            <div><strong>{{ e.cod_op_service }}</strong>
              <span class="pill" title="submission-uri blocate">{{ e.blocked }} blocate</span></div>
            <div class="muted">{{ e.denumire or '(fara denumire)' }}</div>
          </td>
          <td class="muted" style="font-size:12px;">
            {% if e.suggestions %}
              {% for s in e.suggestions[:3] %}
                <span class="sugg">{{ s.cod_prestatie }} ({{ s.score|round|int }}%)</span>{% if not loop.last %}, {% endif %}
              {% endfor %}
            {% else %}—{% endif %}
          </td>
          <td>
            <select name="cod_prestatie" form="map-rez-{{ loop.index }}" required
                    aria-label="Cod RAR pentru {{ e.cod_op_service }}">
              <option value="">— alege cod RAR —</option>
              {% for n in nomenclator %}
              <option value="{{ n.cod_prestatie }}" {% if n.cod_prestatie == preselect %}selected{% endif %}>
                {{ n.cod_prestatie }} — {{ n.nume_prestatie }}
              </option>
              {% endfor %}
            </select>
          </td>
          <td>
            {{ ui.autosend_toggle(form_id="map-rez-" ~ loop.index, checked=True) }}
          </td>
          <td>
            <button type="submit" form="map-rez-{{ loop.index }}">Salveaza</button>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    </div>
    {% endif %}
  </div>

  <!-- ============================================================ -->
  <!-- Sectiunea 2: Mapari operatii salvate (operations_mapping)    -->
  <!-- ============================================================ -->
  <div class="card">
    <h2 style="font-size:15px; margin:0 0 12px;">Mapari operatii salvate</h2>

    {% if not saved_mappings %}
    <div class="empty">
      Nicio mapare salvata inca. Pe masura ce mapezi operatii, ele apar aici si le poti edita oricand.
    </div>
    {% else %}
    <p class="muted" style="margin:0 0 12px; font-size:13px;">
      Maparile operatie -> cod RAR retinute pentru contul tau. Schimba codul sau punerea in coada si salveaza;
      la schimbarea unui cod, submission-urile blocate pe acea operatie se re-rezolva automat.
    </p>

    <div class="tablewrap">
    <table>
      <thead><tr>
        <th>Operatie</th>
        <th>Cod RAR</th>
        <th>Punere in coada</th>
        <th>Actiuni</th>
      </tr></thead>
      <tbody>
      {% for m in saved_mappings %}
        <tr>
          <td>
            <form id="map-salv-{{ loop.index }}" hx-post="/mapari/salvate" hx-target="#mapari-section" hx-swap="outerHTML">
              <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
              <input type="hidden" name="cod_op_service" value="{{ m.cod_op_service }}">
            </form>
            <form id="map-del-{{ loop.index }}" hx-post="/mapari/salvate/sterge" hx-target="#mapari-section" hx-swap="outerHTML"
                  hx-confirm="Stergi maparea pentru {{ m.cod_op_service }}?">
              <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
              <input type="hidden" name="cod_op_service" value="{{ m.cod_op_service }}">
            </form>
            <div><strong>{{ m.cod_op_service }}</strong></div>
            <div class="muted" style="font-size:12px;">
              acum: {{ m.cod_prestatie }}{% if m.nume_prestatie %} — {{ m.nume_prestatie }}{% endif %}
            </div>
          </td>
          <td>
            <select name="cod_prestatie" form="map-salv-{{ loop.index }}" required
                    aria-label="Cod RAR pentru {{ m.cod_op_service }}">
              {% for n in nomenclator %}
              <option value="{{ n.cod_prestatie }}" {% if n.cod_prestatie == m.cod_prestatie %}selected{% endif %}>
                {{ n.cod_prestatie }} — {{ n.nume_prestatie }}
              </option>
              {% endfor %}
            </select>
          </td>
          <td>
            {{ ui.autosend_toggle(form_id="map-salv-" ~ loop.index, checked=m.auto_send) }}
          </td>
          <td style="white-space:nowrap;">
            <button type="submit" form="map-salv-{{ loop.index }}">Salveaza</button>
            <button type="submit" form="map-del-{{ loop.index }}"
                    style="background:var(--card); color:var(--err); border-color:var(--err);">
              Sterge
            </button>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    </div>
    {% endif %}
  </div>

  <!-- ============================================================ -->
  <!-- Sectiunea 3: Formate de coloane salvate (column_mappings)    -->
  <!-- ============================================================ -->
  <div class="card">
    <h2 style="font-size:15px; margin:0 0 12px;">Formate de coloane salvate</h2>

    {% if not column_formats %}
    <div class="empty">
      Niciun format de coloane salvat inca. La primul import, maparea coloanelor fisierului
      se retine aici si se reaplica automat la fisierele cu acelasi antet.
    </div>
    {% else %}
    <p class="muted" style="margin:0 0 12px; font-size:13px;">
      Antetele de fisier recunoscute. Un fisier cu alte coloane = format nou separat (nu suprascrie).
    </p>

    <div class="tablewrap">
    <table>
      <thead><tr>
        <th>Coloane</th>
        <th>Mapari (coloana &rarr; camp)</th>
        <th>Format data</th>
        <th></th>
      </tr></thead>
      <tbody>
      {% for f in column_formats %}
        <tr>
          <td style="white-space:nowrap;">
            <strong>{{ f.columns | length }} coloane</strong>
          </td>
          <td class="muted" style="font-size:12px; white-space:normal; max-width:340px;">
            {% for col, camp in f.mappings.items() %}
              <span class="sugg">{{ col }}</span> &rarr; {{ camp }}{% if not loop.last %}; {% endif %}
            {% endfor %}
          </td>
          <td>
            <form id="fmt-edit-{{ loop.index }}" hx-post="/formate-coloane/editeaza"
                  hx-target="#mapari-section" hx-swap="outerHTML"
                  style="display:flex; gap:6px; align-items:center;">
              <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
              <input type="hidden" name="format_id" value="{{ f.id }}">
              <input type="text" name="format_data" value="{{ f.format_data or '' }}"
                     placeholder="ex. DD.MM.YYYY" aria-label="Format data" style="max-width:130px;">
              <button type="submit">Salveaza data</button>
            </form>
          </td>
          <td>
            <form hx-post="/formate-coloane/sterge" hx-target="#mapari-section" hx-swap="outerHTML"
                  hx-confirm="Stergi acest format de coloane?">
              <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
              <input type="hidden" name="format_id" value="{{ f.id }}">
              <button type="submit" style="background:var(--card); color:var(--err); border-color:var(--err);">
                Sterge
              </button>
            </form>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    </div>
    {% endif %}
  </div>

</div>