{% extends 'admin/hub/layout.html.twig' %}

{% set hub_title = 'Mercuriale' %}
{% set hub_breadcrumbs = [
    { label: 'Mercuriale', url: path('app_produits_liste') },
    { label: 'Apercu' }
] %}

{% block title %}Preview Import - Mercuriale.io{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/mercuriale-import.css') }}">
{% endblock %}

{% block hub_content %}
<div class="hub-content hub-content--medium">
    <h1 class="hub-title"><i class="fas fa-search"></i> Previsualisation de l'import</h1>

    {% include 'components/_import_progress.html.twig' with { current_step: 3 } only %}

    {# Import info #}
    <div class="hub-import-info">
        <div>
            <div class="hub-import-info__filename">{{ import.originalFilename }}</div>
            <div class="hub-import-info__meta">
                {{ import.fournisseur.nom }}
                {% if import.etablissements|length > 0 %}
                    - {{ import.etablissements|map(e => e.nom)|join(', ') }}
                {% else %}
                    - Prix groupe
                {% endif %}
            </div>
        </div>
        <div class="hub-import-info__meta">{{ import.totalRows }} lignes</div>
    </div>

    {% if error %}
        {# Error state #}
        <div class="mi-card">
            <div class="mi-error-state">
                <div class="mi-error-state__icon">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <h2 class="mi-error-state__title">Erreur lors de l'analyse</h2>
                <p class="mi-error-state__message">{{ error }}</p>
                <a href="{{ path('app_mercuriale_import_mapping', {importId: import.idAsString}) }}" class="hub-cta hub-cta--secondary">
                    <i class="fas fa-arrow-left"></i> Modifier le mapping
                </a>
            </div>
        </div>
    {% elseif preview %}
        {# Stats cards #}
        <div class="hub-stats">
            <div class="hub-stat-card">
                <div class="hub-stat-card__value">{{ preview.totalRows }}</div>
                <div class="hub-stat-card__label">Lignes totales</div>
            </div>
            <div class="hub-stat-card">
                <div class="hub-stat-card__value">{{ preview.createCount }}</div>
                <div class="hub-stat-card__label">Creations</div>
            </div>
            <div class="hub-stat-card">
                <div class="hub-stat-card__value">{{ preview.updateCount }}</div>
                <div class="hub-stat-card__label">Mises a jour</div>
            </div>
            <div class="hub-stat-card hub-stat-card--{{ preview.errorRows > 0 ? 'coral' : '' }}">
                <div class="hub-stat-card__value">{{ preview.errorRows }}</div>
                <div class="hub-stat-card__label">Erreurs</div>
            </div>
        </div>

        {# Success rate #}
        {% if preview.canProceed %}
            <div class="hub-alert-banner hub-alert-banner--success">
                <i class="fas fa-check-circle"></i>
                <span><strong>Pret pour l'import</strong> — {{ preview.validRows }} lignes valides sur {{ preview.totalRows }} ({{ preview.successRate }}%)</span>
            </div>
        {% else %}
            <div class="hub-alert-banner">
                <i class="fas fa-times-circle"></i>
                <span><strong>Import impossible</strong> — {{ preview.errorRows }} ligne(s) contiennent des erreurs</span>
            </div>

            {# Show first errors as summary #}
            {% set errorLines = preview.lines|filter(line => line.hasErrors)|slice(0, 5) %}
            {% if errorLines|length > 0 %}
                <div class="mi-error-summary">
                    <div class="mi-error-summary__title">Erreurs detectees :</div>
                    <ul class="mi-error-summary__list">
                        {% for line in errorLines %}
                            {% for error in line.errors %}
                                <li>
                                    <i class="fas fa-exclamation-circle"></i>
                                    <span>Ligne {{ line.row }} : {{ error.message }}</span>
                                </li>
                            {% endfor %}
                        {% endfor %}
                    </ul>
                    {% if preview.errorRows > 5 %}
                        <div class="mi-error-box__footer">
                            <i class="fas fa-info-circle"></i>
                            Et {{ preview.errorRows - 5 }} autre(s) erreur(s) - voir le tableau ci-dessous
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        {% endif %}

        {# Lines detail #}
        <div class="hub-section">
            <div class="hub-section__header">
                <h2 class="hub-section__title"><i class="fas fa-list"></i> Detail des lignes</h2>
            </div>

            <div class="mi-overflow-x">
                <table class="hub-table">
                    <thead>
                        <tr>
                            <th>Ligne</th>
                            <th>Action</th>
                            <th>Code</th>
                            <th>Designation</th>
                            <th>Unite</th>
                            <th>Prix</th>
                            <th>Statut</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for line in preview.lines|slice(0, 100) %}
                            <tr class="{{ line.hasErrors ? 'mi-table-row--error' : '' }}">
                                <td class="mi-text-muted">{{ line.row }}</td>
                                <td>
                                    {% if line.action == 'create' %}
                                        <span class="hub-badge hub-badge--success">Creation</span>
                                    {% elseif line.action == 'update' %}
                                        <span class="hub-badge hub-badge--warning">Mise a jour</span>
                                    {% elseif line.action == 'skip' %}
                                        <span class="hub-badge hub-badge--secondary">Ignore</span>
                                    {% else %}
                                        <span class="hub-badge hub-badge--danger">Erreur</span>
                                    {% endif %}
                                </td>
                                <td class="mi-text-mono">{{ line.codeFournisseur ?: '-' }}</td>
                                <td class="mi-cell-truncate mi-cell-truncate--wide" title="{{ line.designation }}">{{ line.designation ?: '-' }}</td>
                                <td>{{ line.unite ?: '-' }}</td>
                                <td class="mi-text-right mi-text-mono">
                                    {% if line.prix %}
                                        {{ line.prix|number_format(4, ',', ' ') }} EUR
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if line.hasErrors %}
                                        <div class="mi-text-danger">
                                            {% for error in line.errors %}
                                                <div><i class="fas fa-times-circle"></i> {{ error.message }}</div>
                                            {% endfor %}
                                        </div>
                                    {% elseif line.hasWarnings %}
                                        <div class="mi-text-warning">
                                            {% for warning in line.warnings %}
                                                <div><i class="fas fa-exclamation-triangle"></i> {{ warning.message }}</div>
                                            {% endfor %}
                                        </div>
                                    {% else %}
                                        <span class="mi-text-success"><i class="fas fa-check"></i></span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if preview.lines|length > 100 %}
                <div class="hub-table__empty">
                    <i class="fas fa-info-circle"></i>
                    Affichage limite aux 100 premieres lignes ({{ preview.lines|length }} lignes au total)
                </div>
            {% endif %}
        </div>

        {# Actions #}
        <div class="hub-actions-bar">
            <a href="{{ path('app_mercuriale_import_mapping', {importId: import.idAsString}) }}" class="hub-cta hub-cta--outline">
                <i class="fas fa-arrow-left"></i> Modifier le mapping
            </a>

            {% if preview.canProceed %}
                <form action="{{ path('app_mercuriale_import_confirm', {importId: import.idAsString}) }}" method="post">
                    <input type="hidden" name="_token" value="{{ csrf_token('confirm_import_' ~ import.idAsString) }}">
                    <button type="submit" class="hub-cta hub-cta--primary" onclick="this.disabled=true; this.innerHTML='<i class=\'fas fa-spinner fa-spin\'></i> Import en cours...'; this.form.submit();">
                        <i class="fas fa-check"></i> Confirmer l'import ({{ preview.validRows }} lignes)
                    </button>
                </form>
            {% else %}
                <button disabled class="hub-cta hub-cta--outline hub-cta--disabled">
                    <i class="fas fa-ban"></i> Import impossible
                </button>
            {% endif %}
        </div>
    {% endif %}
</div>
{% endblock %}