{% extends 'app/base.html.twig' %}

{% block title %}Assistant de commande{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 fw-bold page-title mb-0">
            <i class="fas fa-robot me-2"></i>Assistant de commande
        </h1>
        <p class="text-muted small mb-0">Génération automatique depuis les menus planifiés</p>
    </div>
    <a href="{{ path('tenant_commandes_index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Retour
    </a>
</div>

{# ── Stepper ──────────────────────────────────────────────────────────── #}
<div class="card border-0 shadow-sm rounded-3 mb-4">
    <div class="card-body py-3 px-4">
        <div class="d-flex justify-content-between align-items-center" id="stepper">
            <div class="step-item active" data-step="1">
                <div class="step-circle">1</div>
                <div class="step-label">Période</div>
            </div>
            <div class="step-line"></div>
            <div class="step-item" data-step="2">
                <div class="step-circle">2</div>
                <div class="step-label">Besoins</div>
            </div>
            <div class="step-line"></div>
            <div class="step-item" data-step="3">
                <div class="step-circle">3</div>
                <div class="step-label">Stocks</div>
            </div>
            <div class="step-line"></div>
            <div class="step-item" data-step="4">
                <div class="step-circle">4</div>
                <div class="step-label">Suggestions</div>
            </div>
            <div class="step-line"></div>
            <div class="step-item" data-step="5">
                <div class="step-circle">5</div>
                <div class="step-label">Confirmation</div>
            </div>
        </div>
    </div>
</div>

{# ── Étape 1 — Période ────────────────────────────────────────────────── #}
<div id="step-1" class="step-panel">
    <div class="card border-0 shadow-sm rounded-3">
        <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
            <h5 class="fw-bold mb-0"><i class="fas fa-calendar-alt me-2 text-primary"></i>Sélection de la période</h5>
            <p class="text-muted small">Choisissez la période pour laquelle générer les commandes</p>
        </div>
        <div class="card-body px-4 pb-4">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Date de début</label>
                    <input type="date" id="date-debut" class="form-control" value="{{ dateDebut }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Date de fin</label>
                    <input type="date" id="date-fin" class="form-control" value="{{ dateFin }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Services</label>
                    <select id="services" class="form-select" multiple>
                        <option value="dejeuner" selected>Déjeuner</option>
                        <option value="petitdejeuner">Petit déjeuner</option>
                        <option value="gouter">Goûter</option>
                        <option value="diner">Dîner</option>
                    </select>
                </div>
            </div>
            <div class="mt-4 d-flex justify-content-end">
                <button class="btn btn-primary" id="btn-analyser">
                    <i class="fas fa-search me-1"></i>Analyser les besoins
                </button>
            </div>
        </div>
    </div>
</div>

{# ── Étape 2 — Besoins ────────────────────────────────────────────────── #}
<div id="step-2" class="step-panel d-none">
    <div class="card border-0 shadow-sm rounded-3">
        <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
            <h5 class="fw-bold mb-0"><i class="fas fa-clipboard-list me-2 text-primary"></i>Analyse des besoins</h5>
            <p class="text-muted small" id="step2-subtitle"></p>
        </div>
        <div class="card-body px-4 pb-4" id="besoins-content">
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status"></div>
                <p class="mt-2 text-muted">Analyse en cours…</p>
            </div>
        </div>
        <div class="card-footer bg-white border-0 px-4 pb-4 d-flex justify-content-between">
            <button class="btn btn-outline-secondary" onclick="goToStep(1)">
                <i class="fas fa-arrow-left me-1"></i>Retour
            </button>
            <button class="btn btn-primary" id="btn-verifier-stocks" disabled>
                <i class="fas fa-boxes me-1"></i>Vérifier les stocks
            </button>
        </div>
    </div>
</div>

{# ── Étape 3 — Stocks ─────────────────────────────────────────────────── #}
<div id="step-3" class="step-panel d-none">
    <div class="card border-0 shadow-sm rounded-3">
        <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
            <h5 class="fw-bold mb-0"><i class="fas fa-boxes me-2 text-primary"></i>Vérification des stocks</h5>
            <p class="text-muted small">Comparaison besoins vs stock disponible</p>
        </div>
        <div class="card-body px-4 pb-4" id="stocks-content">
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status"></div>
                <p class="mt-2 text-muted">Vérification en cours…</p>
            </div>
        </div>
        <div class="card-footer bg-white border-0 px-4 pb-4 d-flex justify-content-between">
            <button class="btn btn-outline-secondary" onclick="goToStep(2)">
                <i class="fas fa-arrow-left me-1"></i>Retour
            </button>
            <button class="btn btn-primary" id="btn-generer-suggestions" disabled>
                <i class="fas fa-lightbulb me-1"></i>Générer les suggestions
            </button>
        </div>
    </div>
</div>

{# ── Étape 4 — Suggestions ────────────────────────────────────────────── #}
<div id="step-4" class="step-panel d-none">
    <div class="card border-0 shadow-sm rounded-3">
        <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
            <h5 class="fw-bold mb-0"><i class="fas fa-lightbulb me-2 text-primary"></i>Suggestions de commandes</h5>
            <p class="text-muted small">Commandes suggérées groupées par fournisseur</p>
        </div>
        <div class="card-body px-4 pb-4" id="suggestions-content">
            <div class="text-center py-5">
                <div class="spinner-border text-primary" role="status"></div>
                <p class="mt-2 text-muted">Génération en cours…</p>
            </div>
        </div>
        <div class="card-footer bg-white border-0 px-4 pb-4 d-flex justify-content-between">
            <button class="btn btn-outline-secondary" onclick="goToStep(3)">
                <i class="fas fa-arrow-left me-1"></i>Retour
            </button>
            <button class="btn btn-success" id="btn-creer-commandes" disabled>
                <i class="fas fa-check me-1"></i>Créer les commandes
            </button>
        </div>
    </div>
</div>

{# ── Étape 5 — Confirmation ───────────────────────────────────────────── #}
<div id="step-5" class="step-panel d-none">
    <div class="card border-0 shadow-sm rounded-3">
        <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
            <h5 class="fw-bold mb-0"><i class="fas fa-check-circle me-2 text-success"></i>Commandes créées</h5>
        </div>
        <div class="card-body px-4 pb-4" id="confirmation-content">
        </div>
        <div class="card-footer bg-white border-0 px-4 pb-4 d-flex justify-content-end">
            <a href="{{ path('tenant_commandes_index') }}" class="btn btn-primary">
                <i class="fas fa-list me-1"></i>Voir les commandes
            </a>
        </div>
    </div>
</div>

{# CSRF token #}
<input type="hidden" id="csrf-token" value="{{ csrf_token('assistant_commande') }}">

<style>
.step-item { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.step-circle {
    width: 36px; height: 36px; border-radius: 50%;
    background: #dee2e6; color: #6c757d; font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-size: .9rem;
    transition: all .3s;
}
.step-item.active .step-circle { background: var(--bs-primary); color: #fff; }
.step-item.done .step-circle { background: #198754; color: #fff; }
.step-label { font-size: .75rem; margin-top: 4px; color: #6c757d; }
.step-item.active .step-label { color: var(--bs-primary); font-weight: 600; }
.step-line { flex: 1; height: 2px; background: #dee2e6; margin: 0 8px; margin-bottom: 18px; }
.badge-mode-auto { background-color: #d1fae5; color: #065f46; }
.badge-mode-suggest { background-color: #fef3c7; color: #92400e; }
</style>

<script>
const CSRF     = document.getElementById('csrf-token').value;
const URLS = {
    analyserBesoins:    '{{ path("tenant_commandes_assistant_analyser_besoins") }}',
    verifierStocks:     '{{ path("tenant_commandes_assistant_verifier_stocks") }}',
    genererSuggestions: '{{ path("tenant_commandes_assistant_generer_suggestions") }}',
    creerCommandes:     '{{ path("tenant_commandes_assistant_creer_commandes") }}',
};

let besoinsData     = null;
let verificationData = null;
let suggestionsData  = null;

// ── Navigation ──────────────────────────────────────────────────────────
function goToStep(n) {
    document.querySelectorAll('.step-panel').forEach(p => p.classList.add('d-none'));
    document.getElementById('step-' + n).classList.remove('d-none');
    document.querySelectorAll('.step-item').forEach(item => {
        const s = parseInt(item.dataset.step);
        item.classList.toggle('active', s === n);
        item.classList.toggle('done', s < n);
    });
}

// ── Étape 1 → 2 ─────────────────────────────────────────────────────────
document.getElementById('btn-analyser').addEventListener('click', async () => {
    const debut    = document.getElementById('date-debut').value;
    const fin      = document.getElementById('date-fin').value;
    const services = [...document.getElementById('services').selectedOptions].map(o => o.value);

    if (!debut || !fin) { alert('Veuillez renseigner les deux dates.'); return; }
    if (debut > fin)    { alert('La date de début doit être antérieure à la date de fin.'); return; }

    goToStep(2);
    document.getElementById('step2-subtitle').textContent = `Période du ${formatDate(debut)} au ${formatDate(fin)}`;

    const res  = await postJson(URLS.analyserBesoins, { date_debut: debut, date_fin: fin, services });
    if (!res.success) { showError('besoins-content', res.error); return; }

    besoinsData = res.data;
    renderBesoins(res.data);
    document.getElementById('btn-verifier-stocks').disabled = false;
});

// ── Étape 2 → 3 ─────────────────────────────────────────────────────────
document.getElementById('btn-verifier-stocks').addEventListener('click', async () => {
    goToStep(3);
    const res = await postJson(URLS.verifierStocks, { besoins: besoinsData });
    if (!res.success) { showError('stocks-content', res.error); return; }

    verificationData = res.data;
    renderStocks(res.data);
    document.getElementById('btn-generer-suggestions').disabled = false;
});

// ── Étape 3 → 4 ─────────────────────────────────────────────────────────
document.getElementById('btn-generer-suggestions').addEventListener('click', async () => {
    goToStep(4);
    const res = await postJson(URLS.genererSuggestions, { verification: verificationData });
    if (!res.success) { showError('suggestions-content', res.error); return; }

    suggestionsData = res.data;
    renderSuggestions(res.data);
    document.getElementById('btn-creer-commandes').disabled = (res.data.length === 0);
});

// ── Étape 4 → 5 ─────────────────────────────────────────────────────────
document.getElementById('btn-creer-commandes').addEventListener('click', async () => {
    document.getElementById('btn-creer-commandes').disabled = true;
    document.getElementById('btn-creer-commandes').innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Création…';

    const res = await postJson(URLS.creerCommandes, { suggestions: suggestionsData });
    goToStep(5);
    if (!res.success) { showError('confirmation-content', res.error); return; }
    renderConfirmation(res.data);
});

// ── Rendus ────────────────────────────────────────────────────────────────
function renderBesoins(data) {
    const el = document.getElementById('besoins-content');
    if (!data.jours || data.jours.length === 0) {
        el.innerHTML = '<div class="alert alert-warning"><i class="fas fa-exclamation-triangle me-2"></i>Aucun menu trouvé pour cette période.</div>';
        return;
    }
    let html = '';
    for (const jour of data.jours) {
        html += `<div class="mb-4">
            <h6 class="fw-bold border-bottom pb-2"><i class="fas fa-calendar-day me-1 text-primary"></i>${jour.date_label}</h6>`;
        for (const service of jour.services) {
            html += `<div class="ms-3 mb-2">
                <span class="badge bg-light text-dark border me-2">${service.service}</span>
                <span class="text-muted small">Effectif : <strong>${service.effectif}</strong></span>
            </div>
            <div class="table-responsive ms-3">
            <table class="table table-sm table-hover mb-3">
                <thead class="table-light"><tr>
                    <th>Plat</th><th>Ingrédients</th><th>Mode</th>
                </tr></thead><tbody>`;
            for (const plat of service.plats) {
                const badgeClass = plat.mode === 'automatique' ? 'badge-mode-auto' : 'badge-mode-suggest';
                const modeLabel  = plat.mode === 'automatique' ? 'Recette' : 'Estimation';
                const ingredients = plat.ingredients && plat.ingredients.length > 0
                    ? plat.ingredients.map(i => `${i.ingredient} <span class="text-muted">(${i.quantite_totale} ${i.unite})</span>`).join(', ')
                    : '<span class="text-muted fst-italic">Non déterminé</span>';
                html += `<tr>
                    <td class="fw-semibold">${plat.nom}</td>
                    <td class="small">${ingredients}</td>
                    <td><span class="badge rounded-pill px-2 ${badgeClass}">${modeLabel}</span></td>
                </tr>`;
            }
            html += '</tbody></table></div>';
        }
        html += '</div>';
    }
    el.innerHTML = html;
}

function renderStocks(data) {
    const el = document.getElementById('stocks-content');
    if (!data.ingredients || data.ingredients.length === 0) {
        el.innerHTML = '<div class="alert alert-info"><i class="fas fa-info-circle me-2"></i>Aucun ingrédient identifié à commander.</div>';
        return;
    }
    const aCommander = data.ingredients.filter(i => i.a_commander > 0);
    const enStock    = data.ingredients.filter(i => i.a_commander <= 0);
    let html = '';

    if (aCommander.length > 0) {
        html += `<h6 class="fw-bold text-danger mb-2"><i class="fas fa-cart-plus me-1"></i>À commander (${aCommander.length})</h6>
        <div class="table-responsive mb-4">
        <table class="table table-sm table-hover">
            <thead class="table-light"><tr>
                <th>Ingrédient</th><th>Besoin</th><th>En stock</th><th>À commander</th>
            </tr></thead><tbody>`;
        for (const i of aCommander) {
            html += `<tr class="table-danger-subtle">
                <td class="fw-semibold">${i.ingredient}</td>
                <td>${round2(i.besoin_total)} ${i.unite}</td>
                <td>${round2(i.stock_disponible)} ${i.unite}</td>
                <td class="fw-bold text-danger">${round2(i.a_commander)} ${i.unite}</td>
            </tr>`;
        }
        html += '</tbody></table></div>';
    }
    if (enStock.length > 0) {
        html += `<h6 class="fw-bold text-success mb-2"><i class="fas fa-check me-1"></i>En stock suffisant (${enStock.length})</h6>
        <div class="table-responsive">
        <table class="table table-sm table-hover">
            <thead class="table-light"><tr>
                <th>Ingrédient</th><th>Besoin</th><th>En stock</th>
            </tr></thead><tbody>`;
        for (const i of enStock) {
            html += `<tr>
                <td>${i.ingredient}</td>
                <td>${round2(i.besoin_total)} ${i.unite}</td>
                <td class="text-success">${round2(i.stock_disponible)} ${i.unite}</td>
            </tr>`;
        }
        html += '</tbody></table></div>';
    }
    el.innerHTML = html;
}

function renderSuggestions(data) {
    const el = document.getElementById('suggestions-content');
    if (!data || data.length === 0) {
        el.innerHTML = '<div class="alert alert-info"><i class="fas fa-check-circle me-2"></i>Aucune commande à générer — tous les ingrédients sont en stock.</div>';
        return;
    }
    let html = '';
    for (const cmd of data) {
        const lignes = cmd.lignes.map(l => `
            <tr>
                <td>${l.produit}</td>
                <td class="text-end">${round2(l.quantite)}</td>
                <td>${l.unite}</td>
                <td class="text-end">${l.prix_unitaire ? (parseFloat(l.prix_unitaire).toFixed(2) + ' €') : '<span class="text-muted">—</span>'}</td>
            </tr>`).join('');
        html += `<div class="card border shadow-sm mb-3">
            <div class="card-header bg-light fw-bold">
                <i class="fas fa-store me-2 text-primary"></i>${cmd.fournisseur_nom}
                <span class="badge bg-secondary ms-2">${cmd.lignes.length} article(s)</span>
                ${cmd.total_estime > 0 ? `<span class="float-end text-success">~${cmd.total_estime.toFixed(2)} € HT</span>` : ''}
            </div>
            <div class="table-responsive">
            <table class="table table-sm mb-0">
                <thead class="table-light"><tr>
                    <th>Produit</th><th class="text-end">Qté</th><th>Unité</th><th class="text-end">Prix HT</th>
                </tr></thead>
                <tbody>${lignes}</tbody>
            </table></div>
        </div>`;
    }
    el.innerHTML = html;
}

function renderConfirmation(data) {
    const el = document.getElementById('confirmation-content');
    let html = '<div class="alert alert-success mb-3"><i class="fas fa-check-circle me-2"></i>';
    html += `<strong>${data.nb_commandes}</strong> commande(s) créée(s) avec succès.</div>`;
    html += '<ul class="list-group list-group-flush">';
    for (const c of data.commandes) {
        html += `<li class="list-group-item d-flex justify-content-between align-items-center">
            <span><i class="fas fa-file-alt me-2 text-primary"></i>${c.fournisseur}</span>
            <a href="${c.url}" class="btn btn-sm btn-outline-primary">Voir</a>
        </li>`;
    }
    html += '</ul>';
    el.innerHTML = html;
}

// ── Helpers ─────────────────────────────────────────────────────────────
async function postJson(url, payload) {
    try {
        const resp = await fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': CSRF },
            body: JSON.stringify({ ...payload, _token: CSRF }),
        });
        return await resp.json();
    } catch (e) {
        return { success: false, error: 'Erreur réseau : ' + e.message };
    }
}

function showError(elId, msg) {
    document.getElementById(elId).innerHTML =
        `<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>${msg ?? 'Erreur inconnue.'}</div>`;
}

function formatDate(s) {
    if (!s) return '';
    const [y, m, d] = s.split('-');
    return `${d}/${m}/${y}`;
}

function round2(n) { return Math.round((parseFloat(n) || 0) * 100) / 100; }
</script>
{% endblock %}