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

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

{% block head %}
    {{ parent() }}
    <style>
        .badge-NEW         { background:#6ea8fe22; color:#0d6efd; }
        .badge-IN_PROGRESS { background:#ffc10722; color:#b07800; }
        .badge-IN_REVIEW   { background:#6f42c122; color:#6f42c1; }
        .badge-APPROVED    { background:#19875422; color:#198754; }
        .badge-PUBLISHED   { background:#0dcaf022; color:#087990; }
        .badge-REJECTED    { 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>
(function () {
    const demandId = {{ demand.getId() }};
    const messages = {
        statusUpdated:     '{{ translations.status_updated     | default("Status zaktualizowany.") | e('js') }}',
        errorStatusUpdate: '{{ translations.error_status_update | default("Błąd aktualizacji statusu.") | e('js') }}',
        commentAdded:      '{{ translations.comment_added      | default("Komentarz dodany.") | e('js') }}',
        errorComment:      '{{ translations.error_comment      | default("Błąd dodawania komentarza.") | e('js') }}',
    };

    // ── Status form ───────────────────────────────────────────────
    const statusForm = document.getElementById('statusForm');
    if (statusForm) {
        statusForm.addEventListener('submit', async e => {
            e.preventDefault();
            const status  = document.getElementById('statusSelect')?.value;
            const note    = document.getElementById('statusComment')?.value || null;

            const resp = await api(`/ajax/demands/${demandId}/status`, {
                method: 'POST',
                data:   { status, note },
            });

            if (resp.ok) {
                showSnack(true, messages.statusUpdated);
                setTimeout(() => location.reload(), 1200);
            } else {
                showSnack(false, resp.message || messages.errorStatusUpdate);
            }
        });
    }

    // ── Comment form ──────────────────────────────────────────────
    const commentForm = document.getElementById('addCommentForm');
    if (commentForm) {
        commentForm.addEventListener('submit', async e => {
            e.preventDefault();
            const body        = document.getElementById('commentBody')?.value?.trim();
            const is_internal = document.getElementById('isInternal')?.checked ?? true;

            if (!body) return;

            const resp = await api(`/ajax/demands/${demandId}/comment`, {
                method: 'POST',
                data:   { body, is_internal },
            });

            if (resp.ok) {
                showSnack(true, messages.commentAdded);
                setTimeout(() => location.reload(), 1200);
            } else {
                showSnack(false, resp.message || messages.errorComment);
            }
        });
    }

    // ── Attachment download ───────────────────────────────────────
    function showAttachment(id) {
        const url = `{{ root }}/ajax/demands/attachment/${id}/download`;
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('target', '_blank');
        link.setAttribute('download', '');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    window.showAttachment = showAttachment;
})();
</script>
{% endblock %}