{% extends "layouts/base.twig" %}

{% block title %}{{ translations.demand_detail_title | default('Détail de la demande') }} — {{ demand.getRef() }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        .badge-nouvelle  { background:#6ea8fe22; color:#0d6efd; }
        .badge-en_cours  { background:#ffc10722; color:#b07800; }
        .badge-en_review { background:#6f42c122; color:#6f42c1; }
        .badge-approuvee { background:#19875422; color:#198754; }
        .badge-publiee   { background:#0dcaf022; color:#087990; }
        .badge-refusee   { background:#dc354522; color:#dc3545; }
        .timeline-item::before {
            content:'';
            display:block;
            width:10px; height:10px;
            border-radius:50%;
            background:#0d6efd;
            position:absolute;
            left:-5px; top:5px;
        }
        .timeline-item { position:relative; padding-left:16px; border-left:2px solid #dee2e6; margin-bottom:1rem; }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <a href="{{ root }}/demands" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>{{ translations.back | default('Retour') }}
            </a>
            <h3 class="mb-0">
                {{ translations.demand_ref | default('Demande') }}
                <span class="font-monospace">{{ demand.getRef() }}</span>
            </h3>
            {% include 'demands/partials/_status_badge.twig' with {status: demand.getStatus()} %}
        </div>
    </div>
{% endblock %}

{% block content %}

<div class="row g-4">

    {# ── Left column: demand data ───────────────────────────────── #}
    <div class="col-12 col-lg-8">

        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h6 class="mb-0">{{ translations.demand_info | default('Informations') }}</h6>
                <span class="badge bg-light text-dark">{{ translations['type_' ~ demand.getType() | lower] | default(demand.getTypeLabel()) }}</span>
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4">{{ translations.requester | default('Demandeur') }}</dt>
                    <dd class="col-sm-8">{{ demand.getRequesterName() ?? '—' }}</dd>

                    <dt class="col-sm-4">{{ translations.shop | default('Magasin') }}</dt>
                    <dd class="col-sm-8">{{ demand.getShopName() ?? ('ID: ' ~ demand.getShopId()) }}</dd>

                    <dt class="col-sm-4">{{ translations.col_date | default('Date') }}</dt>
                    <dd class="col-sm-8">{{ demand.getCreatedAt() | date('d/m/Y H:i') }}</dd>

                    <dt class="col-sm-4">{{ translations.title | default('Titre') }}</dt>
                    <dd class="col-sm-8">{{ demand.getTitle() }}</dd>

                    {% if demand.getDescription() %}
                    <dt class="col-sm-4">{{ translations.description | default('Description') }}</dt>
                    <dd class="col-sm-8">{{ demand.getDescription() | nl2br }}</dd>
                    {% endif %}

                    {% if demand.getType() == 'SOCIAL_MEDIA' %}

                        {% if demand.getContentType() %}
                        <dt class="col-sm-4">{{ translations.content_type | default('Type contenu') }}</dt>
                        <dd class="col-sm-8">{{ demand.getContentType() }}</dd>
                        {% endif %}

                        {% if demand.getPlatforms() | length > 0 %}
                        <dt class="col-sm-4">{{ translations.platforms | default('Plateformes') }}</dt>
                        <dd class="col-sm-8">{{ demand.getPlatforms() | join(', ') }}</dd>
                        {% endif %}

                        {% if demand.getDeadlineDate() %}
                        <dt class="col-sm-4">{{ translations.deadline | default('Deadline') }}</dt>
                        <dd class="col-sm-8">{{ demand.getDeadlineDate() | date('d/m/Y') }}</dd>
                        {% endif %}

                        {% if demand.getVisualNotes() %}
                        <dt class="col-sm-4">{{ translations.visual_notes | default('Notes visuelles') }}</dt>
                        <dd class="col-sm-8">{{ demand.getVisualNotes() | nl2br }}</dd>
                        {% endif %}

                    {% elseif demand.getType() == 'NEW_PRODUCT' %}

                        {% if demand.getCategory() %}
                        <dt class="col-sm-4">{{ translations.category | default('Catégorie') }}</dt>
                        <dd class="col-sm-8">{{ demand.getCategory() }}</dd>
                        {% endif %}

                        {% if demand.getExpectedVolume() %}
                        <dt class="col-sm-4">{{ translations.expected_volume | default('Volume attendu') }}</dt>
                        <dd class="col-sm-8">{{ demand.getExpectedVolume() }}</dd>
                        {% endif %}

                        {% if demand.getEstimatedPriceGross() %}
                        <dt class="col-sm-4">{{ translations.estimated_price_gross | default('Prix estimé TTC') }}</dt>
                        <dd class="col-sm-8">{{ demand.getEstimatedPriceGross() | number_format(2, ',', ' ') }} €</dd>
                        {% endif %}

                        {% if demand.getContextMotivation() %}
                        <dt class="col-sm-4">{{ translations.context_motivation | default('Contexte / Motivation') }}</dt>
                        <dd class="col-sm-8">{{ demand.getContextMotivation() | nl2br }}</dd>
                        {% endif %}

                    {% elseif demand.getType() == 'SAAS_DEV' %}

                        {% if demand.getRole() %}
                        <dt class="col-sm-4">{{ translations.role | default('Rôle') }}</dt>
                        <dd class="col-sm-8">{{ demand.getRole() }}</dd>
                        {% endif %}

                        {% if demand.getRequestTypes() | length > 0 %}
                        <dt class="col-sm-4">{{ translations.request_types | default('Types') }}</dt>
                        <dd class="col-sm-8">{{ demand.getRequestTypes() | join(', ') }}</dd>
                        {% endif %}

                        {% if demand.getExpectedBenefit() %}
                        <dt class="col-sm-4">{{ translations.expected_benefit | default('Bénéfice attendu') }}</dt>
                        <dd class="col-sm-8">{{ demand.getExpectedBenefit() | nl2br }}</dd>
                        {% endif %}

                        {% if demand.getPriority() %}
                        <dt class="col-sm-4">{{ translations.priority | default('Priorité') }}</dt>
                        <dd class="col-sm-8">
                            <span class="badge bg-{{ demand.getPriority() == 'CRITICAL' ? 'danger' : (demand.getPriority() == 'HIGH' ? 'warning' : 'secondary') }}">
                                {{ demand.getPriority() }}
                            </span>
                        </dd>
                        {% endif %}

                        {% if demand.getNotes() %}
                        <dt class="col-sm-4">{{ translations.notes | default('Notes') }}</dt>
                        <dd class="col-sm-8">{{ demand.getNotes() | nl2br }}</dd>
                        {% endif %}

                    {% endif %}
                </dl>
            </div>
        </div>

        {# Attachments #}
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white">
                <h6 class="mb-0"><i class="bi bi-paperclip me-1"></i>{{ translations.attachments | default('Pièces jointes') }}</h6>
            </div>
            <div class="card-body">
                {% include 'demands/partials/_attachments.twig' %}
            </div>
        </div>

        {# Comments #}
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white">
                <h6 class="mb-0"><i class="bi bi-chat-left-text me-1"></i>{{ translations.comments | default('Commentaires') }}</h6>
            </div>
            <div class="card-body" id="commentsContainer">
                {% include 'demands/partials/_comments.twig' %}
            </div>

            {% if isAdmin %}
            <div class="card-footer bg-white">
                <form id="addCommentForm">
                    <div class="mb-2">
                        <textarea class="form-control" name="body" id="commentBody" rows="2"
                                  placeholder="{{ translations.add_comment_placeholder | default('Ajouter un commentaire…') }}" required></textarea>
                    </div>
                    <div class="d-flex gap-2 align-items-center">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_internal" id="isInternal" checked>
                            <label class="form-check-label small" for="isInternal">
                                {{ translations.comment_internal | default('Commentaire interne') }}
                            </label>
                        </div>
                        <button type="submit" class="btn btn-sm btn-primary ms-auto">
                            <i class="bi bi-send me-1"></i>{{ translations.comment_send | default('Envoyer') }}
                        </button>
                    </div>
                </form>
            </div>
            {% endif %}
        </div>

    </div>

    {# ── Right column: status + history ─────────────────────────── #}
    <div class="col-12 col-lg-4">

        {% if isAdmin %}
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white">
                <h6 class="mb-0"><i class="bi bi-sliders me-1"></i>{{ translations.change_status | default('Changer le statut') }}</h6>
            </div>
            <div class="card-body">
                <form id="statusForm">
                    <select class="form-select mb-2" id="statusSelect">
                        {% for s in statuses %}
                            <option value="{{ s }}" {{ s == 'NEW' ? 'selected' : '' }}>
                                {{ translations['status_' ~ s | lower] | default(s) }}
                            </option>
                        {% endfor %}
                    </select>
                    <textarea class="form-control mb-2" id="statusComment" rows="2"
                              placeholder="{{ translations.status_comment_placeholder | default('Commentaire (optionnel)…') }}"></textarea>
                    <button type="submit" class="btn btn-sm btn-warning w-100">
                        <i class="bi bi-check-circle me-1"></i>{{ translations.save_status | default('Sauvegarder le statut') }}
                    </button>
                </form>
            </div>
        </div>
        {% endif %}

        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h6 class="mb-0"><i class="bi bi-clock-history me-1"></i>{{ translations.status_history | default('Historique des statuts') }}</h6>
            </div>
            <div class="card-body">
                {% if history is not empty %}
                    {% for h in history %}
                    <div class="timeline-item">
                        <div class="small fw-semibold">
                            {{ h.getOldStatus() ? h.getOldStatus() ~ ' → ' : '' }}{{ h.getNewStatus() }}
                        </div>
                        {% if h.getComment() %}
                            <div class="text-muted small">{{ h.getComment() }}</div>
                        {% endif %}
                        <div class="text-muted" style="font-size:.75rem;">{{ h.getCreatedAt() | date('d/m/Y H:i') }}</div>
                    </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted small mb-0">{{ translations.no_history | default('Pas encore d\'historique.') }}</p>
                {% endif %}
            </div>
        </div>

    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="{{ root }}/assets/js/pages/demands.js" type="module"></script>
<script>
    window.demandsConfig = {
        root:      '{{ root }}',
        isAdmin:   {{ isAdmin ? 'true' : 'false' }},
        statuses:  {{ statuses | json_encode | raw }},
        demandId:  {{ demand.getId() }},
        messages: {
            statusUpdated:     `{{ translations.status_updated | default("Status updated successfully.") | e('js') }}`,
            errorStatusUpdate: `{{ translations.error_status_update | default("Error updating status.") | e('js') }}`,
            commentAdded:      `{{ translations.comment_added | default("Comment added.") | e('js') }}`,
            errorComment:      `{{ translations.error_comment | default("Error adding comment.") | e('js') }}`,
        },
    };

    function showAttachment(id) {
        api(`/ajax/material-complaints/attachment/${id}/presigned-url`, {
            method: 'GET'
        })
            .then(result => {
                if (result.ok && result.data?.url) {
                    // Utwórz tymczasowy link
                    const link = document.createElement('a');
                    link.href = result.data.url;
                    link.setAttribute('target', '_blank');
                    link.setAttribute('download', ''); // Możesz podać nazwę pliku np. 'proforma.pdf'
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);

                    showSnack(true, result.description);
                } else {
                    showSnack(false, result.description || `Błąd pobierania pliku`);
                }
            })
            .catch(err => {
                console.error(err);
                showSnack(false);
                return [];
            })
    }
</script>
{% endblock %}