{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}Import d'assets depuis Excel – Administration{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">Accueil</a>
  &rsaquo;
  <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_label|capfirst }}</a>
  &rsaquo;
  <a href="{% url 'admin:assets_assetcategory_changelist' %}">Catégories d'assets</a>
  &rsaquo;
  Import Excel
</div>
{% endblock %}

{% block content %}
<h1>📥 Import d'assets depuis un fichier Excel</h1>

{% if messages %}
  <ul class="messagelist">
    {% for message in messages %}
      <li class="{{ message.tags }}">{{ message }}</li>
    {% endfor %}
  </ul>
{% endif %}

<div style="display:flex; gap:2rem; flex-wrap:wrap; align-items:flex-start; margin-top:1.5rem;">

  {# ===== Upload form ===== #}
  <div style="flex:0 0 420px; background:#fff; border:1px solid #ddd; border-radius:6px; padding:1.5rem;">
    <h2 style="margin-top:0; font-size:1.1rem;">Sélectionner le fichier</h2>
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}

      <div style="margin-bottom:1rem;">
        <label for="excel_file" style="display:block; font-weight:bold; margin-bottom:.4rem;">
          Fichier Excel (.xlsx) <span style="color:red">*</span>
        </label>
        <input type="file" name="excel_file" id="excel_file" accept=".xlsx"
               required
               style="width:100%; padding:.4rem 0;">
      </div>

      <fieldset style="border:1px solid #e0e0e0; border-radius:4px; padding:.8rem 1rem; margin-bottom:1rem;">
        <legend style="font-weight:bold; padding:0 .4rem;">Options</legend>

        <label style="display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; cursor:pointer;">
          <input type="checkbox" name="dry_run" value="1">
          <span>
            <strong>Dry-run</strong>
            <small style="color:#555; display:block;">Simule l'import sans modifier la base de données</small>
          </span>
        </label>

        <label style="display:flex; align-items:center; gap:.5rem; cursor:pointer;">
          <input type="checkbox" name="update" value="1">
          <span>
            <strong>Mettre à jour</strong>
            <small style="color:#555; display:block;">Met à jour les assets dont le code existe déjà</small>
          </span>
        </label>
      </fieldset>

      <div style="display:flex; gap:.75rem; flex-wrap:wrap;">
        <button type="submit"
                style="background:#417690; color:#fff; border:none; border-radius:4px;
                       padding:.55rem 1.2rem; font-size:.95rem; cursor:pointer;">
          ▶ Lancer l'import
        </button>
        <a href="{% url 'admin:assets_assetcategory_download_template' %}"
           style="background:#f0f0f0; color:#333; border:1px solid #ccc; border-radius:4px;
                  padding:.5rem 1.1rem; font-size:.95rem; text-decoration:none; display:inline-block;">
          ⬇ Télécharger le template
        </a>
        <a href="{% url 'admin:assets_assetcategory_changelist' %}"
           style="color:#666; font-size:.9rem; align-self:center; text-decoration:none;">
          ← Retour
        </a>
      </div>
    </form>
  </div>

  {# ===== Format guide ===== #}
  <div style="flex:1; min-width:280px; background:#f8f8f8; border:1px solid #e0e0e0;
              border-radius:6px; padding:1.2rem 1.5rem; font-size:.88rem;">
    <h3 style="margin-top:0; font-size:1rem;">Format attendu du fichier Excel</h3>
    <p style="margin:.4rem 0 .8rem;">
      La ligne 1 doit contenir les clés de colonnes (ou utilisez le template).
      Les colonnes peuvent être dans n'importe quel ordre.
    </p>
    <table style="border-collapse:collapse; width:100%;">
      <thead>
        <tr style="background:#417690; color:#fff;">
          <th style="padding:.35rem .6rem; text-align:left;">Colonne</th>
          <th style="padding:.35rem .6rem; text-align:left;">Description</th>
        </tr>
      </thead>
      <tbody>
        {% for row in column_guide %}
        <tr style="{% cycle 'background:#fff' 'background:#f3f3f3' %}; border-bottom:1px solid #e8e8e8;">
          <td style="padding:.3rem .6rem; font-family:monospace; font-size:.82rem; white-space:nowrap;">{{ row.key }}</td>
          <td style="padding:.3rem .6rem; color:#444;">{{ row.desc }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <p style="margin:.8rem 0 0; color:#777; font-size:.82rem;">
      <strong>Statuts valides :</strong>
      <code>active</code>, <code>planned</code>, <code>damaged</code>,
      <code>to_replace</code>, <code>removed</code>, <code>to_be_approved</code>
    </p>
  </div>

</div>

{% if import_error %}
  <div style="margin-top:1.5rem; background:#fff0f0; border:1px solid #f5c6cb;
              border-radius:6px; padding:1rem 1.2rem; color:#721c24;">
    <strong>Erreur :</strong> {{ import_error }}
  </div>
{% endif %}

{% if output_lines %}
  <div style="margin-top:1.5rem;">
    <h2 style="font-size:1.05rem; margin-bottom:.5rem;">
      Résultat de l'import
      {% if dry_run %}<span style="color:#856404; font-size:.85rem;">(dry-run – aucune donnée enregistrée)</span>{% endif %}
    </h2>
    <div style="background:#1a1a2e; color:#e0e0e0; font-family:monospace; font-size:.82rem;
                border-radius:6px; padding:1rem 1.2rem; max-height:500px; overflow-y:auto;
                white-space:pre-wrap; line-height:1.5;">{% for line in output_lines %}{% autoescape on %}{{ line }}{% endautoescape %}
{% endfor %}</div>
  </div>
{% endif %}

{% endblock %}

{% block sidebar %}{% endblock %}