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

{% set hub_title = 'Bons de livraison' %}
{% set hub_breadcrumbs = [
    { label: 'Bons de livraison', url: path('app_bl_hub') },
    { label: 'BL #' ~ bonLivraison.id }
] %}

{% block title %}Extraction BL #{{ bonLivraison.id }} - Mercuriale.io{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="/css/extraction.css">
{% endblock %}

{% block hub_content %}
<div class="hub-content">
    {# Header #}
    <div class="flex items-center justify-between mb-6">
        <h1 class="hub-title">
            <i class="fas fa-file-invoice"></i>
            Bon de livraison {% if bonLivraison.numeroBl %}{{ bonLivraison.numeroBl }}{% else %}#{{ bonLivraison.id }}{% endif %}
        </h1>
        <span class="hub-badge hub-badge--{{ bonLivraison.statut.color }}">
            {{ bonLivraison.statut.label }}
        </span>
    </div>

    <p class="text-gray-500 mb-6">
        {% if bonLivraison.fournisseur %}{{ bonLivraison.fournisseur.nom }} — {% endif %}{{ bonLivraison.etablissement.nom }}
        {% if bonLivraison.dateLivraison %}
            — {{ bonLivraison.dateLivraison|date('d/m/Y') }}
        {% endif %}
    </p>

    {# Main content - 2 columns #}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" data-controller="image-modal">
        {# Left column - Image #}
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
            <div class="p-4 bg-navy text-white font-semibold">
                <i class="fas fa-image mr-2"></i>Image du BL
            </div>
            <div class="p-4">
                {% if bonLivraison.imagePath %}
                    <div class="relative group">
                        <img src="{{ path('app_bl_image', {id: bonLivraison.id}) }}"
                             alt="Bon de livraison"
                             class="w-full rounded-lg cursor-zoom-in"
                             data-action="click->image-modal#open">
                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all rounded-lg flex items-center justify-center">
                            <i class="fas fa-search-plus text-white text-2xl opacity-0 group-hover:opacity-100 transition-opacity"></i>
                        </div>
                    </div>
                {% else %}
                    <div class="flex items-center justify-center h-64 bg-gray-100 rounded-lg text-gray-400">
                        <i class="fas fa-image text-4xl"></i>
                    </div>
                {% endif %}
            </div>
        </div>

        {# Right column - Extracted data #}
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
            <div class="p-4 bg-navy text-white font-semibold flex items-center justify-between">
                <span><i class="fas fa-table mr-2"></i>Données extraites</span>
                {% if bonLivraison.donneesBrutes %}
                    {% set confiance = bonLivraison.donneesBrutes.confiance|default('basse') %}
                    <span class="hub-badge hub-badge--{{ confiance == 'haute' ? 'success' : (confiance == 'moyenne' ? 'warning' : 'danger') }}">
                        Confiance: {{ confiance }}
                    </span>
                {% endif %}
            </div>

            <div class="p-4">
                {% if needsExtraction %}
                    {# Extraction needed #}
                    <div data-controller="extraction" data-extraction-url-value="{{ path('app_bl_extraire', {id: bonLivraison.id}) }}">
                        <div data-extraction-target="placeholder" class="text-center py-12">
                            <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-navy to-navy-light rounded-full flex items-center justify-center">
                                <i class="fas fa-magic text-3xl text-white"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-navy mb-2">Extraction automatique</h3>
                            <p class="text-gray-500 mb-6">Cliquez pour extraire les données du bon de livraison via IA</p>
                            <button type="button" data-action="extraction#start"
                                    class="hub-cta hub-cta--secondary">
                                <i class="fas fa-play"></i> Lancer l'extraction
                            </button>
                        </div>

                        {# Loading state #}
                        <div data-extraction-target="loading" class="hidden text-center py-12">
                            <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-navy to-navy-light rounded-full flex items-center justify-center animate-pulse">
                                <i class="fas fa-spinner fa-spin text-3xl text-white"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-navy mb-2">Extraction en cours...</h3>
                            <p class="text-gray-500">Analyse de l'image par l'IA, veuillez patienter</p>
                        </div>
                    </div>
                {% else %}
                    {# Show extracted data #}
                    <div data-controller="extraction-alertes">
                        {% include 'app/bon_livraison/_extraction_data.html.twig' %}
                    </div>
                {% endif %}
            </div>
        </div>

        {# Image modal #}
        <div data-image-modal-target="modal" class="fixed inset-0 bg-black/80 z-50 hidden items-center justify-center p-4" data-action="click->image-modal#close">
            <img src="" alt="Bon de livraison" class="max-w-full max-h-full object-contain" data-image-modal-target="image">
            <button class="absolute top-4 right-4 text-white text-3xl hover:text-gray-300" data-action="image-modal#close">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>

    {# Action buttons #}
    {% if not needsExtraction and bonLivraison.statut.value == 'BROUILLON' %}
    <div class="hub-import-info mt-6">
        <div class="text-gray-600">
            <i class="fas fa-info-circle mr-2 text-navy"></i>
            {{ bonLivraison.lignes|length }} ligne(s)
            {% set alertCount = 0 %}
            {% for ligne in bonLivraison.lignes %}
                {% set alertCount = alertCount + ligne.alertes|length %}
            {% endfor %}
            {% if alertCount > 0 %}
                — <span class="text-coral font-semibold">{{ alertCount }} alerte(s)</span>
            {% endif %}
            {% if bonLivraison.totalHt %}
                — Total HT: <span class="font-semibold">{{ bonLivraison.totalHt|number_format(2, ',', ' ') }} €</span>
            {% endif %}
        </div>

        <div class="hub-ctas">
            <form action="{{ path('app_bl_rejeter', {id: bonLivraison.id}) }}" method="post" class="inline"
                  onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce bon de livraison ?');">
                <input type="hidden" name="_token" value="{{ csrf_token('rejeter_bl_' ~ bonLivraison.id) }}">
                <button type="submit" class="hub-cta hub-cta--outline">
                    <i class="fas fa-trash-alt"></i> Rejeter
                </button>
            </form>

            <form action="{{ path('app_bl_valider', {id: bonLivraison.id}) }}" method="post" class="inline">
                <input type="hidden" name="_token" value="{{ csrf_token('valider_bl_' ~ bonLivraison.id) }}">
                <button type="submit" class="hub-cta hub-cta--primary">
                    <i class="fas fa-check"></i> Valider et contrôler
                </button>
            </form>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}