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

{% block extrahead %}
{{ block.super }}
<style>
    .import-section {
        margin-bottom: 24px;
    }
    .import-section h2 {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #666;
        border-bottom: 1px solid #eee;
        padding-bottom: 6px;
        margin-bottom: 14px;
    }
    .form-row {
        margin-bottom: 16px;
    }
    .form-row label {
        display: block;
        margin-bottom: 4px;
        font-weight: bold;
        font-size: 13px;
    }
    .form-row input[type="date"],
    .form-row select,
    .form-row input[type="file"] {
        padding: 7px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 13px;
        min-width: 260px;
    }
    .form-row input[type="file"] {
        padding: 4px;
    }
    .help-text {
        color: #888;
        font-size: 12px;
        margin-top: 4px;
    }
    .submit-row {
        margin-top: 28px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .btn-import {
        background-color: #1e7e34;
        color: white;
        padding: 10px 22px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        font-weight: bold;
    }
    .btn-import:hover {
        background-color: #155724;
    }
    .dry-run-label {
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }
    /* Logs */
    .import-logs {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 12px 16px;
        font-family: monospace;
        font-size: 12px;
        max-height: 320px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-all;
        margin-top: 6px;
    }
    .summary-box {
        padding: 12px 16px;
        border-radius: 4px;
        font-size: 13px;
        margin-bottom: 16px;
    }
    .summary-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
    .summary-info    { background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }
    .summary-warning { background: #fff3cd; border: 1px solid #ffeeba; color: #856404; }
    .format-table {
        font-size: 12px;
        border-collapse: collapse;
        margin-top: 8px;
    }
    .format-table th, .format-table td {
        border: 1px solid #dee2e6;
        padding: 4px 10px;
        text-align: left;
    }
    .format-table th {
        background: #f1f3f4;
        font-weight: bold;
    }
</style>
{% endblock %}

{% block content %}
<div id="content-main">

    {% if result %}
    <!-- Résumé de l'import -->
    {% if result.dry_run %}
    <div class="summary-box summary-info">
        🔵 <strong>Simulation</strong> — {{ result.created }} intervention(s) auraient été créées.
        Aucune donnée écrite en base.
    </div>
    {% elif not result.errors %}
    <div class="summary-box summary-success">
        ✅ <strong>Import terminé</strong> — {{ result.created }} intervention(s) préventive(s) créée(s).
        {% if result.skipped %}{{ result.skipped }} cellule(s) ignorée(s).{% endif %}
    </div>
    {% endif %}
    {% endif %}

    <form method="post" action="" enctype="multipart/form-data">
        {% csrf_token %}

        <!-- Fichier -->
        <fieldset class="module aligned">
            <div class="import-section">
                <h2>1 — Fichier Excel</h2>
                <div class="form-row">
                    <label for="id_xlsx_file">Fichier .xlsx *</label>
                    <input type="file" name="xlsx_file" id="id_xlsx_file" accept=".xlsx" required>
                    <p class="help-text">
                        La première feuille du fichier sera utilisée.<br>
                        Le fichier doit respecter le format décrit ci-dessous.
                    </p>
                </div>
            </div>

            <!-- Dates -->
            <div class="import-section">
                <h2>2 — Dates prévisionnelles (optionnel)</h2>
                <div class="form-row" style="display:flex; gap:24px;">
                    <div>
                        <label for="id_begin_date">Date de début :</label>
                        <input type="date" name="begin_date" id="id_begin_date"
                               value="{{ begin_date|default:'' }}">
                    </div>
                    <div>
                        <label for="id_end_date">Date de fin :</label>
                        <input type="date" name="end_date" id="id_end_date"
                               value="{{ end_date|default:'' }}">
                    </div>
                </div>
                <p class="help-text">
                    Les deux dates doivent être renseignées ensemble ou laissées vides.
                </p>
            </div>

            <!-- Statut -->
            <div class="import-section">
                <h2>3 — Statut des interventions créées</h2>
                <div class="form-row">
                    <label for="id_status">Statut :</label>
                    <select name="status" id="id_status">
                        {% for value, label in status_choices %}
                        <option value="{{ value }}"
                            {% if value == "in_preparation" %}selected{% endif %}>
                            {{ label }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </fieldset>

        <div class="submit-row">
            <button type="submit" class="btn-import">📥 Importer les interventions</button>
            <label class="dry-run-label">
                <input type="checkbox" name="dry_run" value="1">
                Simulation (dry-run) — ne rien écrire en base
            </label>
            <a href="{% url 'admin:interventions_intervention_changelist' %}"
               style="font-size:13px; color:#666;">← Retour à la liste</a>
        </div>
    </form>

    <!-- Logs de l'import -->
    {% if import_logs %}
    <fieldset class="module aligned" style="margin-top: 24px;">
        <h2 style="font-size:13px; color:#666; text-transform:uppercase; letter-spacing:.05em;
                   border-bottom:1px solid #eee; padding-bottom:6px; margin-bottom:10px;">
            Journal d'exécution
        </h2>
        <div class="import-logs">{{ import_logs|join:"\n" }}</div>
    </fieldset>
    {% endif %}

    <!-- Format attendu -->
    <fieldset class="module aligned" style="margin-top: 24px;">
        <h2 style="font-size:13px; color:#666; text-transform:uppercase; letter-spacing:.05em;
                   border-bottom:1px solid #eee; padding-bottom:6px; margin-bottom:10px;">
            Format du fichier Excel
        </h2>
        <table class="format-table">
            <thead>
                <tr><th>Cellule</th><th>Contenu</th></tr>
            </thead>
            <tbody>
                <tr><td>B1</td><td>Code de la thématique (ex : <code>structures</code>)</td></tr>
                <tr><td>B2</td><td>Code du contrat (ex : <code>CONT-2024-001</code>)</td></tr>
                <tr><td>B3</td><td>Code de la commande/order (ex : <code>ORD-2025-001</code>)</td></tr>
                <tr><td>B5, C5, D5…</td><td>Codes des localisations (en-têtes de colonnes)</td></tr>
                <tr><td>A6, A7, A8…</td><td>Codes des templates d'opérations (en-têtes de lignes)</td></tr>
                <tr><td>B6, C6…</td><td><code>x</code>, <code>1</code> ou <code>v</code> = créer une intervention</td></tr>
            </tbody>
        </table>
        <p class="help-text" style="margin-top:10px;">
            <strong>Note :</strong> Les opérations génériques et les opérations équipement
            (assets enfants des localisations) sont créées automatiquement
            selon les filtres configurés sur chaque template.
        </p>
    </fieldset>
</div>
{% endblock %}