{% extends "base.html" %}
{% load static %}

{% block title %}Signes d'alerte — GiniFollow{% endblock %}

{% block page_header %}
<div class="container-fluid page-header py-5 mb-5 wow fadeIn" data-wow-delay="0.1s" style="background-image: url('{% static 'images/ginni3.jpg' %}');">
    <div class="container py-5">
        <h1 class="display-4 mb-3 text-white">Orientation en cas de signe d'alerte</h1>
        <p class="text-white-50 mb-3">Une réponse responsable pour vous orienter rapidement, sans poser de diagnostic.</p>
        {% include "partials/gf_page_breadcrumb.html" with breadcrumb_current="Signes d'alerte" %}
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container-xxl py-5">
    <div class="container">
        <div class="alert alert-info border-0 shadow-sm mb-4">
            <strong>Avertissement important :</strong> Ce service ne remplace pas une consultation médicale.
            En cas de symptômes graves, rendez-vous immédiatement dans un centre de santé.
        </div>

        {% if not est_connecte %}
        <div class="alert alert-warning border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-person-lock me-2"></i>
            <strong>Connexion requise.</strong> Vous pouvez consulter le filtre et préparer votre formulaire,
            mais l'envoi du signalement nécessite un compte connecté.
            <a href="{{ connexion_url }}" class="alert-link fw-semibold">Se connecter</a>
        </div>
        {% elif not peut_envoyer_alerte or show_tarifs_cta %}
        <div class="alert alert-warning border-0 shadow-sm mb-4" role="alert" id="alerte-abonnement">
            <i class="bi bi-credit-card me-2"></i>
            <strong>Abonnement actif requis.</strong>
            Seul un compte avec un abonnement valide (paiement vérifié par notre équipe) peut envoyer un signalement.
            <div class="mt-3 d-flex flex-wrap gap-2">
                <a href="{% url 'tarifs' %}" class="btn btn-primary btn-sm rounded-pill px-3">Voir les tarifs</a>
                <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">Mon espace</a>
            </div>
        </div>
        {% endif %}

        <div class="medical-card p-4 p-lg-5 mb-4">
            <h2 class="h4 mb-3">Filtre urgence</h2>
            <p class="text-muted mb-3">Ressentez-vous un de ces symptômes ?</p>
            <ul class="mb-3">
                {% for symptome in symptomes_graves %}
                <li>{{ symptome|capfirst }}</li>
                {% endfor %}
            </ul>
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <button type="button" class="btn btn-outline-dark" onclick="toggleUrgence('oui')">Oui, symptômes graves</button>
                <button type="button" class="btn btn-outline-primary" onclick="toggleUrgence('non')">Non, je peux continuer</button>
                {% if not est_connecte %}
                <a href="{{ connexion_url }}" class="btn btn-primary ms-md-auto">
                    <i class="bi bi-box-arrow-in-right me-1"></i>Se connecter
                </a>
                {% endif %}
            </div>
            <div id="urgence-box" class="alert alert-dark mt-3 d-none mb-0 border-0 shadow-sm rounded-4 p-4">
                <p class="mb-2" id="urgence-msg">
                    <i class="bi bi-exclamation-triangle-fill text-warning me-2 fs-5"></i>
                    <strong>Symptômes graves identifiés :</strong> Consultez immédiatement un service d'urgence médical de votre région (ex. 112 ou urgences hospitalières).
                </p>

                {% if peut_envoyer_alerte %}
                    <div id="urgence-actions-appel" class="d-flex flex-wrap gap-2 mt-3 pt-3 border-top border-secondary">
                        <a class="btn btn-primary btn-sm rounded-pill px-3" href="tel:+{{ support_whatsapp_intl }}" id="urgence-tel">
                            <i class="bi bi-telephone me-1"></i>Appeler {{ support_phone }}
                        </a>
                        <a class="btn btn-outline-light btn-sm rounded-pill px-3" href="https://wa.me/{{ support_whatsapp_intl }}" target="_blank" rel="noopener noreferrer">
                            <i class="fab fa-whatsapp me-1"></i>WhatsApp
                        </a>
                    </div>
                {% else %}
                    <div id="urgence-abonnement-alert" class="mt-3 pt-3 border-top border-secondary">
                        <div class="alert alert-warning border-0 mb-3 text-dark">
                            <i class="bi bi-lock-fill me-2"></i>
                            <strong>Ligne d'urgence &amp; accompagnement réservés aux abonnés actifs.</strong>
                            Seuls les comptes avec un abonnement de suivi validé peuvent joindre directement notre équipe par téléphone ou WhatsApp.
                        </div>
                        <a href="{% url 'tarifs' %}" class="btn btn-primary rounded-pill px-4 shadow-sm fw-semibold">
                            <i class="bi bi-credit-card me-2"></i>Souscrire à un abonnement (Voir les tarifs)
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>

        <div id="form-box" class="medical-card p-4 p-lg-5">
            <h2 class="h4 mb-3">Formulaire guidé</h2>
            <form method="post" id="form-alerte" onsubmit="return onSubmitAlerte(event)">
                {% csrf_token %}
                <input type="hidden" name="urgence" id="urgence-input" value="non">
                <div class="mb-3">
                    <label class="form-label">Que ressentez-vous ?</label>
                    <textarea class="form-control" name="symptomes" rows="4" placeholder="Décrivez vos symptômes…" {% if peut_envoyer_alerte %}required{% endif %}></textarea>
                    <div class="d-flex flex-wrap gap-2 mt-2">
                        {% for tag in symptomes_suggestions %}
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="appendSymptome('{{ tag }}')">{{ tag|capfirst }}</button>
                        {% endfor %}
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Depuis combien de temps ?</label>
                        <select class="form-select" name="duree" {% if peut_envoyer_alerte %}required{% endif %}>
                            <option value="">Choisir…</option>
                            <option value="quelques heures">Quelques heures</option>
                            <option value="1 jour">1 jour</option>
                            <option value="plusieurs jours">Plusieurs jours</option>
                            <option value="plusieurs semaines">Plusieurs semaines</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Intensité (1 à 5)</label>
                        <select class="form-select" name="intensite" {% if peut_envoyer_alerte %}required{% endif %}>
                            <option value="">Choisir…</option>
                            <option value="1">1 — Faible</option>
                            <option value="2">2</option>
                            <option value="3">3 — Modérée</option>
                            <option value="4">4</option>
                            <option value="5">5 — Sévère</option>
                        </select>
                    </div>
                </div>
                <div class="row g-3 mt-1">
                    <div class="col-md-6">
                        <label class="form-label">Antécédents (optionnel)</label>
                        <textarea class="form-control" name="antecedents" rows="3"></textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Traitement en cours (optionnel)</label>
                        <textarea class="form-control" name="traitement_en_cours" rows="3"></textarea>
                    </div>
                </div>
                <div class="alert alert-light border mt-4 mb-4">
                    Vous allez recevoir une orientation basée sur vos réponses. Aucun diagnostic ne sera posé.
                </div>

                {% if not est_connecte %}
                <a href="{{ connexion_url }}" class="btn btn-primary px-4">
                    <i class="bi bi-box-arrow-in-right me-2"></i>Se connecter
                </a>
                <p class="small text-muted mt-2 mb-0">Connectez-vous pour envoyer votre signalement.</p>
                {% elif peut_envoyer_alerte %}
                <button class="btn btn-primary px-4" type="submit">Envoyer ma demande</button>
                {% else %}
                <button class="btn btn-primary px-4" type="button" id="btn-alerte-tarifs">
                    <i class="bi bi-send me-2"></i>Envoyer ma demande
                </button>
                <p class="small text-muted mt-2 mb-0">Un abonnement actif est requis pour l'envoi.</p>
                {% endif %}
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function() {
    var estConnecte = {{ est_connecte|yesno:"true,false" }};
    var peutEnvoyer = {{ peut_envoyer_alerte|yesno:"true,false" }};
    var connexionUrl = "{{ connexion_url|escapejs }}";
    var tarifsUrl = "{% url 'tarifs' %}";

    window.toggleUrgence = function(value) {
        var urgenceBox = document.getElementById("urgence-box");
        var formBox = document.getElementById("form-box");
        var urgenceInput = document.getElementById("urgence-input");
        var actionsAppel = document.getElementById("urgence-actions-appel");

        if (value === "oui") {
            if (!estConnecte) {
                urgenceInput.value = "non";
                alert(
                    "Vous devez vous connecter pour accéder à l'accompagnement en cas de symptômes graves."
                );
                window.location.href = connexionUrl;
                return;
            }
            urgenceInput.value = "oui";
            urgenceBox.classList.remove("d-none");
            if (actionsAppel) {
                actionsAppel.classList.remove("d-none");
            }
            formBox.classList.add("opacity-50");
            return;
        }

        urgenceInput.value = "non";
        urgenceBox.classList.add("d-none");
        if (actionsAppel) {
            actionsAppel.classList.add("d-none");
        }
        formBox.classList.remove("opacity-50");
    };

    window.appendSymptome = function(tag) {
        var field = document.querySelector("textarea[name='symptomes']");
        if (!field.value.toLowerCase().includes(tag.toLowerCase())) {
            field.value = field.value ? field.value + ", " + tag : tag;
        }
    };

    window.onSubmitAlerte = function(e) {
        if (!estConnecte) {
            e.preventDefault();
            alert("Vous devez d'abord vous connecter pour envoyer votre signalement.");
            window.location.href = connexionUrl;
            return false;
        }
        if (!peutEnvoyer) {
            e.preventDefault();
            if (confirm(
                "Un abonnement actif est nécessaire pour envoyer un signalement. "
                + "Souhaitez-vous consulter nos tarifs ?"
            )) {
                window.location.href = tarifsUrl;
            }
            return false;
        }
        return true;
    };

    var btnTarifs = document.getElementById("btn-alerte-tarifs");
    if (btnTarifs) {
        btnTarifs.addEventListener("click", function() {
            if (confirm(
                "Un abonnement actif est nécessaire pour envoyer un signalement. "
                + "Souhaitez-vous consulter nos tarifs ?"
            )) {
                window.location.href = tarifsUrl;
            }
        });
    }

    {% if show_tarifs_cta %}
    var bloc = document.getElementById("alerte-abonnement");
    if (bloc) {
        bloc.scrollIntoView({ behavior: "smooth", block: "center" });
    }
    {% endif %}
})();
</script>
{% endblock %}